50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T14aca,'use client'; import * as React from 'react'; import { AnimatePresence, LayoutGroup, motion, useMotionValueEvent, useReducedMotion, useSpring, } from 'motion/react'; import { cn } from '@/lib/utils'; /* --------------------------------------------------------------------------- * Iconly on a 24px grid, recolored with `currentColor`. Outline (Light) is the * idle mark — search, clear — and fill (Bold) is reserved for a state that is * already on: a copied tick, a document in the empty body. * ------------------------------------------------------------------------- */ type IconProps = React.SVGProps; function Glyph({ children, ...props }: IconProps) { return ( ); } /** 1.5px stroke beside regular (400) text. */ function StrokeGlyph({ children, ...props }: IconProps) { return ( ); } /** Iconly / Bold / Arrow - Down 2, rotated for the other three directions. */ function IconChevron(props: IconProps) { return ( ); } /** Iconly / Light / Search — outline, because a search field is idle until it has a query. */ function IconSearch(props: IconProps) { return ( ); } /** Iconly / Light / Close — the trailing clear on the search field. */ function IconCloseLine(props: IconProps) { return ( ); } /** Iconly / Bold / Close Square. */ function IconClose(props: IconProps) { return ( ); } /** Iconly / Bold / Document — the empty state. */ function IconDocument(props: IconProps) { return ( ); } /** Iconly / Bold / Copy 2 — the clipboard action. */ function IconCopy(props: IconProps) { return ( ); } /** Iconly / Bold / Tick Square — the copied confirmation. */ function IconTickSquare(props: IconProps) { return ( ); } /* ------------------------------------------------------------------------- */ export type DataTableVariant = 'default' | 'bordered' | 'striped' | 'minimal' | 'panel'; export type DataTableDensity = 'compact' | 'default' | 'relaxed'; export type DataTableAlign = 'start' | 'center' | 'end'; export type DataTableSortDirection = 'asc' | 'desc'; export type DataTableValue = string | number | boolean | Date | null | undefined; export interface DataTableSort { columnId: string; direction: DataTableSortDirection; } export interface DataTableColumn { /** Stable key. Doubles as the property read off the row when `value` is absent. */ id: string; header: React.ReactNode; /** Rendered cell. Falls back to the column's value, printed as text. */ cell?: (row: T, index: number) => React.ReactNode; /** The comparable, searchable value behind a cell that renders markup. */ value?: (row: T) => DataTableValue; align?: DataTableAlign; width?: number | string; sortable?: boolean; /** End-aligns the column and switches it to tabular figures so digits line up. */ numeric?: boolean; /** Drop the column below this breakpoint instead of letting the table scroll. */ hideBelow?: 'sm' | 'md' | 'lg'; /** Renders this column's footer sum. Defaults to a grouped integer. */ formatTotal?: (sum: number) => string; className?: string; headerClassName?: string; } export interface DataTableQuickFilterOption { value: string; label?: React.ReactNode; } export interface DataTableQuickFilter { /** Column whose value the pills match against. */ columnId: string; /** Accessible name for the pill group, e.g. "Filter by status". */ label?: string; /** Read the matchable value off a row when the column's own value is not a plain string. */ getValue?: (row: T) => string; /** Defaults to the distinct values of the column, in data order. */ options?: DataTableQuickFilterOption[]; allLabel?: string; } export interface DataTableSelectionContext { ids: string[]; rows: T[]; clear: () => void; /** Sweep the selected rows out to the left, then fire `onDelete`. */ remove: () => void; } export interface DataTableRowActionContext { /** Sweep this one row out, then fire `onDelete` with its id. */ remove: () => void; } export interface DataTableProps { data: readonly T[]; columns: DataTableColumn[]; /** Stable identity per row. Selection and disclosure are keyed on it. */ rowId: (row: T) => string; /** Names a row for screen readers, e.g. on its checkbox. Defaults to the first cell. */ rowLabel?: (row: T) => string; variant?: DataTableVariant; density?: DataTableDensity; /** Sentence describing the table for screen readers. Never painted. */ caption?: string; /** Heading at the start of the toolbar. */ title?: React.ReactNode; /** Controls parked at the end of the toolbar. */ toolbar?: React.ReactNode; searchable?: boolean; searchPlaceholder?: string; /** Override the haystack a query runs against. */ searchText?: (row: T) => string; /** One-tap value pills at the end of the toolbar, with live counts. */ quickFilter?: DataTableQuickFilter; defaultSort?: DataTableSort | null; sort?: DataTableSort | null; onSortChange?: (sort: DataTableSort | null) => void; selectable?: boolean; defaultSelectedIds?: string[]; selectedIds?: string[]; onSelectedChange?: (ids: string[]) => void; /** Actions for the bar that rises over the rows once something is selected. */ bulkActions?: (context: DataTableSelectionContext) => React.ReactNode; /** Panel revealed under a row by a leading disclosure button. One at a time. */ renderDetail?: (row: T) => React.ReactNode; /** Trailing cell, revealed on row hover and on keyboard focus. */ rowActions?: (row: T, actions: DataTableRowActionContext) => React.ReactNode; /** * Fires once the removal animation has finished, with the ids that left. * Delete them from your own data here — the table has already cleared them * from the screen, so nothing flashes back in. */ onDelete?: (ids: string[]) => void; /** Rows per page. Omit to render every row. */ pageSize?: number; loading?: boolean; skeletonRows?: number; emptyState?: React.ReactNode; onRowClick?: (row: T) => void; /** * Arrow-key row cursor, Shift range selection and the ⌘A / ⌘C / Space * shortcuts. The grid takes one Tab stop and moves a ring instead of focus. */ keyboardNavigation?: boolean; /** Copy the selected rows to the clipboard as TSV, ready to paste into a sheet. */ clipboard?: boolean; /** Column ids to sum in a footer row that recounts as you filter. */ totals?: string[]; /** Drag a header's trailing edge to resize it; arrow keys do it too. */ resizableColumns?: boolean; /** Keep the leading cells in place while the table scrolls sideways. */ pinFirstColumn?: boolean; stickyHeader?: boolean; /** Caps the scroll area, e.g. `360` or `"60vh"`. Pairs with `stickyHeader`. */ maxHeight?: number | string; /** Set false to drop the reorder, disclosure and selection motion. */ animate?: boolean; className?: string; } /* The house spring presets. Fluid repositions things that were already on * screen — rows finding a new sort order, a panel opening. Springs retarget * from the live value, so clicking a header again mid-flight redirects the * motion already running instead of restarting it. */ const SPRING_FLUID = { type: 'spring', stiffness: 300, damping: 30 } as const; /* Snappy is the micro-pop: the sort caret and the disclosure chevron. */ const SPRING_SNAPPY = { type: 'spring', stiffness: 500, damping: 28 } as const; /* Contextual icon swaps: scale, opacity, blur. Bounce stays 0. */ const SPRING_ICON = { type: 'spring', duration: 0.3, bounce: 0 } as const; /* Entrance is for something arriving over the content, i.e. the bulk bar. */ const SPRING_ENTRANCE = { type: 'spring', stiffness: 260, damping: 20 } as const; /* Press feedback is always 0.96; anything below 0.95 reads as a squash. * Named properties so this can sit on the same node as a color hover. */ const PRESS = 'transition-[transform,color,background-color,opacity,border-color] duration-150 ease-out active:scale-[0.96]'; /* Stroke length is not a position or a scale, so it takes an ease. */ const DRAW = { duration: 0.18, ease: 'easeOut' } as const; /** * A row leaving. It accelerates away to the start edge rather than easing to a * stop, the way water pulls back off sand — and because rows leave on a * stagger, the set drains as one wave instead of blinking out together. */ const UNDERTOW = { duration: 0.42, ease: [0.32, 0, 0.67, 0] } as const; /** Gap between one row leaving and the next. Slow enough to read as a run. */ const WAVE_STEP = 0.06; const INSTANT = { duration: 0 } as const; const FOCUS = 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-neutral-950 dark:focus-visible:ring-neutral-300'; const EASE = 'ease-[cubic-bezier(0.2,0,0,1)]'; const DENSITY: Record = { // 13px is off the type scale on purpose: at `text-xs` a dense table stops // being readable, and at `text-sm` it stops being dense. compact: { head: 'h-9', cell: 'py-1.5', text: 'text-[13px]', pad: 'px-3' }, default: { head: 'h-11', cell: 'py-2.5', text: 'text-sm', pad: 'px-4' }, relaxed: { head: 'h-12', cell: 'py-4', text: 'text-sm', pad: 'px-5' }, }; interface Surface { frame: string; head: string; /** Under the header row. Lives on the cells so a sticky header keeps it. */ headRule: string; /** * Fill for a pinned header, where the variant's own is transparent. A sticky * header floats over the rows, so a see-through one reads them right through. */ headPinned?: string; divider: string; /** * Opaque fill behind every row. Two rows swapping places during a re-sort * pass over each other, and with no fill the text of both shows at once. * Hover and selection tint the cells instead, so they layer on top of this. */ rowFill: string; stripe: string; cell: string; } const SURFACE: Record = { default: { frame: 'rounded-2xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950', head: 'bg-neutral-50 dark:bg-neutral-900', headRule: 'border-b border-neutral-200 dark:border-neutral-800', divider: 'border-t border-neutral-100 dark:border-neutral-900', rowFill: 'bg-white dark:bg-neutral-950', stripe: '', cell: '', }, bordered: { frame: 'rounded-2xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950', head: 'bg-neutral-50 dark:bg-neutral-900', headRule: 'border-b border-neutral-200 dark:border-neutral-800', divider: 'border-t border-neutral-200 dark:border-neutral-800', rowFill: 'bg-white dark:bg-neutral-950', stripe: '', cell: 'border-s border-neutral-200 first:border-s-0 dark:border-neutral-800', }, striped: { frame: 'rounded-2xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950', head: 'bg-white dark:bg-neutral-950', headRule: 'border-b border-neutral-200 dark:border-neutral-800', divider: '', rowFill: 'bg-white dark:bg-neutral-950', stripe: 'bg-neutral-50 dark:bg-neutral-900', cell: '', }, minimal: { frame: 'bg-transparent', head: 'bg-transparent', headPinned: 'bg-white dark:bg-neutral-950', headRule: 'border-b border-neutral-200 dark:border-neutral-800', divider: 'border-t border-neutral-100 dark:border-neutral-900', // No frame to sit on, so no fill either. rowFill: 'bg-transparent', stripe: '', cell: '', }, panel: { frame: 'rounded-2xl bg-white shadow-[0_1px_2px_-1px_rgba(0,0,0,0.06),0_2px_4px_0_rgba(0,0,0,0.04)] ring-1 ring-neutral-950/8 dark:bg-neutral-950 dark:shadow-none dark:ring-white/10', head: 'bg-neutral-50 dark:bg-neutral-900', headRule: 'border-b border-neutral-200 dark:border-neutral-800', divider: 'border-t border-neutral-100 dark:border-neutral-900', rowFill: 'bg-white dark:bg-neutral-950', stripe: '', cell: '', }, }; const ALIGN: Record = { start: 'text-start', center: 'text-center', end: 'text-end', }; /** Leading control cells are fixed width, so pin offsets need no measuring. */ const DETAIL_COL = 40; const SELECT_COL = 48; const MIN_COL = 72; const HIDE_BELOW = { sm: 'hidden sm:table-cell', md: 'hidden md:table-cell', lg: 'hidden lg:table-cell', } as const; function isEmpty(value: DataTableValue) { return value === null || value === undefined || value === ''; } function compare(a: DataTableValue, b: DataTableValue) { if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime(); if (typeof a === 'number' && typeof b === 'number') return a - b; if (typeof a === 'boolean' && typeof b === 'boolean') return Number(a) - Number(b); return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' }); } function readValue(column: DataTableColumn | undefined, row: T): DataTableValue { if (!column) return undefined; if (column.value) return column.value(row); return (row as Record)[column.id] as DataTableValue; } function printValue(value: DataTableValue) { if (isEmpty(value)) return ''; // ISO rather than a locale format: a client component also renders on the // server, and a locale mismatch there is a hydration error. if (value instanceof Date) return value.toISOString().slice(0, 10); return String(value); } /** * A footer sum that rolls to its new value. Written straight to the DOM node: * a spring firing setState 60 times a second would re-render the whole table. */ function RollingTotal({ value, format, instant, }: { value: number; format: (sum: number) => string; instant: boolean; }) { const ref = React.useRef(null); const spring = useSpring(value, { stiffness: 260, damping: 30 }); React.useEffect(() => { if (instant) spring.jump(value); else spring.set(value); }, [value, instant, spring]); useMotionValueEvent(spring, 'change', (latest) => { if (ref.current) ref.current.textContent = format(latest); }); // The server renders the settled value, so no number ever pops in from zero. return {format(value)}; } /** One value of a quick filter. Counts are live, so they read as a summary. */ function FilterPill({ active, onClick, label, count, plain = false, layoutId, motionOn, }: { active: boolean; onClick: () => void; label: React.ReactNode; count: number; /** Derived values arrive lowercase; explicit labels render untouched. */ plain?: boolean; /** Shared across the group so the fill slides from one pill to the next. */ layoutId: string; motionOn: boolean; }) { return ( ); } /** A figure that rolls to its next value — pagination range, selected count. */ function FlipDigits({ value, instant }: { value: string | number; instant: boolean }) { return ( {value} ); } const EMPTY_ITEM = { hidden: { opacity: 0, y: 12, filter: 'blur(4px)' }, visible: { opacity: 1, y: 0, filter: 'blur(0px)' }, }; /** Staggered because an empty body appears once, not on every hover. */ function EmptyHint({ filtered, motionOn, onClear, }: { filtered: boolean; motionOn: boolean; onClear: () => void; }) { return ( {filtered ? 'No matching rows' : 'Nothing here yet'} {filtered ? 'Try different search terms or filters.' : 'Rows appear here once there is data.'} {filtered && ( Clear filters )} ); } /** Hand-rolled rather than the platform checkbox, because the tick draws. */ function SelectBox({ checked, indeterminate = false, onChange, onShiftPick, label, instant, }: { checked: boolean; indeterminate?: boolean; onChange: (checked: boolean) => void; /** Shift-click, which selects the range instead of one row. */ onShiftPick?: () => void; label: string; instant: boolean; }) { const ref = React.useRef(null); // Mixed state exists only on the DOM node, so it has to be written there. React.useEffect(() => { if (ref.current) ref.current.indeterminate = indeterminate; }, [indeterminate]); const filled = checked || indeterminate; return ( { if (!onShiftPick || !event.shiftKey) return; // The change event would toggle one row; the range wants the whole run. event.preventDefault(); onShiftPick(); }} onChange={(event) => onChange(event.currentTarget.checked)} className="peer absolute inset-0 size-full cursor-pointer appearance-none rounded-xl outline-hidden" /> {indeterminate ? ( ) : ( /* Iconly's tick, re-framed on its own bounds rather than inherited * from Tick Square: in that icon the glyph fills a third of a * 24-unit box because the square takes the rest, which left a * 3px check rattling around inside an 18px control. On a 14-unit * box drawn at full size the ink spans two thirds of the control, * which is the proportion the eye reads as a checkbox. * * The geometry is centred on 7,7 and then dropped 0.2 — a check's * long arm pulls the eye up, so bounding-box centre sits high. No * translate hacks: the nudge lives in the points. */ )} ); } export function DataTable({ data, columns, rowId, rowLabel, variant = 'default', density = 'default', caption, title, toolbar, searchable = false, searchPlaceholder = 'Search', searchText, quickFilter, defaultSort = null, sort: sortProp, onSortChange, selectable = false, defaultSelectedIds, selectedIds, onSelectedChange, bulkActions, renderDetail, rowActions, onDelete, pageSize, loading = false, skeletonRows = 5, emptyState, onRowClick, keyboardNavigation = true, clipboard = true, totals, resizableColumns = false, pinFirstColumn = false, stickyHeader = false, maxHeight, animate = true, className, }: DataTableProps) { const reduced = useReducedMotion(); const motionOn = animate && !reduced; const surface = SURFACE[variant]; const scale = DENSITY[density]; const [query, setQuery] = React.useState(''); const [quickValue, setQuickValue] = React.useState(null); /** Index into the visible page. The ring, not focus, follows it. */ const [cursor, setCursor] = React.useState(0); const [gridFocused, setGridFocused] = React.useState(false); /** Where a Shift range started. */ const anchorRef = React.useRef(null); const [copied, setCopied] = React.useState(false); /** Ids mid-sweep, in the order they leave. */ const [leaving, setLeaving] = React.useState([]); /** Ids whose sweep has finished; dropped from the body so the gap closes. */ const [gone, setGone] = React.useState([]); const [widths, setWidths] = React.useState>({}); const [resizing, setResizing] = React.useState(null); const [page, setPage] = React.useState(0); const [expanded, setExpanded] = React.useState(null); const [innerSort, setInnerSort] = React.useState(defaultSort); const sort = sortProp !== undefined ? sortProp : innerSort; const [innerSelected, setInnerSelected] = React.useState(defaultSelectedIds ?? []); const selected = selectedIds !== undefined ? selectedIds : innerSelected; const selectedSet = React.useMemo(() => new Set(selected), [selected]); const setSelected = React.useCallback( (ids: string[]) => { if (selectedIds === undefined) setInnerSelected(ids); onSelectedChange?.(ids); }, [selectedIds, onSelectedChange], ); const rows = React.useMemo(() => { const all = Array.from(data); // A row is pulled the instant its own sweep ends, not when the whole wave // does, so the rows beneath it start closing the gap while the next one is // still on its way out. return gone.length > 0 ? all.filter((row) => !gone.includes(rowId(row))) : all; }, [data, gone, rowId]); const filtered = React.useMemo(() => { const needle = query.trim().toLowerCase(); if (!needle) return rows; return rows.filter((row) => { const haystack = searchText ? searchText(row) : columns.map((column) => printValue(readValue(column, row))).join(' '); return haystack.toLowerCase().includes(needle); }); }, [rows, query, columns, searchText]); const readQuickValue = React.useCallback( (row: T) => { if (!quickFilter) return ''; if (quickFilter.getValue) return quickFilter.getValue(row); const column = columns.find((candidate) => candidate.id === quickFilter.columnId); return printValue(readValue(column, row)); }, [quickFilter, columns], ); const quickOptions = React.useMemo(() => { if (!quickFilter) return []; if (quickFilter.options) return quickFilter.options; const seen: string[] = []; for (const row of rows) { const value = readQuickValue(row); if (value && !seen.includes(value)) seen.push(value); } return seen.map((value) => ({ value })); }, [quickFilter, rows, readQuickValue]); // Live counts come from the searched set, so the pills always add up to the // rows a click would actually show. const quickCounts = React.useMemo(() => { if (!quickFilter) return {} as Record; const counts: Record = {}; for (const row of filtered) { const value = readQuickValue(row); counts[value] = (counts[value] ?? 0) + 1; } return counts; }, [quickFilter, filtered, readQuickValue]); const narrowed = React.useMemo(() => { if (!quickFilter || quickValue === null) return filtered; return filtered.filter((row) => readQuickValue(row) === quickValue); }, [filtered, quickFilter, quickValue, readQuickValue]); const sorted = React.useMemo(() => { if (!sort) return narrowed; const column = columns.find((candidate) => candidate.id === sort.columnId); if (!column) return narrowed; const direction = sort.direction === 'asc' ? 1 : -1; // Sort is stable, so equal rows keep their source order. Blanks stay at the // bottom in both directions; a column of empties is not a result. return [...narrowed].sort((a, b) => { const left = readValue(column, a); const right = readValue(column, b); const leftEmpty = isEmpty(left); const rightEmpty = isEmpty(right); if (leftEmpty || rightEmpty) return leftEmpty === rightEmpty ? 0 : leftEmpty ? 1 : -1; return compare(left, right) * direction; }); }, [narrowed, sort, columns]); const pageCount = pageSize ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1; // Clamped on the way out as well as in an effect, so a shrinking result set // never renders a blank page for one frame. const safePage = Math.min(page, pageCount - 1); const visible = React.useMemo( () => (pageSize ? sorted.slice(safePage * pageSize, safePage * pageSize + pageSize) : sorted), [sorted, pageSize, safePage], ); // A filtered result set is a different list, so page 3 of it means nothing. // Reset from the handler rather than an effect: no extra render pass, and // `safePage` already clamps whatever `page` holds. const changeQuery = (next: string) => { setQuery(next); setPage(0); }; const changeQuickValue = (next: string | null) => { setQuickValue(next); setPage(0); }; const toggleSort = (column: DataTableColumn) => { const active = sort?.columnId === column.id; // Third click clears, so a table can always be put back in source order. const next: DataTableSort | null = !active ? { columnId: column.id, direction: 'asc' } : sort?.direction === 'asc' ? { columnId: column.id, direction: 'desc' } : null; if (sortProp === undefined) setInnerSort(next); onSortChange?.(next); }; const pageIds = visible.map(rowId); const selectedOnPage = pageIds.filter((id) => selectedSet.has(id)); const allOnPage = pageIds.length > 0 && selectedOnPage.length === pageIds.length; const toggleAll = (checked: boolean) => { if (checked) setSelected(Array.from(new Set([...selected, ...pageIds]))); else setSelected(selected.filter((id) => !pageIds.includes(id))); }; const toggleRow = (id: string, checked: boolean) => { if (checked) setSelected([...selected, id]); else setSelected(selected.filter((candidate) => candidate !== id)); }; /** * Shift-click, and Shift with the arrow keys, run from the last row you * touched to this one — the behaviour every file manager and inbox has, and * the reason nobody should have to click twelve checkboxes. */ const selectRange = (from: number, to: number) => { const [start, end] = from <= to ? [from, to] : [to, from]; const ids = visible.slice(start, end + 1).map(rowId); setSelected(Array.from(new Set([...selected, ...ids]))); }; const selectRow = (index: number, event?: { shiftKey?: boolean }) => { const id = pageIds[index]; if (id === undefined) return; if (event?.shiftKey && anchorRef.current !== null) { selectRange(anchorRef.current, index); return; } anchorRef.current = index; toggleRow(id, !selectedSet.has(id)); }; /** * Marks rows as leaving in the order they appear, so the sweep runs down the * table rather than firing at once. `onDelete` lands after the last one. */ const requestRemove = React.useCallback( (ids: string[]) => { if (ids.length === 0) return; const ordered = visible.map(rowId).filter((id) => ids.includes(id)); const rest = ids.filter((id) => !ordered.includes(id)); setLeaving([...ordered, ...rest]); }, [visible, rowId], ); // Two rows can finish in the same tick, so the running tally lives on a ref // rather than in the state updater — an updater has to stay pure, and this // one has to decide when the whole wave has drained. const goneRef = React.useRef([]); const onRowLeft = React.useCallback( (id: string) => { if (!goneRef.current.includes(id)) goneRef.current = [...goneRef.current, id]; const next = goneRef.current; if (leaving.length > 0 && leaving.every((candidate) => next.includes(candidate))) { // Drained. Hand the ids over and reset in one batch, so the caller's own // removal and our reset commit together and nothing flashes back in. goneRef.current = []; onDelete?.(leaving); setSelected(selected.filter((candidate) => !leaving.includes(candidate))); setLeaving([]); setGone([]); return; } setGone(next); }, [leaving, onDelete, selected, setSelected], ); const selectedRows = React.useMemo( () => rows.filter((row) => selectedSet.has(rowId(row))), [rows, selectedSet, rowId], ); /** Sums follow the filters, so the footer always describes what you can see. */ const totalsById = React.useMemo(() => { if (!totals || totals.length === 0) return {} as Record; const result: Record = {}; for (const columnId of totals) { const column = columns.find((candidate) => candidate.id === columnId); if (!column) continue; result[columnId] = sorted.reduce((sum, row) => { const value = readValue(column, row); return sum + (typeof value === 'number' ? value : 0); }, 0); } return result; }, [totals, columns, sorted]); const copySelection = React.useCallback(async () => { const chosen = selectedRows.length > 0 ? selectedRows : []; if (chosen.length === 0) return; const head = columns.map((column) => typeof column.header === 'string' ? column.header : column.id, ); const body = chosen.map((row) => columns.map((column) => printValue(readValue(column, row))).join('\t'), ); try { await navigator.clipboard.writeText([head.join('\t'), ...body].join('\n')); setCopied(true); window.setTimeout(() => setCopied(false), 1800); } catch { // Clipboard permission denied — the selection is unchanged, so the user // can try the button again rather than be told about a failed shortcut. } }, [selectedRows, columns]); // Selecting every row on a page rarely means "these six". Offer the rest. const allMatchingSelected = sorted.length > 0 && sorted.every((row) => selectedSet.has(rowId(row))); const showSelectAllBanner = selectable && allOnPage && sorted.length > pageIds.length && !allMatchingSelected; const columnCount = columns.length + (selectable ? 1 : 0) + (renderDetail ? 1 : 0) + (rowActions ? 1 : 0); // A pinned header and a pinned column each need to know they are floating // over content — one reads scrollTop, the other scrollLeft. const scrollRef = React.useRef(null); const [scrolled, setScrolled] = React.useState(false); const [scrolledX, setScrolledX] = React.useState(false); React.useEffect(() => { const element = scrollRef.current; if (!element || (!stickyHeader && !pinFirstColumn)) return; const onScroll = () => { setScrolled(element.scrollTop > 0); setScrolledX(Math.abs(element.scrollLeft) > 0); }; onScroll(); element.addEventListener('scroll', onScroll, { passive: true }); return () => element.removeEventListener('scroll', onScroll); }, [stickyHeader, pinFirstColumn]); // Column widths are measured once, then owned by the drag. Fixed layout only // switches on after that first measurement, so the table never jumps. const headRefs = React.useRef>({}); const measured = resizableColumns && Object.keys(widths).length === columns.length; React.useEffect(() => { if (!resizableColumns) return; // Measuring is a read from the DOM, the same shape as the ring below: take // the browser's own column widths once, then let the drag own them. const measure = () => { const next: Record = {}; for (const column of columns) { const cell = headRefs.current[column.id]; if (cell) next[column.id] = Math.max(MIN_COL, Math.round(cell.getBoundingClientRect().width)); } if (Object.keys(next).length !== columns.length) return; setWidths((current) => { const same = Object.keys(current).length === Object.keys(next).length && Object.keys(next).every((key) => current[key] === next[key]); return same ? current : next; }); }; const frame = requestAnimationFrame(measure); return () => cancelAnimationFrame(frame); }, [resizableColumns, columns, density]); const startResize = (columnId: string, clientX: number) => { const from = widths[columnId] ?? MIN_COL; const rtl = typeof document !== 'undefined' && document.dir === 'rtl'; setResizing(columnId); const onMove = (event: PointerEvent) => { const delta = (event.clientX - clientX) * (rtl ? -1 : 1); setWidths((current) => ({ ...current, [columnId]: Math.max(MIN_COL, from + delta) })); }; const onUp = () => { setResizing(null); window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); }; window.addEventListener('pointermove', onMove); window.addEventListener('pointerup', onUp); }; const nudgeWidth = (columnId: string, delta: number) => { setWidths((current) => ({ ...current, [columnId]: Math.max(MIN_COL, (current[columnId] ?? MIN_COL) + delta), })); }; /** Fixed offsets, because the leading cells are fixed widths. */ const pinStart = { detail: 0, select: renderDetail ? DETAIL_COL : 0, first: (renderDetail ? DETAIL_COL : 0) + (selectable ? SELECT_COL : 0), }; // An outer box-shadow rather than a pseudo-element: the pinned cell clips its // own overflow to truncate long values, and that would clip the shadow too. const pinnedShadow = pinFirstColumn && scrolledX ? 'shadow-[12px_0_10px_-10px_rgba(0,0,0,0.12)] dark:shadow-[12px_0_10px_-10px_rgba(0,0,0,0.55)]' : ''; const rowRefs = React.useRef<(HTMLTableRowElement | null)[]>([]); // Measuring is what makes a reorder animate; keeping it off every other // render is what keeps hovering a row cheap. const layoutToken = `${sort?.columnId ?? ''}:${sort?.direction ?? ''}:${safePage}:${query}:${quickValue ?? ''}`; const gridId = React.useId(); const rowDomId = (index: number) => `${gridId}-row-${index}`; /** * One Tab stop for the whole grid, then arrows move a ring rather than focus * — the pattern a keyboard-first tool uses, and the only way row shortcuts * can exist without stealing keys from the controls inside a row. */ const onGridKeyDown = (event: React.KeyboardEvent) => { if (!keyboardNavigation || visible.length === 0) return; const meta = event.metaKey || event.ctrlKey; if (meta && event.key.toLowerCase() === 'c') { if (!clipboard || selected.length === 0) return; event.preventDefault(); void copySelection(); return; } if (meta && event.key.toLowerCase() === 'a' && selectable) { event.preventDefault(); toggleAll(true); return; } // Anything typed into a control inside a row belongs to that control. const target = event.target as HTMLElement; if (target !== event.currentTarget && target.closest('input,textarea,select')) return; const move = (next: number) => { const clamped = Math.max(0, Math.min(visible.length - 1, next)); event.preventDefault(); if (event.shiftKey && selectable) { if (anchorRef.current === null) anchorRef.current = cursor; selectRange(anchorRef.current, clamped); } setCursor(clamped); rowRefs.current[clamped]?.scrollIntoView({ block: 'nearest' }); }; switch (event.key) { case 'ArrowDown': return move(cursor + 1); case 'ArrowUp': return move(cursor - 1); case 'PageDown': return move(cursor + 10); case 'PageUp': return move(cursor - 10); case 'Home': return move(0); case 'End': return move(visible.length - 1); case ' ': { if (!selectable) return; event.preventDefault(); selectRow(cursor, event); return; } case 'Enter': { const row = visible[cursor]; if (!row || !onRowClick) return; event.preventDefault(); onRowClick(row); return; } case 'Escape': { if (selected.length === 0) return; event.preventDefault(); setSelected([]); return; } case 'ArrowRight': { if (!renderDetail) return; event.preventDefault(); setExpanded(rowId(visible[cursor])); return; } case 'ArrowLeft': { if (!renderDetail) return; event.preventDefault(); setExpanded(null); return; } default: return; } }; const showEmpty = !loading && visible.length === 0; const rangeStart = sorted.length === 0 ? 0 : safePage * (pageSize ?? sorted.length) + 1; const rangeEnd = pageSize ? Math.min(sorted.length, (safePage + 1) * pageSize) : sorted.length; return (

{(searchable || title || toolbar || quickFilter) && (

{title && (

{title}

)} {/* Controls live at the end of the toolbar: filter pills first, then search, then whatever actions the caller parks here. */}

{quickFilter && quickOptions.length > 0 && (

changeQuickValue(null)} label={quickFilter.allLabel ?? 'All'} count={filtered.length} layoutId={`${gridId}-pill`} motionOn={motionOn} /> {quickOptions.map((option) => ( changeQuickValue(quickValue === option.value ? null : option.value) } label={option.label ?? option.value} plain={option.label === undefined} count={quickCounts[option.value] ?? 0} layoutId={`${gridId}-pill`} motionOn={motionOn} /> ))}

)} {searchable && (

changeQuery(event.currentTarget.value)} placeholder={searchPlaceholder} aria-label={searchPlaceholder} className={cn( 'h-9 w-full rounded-xl border border-neutral-200 bg-white ps-8 pe-8 text-base text-neutral-900 placeholder:text-neutral-400 sm:text-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-500', 'transition-[border-color] duration-150 ease-out', 'focus:border-neutral-400 dark:focus:border-neutral-500', '[&::-webkit-search-cancel-button]:hidden', FOCUS, )} /> {query ? ( changeQuery('')} aria-label="Clear search" initial={ motionOn ? { opacity: 0, scale: 0.25, filter: 'blur(4px)' } : false } animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }} exit={ motionOn ? { opacity: 0, scale: 0.25, filter: 'blur(4px)' } : { opacity: 0 } } transition={motionOn ? SPRING_ICON : INSTANT} className={cn( 'absolute inset-y-0 end-1 my-auto grid size-7 place-items-center rounded-lg text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100', PRESS, FOCUS, )} > ) : null}

)} {toolbar}

)} {showSelectAllBanner && (

All {pageIds.length} rows on this page are selected.

)}

