2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T9c08,"use client"; import * as React from "react"; import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, type DragEndEvent, } from "@dnd-kit/core"; import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createPaginatedRowModel, createSortedRowModel, FlexRender, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFns, tableFeatures, useTable, type Column, type Header, type Cell, type ColumnDef, type ReactTable, type Row, type RowData, type RowSelectionState, type SortingState, } from "@tanstack/react-table"; import { IconArrowDown, IconArrowUp, IconChevronLeft, IconChevronRight, IconGripVertical } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { cn } from "@/lib/utils"; import { ActionBar, ActionBarClose, ActionBarGroup, ActionBarSelection, ActionBarSeparator } from "../action-bar/action-bar"; import { EmptyState, EmptyStateDescription, EmptyStateHeader, EmptyStateTitle } from "../empty-state/empty-state"; import { DataGridEditableCell, type EditableConfig } from "./cells"; import { useWindow } from "./use-window"; type DataGridColumnMeta = { /** Horizontal alignment of header and cells. Use `end` for numbers. */ align?: "start" | "center" | "end"; /** Makes the cell editable in place. */ editable?: boolean | EditableConfig; /** Stack mode: this column is the card `title`, `subtitle`, the row `actions`, or `hidden`. Defaults: first, second, a column with id "actions", none. */ stack?: "title" | "subtitle" | "actions" | "hidden"; /** Stack mode: label for the value row when the header is not a string. */ stackLabel?: string; }; export type DataGridColumnVisibility = Record; /** Feature set the grid registers. Type your columns with `DataGridColumnDef`. */ export const dataGridFeatures = tableFeatures({ rowSortingFeature, sortedRowModel: createSortedRowModel(), sortFns, rowSelectionFeature, rowExpandingFeature, rowPaginationFeature, paginatedRowModel: createPaginatedRowModel(), columnSizingFeature, columnResizingFeature, columnPinningFeature, columnVisibilityFeature, columnMeta: {} as DataGridColumnMeta, }); type Features = typeof dataGridFeatures; // eslint-disable-next-line @typescript-eslint/no-explicit-any export type DataGridColumnDef = ColumnDef; type Col = Column; type GridTable = ReactTable; export { DataGridBadge, DataGridPerson, DataGridEditableCell } from "./cells"; export type { DataGridBadgeTone } from "./cells"; type Size = "sm" | "default" | "lg"; const ROW_HEIGHT: Record = { sm: 32, default: 40, lg: 52 }; const HEADER_HEIGHT = 36; const SELECT = "_select"; const EXPAND = "_expand"; const DRAG = "_drag"; const UTILITY = new Set([SELECT, EXPAND, DRAG]); export type DataGridBulkContext = { ids: string[]; rows: TData[]; clear: () => void }; export type DataGridProps = { data: TData[]; columns: DataGridColumnDef[]; getRowId?: (row: TData, index: number) => string; selectionMode?: "none" | "single" | "multiple"; /** Selected row ids. */ value?: string[]; defaultValue?: string[]; onValueChange?: (ids: string[]) => void; sorting?: SortingState; defaultSorting?: SortingState; onSortingChange?: (sorting: SortingState) => void; /** Drag the header edge (or focus it and press arrows) to resize. */ resizable?: boolean; /** Column ids to stick to the start or end edge while scrolling sideways. */ pinnedColumns?: { start?: string[]; end?: string[] }; /** Adds a drag handle column. Disables sorting. */ reorderable?: boolean; onReorder?: (data: TData[]) => void; /** Adds a chevron column; `renderExpanded` fills the detail row. */ expandable?: boolean; renderExpanded?: (row: TData) => React.ReactNode; onCellEdit?: (edit: { rowId: string; columnId: string; value: string; row: TData }) => void; loading?: boolean; skeletonRows?: number; /** Replaces the default empty state. */ empty?: React.ReactNode; /** Renders only the rows in view. Needs a `height`. Ignored while rows are expanded. */ virtualized?: boolean; /** Max height of the scrolling area, in px. */ height?: number; /** Paginate with this page size and show a pager in the footer. */ pageSize?: number; /** `true` for the default footer, or your own node. */ footer?: boolean | React.ReactNode; /** Return ActionBarAction elements. The bar shows while rows are selected. `attached` sits in the flow above the footer and covers no rows. */ bulkActions?: (ctx: DataGridBulkContext) => React.ReactNode; bulkPlacement?: "floating" | "attached"; size?: Size; variant?: "default" | "flush"; /** * `scroll` keeps the table and scrolls sideways. `stack` turns each row into a card below the * `sm` breakpoint: first column title, second subtitle, the rest label/value pairs. */ collapse?: "scroll" | "stack"; /** Called when a row (or its stacked card) is clicked or activated with Enter. Replaces click-to-select. */ onRowClick?: (row: TData) => void; /** Hidden column ids map to `false`. */ columnVisibility?: DataGridColumnVisibility; defaultColumnVisibility?: DataGridColumnVisibility; onColumnVisibilityChange?: (visibility: DataGridColumnVisibility) => void; "aria-label": string; className?: string; }; const SortableRowContext = React.createContext<{ attributes: ReturnType["attributes"]; listeners: ReturnType["listeners"]; } | null>(null); function pin(column: Col) { const side = column.getIsPinned(); if (!side) return { className: "", style: undefined }; const offset = side === "start" ? column.getStart("start") : column.getAfter("end"); return { className: cn("sticky", side === "start" ? "start-(--pin)" : "end-(--pin)"), style: { "--pin": `${offset}px` } as React.CSSProperties, }; } const alignClass = (align?: "start" | "center" | "end") => align === "end" ? "text-end" : align === "center" ? "text-center" : ""; export function DataGrid({ data, columns, getRowId = (row, i) => String((row as { id?: unknown }).id ?? i), selectionMode = "none", value, defaultValue = [], onValueChange, sorting: sortingProp, defaultSorting = [], onSortingChange, resizable = false, pinnedColumns, reorderable = false, onReorder, expandable = false, renderExpanded, onCellEdit, loading = false, skeletonRows = 6, empty, virtualized = false, height = 420, pageSize, footer = false, bulkActions, bulkPlacement = "floating", size = "default", variant = "default", collapse = "scroll", onRowClick, columnVisibility, defaultColumnVisibility, onColumnVisibilityChange, className, "aria-label": ariaLabel, }: DataGridProps) { const [innerSelected, setInnerSelected] = React.useState(defaultValue); const selectedIds = value ?? innerSelected; const rowSelection = React.useMemo( () => Object.fromEntries(selectedIds.map((id) => [id, true])), [selectedIds], ); const [innerSorting, setInnerSorting] = React.useState(defaultSorting); const sorting = sortingProp ?? innerSorting; const [innerVisibility, setInnerVisibility] = React.useState(defaultColumnVisibility ?? {}); const visibility = columnVisibility ?? innerVisibility; const setSelected = React.useCallback( (ids: string[]) => { setInnerSelected(ids); onValueChange?.(ids); }, [onValueChange], ); const allColumns = React.useMemo(() => { const lead: DataGridColumnDef[] = []; if (reorderable) lead.push({ id: DRAG, size: 44, minSize: 44, enableSorting: false, enableResizing: false, header: () => Reorder, cell: () => , }); if (selectionMode !== "none") lead.push({ id: SELECT, size: 44, minSize: 44, enableSorting: false, enableResizing: false, header: ({ table }) => selectionMode === "multiple" ? ( table.toggleAllRowsSelected(!!on)} /> ) : ( Select ), cell: ({ row }) => ( row.toggleSelected(!!on)} /> ), }); if (expandable) lead.push({ id: EXPAND, size: 44, minSize: 44, enableSorting: false, enableResizing: false, header: () => Expand, cell: ({ row }) => ( ), }); return [...lead, ...columns]; }, [columns, reorderable, selectionMode, expandable]); const initialPinning = (() => { const utility = allColumns.map((c) => c.id).filter((id): id is string => !!id && UTILITY.has(id)); const start = pinnedColumns?.start ?? []; return { start: start.length ? [...utility, ...start] : [], end: pinnedColumns?.end ?? [] }; })(); const table = useTable( { features: dataGridFeatures, data, columns: allColumns, getRowId, state: { sorting, rowSelection, columnVisibility: visibility }, initialState: { columnPinning: initialPinning, pagination: { pageIndex: 0, pageSize: pageSize ?? 1 } }, manualPagination: !pageSize, defaultColumn: { size: 160, minSize: 72, maxSize: 640 }, enableColumnResizing: resizable, columnResizeMode: "onChange", enableMultiRowSelection: selectionMode === "multiple", enableRowSelection: selectionMode !== "none", enableSorting: !reorderable, getRowCanExpand: () => expandable, onSortingChange: (updater) => { const next = typeof updater === "function" ? updater(sorting) : updater; setInnerSorting(next); onSortingChange?.(next); }, onColumnVisibilityChange: (updater) => { const next = typeof updater === "function" ? updater(visibility) : updater; setInnerVisibility(next); onColumnVisibilityChange?.(next); }, onRowSelectionChange: (updater) => { const next = typeof updater === "function" ? updater(rowSelection) : updater; setSelected(Object.keys(next).filter((k) => next[k])); }, }, (state) => state, ); const rows = table.getRowModel().rows; const rowHeight = ROW_HEIGHT[size]; const anyExpanded = expandable && rows.some((r) => r.getIsExpanded()); const windowing = virtualized && !loading && !anyExpanded && !reorderable; const { ref: viewportRef, onScroll: onViewportScroll, ...win } = useWindow({ enabled: windowing, count: rows.length, rowHeight, headerHeight: HEADER_HEIGHT }); const visible = windowing ? rows.slice(win.start, win.end) : rows; // Columns keep their own widths; a trailing without one absorbs any spare room. const total = table.getTotalSize(); const widthOf = (column: Col) => column.getSize(); const colCount = table.getVisibleLeafColumns().length + 1; // + trailing filler cell const dndId = React.useId(); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }), ); const onDragEnd = ({ active, over }: DragEndEvent) => { if (!over || active.id === over.id) return; const ids = data.map((d, i) => getRowId(d, i)); onReorder?.(arrayMove(data, ids.indexOf(String(active.id)), ids.indexOf(String(over.id)))); }; const selectedRows = table.getSelectedRowModel().rows.map((r) => r.original); const clear = () => setSelected([]); // Selection never outlives its rows: a filter that removes them clears them, so the bar can't linger. const latest = React.useRef({ selectedIds, setSelected, getRowId }); React.useEffect(() => { latest.current = { selectedIds, setSelected, getRowId }; }); React.useEffect(() => { const { selectedIds: ids, setSelected: set, getRowId: id } = latest.current; if (ids.length === 0) return; const present = new Set(data.map((d, i) => id(d, i))); const kept = ids.filter((x) => present.has(x)); if (kept.length !== ids.length) set(kept); }, [data]); const mobile = useMobile(); const stackOnly = collapse === "stack" && mobile === true; const stackBoth = collapse === "stack" && mobile === null; const body = ( {win.padTop > 0 ? : null} {loading ? Array.from({ length: skeletonRows }, (_, i) => ( {table.getVisibleLeafColumns().map((column, c) => ( ))} )) : null} {!loading && rows.length === 0 ? (

