4e: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/1o6_421saitt-.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"] 4f: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/1o6_421saitt-.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"] 50:T5fe8,"use client" import * as React from "react" import { type ColumnDef, type ColumnSizingState, type RowSelectionState, type SortingState, flexRender, getCoreRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table" import { useVirtualizer, useWindowVirtualizer } from "@tanstack/react-virtual" import { ChevronDown } from "lucide-react" import { Checkbox } from "@/components/ui/checkbox" import { cn } from "@/lib/utils" type Align = "left" | "center" | "right" type SortDirection = "asc" | "desc" type ColumnType = | "text" | "longText" | "shortText" | "number" | "currency" | "date" | "status" | "actions" export type EmsteinUITableColumn = { key: Extract | string label: string type?: ColumnType grow?: boolean | number width?: number minWidth?: number sortable?: boolean resizable?: boolean align?: Align render?: (row: TData) => React.ReactNode footer?: | React.ReactNode | ((context: { data: TData[]; rows: TData[] }) => React.ReactNode) className?: string footerClassName?: string } export type EmsteinUITableSelection = { selectedRows?: string[] onSelectedRowsChange?: (rows: string[]) => void defaultSelectedRows?: string[] } export type EmsteinUITableProps = { data: TData[] columns: EmsteinUITableColumn[] getRowId?: (row: TData, index: number) => string selection?: EmsteinUITableSelection resizable?: boolean sortable?: boolean showUnsortedSortIcon?: boolean initialSort?: { key: string; direction?: SortDirection } | false scrollMode?: "page" | "table" tableHeight?: number rowHeight?: number emptyText?: string caption?: React.ReactNode className?: string containerClassName?: string tableClassName?: string headerClassName?: string bodyClassName?: string footerClassName?: string captionClassName?: string } export type TablePrimitiveProps = React.ComponentProps<"table"> & { containerClassName?: string } const alignClass: Record = { left: "justify-start text-left", center: "justify-center text-center", right: "justify-end text-right", } const columnTypeSizes: Record< ColumnType, { width: number; minWidth: number; grow: number } > = { text: { width: 180, minWidth: 120, grow: 1 }, longText: { width: 280, minWidth: 180, grow: 2 }, shortText: { width: 140, minWidth: 96, grow: 0.5 }, number: { width: 104, minWidth: 80, grow: 0 }, currency: { width: 124, minWidth: 96, grow: 0 }, date: { width: 132, minWidth: 112, grow: 0 }, status: { width: 128, minWidth: 104, grow: 0 }, actions: { width: 72, minWidth: 56, grow: 0 }, } function getColumnSizes(column: EmsteinUITableColumn) { const preset = columnTypeSizes[column.type ?? "text"] return { width: column.width ?? preset.width, minWidth: column.minWidth ?? preset.minWidth, } } function getColumnGrow(column: EmsteinUITableColumn) { if (typeof column.grow === "number") { return Math.max(0, column.grow) } if (column.grow === true) { return 1 } if (column.grow === false) { return 0 } return columnTypeSizes[column.type ?? "text"].grow } function getValue(row: TData, key: string) { return (row as Record)[key] } function toRowSelection(ids: string[]): RowSelectionState { return ids.reduce((state, id) => { state[id] = true return state }, {}) } function getNextValue( updater: TValue | ((old: TValue) => TValue), old: TValue ) { return typeof updater === "function" ? (updater as (value: TValue) => TValue)(old) : updater } export function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { return ( ) } export function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { return ( ) } export function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { return ( tr]:last:border-b-0", className )} {...props} /> ) } export function TableRow({ className, ...props }: React.ComponentProps<"tr">) { return ( ) } export function TableHead({ className, ...props }: React.ComponentProps<"th">) { return ( ) } export function TableCell({ className, ...props }: React.ComponentProps<"td">) { return ( ) } export function TableCaption({ className, ...props }: React.ComponentProps<"caption">) { return ( ) } function PrimitiveTable({ className, containerClassName, ...props }: TablePrimitiveProps) { return (

) } function DataTable({ data, columns, getRowId, selection, resizable = true, sortable = true, showUnsortedSortIcon = false, initialSort, scrollMode = "page", tableHeight = 560, rowHeight = 56, emptyText = "No results.", caption, className, containerClassName, tableClassName, headerClassName, bodyClassName, footerClassName, captionClassName, }: EmsteinUITableProps) { const isSelectionControlled = selection?.selectedRows !== undefined const [internalSelectedRows, setInternalSelectedRows] = React.useState( selection?.defaultSelectedRows ?? [] ) const selectedRows = selection?.selectedRows ?? internalSelectedRows const rowSelection = React.useMemo( () => toRowSelection(selectedRows), [selectedRows] ) const hasSelection = selection !== undefined const initialSorting = React.useMemo(() => { if (!sortable || initialSort === false) { return [] } if (initialSort?.key) { return [{ id: initialSort.key, desc: initialSort.direction === "desc" }] } const firstSortableColumn = columns.find((column) => column.sortable !== false) return firstSortableColumn ? [{ id: String(firstSortableColumn.key), desc: false }] : [] }, [columns, initialSort, sortable]) const [sorting, setSorting] = React.useState(initialSorting) const [columnSizing, setColumnSizing] = React.useState({}) const tableColumns = React.useMemo[]>( () => [ ...(hasSelection ? [ { id: "_select", size: 44, minSize: 44, maxSize: 44, enableSorting: false, enableResizing: false, header: ({ table }) => ( table.toggleAllRowsSelected(Boolean(value)) } /> ), cell: ({ row }) => ( row.toggleSelected(Boolean(value))} /> ), } satisfies ColumnDef, ] : []), ...columns.map( (column): ColumnDef => { const sizes = getColumnSizes(column) return { id: String(column.key), accessorFn: (row) => getValue(row, String(column.key)), size: sizes.width, minSize: sizes.minWidth, enableSorting: sortable && column.sortable !== false, enableResizing: resizable && column.resizable !== false, header: column.label, cell: ({ row }) => { const value = getValue(row.original, String(column.key)) return column.render ? column.render(row.original) : String(value ?? "") }, meta: { align: column.align ?? "left", className: column.className, grow: getColumnGrow(column), }, } } ), ], [columns, hasSelection, resizable, sortable] ) const table = useReactTable({ data, columns: tableColumns, state: { sorting, columnSizing, rowSelection, }, defaultColumn: { minSize: 96, size: 160, }, getRowId: (row, index) => getRowId?.(row, index) ?? String(index), enableRowSelection: hasSelection, enableSortingRemoval: false, columnResizeMode: "onChange", onSortingChange: setSorting, onColumnSizingChange: setColumnSizing, onRowSelectionChange: (updater) => { const next = getNextValue(updater, rowSelection) const ids = Object.keys(next).filter((id) => next[id]) if (!isSelectionControlled) { setInternalSelectedRows(ids) } selection?.onSelectedRowsChange?.(ids) }, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), }) const rows = table.getRowModel().rows const renderedRows = React.useMemo( () => rows.map((row) => row.original), [rows] ) const tableRootRef = React.useRef(null) const tableScrollRef = React.useRef(null) const [scrollMargin, setScrollMargin] = React.useState(0) const [containerWidth, setContainerWidth] = React.useState(0) React.useLayoutEffect(() => { if (scrollMode !== "page" || !tableRootRef.current) { return } const measure = () => setScrollMargin( tableRootRef.current ? tableRootRef.current.getBoundingClientRect().top + window.scrollY : 0 ) measure() window.addEventListener("resize", measure) return () => window.removeEventListener("resize", measure) }, [scrollMode]) React.useLayoutEffect(() => { if (!tableRootRef.current) { return } const root = tableRootRef.current const updateWidth = () => setContainerWidth(root.clientWidth) const observer = new ResizeObserver(updateWidth) updateWidth() observer.observe(root) return () => observer.disconnect() }, []) const windowVirtualizer = useWindowVirtualizer({ count: rows.length, estimateSize: () => rowHeight, overscan: 12, scrollMargin, enabled: scrollMode === "page", initialRect: { width: 1200, height: 800 }, }) const tableVirtualizer = useVirtualizer({ count: rows.length, estimateSize: () => rowHeight, overscan: 12, getScrollElement: () => tableScrollRef.current, enabled: scrollMode === "table", }) const virtualizer = scrollMode === "page" ? windowVirtualizer : tableVirtualizer const virtualRows = virtualizer.getVirtualItems() const totalSize = virtualizer.getTotalSize() const leafHeaders = table.getFlatHeaders() const visibleLeafHeaders = table.getVisibleLeafColumns() const rawTableWidth = table.getTotalSize() const tableWidth = Math.max(rawTableWidth, containerWidth) const extraWidth = Math.max(0, tableWidth - rawTableWidth) const growByColumn = React.useMemo(() => { return Object.fromEntries( leafHeaders.map((header) => { const meta = header.column.columnDef.meta as | { grow?: number } | undefined return [header.column.id, meta?.grow ?? 0] }) ) }, [leafHeaders]) const totalGrow = React.useMemo( () => Object.values(growByColumn).reduce((total, grow) => total + grow, 0), [growByColumn] ) const getColumnWidth = React.useCallback( (columnId: string, size: number) => { if (!extraWidth || !totalGrow) { return size } return size + extraWidth * ((growByColumn[columnId] ?? 0) / totalGrow) }, [extraWidth, growByColumn, totalGrow] ) const hasFooter = columns.some((column) => column.footer !== undefined) function resizeWithNeighbor( headerIndex: number, event: React.PointerEvent ) { const header = leafHeaders[headerIndex] const nextHeader = leafHeaders[headerIndex + 1] if (!header?.column.getCanResize() || !nextHeader) { return } event.preventDefault() event.currentTarget.setPointerCapture(event.pointerId) const startX = event.clientX const startSize = getColumnWidth(header.column.id, header.column.getSize()) const nextStartSize = getColumnWidth( nextHeader.column.id, nextHeader.column.getSize() ) const minSize = header.column.columnDef.minSize ?? 96 const nextMinSize = nextHeader.column.columnDef.minSize ?? 96 const onPointerMove = (moveEvent: PointerEvent) => { const delta = moveEvent.clientX - startX const clampedDelta = Math.min( Math.max(delta, minSize - startSize), nextStartSize - nextMinSize ) setColumnSizing((current) => ({ ...current, [header.column.id]: startSize + clampedDelta, [nextHeader.column.id]: nextStartSize - clampedDelta, })) } const onPointerUp = () => { window.removeEventListener("pointermove", onPointerMove) window.removeEventListener("pointerup", onPointerUp) } window.addEventListener("pointermove", onPointerMove) window.addEventListener("pointerup", onPointerUp) } return (

{caption ? ( {caption} ) : null} {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header, headerIndex) => { const canSort = header.column.getCanSort() const sortState = header.column.getIsSorted() const meta = header.column.columnDef.meta as | { align?: Align } | undefined const align = meta?.align ?? "left" const showSortIcon = sortState || (showUnsortedSortIcon && canSort) const renderedHeader = flexRender( header.column.columnDef.header, header.getContext() ) return ( {canSort ? (

) } export function Table( props: EmsteinUITableProps | TablePrimitiveProps ) { if ("data" in props && "columns" in props) { return } return } 4d:["$","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","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","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":"@tanstack/react-table"}]]}]}],["$","li","@tanstack/react-virtual",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","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":"@tanstack/react-virtual"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@emstein-ui","registryDependencies":["checkbox"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/emstein-ui/table.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]