@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Table/Table.js

@@ -0,0 +1,429 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Table.css";
+//#region src/components/Table/Table.tsx
+/** No column widths exist in the corpus, so an unresized flex column still
+* needs a number: `aria-valuenow` has to report something. */
+var FALLBACK_COLUMN_WIDTH = 120;
+/** WCAG 2.5.8 again — a column narrower than this cannot be grabbed. */
+var MIN_COLUMN_WIDTH = 24;
+/** One arrow keypress on the dragger; a round number inside the 2/4/8 scale. */
+var RESIZE_STEP = 8;
+/** How long a run of typed characters keeps building a typeahead query. */
+var TYPEAHEAD_RESET_MS = 600;
+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);
+}
+function toSortKey(value) {
+	return typeof value === "string" || typeof value === "number" ? value : "";
+}
+function compare(a, b) {
+	if (typeof a === "number" && typeof b === "number") {
+		if (Number.isNaN(a) || Number.isNaN(b)) return 0;
+		return a - b;
+	}
+	return String(a).localeCompare(String(b));
+}
+function Table(props) {
+	const { className, columns, rows, rowId, selected, defaultSelected, multi = false, onSelectedChange, sort, onSortChange, resizable = false, onColumnResize, headerUppercase = false, stickyHeader = false, emptyMessage = "No rows.", busy = false, style, "aria-label": ariaLabel, ...rest } = props;
+	const [uncontrolledSelected, setUncontrolledSelected] = useState(() => toIdArray(defaultSelected));
+	const [uncontrolledSort, setUncontrolledSort] = useState(null);
+	const [widths, setWidths] = useState({});
+	const [activeId, setActiveId] = useState(null);
+	const [headerIndex, setHeaderIndex] = useState(0);
+	const rowRefs = useRef(/* @__PURE__ */ new Map());
+	const headerRefs = useRef(/* @__PURE__ */ new Map());
+	const typeaheadRef = useRef({
+		query: "",
+		timer: null
+	});
+	/**
+	* Shift+click anchors on the row that was active 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 activeSort = sort === void 0 ? uncontrolledSort : sort;
+	const selectedIds = selected === void 0 ? uncontrolledSelected : toIdArray(selected);
+	const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+	const orderedRows = useMemo(() => {
+		const column = activeSort ? columns.find((entry) => entry.id === activeSort.columnId) : void 0;
+		if (!activeSort || !column) return rows;
+		const valueOf = column.sortValue ?? ((row) => toSortKey(column.cell(row)));
+		const direction = activeSort.direction === "asc" ? 1 : -1;
+		return rows.slice().sort((a, b) => compare(valueOf(a), valueOf(b)) * direction);
+	}, [
+		activeSort,
+		columns,
+		rows
+	]);
+	const ids = useMemo(() => orderedRows.map((row) => rowId(row)), [orderedRows, rowId]);
+	const isEmpty = ids.length === 0;
+	const sortableColumns = useMemo(() => columns.filter((column) => column.sortable), [columns]);
+	const activeHeader = sortableColumns.length === 0 ? -1 : clamp(headerIndex, 0, sortableColumns.length - 1);
+	const fallbackActiveId = ids.find((id) => selectedSet.has(id)) ?? ids[0] ?? null;
+	const activeRowId = activeId !== null && ids.includes(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 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; the active row is still the active row without it.
+		*/
+		if (typeof node.scrollIntoView === "function") node.scrollIntoView({ block: "nearest" });
+		node.focus();
+	}, []);
+	const moveActive = useCallback((step) => {
+		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,
+		ids
+	]);
+	const selectRow = useCallback((id, mode) => {
+		const anchor = anchorRef.current ?? activeRowId;
+		let next;
+		if (mode === "range" && anchor !== null && anchor !== 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;
+		commit(next);
+	}, [
+		activeRowId,
+		commit,
+		ids,
+		selectedIds,
+		selectedSet
+	]);
+	const activate = useCallback((id) => {
+		selectRow(id, multi ? "toggle" : "replace");
+	}, [multi, selectRow]);
+	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);
+		if (ids.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 (textOf(id).toLowerCase().startsWith(buffer)) {
+				focusRow(id);
+				return;
+			}
+		}
+	}, [
+		activeRowId,
+		focusRow,
+		ids,
+		textOf
+	]);
+	const handleRowKeyDown = useCallback((event) => {
+		const { key } = event;
+		if (key === "ArrowDown") {
+			event.preventDefault();
+			moveActive(1);
+			return;
+		}
+		if (key === "ArrowUp") {
+			event.preventDefault();
+			if (activeRowId === ids[0] && sortableColumns.length > 0) {
+				const header = sortableColumns[activeHeader];
+				if (header) headerRefs.current.get(header.id)?.focus();
+				return;
+			}
+			moveActive(-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,
+		activeHeader,
+		activeRowId,
+		ids,
+		moveActive,
+		sortableColumns,
+		typeahead
+	]);
+	const handleRowClick = useCallback((event, id) => {
+		setActiveId(id);
+		if (!multi) {
+			selectRow(id, "replace");
+			return;
+		}
+		if (event.shiftKey) {
+			selectRow(id, "range");
+			return;
+		}
+		selectRow(id, event.ctrlKey || event.metaKey ? "toggle" : "replace");
+	}, [multi, selectRow]);
+	const cycleSort = useCallback((columnId) => {
+		const next = {
+			columnId,
+			direction: activeSort?.columnId === columnId && activeSort.direction === "asc" ? "desc" : "asc"
+		};
+		if (sort === void 0) setUncontrolledSort(next);
+		onSortChange?.(next);
+	}, [
+		activeSort,
+		onSortChange,
+		sort
+	]);
+	const focusHeader = useCallback((index) => {
+		if (sortableColumns.length === 0) return;
+		const next = clamp(index, 0, sortableColumns.length - 1);
+		setHeaderIndex(next);
+		headerRefs.current.get(sortableColumns[next].id)?.focus();
+	}, [sortableColumns]);
+	const handleHeaderKeyDown = useCallback((event, index) => {
+		const { key } = event;
+		if (key === "ArrowRight") {
+			event.preventDefault();
+			focusHeader(index + 1);
+			return;
+		}
+		if (key === "ArrowLeft") {
+			event.preventDefault();
+			focusHeader(index - 1);
+			return;
+		}
+		if (key === "Home" || key === "End") {
+			event.preventDefault();
+			focusHeader(key === "Home" ? 0 : sortableColumns.length - 1);
+			return;
+		}
+		if (key === "ArrowDown") {
+			event.preventDefault();
+			if (ids[0] !== void 0) focusRow(ids[0]);
+		}
+	}, [
+		focusHeader,
+		focusRow,
+		ids,
+		sortableColumns.length
+	]);
+	const widthOf = useCallback((column) => widths[column.id] ?? column.defaultWidth ?? column.width, [widths]);
+	const applyWidth = useCallback((columnId, width) => {
+		const next = Number.isFinite(width) ? Math.max(MIN_COLUMN_WIDTH, Math.round(width)) : MIN_COLUMN_WIDTH;
+		setWidths((previous) => ({
+			...previous,
+			[columnId]: next
+		}));
+		return next;
+	}, []);
+	const handleDraggerKeyDown = useCallback((event, column) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const current = widthOf(column) ?? FALLBACK_COLUMN_WIDTH;
+		const step = event.key === "ArrowLeft" ? -8 : RESIZE_STEP;
+		const next = applyWidth(column.id, current + step);
+		onColumnResize?.(column.id, next);
+	}, [
+		applyWidth,
+		onColumnResize,
+		widthOf
+	]);
+	const [dragging, setDragging] = useState(false);
+	const dragRef = useRef(null);
+	const handleDraggerPointerDown = useCallback((event, column) => {
+		const startWidth = widthOf(column) ?? FALLBACK_COLUMN_WIDTH;
+		dragRef.current = {
+			columnId: column.id,
+			startX: event.clientX,
+			startWidth,
+			width: startWidth
+		};
+		setDragging(true);
+	}, [widthOf]);
+	useEffect(() => {
+		if (!dragging) return;
+		const handleMove = (event) => {
+			const drag = dragRef.current;
+			if (!drag || !Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return;
+			drag.width = applyWidth(drag.columnId, drag.startWidth + (event.clientX - drag.startX));
+		};
+		const handleUp = () => {
+			const drag = dragRef.current;
+			dragRef.current = null;
+			setDragging(false);
+			if (drag) onColumnResize?.(drag.columnId, drag.width);
+		};
+		window.addEventListener("pointermove", handleMove);
+		window.addEventListener("pointerup", handleUp);
+		window.addEventListener("pointercancel", handleUp);
+		return () => {
+			window.removeEventListener("pointermove", handleMove);
+			window.removeEventListener("pointerup", handleUp);
+			window.removeEventListener("pointercancel", handleUp);
+		};
+	}, [
+		applyWidth,
+		dragging,
+		onColumnResize
+	]);
+	const columnStyle = useCallback((column) => {
+		const width = widthOf(column);
+		return width === void 0 ? {
+			flex: "1 1 auto",
+			minWidth: 0
+		} : {
+			flex: `0 0 ${width}px`,
+			width
+		};
+	}, [widthOf]);
+	const gridClassName = [
+		"vgui-table",
+		headerUppercase ? "vgui-table--header-uppercase" : null,
+		resizable ? "vgui-table--resizable" : null,
+		stickyHeader ? "vgui-table--sticky" : null,
+		dragging ? "vgui-table--dragging" : null,
+		className ?? null
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: gridClassName,
+		style,
+		role: "grid",
+		"aria-label": ariaLabel,
+		"aria-colcount": columns.length,
+		"aria-rowcount": ids.length,
+		"aria-multiselectable": multi ? true : void 0,
+		"aria-busy": busy || void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "vgui-table__head",
+			role: "row",
+			children: columns.map((column, index) => {
+				const sorted = activeSort?.columnId === column.id;
+				const sortableIndex = sortableColumns.indexOf(column);
+				const label = /* @__PURE__ */ jsxs("span", {
+					className: "vgui-table__th-label",
+					children: [column.headerIcon ? /* @__PURE__ */ jsx("span", {
+						className: "vgui-table__th-icon",
+						"aria-hidden": "true",
+						children: column.headerIcon
+					}) : null, column.header]
+				});
+				return /* @__PURE__ */ jsxs("div", {
+					className: "vgui-table__th",
+					role: "columnheader",
+					"aria-colindex": index + 1,
+					"aria-sort": sorted ? activeSort?.direction === "asc" ? "ascending" : "descending" : void 0,
+					"data-align": column.align ?? "start",
+					style: columnStyle(column),
+					children: [column.sortable ? /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "vgui-table__sort",
+						ref: (node) => {
+							if (node) headerRefs.current.set(column.id, node);
+							else headerRefs.current.delete(column.id);
+						},
+						tabIndex: sortableIndex === activeHeader ? 0 : -1,
+						onClick: () => cycleSort(column.id),
+						onKeyDown: (event) => handleHeaderKeyDown(event, sortableIndex),
+						children: [label, /* @__PURE__ */ jsx("span", {
+							className: "vgui-table__sort-indicator",
+							"data-direction": sorted ? activeSort?.direction : "none",
+							"aria-hidden": "true"
+						})]
+					}) : label, resizable ? /* @__PURE__ */ jsx("div", {
+						className: "vgui-table__dragger",
+						role: "separator",
+						"aria-orientation": "vertical",
+						"aria-label": `Resize ${column.header} column`,
+						"aria-valuemin": MIN_COLUMN_WIDTH,
+						"aria-valuenow": widthOf(column) ?? FALLBACK_COLUMN_WIDTH,
+						tabIndex: 0,
+						onPointerDown: (event) => handleDraggerPointerDown(event, column),
+						onKeyDown: (event) => handleDraggerKeyDown(event, column)
+					}) : null]
+				}, column.id);
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "vgui-table__body vgui-scroll-surface",
+			role: "rowgroup",
+			children: isEmpty ? /* @__PURE__ */ jsx("div", {
+				className: "vgui-table__row vgui-table__row--empty",
+				role: "row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "vgui-table__cell vgui-table__empty",
+					role: "gridcell",
+					"aria-colindex": 1,
+					"aria-colspan": columns.length,
+					"aria-live": "polite",
+					children: emptyMessage
+				})
+			}) : orderedRows.map((row, index) => {
+				const id = rowId(row);
+				const isSelected = selectedSet.has(id);
+				return /* @__PURE__ */ jsx("div", {
+					ref: (node) => setRowRef(id, node),
+					className: ["vgui-table__row", isSelected ? "vgui-table__row--selected" : null].filter(Boolean).join(" "),
+					role: "row",
+					"aria-rowindex": index + 1,
+					"aria-selected": isSelected,
+					tabIndex: id === activeRowId ? 0 : -1,
+					onClick: (event) => handleRowClick(event, id),
+					onFocus: () => setActiveId(id),
+					onKeyDown: handleRowKeyDown,
+					children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx("div", {
+						className: "vgui-table__cell",
+						role: "gridcell",
+						"aria-colindex": columnIndex + 1,
+						"data-align": column.align ?? "start",
+						style: columnStyle(column),
+						children: column.cell(row)
+					}, column.id))
+				}, id);
+			})
+		})]
+	});
+}
+//#endregion
+export { Table };
+
+//# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","names":[],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type {\n  CSSProperties,\n  HTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n} from 'react'\n\nimport './Table.css'\nimport '../../styles/scrollbars.css'\n\nexport interface TableSort {\n  /** Column the rows are ordered by. */\n  columnId: string\n  /** Ordering direction. */\n  direction: 'asc' | 'desc'\n}\n\nexport interface TableColumn<Row> {\n  /** Stable identity; also the aria-colindex key. */\n  id: string\n  /** Header label. */\n  header: string\n  /** Cell renderer for a row. */\n  cell: (row: Row) => ReactNode\n  /** Fixed width in pixels; omit to flex. */\n  width?: number\n  /** Initial width when resizable and uncontrolled. */\n  defaultWidth?: number\n  /**\n   * Value the rows are ordered by. Falls back to the rendered text when the\n   * cell produces a string or a number, and to nothing otherwise — a cell\n   * holding markup has no order the component could guess.\n   */\n  sortValue?: (row: Row) => string | number\n  /** Makes the header a sort button for this column. */\n  sortable?: boolean\n  /** Header alignment; VGUI headers are left-aligned. */\n  align?: 'start' | 'center' | 'end'\n  /** Optional header glyph, e.g. the VAC shield. */\n  headerIcon?: ReactNode\n}\n\nexport interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Column definitions, in display order. */\n  columns: TableColumn<Row>[]\n  /** Row data. */\n  rows: Row[]\n  /** Returns the stable id used for selection and React keys. */\n  rowId: (row: Row) => string\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  /** Controlled sort. */\n  sort?: TableSort\n  /** Called when a sortable header is activated. */\n  onSortChange?: (sort: TableSort) => void\n  /** Allows column resizing with a visible dragger. */\n  resizable?: boolean\n  /** Called with the new width after a resize gesture ends. */\n  onColumnResize?: (columnId: string, width: number) => void\n  /** Renders headers in uppercase, as the main client window does. */\n  headerUppercase?: boolean\n  /** Sticky header. No corpus precedent; see Open questions. */\n  stickyHeader?: boolean\n  /** Message shown in the grid's single row when there are no rows. */\n  emptyMessage?: string\n  /** Sets `aria-busy` on the grid while a refresh is in flight. */\n  busy?: boolean\n}\n\n/** No column widths exist in the corpus, so an unresized flex column still\n * needs a number: `aria-valuenow` has to report something. */\nconst FALLBACK_COLUMN_WIDTH = 120\n\n/** WCAG 2.5.8 again — a column narrower than this cannot be grabbed. */\nconst MIN_COLUMN_WIDTH = 24\n\n/** One arrow keypress on the dragger; a round number inside the 2/4/8 scale. */\nconst RESIZE_STEP = 8\n\n/** How long a run of typed characters keeps building a typeahead query. */\nconst TYPEAHEAD_RESET_MS = 600\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\nfunction toSortKey(value: ReactNode): string | number {\n  return typeof value === 'string' || typeof value === 'number' ? value : ''\n}\n\nfunction compare(a: string | number, b: string | number): number {\n  if (typeof a === 'number' && typeof b === 'number') {\n    // A NaN from either side would make the comparator non-transitive.\n    if (Number.isNaN(a) || Number.isNaN(b)) return 0\n    return a - b\n  }\n  return String(a).localeCompare(String(b))\n}\n\nexport function Table<Row>(props: TableProps<Row>) {\n  const {\n    className,\n    columns,\n    rows,\n    rowId,\n    selected,\n    defaultSelected,\n    multi = false,\n    onSelectedChange,\n    sort,\n    onSortChange,\n    resizable = false,\n    onColumnResize,\n    headerUppercase = false,\n    stickyHeader = false,\n    emptyMessage = 'No rows.',\n    busy = false,\n    style,\n    'aria-label': ariaLabel,\n    ...rest\n  } = props\n\n  const [uncontrolledSelected, setUncontrolledSelected] = useState<string[]>(() =>\n    toIdArray(defaultSelected),\n  )\n  const [uncontrolledSort, setUncontrolledSort] = useState<TableSort | null>(null)\n  const [widths, setWidths] = useState<Record<string, number>>({})\n  const [activeId, setActiveId] = useState<string | null>(null)\n  const [headerIndex, setHeaderIndex] = useState(0)\n\n  const rowRefs = useRef(new Map<string, HTMLDivElement>())\n  const headerRefs = useRef(new Map<string, HTMLButtonElement>())\n  const typeaheadRef = useRef<{ query: string; timer: ReturnType<typeof setTimeout> | null }>({\n    query: '',\n    timer: null,\n  })\n  /**\n   * Shift+click anchors on the row that was active when the range started. It\n   * 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\n  const activeSort = sort === undefined ? uncontrolledSort : sort\n  const selectedIds = selected === undefined ? uncontrolledSelected : toIdArray(selected)\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds])\n\n  // Sorting is applied here rather than by the caller so a controlled `sort`\n  // still reorders the rows; `sortValue` is the only way to order markup cells.\n  const orderedRows = useMemo(() => {\n    const column = activeSort ? columns.find((entry) => entry.id === activeSort.columnId) : undefined\n    if (!activeSort || !column) return rows\n\n    const valueOf = column.sortValue ?? ((row: Row) => toSortKey(column.cell(row)))\n    const direction = activeSort.direction === 'asc' ? 1 : -1\n    // `Array.prototype.sort` is stable, so rows that compare equal keep their\n    // original order instead of shuffling on every render.\n    return rows.slice().sort((a, b) => compare(valueOf(a), valueOf(b)) * direction)\n  }, [activeSort, columns, rows])\n\n  const ids = useMemo(() => orderedRows.map((row) => rowId(row)), [orderedRows, rowId])\n  const isEmpty = ids.length === 0\n\n  const sortableColumns = useMemo(() => columns.filter((column) => column.sortable), [columns])\n  const activeHeader = sortableColumns.length === 0 ? -1 : clamp(headerIndex, 0, sortableColumns.length - 1)\n\n  const fallbackActiveId = ids.find((id) => selectedSet.has(id)) ?? ids[0] ?? null\n  const activeRowId = activeId !== null && ids.includes(activeId) ? activeId : 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((id: string) => (rowRefs.current.get(id)?.textContent ?? '').trim(), [])\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 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; the active row is still the active row without it.\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      if (ids.length === 0) return\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, ids],\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 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)\n          ? selectedIds.filter((entry) => entry !== id)\n          : [...selectedIds, id]\n      }\n\n      // A range keeps its original anchor; every other gesture moves it.\n      if (mode !== 'range') anchorRef.current = id\n      commit(next)\n    },\n    [activeRowId, commit, ids, selectedIds, selectedSet],\n  )\n\n  const activate = useCallback(\n    (id: string) => {\n      selectRow(id, multi ? 'toggle' : 'replace')\n    },\n    [multi, selectRow],\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      if (ids.length === 0) return\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 (textOf(id).toLowerCase().startsWith(buffer)) {\n          focusRow(id)\n          return\n        }\n      }\n    },\n    [activeRowId, focusRow, ids, textOf],\n  )\n\n  const handleRowKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      const { key } = event\n\n      if (key === 'ArrowDown') {\n        event.preventDefault()\n        moveActive(1)\n        return\n      }\n\n      if (key === 'ArrowUp') {\n        event.preventDefault()\n        // The first row hands focus back to the sortable header strip, which is\n        // the grid's single tab stop, so the grid is not a keyboard dead end.\n        if (activeRowId === ids[0] && sortableColumns.length > 0) {\n          const header = sortableColumns[activeHeader]\n          if (header) headerRefs.current.get(header.id)?.focus()\n          return\n        }\n        moveActive(-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, activeHeader, activeRowId, ids, moveActive, sortableColumns, typeahead],\n  )\n\n  const handleRowClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement>, id: string) => {\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    [multi, selectRow],\n  )\n\n  const cycleSort = useCallback(\n    (columnId: string) => {\n      // `TableSort` carries no third value, so the cycle is asc → desc → asc.\n      // A caller that wants the sorted state cleared passes `sort={undefined}`.\n      const direction = activeSort?.columnId === columnId && activeSort.direction === 'asc' ? 'desc' : 'asc'\n      const next: TableSort = { columnId, direction }\n      if (sort === undefined) setUncontrolledSort(next)\n      onSortChange?.(next)\n    },\n    [activeSort, onSortChange, sort],\n  )\n\n  const focusHeader = useCallback(\n    (index: number) => {\n      if (sortableColumns.length === 0) return\n      const next = clamp(index, 0, sortableColumns.length - 1)\n      setHeaderIndex(next)\n      headerRefs.current.get(sortableColumns[next].id)?.focus()\n    },\n    [sortableColumns],\n  )\n\n  const handleHeaderKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n      const { key } = event\n\n      if (key === 'ArrowRight') {\n        event.preventDefault()\n        focusHeader(index + 1)\n        return\n      }\n      if (key === 'ArrowLeft') {\n        event.preventDefault()\n        focusHeader(index - 1)\n        return\n      }\n      if (key === 'Home' || key === 'End') {\n        event.preventDefault()\n        focusHeader(key === 'Home' ? 0 : sortableColumns.length - 1)\n        return\n      }\n      // The single tab stop lands on the header strip, so the rows sit one\n      // ArrowDown away and the grid is reachable in both directions.\n      if (key === 'ArrowDown') {\n        event.preventDefault()\n        if (ids[0] !== undefined) focusRow(ids[0])\n      }\n    },\n    [focusHeader, focusRow, ids, sortableColumns.length],\n  )\n\n  const widthOf = useCallback(\n    (column: TableColumn<Row>) => widths[column.id] ?? column.defaultWidth ?? column.width,\n    [widths],\n  )\n\n  const applyWidth = useCallback((columnId: string, width: number) => {\n    const next = Number.isFinite(width) ? Math.max(MIN_COLUMN_WIDTH, Math.round(width)) : MIN_COLUMN_WIDTH\n    setWidths((previous) => ({ ...previous, [columnId]: next }))\n    return next\n  }, [])\n\n  const handleDraggerKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>, column: TableColumn<Row>) => {\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return\n      event.preventDefault()\n      const current = widthOf(column) ?? FALLBACK_COLUMN_WIDTH\n      const step = event.key === 'ArrowLeft' ? -RESIZE_STEP : RESIZE_STEP\n      const next = applyWidth(column.id, current + step)\n      onColumnResize?.(column.id, next)\n    },\n    [applyWidth, onColumnResize, widthOf],\n  )\n\n  const [dragging, setDragging] = useState(false)\n  const dragRef = useRef<{ columnId: string; startX: number; startWidth: number; width: number } | null>(\n    null,\n  )\n\n  const handleDraggerPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>, column: TableColumn<Row>) => {\n      const startWidth = widthOf(column) ?? FALLBACK_COLUMN_WIDTH\n      dragRef.current = { columnId: column.id, startX: event.clientX, startWidth, width: startWidth }\n      setDragging(true)\n    },\n    [widthOf],\n  )\n\n  useEffect(() => {\n    if (!dragging) return\n\n    const handleMove = (event: PointerEvent) => {\n      const drag = dragRef.current\n      // jsdom reports no coordinates at all, so a synthetic drag is a no-op\n      // rather than a resize to NaN.\n      if (!drag || !Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return\n      drag.width = applyWidth(drag.columnId, drag.startWidth + (event.clientX - drag.startX))\n    }\n\n    const handleUp = () => {\n      const drag = dragRef.current\n      dragRef.current = null\n      setDragging(false)\n      if (drag) onColumnResize?.(drag.columnId, drag.width)\n    }\n\n    window.addEventListener('pointermove', handleMove)\n    window.addEventListener('pointerup', handleUp)\n    window.addEventListener('pointercancel', handleUp)\n    return () => {\n      window.removeEventListener('pointermove', handleMove)\n      window.removeEventListener('pointerup', handleUp)\n      window.removeEventListener('pointercancel', handleUp)\n    }\n  }, [applyWidth, dragging, onColumnResize])\n\n  const columnStyle = useCallback(\n    (column: TableColumn<Row>): CSSProperties => {\n      const width = widthOf(column)\n      return width === undefined\n        ? { flex: '1 1 auto', minWidth: 0 }\n        : { flex: `0 0 ${width}px`, width }\n    },\n    [widthOf],\n  )\n\n  const gridClassName = [\n    'vgui-table',\n    headerUppercase ? 'vgui-table--header-uppercase' : null,\n    resizable ? 'vgui-table--resizable' : null,\n    stickyHeader ? 'vgui-table--sticky' : null,\n    dragging ? 'vgui-table--dragging' : null,\n    className ?? null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      {...rest}\n      className={gridClassName}\n      style={style}\n      role=\"grid\"\n      aria-label={ariaLabel}\n      aria-colcount={columns.length}\n      aria-rowcount={ids.length}\n      aria-multiselectable={multi ? true : undefined}\n      aria-busy={busy || undefined}\n    >\n      <div className=\"vgui-table__head\" role=\"row\">\n        {columns.map((column, index) => {\n          const sorted = activeSort?.columnId === column.id\n          const sortableIndex = sortableColumns.indexOf(column)\n          const label = (\n            <span className=\"vgui-table__th-label\">\n              {column.headerIcon ? (\n                <span className=\"vgui-table__th-icon\" aria-hidden=\"true\">\n                  {column.headerIcon}\n                </span>\n              ) : null}\n              {column.header}\n            </span>\n          )\n\n          return (\n            <div\n              key={column.id}\n              className=\"vgui-table__th\"\n              role=\"columnheader\"\n              aria-colindex={index + 1}\n              // `none` is never emitted: an unsorted header carries no state at\n              // all, so `aria-sort` is absent rather than falsely neutral.\n              aria-sort={sorted ? (activeSort?.direction === 'asc' ? 'ascending' : 'descending') : undefined}\n              data-align={column.align ?? 'start'}\n              style={columnStyle(column)}\n            >\n              {column.sortable ? (\n                <button\n                  type=\"button\"\n                  className=\"vgui-table__sort\"\n                  ref={(node) => {\n                    if (node) headerRefs.current.set(column.id, node)\n                    else headerRefs.current.delete(column.id)\n                  }}\n                  tabIndex={sortableIndex === activeHeader ? 0 : -1}\n                  onClick={() => cycleSort(column.id)}\n                  onKeyDown={(event) => handleHeaderKeyDown(event, sortableIndex)}\n                >\n                  {label}\n                  <span\n                    className=\"vgui-table__sort-indicator\"\n                    data-direction={sorted ? activeSort?.direction : 'none'}\n                    aria-hidden=\"true\"\n                  />\n                </button>\n              ) : (\n                label\n              )}\n              {resizable ? (\n                <div\n                  className=\"vgui-table__dragger\"\n                  role=\"separator\"\n                  aria-orientation=\"vertical\"\n                  aria-label={`Resize ${column.header} column`}\n                  aria-valuemin={MIN_COLUMN_WIDTH}\n                  aria-valuenow={widthOf(column) ?? FALLBACK_COLUMN_WIDTH}\n                  tabIndex={0}\n                  onPointerDown={(event) => handleDraggerPointerDown(event, column)}\n                  onKeyDown={(event) => handleDraggerKeyDown(event, column)}\n                />\n              ) : null}\n            </div>\n          )\n        })}\n      </div>\n\n      <div className=\"vgui-table__body vgui-scroll-surface\" role=\"rowgroup\">\n        {isEmpty ? (\n          <div className=\"vgui-table__row vgui-table__row--empty\" role=\"row\">\n            {/*\n             * An empty `rowgroup` is an `aria-required-children` violation, so\n             * the empty state keeps the grid and its headers — a refresh should\n             * not take the column strip away — and puts the message in one cell\n             * that spans the grid. No `aria-rowindex` here: the grid's\n             * `aria-rowcount` is 0, and a message is not a row of data. The\n             * message is a live region without changing the cell's role.\n             */}\n            <div\n              className=\"vgui-table__cell vgui-table__empty\"\n              role=\"gridcell\"\n              aria-colindex={1}\n              aria-colspan={columns.length}\n              aria-live=\"polite\"\n            >\n              {emptyMessage}\n            </div>\n          </div>\n        ) : (\n          orderedRows.map((row, index) => {\n            const id = rowId(row)\n            const isSelected = selectedSet.has(id)\n\n            return (\n              <div\n                key={id}\n                ref={(node) => setRowRef(id, node)}\n                className={['vgui-table__row', isSelected ? 'vgui-table__row--selected' : null]\n                  .filter(Boolean)\n                  .join(' ')}\n                role=\"row\"\n                aria-rowindex={index + 1}\n                aria-selected={isSelected}\n                tabIndex={id === activeRowId ? 0 : -1}\n                onClick={(event) => handleRowClick(event, id)}\n                onFocus={() => setActiveId(id)}\n                onKeyDown={handleRowKeyDown}\n              >\n                {columns.map((column, columnIndex) => (\n                  <div\n                    key={column.id}\n                    className=\"vgui-table__cell\"\n                    role=\"gridcell\"\n                    aria-colindex={columnIndex + 1}\n                    data-align={column.align ?? 'start'}\n                    style={columnStyle(column)}\n                  >\n                    {column.cell(row)}\n                  </div>\n                ))}\n              </div>\n            )\n          })\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { Table } from './Table';
+export type { TableColumn, TableProps, TableSort } from './Table';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Tabs/Tabs.css