0 ? ({ "--vw": `${win.width}px` } as React.CSSProperties) : undefined} className="sticky start-0 w-[var(--vw,100%)] max-w-full py-8"> {empty ?? ( No results There is nothing to show yet. )}

) : null} {!loading ? visible.map((row, i) => ( )) : null} {win.padBottom > 0 ? : null} ); const grid = ( {(table.getHeaderGroups()[0]?.headers ?? []).map((h) => h.column).map((column) => ( ))} {table.getHeaderGroups().map((group) => ( {group.headers.map((header) => { const column = header.column; const meta = column.columnDef.meta; const p = pin(column); const sorted = column.getIsSorted(); const utility = UTILITY.has(column.id); return ( {header.isPlaceholder ? null : column.getCanSort() ? ( ) : ( )} {resizable && column.getCanResize() ? : null} ); })} ))} {body}

); const showBar = !!bulkActions && selectionMode !== "none"; const barOpen = selectedIds.length > 0 && rows.length > 0; return (

{reorderable ? ( r.id)} strategy={verticalListSortingStrategy}> {grid} ) : ( grid )}

{collapse === "stack" && (stackOnly || stackBoth) ? ( ) : null} {loading ? Loading : null} {showBar ? ( !open && clear()} placement={bulkPlacement} position={bulkPlacement === "attached" ? "static" : "absolute"} labels="responsive" > {bulkPlacement === "attached" ? (

{bulkActions({ ids: selectedIds, rows: selectedRows, clear })}

) : ( <> {bulkActions({ ids: selectedIds, rows: selectedRows, clear })} )} ) : null}