0 ? 0 : undefined} aria-activedescendant={ keyboardNavigation && gridFocused && visible[cursor] ? rowDomId(cursor) : undefined } onKeyDown={onGridKeyDown} onFocus={(event) => { if (event.target === event.currentTarget) setGridFocused(true); }} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node)) setGridFocused(false); }} className={cn( 'w-full border-collapse whitespace-nowrap', scale.text, 'outline-hidden focus-visible:outline-hidden', )} style={ measured ? { tableLayout: 'fixed', width: 'max-content', minWidth: '100%' } : undefined } aria-busy={loading || undefined} > {caption && } {renderDetail && ( )} {columns.map((column, columnIndex) => { const align = column.align ?? (column.numeric ? 'end' : 'start'); const active = sort?.columnId === column.id; const pinned = pinFirstColumn && columnIndex === 0; // Not truncated: a header that can shrink to nothing contributes // no min-content width, so the table would clip its own labels // rather than scroll. Pass `headerClassName="truncate"` to opt in. const label = {column.header}; return ( ); })} {rowActions && ( )} {loading ? ( {Array.from({ length: skeletonRows }).map((_, index) => ( 0 && surface.divider, surface.rowFill)}> {renderDetail && )} {columns.map((column, columnIndex) => ( ))} {rowActions && ))} ) : ( {visible.map((row, index) => { const id = rowId(row); const isSelected = selectedSet.has(id); const isExpanded = expanded === id; const leavingAt = leaving.indexOf(id); const isLeaving = leavingAt !== -1; const name = rowLabel?.(row) || printValue(readValue(columns[0], row)) || 'this row'; // Hover tints the cells rather than the row, so it paints over // the row's opaque fill instead of under it. Selection is the // checkbox — no extra rail or wash on the row. const tint = 'transition-colors duration-100 ease-out group-hover/row:bg-neutral-900/[0.025] dark:group-hover/row:bg-neutral-100/[0.045]'; return ( { rowRefs.current[index] = node; }} aria-selected={selectable ? isSelected : undefined} aria-hidden={isLeaving || undefined} layout={motionOn ? 'position' : false} layoutDependency={layoutToken} initial={false} animate={isLeaving ? { x: '-100%', opacity: 0 } : { x: 0, opacity: 1 }} onAnimationComplete={() => { if (isLeaving) onRowLeft(id); }} transition={ isLeaving ? motionOn ? { ...UNDERTOW, delay: leavingAt * WAVE_STEP } : INSTANT : SPRING_FLUID } data-selected={isSelected || undefined} onPointerDown={() => setCursor(index)} onClick={ onRowClick ? (event) => { // The first cell carries a real button for the // keyboard; a pointer may land anywhere else. const target = event.target as HTMLElement; if (target.closest('a,button,input,select,textarea,label')) return; onRowClick(row); } : undefined } className={cn( 'group/row', index > 0 && surface.divider, surface.rowFill, index % 2 === 1 && surface.stripe, onRowClick && 'cursor-pointer', )} > {renderDetail && ( )} {selectable && ( )} {columns.map((column, columnIndex) => { const align = column.align ?? (column.numeric ? 'end' : 'start'); const content = column.cell ? column.cell(row, index) : printValue(readValue(column, row)); const activates = Boolean(onRowClick) && columnIndex === 0; return ( ); })} {rowActions && ( )} {renderDetail && ( {isExpanded && ( )} )} ); })} {showEmpty && ( )} )} {totals && totals.length > 0 && !loading && sorted.length > 0 && ( {renderDetail && ); })} {rowActions && )}

{caption}
)} {selectable && (	0 && !allOnPage} onChange={toggleAll} label="Select all rows on this page" instant={!motionOn} />	{ headRefs.current[column.id] = node; }} style={{ ...(widths[column.id] ? { width: widths[column.id] } : column.width ? { width: column.width } : null), ...(pinned ? { insetInlineStart: pinStart.first } : null), }} className={cn( 'relative font-medium text-neutral-600 dark:text-neutral-400', scale.pad, ALIGN[align], surface.cell, surface.headRule, column.hideBelow && HIDE_BELOW[column.hideBelow], pinned && cn('sticky z-1', surface.head, pinnedShadow), column.headerClassName, )} > {column.sortable ? ( ) : ( label )} {resizableColumns && ( /* A splitter, not a button: arrow keys resize it, and screen readers announce the width they land on. */ { event.preventDefault(); startResize(column.id, event.clientX); }} onKeyDown={(event) => { const step = event.shiftKey ? 48 : 16; if (event.key === 'ArrowRight') { event.preventDefault(); nudgeWidth(column.id, step); } else if (event.key === 'ArrowLeft') { event.preventDefault(); nudgeWidth(column.id, -step); } }} className={cn( 'absolute inset-y-0 end-0 z-1 w-2 translate-x-1/2 cursor-col-resize touch-none', "before:absolute before:inset-y-1.5 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-neutral-900 before:opacity-0 before:transition-opacity before:duration-100 before:content-['']", 'hover:before:opacity-20 focus-visible:before:opacity-100 dark:before:bg-neutral-100', resizing === column.id && 'before:opacity-100', 'focus-visible:outline-hidden', )} /> )}	Actions
} {selectable && (			}
	selectRow(index)} onShiftPick={() => { setCursor(index); selectRow(index, { shiftKey: true }); }} label={`Select ${name}`} instant={!motionOn} />	{activates ? ( ) : ( content )}	{/* Shown by default, and hidden until hover only where hovering exists, so touch keeps it. */} {rowActions(row, { remove: () => requestRemove([id]) })}	{renderDetail(row)}
{emptyState ?? ( { changeQuery(''); changeQuickValue(null); }} /> )}
} {selectable &&	} {columns.map((column, columnIndex) => { const align = column.align ?? (column.numeric ? 'end' : 'start'); const sum = totalsById[column.id]; return (	{sum !== undefined ? ( Math.round(amount).toLocaleString('en-US')) } instant={!motionOn} /> ) : columnIndex === 0 ? ( Total ) : null}	}

{/* Infrequent, and it changes what the whole toolbar means, so this one earns a spring. */} {selectable && bulkActions && (

{selected.length > 0 && ( selected {clipboard && ( )} {bulkActions({ ids: selected, rows: selectedRows, clear: () => setSelected([]), remove: () => requestRemove(selected), })} )}

)}

{pageSize && !loading && sorted.length > 0 && (

)}

{/* One region, always rendered, so repeated counts announce reliably. */}

{loading ? 'Loading rows' : `${sorted.length} ${sorted.length === 1 ? 'row' : 'rows'}${ selected.length > 0 ? `, ${selected.length} selected` : '' }`}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"app/registry/data-table/data-table.tsx","content":"$52","type":"registry:component","target":"components/spectrumui/data-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]