51: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"] 52: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"] 53:T528c,"use client"; import { useEffect, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; import { safeHref } from "../utils/href"; import { clamp } from "../utils/range"; import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect"; import { field, mono, paper } from "./surfaces"; export type DataTableValue = | string | number | boolean | null | undefined | readonly (string | number)[]; export type DataTableRow = Readonly>; export type DataTableFormat = | { kind: "text" } | { kind: "number"; decimals?: number | undefined; compact?: boolean | undefined; unit?: string | undefined; } | { kind: "currency"; currency: string; decimals?: number | undefined; compact?: boolean | undefined; } | { kind: "percent"; decimals?: number | undefined; basis?: "fraction" | "unit" | undefined; } | { kind: "delta"; decimals?: number | undefined; unit?: string | undefined; upIsGood?: boolean | undefined; } | { kind: "date"; style?: "date" | "datetime" | "relative" | undefined } | { kind: "boolean"; trueLabel?: string | undefined; falseLabel?: string | undefined; } | { kind: "link"; hrefKey?: string | undefined } | { kind: "badge"; tones?: | Readonly> | undefined; } | { kind: "list"; max?: number | undefined }; export interface DataTableColumn { key: string; label: string; format?: DataTableFormat | undefined; align?: "start" | "end" | undefined; sortable?: boolean | undefined; priority?: "primary" | "secondary" | undefined; width?: string | undefined; } export interface DataTableSort { key: string; direction: "asc" | "desc"; } export interface DataTableProps extends Omit< ComponentProps<"div">, "children" > { columns: readonly DataTableColumn[]; rows: readonly DataTableRow[]; rowKey?: string | undefined; caption?: string | undefined; defaultSort?: DataTableSort | undefined; sort?: DataTableSort | null | undefined; onSortChange?: ((sort: DataTableSort | null) => void) | undefined; locale?: string | undefined; emptyMessage?: string | undefined; relativeTo?: number | undefined; } const ISO_DATE = /^\d{4}-\d{2}-\d{2}(?:T.*)?$/; const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/; const isEmpty = (value: DataTableValue) => value === null || value === undefined; const textValue = (value: Exclude) => Array.isArray(value) ? value.join(", ") : String(value); const isCalendarDate = (value: string) => { const [year, month, day] = value.slice(0, 10).split("-").map(Number); if (year === undefined || month === undefined || day === undefined) { return false; } if (month < 1 || month > 12 || day < 1) return false; const daysInMonth = month === 2 ? year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0) ? 29 : 28 : [4, 6, 9, 11].includes(month) ? 30 : 31; return day <= daysInMonth; }; const asDate = (value: DataTableValue) => { const timestamp = typeof value === "number" ? value : typeof value === "string" && ISO_DATE.test(value) && isCalendarDate(value) ? Date.parse(value) : Number.NaN; return Number.isNaN(timestamp) ? undefined : new Date(timestamp); }; const fractionDigits = (decimals: number | undefined) => decimals === undefined || !Number.isFinite(decimals) ? {} : { minimumFractionDigits: Math.floor(clamp(decimals, 0, 20)), maximumFractionDigits: Math.floor(clamp(decimals, 0, 20)), }; const numberOptions = (decimals: number | undefined, compact: boolean) => ({ notation: compact ? ("compact" as const) : ("standard" as const), ...fractionDigits(decimals), }); /** * Formats with Intl, falling back to the raw value: a model can send a * currency code or locale that Intl rejects by throwing. */ const formatted = ( value: Exclude, format: () => string, ) => { try { return format(); } catch { return textValue(value); } }; const numericValue = (value: DataTableValue) => typeof value === "number" && !Number.isNaN(value) ? value : undefined; const relativeDate = (date: Date, locale: string, relativeTo: number) => { const seconds = Math.round((date.getTime() - relativeTo) / 1000); const units: readonly [Intl.RelativeTimeFormatUnit, number][] = [ ["year", 31_536_000], ["month", 2_592_000], ["week", 604_800], ["day", 86_400], ["hour", 3_600], ["minute", 60], ["second", 1], ]; const [unit, amount] = units.find( ([, size]) => Math.abs(seconds) >= size, ) ?? ["second", 1]; return new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format( Math.round(seconds / amount), unit, ); }; const relativeRefreshDelay = ( columns: readonly DataTableColumn[], rows: readonly DataTableRow[], now: number, ) => { const relativeKeys = columns .filter( (column) => column.format?.kind === "date" && column.format.style === "relative", ) .map((column) => column.key); const freshestAge = rows.reduce((minimum, row) => { for (const key of relativeKeys) { const date = asDate(row[key]); if (date) minimum = Math.min(minimum, Math.abs(now - date.getTime())); } return minimum; }, Number.POSITIVE_INFINITY); if (freshestAge < 60_000) return 1_000; if (freshestAge < 3_600_000) return 30_000; if (freshestAge < 86_400_000) return 60_000; if (freshestAge < 604_800_000) return 3_600_000; return 86_400_000; }; const withUnit = (text: string, unit: string | undefined) => unit === undefined || unit === "" ? text : /^[%‰°]/.test(unit) ? `${text}${unit}` : `${text} ${unit}`; const EmptyValue = () => none; function Value({ column, row, locale, relativeTo, }: { column: DataTableColumn; row: DataTableRow; locale: string; relativeTo: number | undefined; }) { const value = row[column.key]; if (isEmpty(value)) return ; const format = column.format ?? { kind: "text" as const }; if (format.kind === "number") { const number = numericValue(value); if (number === undefined) return <>{textValue(value)}; const content = formatted(value, () => new Intl.NumberFormat( locale, numberOptions(format.decimals, format.compact === true), ).format(number), ); return <>{withUnit(content, format.unit)}; } if (format.kind === "currency") { const number = numericValue(value); if (number === undefined) return <>{textValue(value)}; return ( <> {formatted(value, () => new Intl.NumberFormat(locale, { style: "currency", currency: format.currency, ...numberOptions(format.decimals, format.compact === true), }).format(number), )} ); } if (format.kind === "percent") { const number = numericValue(value); if (number === undefined) return <>{textValue(value)}; return ( <> {formatted(value, () => new Intl.NumberFormat(locale, { style: "percent", ...fractionDigits(format.decimals), }).format(format.basis === "unit" ? number / 100 : number), )} ); } if (format.kind === "delta") { const number = numericValue(value); if (number === undefined) return <>{textValue(value)}; const direction = number > 0 ? "↑" : number < 0 ? "↓" : "→"; const good = number === 0 || number > 0 === (format.upIsGood ?? true); const content = formatted(value, () => new Intl.NumberFormat(locale, { signDisplay: "never", ...fractionDigits(format.decimals), }).format(number), ); return ( {direction} {withUnit(content, format.unit)} ); } if (format.kind === "date") { const date = asDate(value); if (!date) return <>{textValue(value)}; const style = format.style ?? "date"; const content = formatted(value, () => style === "relative" && relativeTo !== undefined ? relativeDate(date, locale, relativeTo) : new Intl.DateTimeFormat( locale, style === "datetime" ? { dateStyle: "medium", timeStyle: "short" } : { dateStyle: "medium", ...((style === "relative" && relativeTo === undefined) || (typeof value === "string" && DATE_ONLY.test(value)) ? { timeZone: "UTC" } : {}), }, ).format(date), ); return {content}; } if (format.kind === "boolean") { if (typeof value !== "boolean") return <>{textValue(value)}; return ( <>{value ? (format.trueLabel ?? "Yes") : (format.falseLabel ?? "No")} ); } if (format.kind === "link") { const hrefValue = format.hrefKey ? row[format.hrefKey] : value; const href = safeHref( typeof hrefValue === "string" ? hrefValue : undefined, ); if (!href) return <>{textValue(value)}; const external = /^https?:/.test(href); return external ? ( {textValue(value)} (opens in a new tab) ) : ( {textValue(value)} ); } if (format.kind === "badge") { const tone = format.tones?.[textValue(value)] ?? "neutral"; return ( {textValue(value)} ); } if (format.kind === "list" && Array.isArray(value)) { const max = Math.max(0, Math.floor(format.max ?? value.length)); const shown = value.slice(0, max); return ( {shown.map((item, index) => ( {item} ))} {value.length > shown.length ? ( +{value.length - shown.length} ) : null} ); } return <>{textValue(value)}; } const isNumeric = (format: DataTableFormat | undefined) => format?.kind === "number" || format?.kind === "currency" || format?.kind === "percent" || format?.kind === "delta"; const compareValues = ( a: DataTableValue, b: DataTableValue, column: DataTableColumn, collator: Intl.Collator, ) => { if (isEmpty(a)) return isEmpty(b) ? 0 : 1; if (isEmpty(b)) return -1; if (column.format?.kind === "date") { const first = asDate(a); const second = asDate(b); if (first && second) return first.getTime() - second.getTime(); } if (typeof a === "number" && typeof b === "number") return a - b; if (typeof a === "boolean" && typeof b === "boolean") { return Number(a) - Number(b); } if (Array.isArray(a) && Array.isArray(b)) return a.length - b.length; return collator.compare(textValue(a), textValue(b)); }; const collatorFor = (locale: string) => { try { return new Intl.Collator(locale, { numeric: true, sensitivity: "base" }); } catch { return new Intl.Collator("en-US", { numeric: true, sensitivity: "base" }); } }; const rowIdentifier = ( row: DataTableRow, key: string | undefined, index: number, ) => { const value = key === undefined ? undefined : row[key]; return value === null || value === undefined ? index : textValue(value); }; export function DataTable({ columns, rows, rowKey, caption, defaultSort, sort, onSortChange, locale = "en-US", emptyMessage = "No rows", relativeTo, className, ...props }: DataTableProps) { const [internalSort, setInternalSort] = useState( defaultSort ?? null, ); const [announcement, setAnnouncement] = useState(""); const activeSort = sort === undefined ? internalSort : sort; const hasRelativeDates = columns.some( (column) => column.format?.kind === "date" && column.format.style === "relative", ); const [now, setNow] = useState(); useIsomorphicLayoutEffect(() => { if (relativeTo === undefined && hasRelativeDates) setNow(Date.now()); }, [columns, rows, relativeTo, hasRelativeDates]); const relativeTime = relativeTo ?? now; const refreshDelay = relativeTo === undefined && hasRelativeDates && relativeTime !== undefined ? relativeRefreshDelay(columns, rows, relativeTime) : undefined; useEffect(() => { if (refreshDelay === undefined) return; const timeout = window.setTimeout(() => setNow(Date.now()), refreshDelay); return () => window.clearTimeout(timeout); }, [refreshDelay, relativeTime]); const sortColumn = columns.find((column) => column.key === activeSort?.key); const collator = collatorFor(locale); const indexedRows = rows.map((row, index) => ({ row, index })); const sortedRows = activeSort && sortColumn ? indexedRows.sort((a, b) => { const result = compareValues( a.row[sortColumn.key], b.row[sortColumn.key], sortColumn, collator, ); if (result === 0) return a.index - b.index; if ( isEmpty(a.row[sortColumn.key]) || isEmpty(b.row[sortColumn.key]) ) { return result; } return activeSort.direction === "asc" ? result : -result; }) : indexedRows; const primaryColumn = columns.find((column) => column.priority === "primary") ?? columns[0]; const changeSort = (column: DataTableColumn) => { const next = activeSort?.key !== column.key ? { key: column.key, direction: "asc" as const } : activeSort.direction === "asc" ? { key: column.key, direction: "desc" as const } : null; if (sort === undefined) setInternalSort(next); setAnnouncement( next ? `Sorted by ${column.label}, ${next.direction === "asc" ? "ascending" : "descending"}` : "Sorting cleared", ); onSortChange?.(next); }; const cellClass = (column: DataTableColumn) => cn( "text-foreground/80 px-4 py-2.5 align-top text-[13px] leading-5", (column.align ?? (isNumeric(column.format) ? "end" : "start")) === "end" && "text-end tabular-nums", ); return (

{caption ? : null} {columns.map((column) => { const direction = activeSort?.key === column.key ? activeSort.direction : undefined; const sortable = column.sortable !== false; return ( ); })} {sortedRows.length === 0 ? ( ) : ( sortedRows.map(({ row, index }) => ( {columns.map((column) => ( ))} )) )}

{caption}
{sortable ? ( ) : ( column.label )}
{emptyMessage}

{sortedRows.length === 0 ? (

{emptyMessage}

) : ( sortedRows.map(({ row, index }) => (

{primaryColumn ? (

) : null} {columns.length > 1 ? (

{column.label}

) : null}

)) )}

{announcement}

); } 50:["$","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":[null,["$","$L51",null,{"namespace":"@assistant-ui","registryDependencies":["https://r.assistant-ui.com/elements-surfaces.json","https://r.assistant-ui.com/elements-href.json","https://r.assistant-ui.com/elements-range.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/assistant-ui/elements/data-table.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]