{footer ? ( typeof footer === "boolean" ? ( ) : ( footer ) ) : null}

); } function Spacer({ height, cols }: { height: number; cols: number }) { return ( ); } function GridRow({ row, index, reorderable, selectable, single, widthOf, colCount, renderExpanded, onCellEdit, onRowClick, }: { onRowClick?: (row: TData) => void; row: Row; index: number; reorderable: boolean; selectable: boolean; single: boolean; widthOf: (column: Col) => number; colCount: number; renderExpanded?: (row: TData) => React.ReactNode; onCellEdit?: DataGridProps["onCellEdit"]; }) { const sortable = useSortable({ id: row.id, disabled: !reorderable }); const { setNodeRef, transform, transition, isDragging } = sortable; const selected = row.getIsSelected(); const tr = ( { if (onRowClick && event.key === "Enter" && event.target === event.currentTarget) onRowClick(row.original); }} onClick={(event) => { if ((event.target as HTMLElement).closest("button,a,input,[role=checkbox],[role=combobox]")) return; if (onRowClick) return onRowClick(row.original); if (!selectable) return; if (single) row.toggleSelected(true); else row.toggleSelected(); }} className={cn( "group/row border-0 outline-none focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50", (selectable || onRowClick) && "cursor-pointer", isDragging && "relative z-20 bg-background shadow-lg", )} > {row.getVisibleCells().map((cell) => { const column = cell.column; const meta = column.columnDef.meta; const p = pin(column); const utility = UTILITY.has(column.id); return ( ); })} ); const body = reorderable ? ( {tr} ) : ( tr ); return ( <> {body} {row.getIsExpanded() && renderExpanded ? (

{renderExpanded(row.original)}

) : null} ); } function DragHandle() { const ctx = React.useContext(SortableRowContext); return ( ); } function ResizeHandle({ table, header }: { table: GridTable; header: Header }) { const column = header.column; const resizing = column.getIsResizing(); const nudge = (delta: number) => table.setColumnSizing((old) => ({ ...old, [column.id]: Math.min(column.columnDef.maxSize ?? 640, Math.max(column.columnDef.minSize ?? 72, column.getSize() + delta)), })); return (

{ // TanStack's handler reads clientX from mouse or touch events. header.getResizeHandler()(event as unknown as React.MouseEvent); }} onDoubleClick={() => column.resetSize()} onKeyDown={(event) => { if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); const dir = (event.key === "ArrowRight" ? 1 : -1) * (getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1); nudge(dir * (event.shiftKey ? 40 : 10)); } }} className={cn( "group/resize absolute inset-y-0 -end-1.5 z-10 flex w-3 cursor-col-resize touch-none items-stretch justify-center outline-none select-none", )} >

); } /** Default footer: selection summary on the start side, pager on the end side. */ export function DataGridFooter({ table, selectable, paginated, className, }: { table: GridTable; selectable?: boolean; paginated?: boolean; className?: string; }) { const total = table.getCoreRowModel().rows.length; const selected = table.getSelectedRowModel().rows.length; const pages = table.getPageCount(); const page = table.state.pagination.pageIndex + 1; return (

{selectable && selected > 0 ? `${selected} of ${total} selected` : `${total} ${total === 1 ? "row" : "rows"}`} {paginated ? (

Page {page} of {Math.max(pages, 1)}

) : null}

); } function useMobile(): boolean | null { return React.useSyncExternalStore( (notify) => { const mq = window.matchMedia("(max-width: 639px)"); mq.addEventListener("change", notify); return () => mq.removeEventListener("change", notify); }, () => window.matchMedia("(max-width: 639px)").matches, () => null, ); } /** One cell through the column's renderer, wrapped in the in-place editor when the column is editable. */ function CellView({ cell, row, index, utility, onCellEdit, }: { cell: Cell; row: Row; index: number; utility: boolean; onCellEdit?: DataGridProps["onCellEdit"]; }) { const column = cell.column; const meta = column.columnDef.meta; const editable = meta?.editable; const content = ; if (!editable || utility) return content; return ( onCellEdit?.({ rowId: row.id, columnId: column.id, value: next, row: row.original })} > {content} ); } const labelOf = (column: Col) => column.columnDef.meta?.stackLabel ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id); function StackList({ table, rows, ariaLabel, selectionMode, loading, skeletonRows, empty, onRowClick, onCellEdit, className, }: { table: GridTable; rows: Row[]; ariaLabel: string; selectionMode: "none" | "single" | "multiple"; loading: boolean; skeletonRows: number; empty?: React.ReactNode; onRowClick?: (row: TData) => void; onCellEdit?: DataGridProps["onCellEdit"]; className?: string; }) { const sortable = table.getAllLeafColumns().filter((c) => c.getCanSort() && !UTILITY.has(c.id)); const sort = table.state.sorting[0]; return (

{sortable.length || selectionMode === "multiple" ? (

{selectionMode === "multiple" ? ( table.toggleAllRowsSelected(!!on)} /> ) : null} {sortable.length ? (

) : null}

) : null} {loading ? (

) : rows.length === 0 ? (

{empty ?? ( No results There is nothing to show yet. )}

) : (

))}

)}

); } function StackCard({ row, index, selectionMode, onRowClick, onCellEdit, }: { row: Row; index: number; selectionMode: "none" | "single" | "multiple"; onRowClick?: (row: TData) => void; onCellEdit?: DataGridProps["onCellEdit"]; }) { const cells = row.getVisibleCells().filter((c) => !UTILITY.has(c.column.id)); const stackOf = (c: (typeof cells)[number]) => c.column.columnDef.meta?.stack; const actions = cells.find((c) => stackOf(c) === "actions" || (c.column.id === "actions" && !stackOf(c))); const rest = cells.filter((c) => c !== actions && stackOf(c) !== "hidden"); const title = rest.find((c) => stackOf(c) === "title") ?? rest.find((c) => !stackOf(c)) ?? rest[0]; const subtitle = rest.find((c) => stackOf(c) === "subtitle") ?? rest.find((c) => c !== title && !stackOf(c)); const pairs = rest.filter((c) => c !== title && c !== subtitle); const selected = row.getIsSelected(); const selectable = selectionMode !== "none"; const view = (c: (typeof cells)[number]) => ( ); return (

{ if (onRowClick || !selectable || (event.target as HTMLElement).closest("button,a,input,[role=checkbox],[role=combobox]")) return; if (selectionMode === "single") row.toggleSelected(true); else row.toggleSelected(); }} className={cn( "relative flex gap-3 p-3 text-sm transition-colors duration-150 ease-out data-[state=selected]:bg-muted motion-reduce:transition-none", (onRowClick || selectable) && "active:bg-muted/60", )} > {selectable ? (

row.toggleSelected(!!on)} />

) : null}