@@ -0,0 +1,138 @@
+/*
+ * Green Steam property sheet — `PropertySheet` / `PageTab` (steam.styles:1793).
+ *
+ * Both tab states paint `--vgui-surface`; nothing about the selected tab is
+ * brighter. Selection is carried by the label colour plus the seam erasure —
+ * the selected tab paints 1px *past* its own bottom edge, over the strip's
+ * rail, exactly as `fill( x0 + 1, y1 - 1, x1 - 1, y1 + 2, GreenBG )` does.
+ */
+
+.vgui-tabs {
+  display: flex;
+  flex-direction: column;
+  color: var(--vgui-text-strong);
+  font-family: var(--vgui-font);
+  font-size: var(--vgui-font-size);
+  line-height: var(--vgui-line-height);
+}
+
+.vgui-tabs__strip {
+  display: flex;
+  align-items: flex-end;
+  /* PropertySheet.TabGap = 3 (steam.styles:337) */
+  gap: var(--vgui-tabs-gap, 3px);
+  margin: 0;
+  padding: 0;
+  /* The rail the selected tab has to erase. */
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+.vgui-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: var(--vgui-min-target-size);
+  margin: 0;
+  padding: 2px 10px;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--vgui-surface);
+  color: var(--vgui-text-strong);
+  font: inherit;
+  text-align: left;
+  cursor: default;
+  /* Raised bevel: bright top/left, dark right, no bottom — the tab's own fill
+     runs to its lower edge so it appears to merge downward. */
+  box-shadow:
+    inset var(--vgui-bevel-width) var(--vgui-bevel-width) 0 var(--vgui-bevel-light),
+    inset calc(-1 * var(--vgui-bevel-width)) 0 0 var(--vgui-bevel-dark);
+}
+
+/* Invented: `PageTab` declares no hover block (Tabs.md, Open questions). */
+.vgui-tabs__tab:not(.vgui-tabs__tab--selected):hover {
+  background-color: var(--vgui-surface-light);
+}
+
+.vgui-tabs__tab--selected {
+  /* `--vgui-heading` maize is 3.62:1 on this fill; `--vgui-text-hover` is
+     5.52:1 — Tabs.md, Accessibility, fix 1. */
+  color: var(--vgui-text-hover);
+  /* The seam erasure. Never `border-bottom: 0`: that would shorten the layout
+     box and make the strip jitter. */
+  margin-bottom: calc(-1 * var(--vgui-tabs-overlap, 1px));
+  padding-bottom: 3px;
+}
+
+.vgui-tabs__tab:disabled,
+.vgui-tabs__tab--disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: var(--vgui-bevel-width) var(--vgui-bevel-width) 0 var(--vgui-text-disabled-shadow);
+  cursor: not-allowed;
+}
+
+.vgui-tabs__tab:disabled:hover,
+.vgui-tabs__tab--disabled:hover {
+  background-color: var(--vgui-surface);
+}
+
+.vgui-tabs__tab:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-tabs__tab:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-tabs__label {
+  white-space: nowrap;
+}
+
+/* TabCloseButton { padding-right = 16 } (steam.styles:3130). Not focusable —
+   see the note in Tabs.tsx; the keyboard path is Delete on the tab. */
+.vgui-tabs__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--vgui-tabs-close-slot, 16px);
+  height: var(--vgui-tabs-close-slot, 16px);
+  margin-left: auto;
+  padding: 0;
+  color: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.vgui-tabs__close:hover {
+  color: var(--vgui-text-strong);
+}
+
+.vgui-tabs__panel {
+  padding: 8px;
+}
+
+.vgui-tabs--clay .vgui-tabs__panel {
+  /* LightClayBG — "property sheet interior, active tab" (steamscheme.res:38).
+     The page border is PropertySheetBG `#4a4846`, which has no token; the
+     nearest declared clay chrome is `--vgui-clay-surface` `#464646`. */
+  background-color: var(--vgui-clay-light);
+  border: var(--vgui-bevel-width) solid var(--vgui-clay-surface);
+  color: var(--vgui-text-strong);
+}
+
+.vgui-tabs--green .vgui-tabs__panel {
+  background-color: var(--vgui-surface);
+  border: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  color: var(--vgui-text-strong);
+}
+
+.vgui-tabs__panel:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-tabs__panel:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}

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

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