{title ? ( onRowClick ? ( ) : (

{view(title)}

) ) : null} {subtitle ?

{view(subtitle)}

: null}

{actions ?

{view(actions)}

: null}

{pairs.length ? (

{labelOf(c.column)}: {view(c)}

) : null}

); } 31:T153c,"use client"; import * as React from "react"; import { cva } from "class-variance-authority"; import { Avatar, AvatarGradient } from "@/components/ui/avatar"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; const badge = cva( "inline-flex h-5 items-center gap-1.5 rounded-md px-1.5 text-xs font-medium whitespace-nowrap before:size-1.5 before:rounded-full before:bg-current", { variants: { tone: { success: "bg-success/12 text-success", warning: "bg-warning/14 text-warning", error: "bg-error/12 text-error", info: "bg-info/12 text-info", neutral: "bg-muted text-muted-foreground", }, }, defaultVariants: { tone: "neutral" }, }, ); export type DataGridBadgeTone = "success" | "warning" | "error" | "info" | "neutral"; /** Status chip with a leading dot. Hues come from the status tokens. */ export function DataGridBadge({ tone, className, ...props }: React.ComponentProps<"span"> & { tone?: DataGridBadgeTone }) { return ; } /** Name over email with a gradient avatar. */ export function DataGridPerson({ name, detail, avatar = false, }: { name: string; detail?: string; avatar?: boolean; }) { return (

{avatar ? ( {name .split(" ") .map((p) => p[0]) .join("") .slice(0, 2)} ) : null}

{name} {detail ? {detail} : null}

); } export type EditableConfig = { type?: "text" | "number"; /** Return a message to block the commit and show it beside the field. */ validate?: (value: string) => string | undefined; }; /** Double-click, Enter or F2 to edit. Enter commits, Escape cancels, blur commits. */ export function DataGridEditableCell({ value, config, label, onCommit, align = "start", children, }: { value: string; config: EditableConfig; label: string; onCommit: (value: string) => void; align?: "start" | "center" | "end"; children: React.ReactNode; }) { const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(value); const [error, setError] = React.useState(); const errorId = React.useId(); const trigger = React.useRef(null); const start = () => { setDraft(value); setError(undefined); setEditing(true); }; const stop = (refocus: boolean) => { setEditing(false); setError(undefined); if (refocus) requestAnimationFrame(() => trigger.current?.focus()); }; const commit = (refocus: boolean) => { const message = config.validate?.(draft) ?? (config.type === "number" && draft.trim() !== "" && Number.isNaN(Number(draft)) ? "Enter a number" : undefined); if (message) { setError(message); return false; } if (draft !== value) onCommit(draft); stop(refocus); return true; }; if (!editing) { return ( ); } return (

{ setDraft(event.target.value); if (error) setError(undefined); }} onFocus={(event) => event.currentTarget.select()} onKeyDown={(event) => { event.stopPropagation(); if (event.key === "Enter") { event.preventDefault(); commit(true); } else if (event.key === "Escape") { event.preventDefault(); stop(true); } }} onBlur={() => { if (!commit(false)) stop(false); }} className={cn("h-7 px-1.5 text-sm tabular-nums", align === "end" && "text-end")} /> {error ? ( {error} ) : null}

); } 32:T6e4,"use client"; import * as React from "react"; /** * Fixed-height row windowing. Returns the slice to render plus spacer heights. * Not used with expanded rows (variable heights); the grid turns it off then. */ export function useWindow({ enabled, count, rowHeight, headerHeight, overscan = 8, }: { enabled: boolean; count: number; rowHeight: number; headerHeight: number; overscan?: number; }) { const [el, setEl] = React.useState(null); const [scrollTop, setScrollTop] = React.useState(0); const [size, setSize] = React.useState({ width: 0, height: 480 }); const frame = React.useRef(0); React.useEffect(() => { if (!el) return; const read = () => setSize({ width: el.clientWidth, height: el.clientHeight }); read(); const ro = new ResizeObserver(read); ro.observe(el); return () => ro.disconnect(); }, [el]); const onScroll = React.useCallback((event: React.UIEvent) => { if (!enabled) return; const target = event.currentTarget; cancelAnimationFrame(frame.current); frame.current = requestAnimationFrame(() => setScrollTop(target.scrollTop)); }, [enabled]); React.useEffect(() => () => cancelAnimationFrame(frame.current), []); if (!enabled) return { ref: setEl, onScroll, start: 0, end: count, padTop: 0, padBottom: 0, width: size.width }; const first = Math.max(0, Math.floor((scrollTop - headerHeight) / rowHeight) - overscan); const last = Math.min(count, Math.ceil((scrollTop + size.height - headerHeight) / rowHeight) + overscan); return { ref: setEl, onScroll, start: first, end: last, padTop: first * rowHeight, padBottom: Math.max(0, (count - last) * rowHeight), width: size.width, }; } 33:T2a5b,"use client"; import * as React from "react"; import { Toolbar } from "@base-ui/react/toolbar"; import { IconX } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; type Placement = "floating" | "attached"; type Orientation = "horizontal" | "vertical"; type Labels = "responsive" | "visible" | "hidden"; type Position = "absolute" | "fixed" | "static"; type Ctx = { orientation: Orientation; placement: Placement; labels: Labels; onOpenChange?: (open: boolean) => void; }; const ActionBarContext = React.createContext({ orientation: "horizontal", placement: "floating", labels: "responsive", }); const bar = cva( [ "z-40 flex items-center gap-1 bg-popover text-sm text-popover-foreground outline-none", // asymmetric motion: arrives on --ease-out, leaves faster on --ease-exit "transition-[opacity,translate] motion-reduce:transition-none", "data-[state=open]:opacity-100 data-[state=open]:translate-x-0 data-[state=open]:translate-y-0", "data-[state=open]:duration-200 data-[state=open]:ease-[cubic-bezier(0.23,1,0.32,1)]", "data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0", "data-[state=closed]:duration-150 data-[state=closed]:ease-(--ease-exit)", ], { variants: { placement: { floating: "rounded-xl border border-border p-1 shadow-lg", attached: "border-border", }, orientation: { horizontal: "flex-row", vertical: "flex-col items-stretch", }, position: { absolute: "absolute", fixed: "fixed", static: "relative", }, }, compoundVariants: [ // floating, horizontal: centered at the bottom, rises in { placement: "floating", orientation: "horizontal", position: ["absolute", "fixed"], class: "inset-x-0 bottom-4 mx-auto w-fit starting:translate-y-3 starting:opacity-0 data-[state=closed]:translate-y-3" }, // floating, vertical: hugs the inline end, slides in from it { placement: "floating", orientation: "vertical", position: ["absolute", "fixed"], class: "inset-y-0 end-4 my-auto h-fit starting:translate-x-3 starting:opacity-0 data-[state=closed]:translate-x-3 rtl:starting:-translate-x-3 rtl:data-[state=closed]:-translate-x-3" }, // attached, horizontal: a full-width strip on the container's bottom edge { placement: "attached", orientation: "horizontal", position: ["absolute", "fixed"], class: "inset-x-0 bottom-0 justify-between border-t px-3 py-2 starting:translate-y-full starting:opacity-0 data-[state=closed]:translate-y-full" }, // attached, vertical: a full-height rail on the inline end { placement: "attached", orientation: "vertical", position: ["absolute", "fixed"], class: "inset-y-0 end-0 border-s p-2 starting:translate-x-full starting:opacity-0 data-[state=closed]:translate-x-full rtl:starting:-translate-x-full rtl:data-[state=closed]:-translate-x-full" }, // static: sits in the flow { placement: "floating", position: "static", class: "w-fit starting:opacity-0 starting:translate-y-2 data-[state=closed]:translate-y-2" }, { placement: "attached", orientation: "horizontal", position: "static", class: "justify-between border-t px-3 py-2 starting:opacity-0 data-[state=closed]:opacity-0" }, { placement: "attached", orientation: "vertical", position: "static", class: "border-s p-2 starting:opacity-0" }, ], defaultVariants: { placement: "floating", orientation: "horizontal", position: "absolute" }, }, ); export type ActionBarProps = Omit, "orientation"> & { /** Controlled visibility. The bar mounts, animates in, animates out, then unmounts. */ open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** `floating` is a rounded pill over content, `attached` a strip fused to the container edge. */ placement?: Placement; orientation?: Orientation; /** `responsive` collapses labels to icons (with tooltips) under 640px. */ labels?: Labels; /** `absolute` anchors to the nearest positioned ancestor, `fixed` to the viewport, `static` stays in flow. */ position?: Position; "aria-label"?: string; }; const EXIT_MS = 160; export function ActionBar({ open: openProp, defaultOpen = false, onOpenChange, placement = "floating", orientation = "horizontal", labels = "responsive", position = "absolute", className, children, onKeyDown, "aria-label": ariaLabel = "Selection actions", ...props }: ActionBarProps) { const [uncontrolled, setUncontrolled] = React.useState(defaultOpen); const open = openProp ?? uncontrolled; const [mounted, setMounted] = React.useState(open); // Mount synchronously on open; unmount after the exit transition. if (open && !mounted) setMounted(true); React.useEffect(() => { if (open || !mounted) return; const t = window.setTimeout(() => setMounted(false), EXIT_MS); return () => window.clearTimeout(t); }, [open, mounted]); const setOpen = React.useCallback( (next: boolean) => { if (openProp === undefined) setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange], ); const ctx = React.useMemo( () => ({ orientation, placement, labels, onOpenChange: setOpen }), [orientation, placement, labels, setOpen], ); if (!mounted) return null; return ( { onKeyDown?.(event); if (event.key === "Escape" && !event.defaultPrevented) setOpen(false); }} className={cn(bar({ placement, orientation, position }), className)} {...props} > {children} ); } /** Live count: "3 selected". Announced politely as it changes. */ export function ActionBarSelection({ count, label = "selected", compact = false, className, ...props }: Omit, "children"> & { count: number; label?: string; /** Show the bare count; the label stays in the accessible name. */ compact?: boolean; }) { return ( {count} {label} ); } export function ActionBarGroup({ className, ...props }: React.ComponentProps) { const { orientation } = React.useContext(ActionBarContext); return ( ); } export function ActionBarSeparator({ className, ...props }: React.ComponentProps) { const { orientation } = React.useContext(ActionBarContext); return ( ); } export type ActionBarActionProps = Omit, "children" | "variant" | "size" | "render"> & { /** Accessible name, visible label and tooltip text. */ label: string; icon?: React.ReactNode; /** Shown in the tooltip as a keyboard hint. */ shortcut?: string; variant?: "default" | "ghost" | "destructive" | "outline" | "secondary"; }; export function ActionBarAction({ label, icon, shortcut, variant = "ghost", disabled, className, ...props }: ActionBarActionProps) { const { labels, orientation } = React.useContext(ActionBarContext); const showLabel = labels !== "hidden"; const collapse = labels === "responsive"; const iconOnly = !showLabel; const tooltip = labels !== "visible" || shortcut; const button = ( } > {icon} {showLabel ? {label} : null} ); if (!tooltip) return button; return ( {label} {shortcut ? {shortcut} : null} ); } /** Dismiss button; Escape does the same from anywhere inside the bar. */ export function ActionBarClose({ label = "Clear selection", className, ...props }: Omit & { label?: string }) { const { onOpenChange } = React.useContext(ActionBarContext); return ( onOpenChange?.(false)} className={cn("text-muted-foreground", className)} {...props} /> } > } /> {label} Esc ); } 34:T1402,import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Avatar, AvatarFallback, AvatarGradient, AvatarGroup, AvatarGroupCount, AvatarImage } from "@/components/ui/avatar"; import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty"; import { cn } from "@/lib/utils"; const emptyState = cva("relative isolate", { variants: { variant: { /** Quiet, no chrome: sits on the page. */ default: "", /** Title and one line only, tighter. */ minimal: "gap-3 p-4", /** Dashed hairline that reads as a drop target. */ outline: "border border-dashed border-border", /** Dotted field that fades out at the edges. */ background: [ "overflow-hidden rounded-xl border border-border bg-card", "before:pointer-events-none before:absolute before:inset-0 before:-z-10", "before:bg-[radial-gradient(color-mix(in_oklch,var(--foreground)_28%,transparent)_1px,transparent_1px)] before:bg-size-[16px_16px]", "before:mask-[radial-gradient(ellipse_at_center,transparent_18%,black_85%)]", ], }, size: { sm: "max-w-xs gap-4 p-4 [&_[data-slot=empty-title]]:text-sm [&_[data-slot=empty-description]]:text-[13px]", default: "", lg: "max-w-lg gap-8 p-10 [&_[data-slot=empty-title]]:text-lg [&_[data-slot=empty-icon][data-variant=icon]]:size-12 [&_[data-slot=empty-icon][data-variant=icon]_svg:not([class*='size-'])]:size-7", }, fullHeight: { true: "min-h-[inherit] h-full flex-auto", false: "", }, }, defaultVariants: { variant: "default", size: "default", fullHeight: false }, }); export type EmptyStateProps = Omit, "children"> & VariantProps & { children?: React.ReactNode; }; /** Designed empty surface. Compose with the parts below. */ export function EmptyState({ className, variant, size, fullHeight, ...props }: EmptyStateProps) { return ( ); } export function EmptyStateHeader(props: React.ComponentProps) { return ; } export function EmptyStateMedia({ variant = "icon", ...props }: React.ComponentProps) { return ; } export function EmptyStateTitle(props: React.ComponentProps) { return ; } export function EmptyStateDescription(props: React.ComponentProps) { return ; } /** Row of actions under the copy. */ export function EmptyStateActions({ className, ...props }: React.ComponentProps) { return ( ); } export type EmptyStatePerson = { name: string; image?: string }; const initials = (name: string) => name .split(/\s+/) .map((p) => p[0]) .join("") .slice(0, 2) .toUpperCase(); /** One avatar as the lead media. */ export function EmptyStateAvatar({ person, size = "lg", className, }: { person: EmptyStatePerson; size?: "sm" | "default" | "lg"; className?: string; }) { return ( {person.image ? : null} {initials(person.name)} ); } /** Overlapping avatars as the lead media; extra people collapse into a count. */ export function EmptyStateAvatarGroup({ people, max = 3, className, }: { people: EmptyStatePerson[]; max?: number; className?: string; }) { const shown = people.slice(0, max); const rest = people.length - shown.length; return ( [data-slot=avatar-group-count]]:ring-2 [&>[data-slot=avatar-group-count]]:ring-background", className)}> {shown.map((p) => ( {p.image ? : null} {initials(p.name)} ))} {rest > 0 ? +{rest} : null} ); } 35:T3ba7,