entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/data/DataTable/DataTable.css.js

@@ -0,0 +1,25 @@
+import './../../../assets/src/components/data/DataTable/DataTable.css.ts.vanilla-CmRgtjIW.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var bodyStyle = 'DataTable_bodyStyle__v4olr8o';
+var cellRecipe = createRuntimeFn({defaultClassName:'DataTable_cellRecipe__v4olr8v',variantClassNames:{align:{left:'DataTable_cellRecipe_align_left__v4olr8w',center:'DataTable_cellRecipe_align_center__v4olr8x',right:'DataTable_cellRecipe_align_right__v4olr8y'},sticky:{true:'DataTable_cellRecipe_sticky_true__v4olr8z'},selectColumn:{true:'DataTable_cellRecipe_selectColumn_true__v4olr810'}},defaultVariants:{},compoundVariants:[]});
+var emptyStateStyle = 'DataTable_emptyStateStyle__v4olr811';
+var gridTemplateColumnsVar = 'var(--gridTemplateColumnsVar__v4olr82)';
+var headerCellInnerStyle = 'DataTable_headerCellInnerStyle__v4olr8k';
+var headerCellRecipe = createRuntimeFn({defaultClassName:'DataTable_headerCellRecipe__v4olr8d',variantClassNames:{align:{left:'DataTable_headerCellRecipe_align_left__v4olr8e',center:'DataTable_headerCellRecipe_align_center__v4olr8f',right:'DataTable_headerCellRecipe_align_right__v4olr8g'},sortable:{true:'DataTable_headerCellRecipe_sortable_true__v4olr8h'},sticky:{true:'DataTable_headerCellRecipe_sticky_true__v4olr8i'},selectColumn:{true:'DataTable_headerCellRecipe_selectColumn_true__v4olr8j'}},defaultVariants:{},compoundVariants:[]});
+var headerStyle = createRuntimeFn({defaultClassName:'DataTable_headerStyle__v4olr8b',variantClassNames:{sticky:{true:'DataTable_headerStyle_sticky_true__v4olr8c'}},defaultVariants:{},compoundVariants:[]});
+var innerWrapperStyle = 'DataTable_innerWrapperStyle__v4olr8a';
+var resizeHandleStyle = 'DataTable_resizeHandleStyle__v4olr8n';
+var rootRecipe = createRuntimeFn({defaultClassName:'DataTable_rootRecipe__v4olr85',variantClassNames:{density:{comfortable:'DataTable_rootRecipe_density_comfortable__v4olr86',compact:'DataTable_rootRecipe_density_compact__v4olr87',dense:'DataTable_rootRecipe_density_dense__v4olr88'}},defaultVariants:{density:'comfortable'},compoundVariants:[]});
+var rowRecipe = createRuntimeFn({defaultClassName:'DataTable_rowRecipe__v4olr8q',variantClassNames:{virtualized:{true:'DataTable_rowRecipe_virtualized_true__v4olr8r'},interactive:{true:'DataTable_rowRecipe_interactive_true__v4olr8s'},selected:{true:'DataTable_rowRecipe_selected_true__v4olr8t'},active:{true:'DataTable_rowRecipe_active_true__v4olr8u'}},defaultVariants:{},compoundVariants:[]});
+var scrollContainerStyle = 'DataTable_scrollContainerStyle__v4olr89';
+var skeletonBarStyle = 'DataTable_skeletonBarStyle__v4olr814';
+var skeletonCellStyle = 'DataTable_skeletonCellStyle__v4olr813';
+var skeletonRowStyle = 'DataTable_skeletonRowStyle__v4olr812';
+var sortIndicatorRecipe = createRuntimeFn({defaultClassName:'DataTable_sortIndicatorRecipe__v4olr8l',variantClassNames:{active:{true:'DataTable_sortIndicatorRecipe_active_true__v4olr8m'}},defaultVariants:{},compoundVariants:[]});
+var tableMinWidthVar = 'var(--tableMinWidthVar__v4olr83)';
+var totalHeightVar = 'var(--totalHeightVar__v4olr80)';
+var virtualBodyStyle = 'DataTable_virtualBodyStyle__v4olr8p';
+
+export { bodyStyle, cellRecipe, emptyStateStyle, gridTemplateColumnsVar, headerCellInnerStyle, headerCellRecipe, headerStyle, innerWrapperStyle, resizeHandleStyle, rootRecipe, rowRecipe, scrollContainerStyle, skeletonBarStyle, skeletonCellStyle, skeletonRowStyle, sortIndicatorRecipe, tableMinWidthVar, totalHeightVar, virtualBodyStyle };
+//# sourceMappingURL=DataTable.css.js.map

package/dist/esm/components/data/DataTable/DataTable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/data/DataTable/DataTable.js

@@ -0,0 +1,519 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { SortIcon } from '../../Icons/SortIcon.js';
+import { Checkbox } from '../../primitives/Checkbox/Checkbox.js';
+import '../../primitives/Checkbox/CheckboxGroup.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.js';
+import { cx } from '../../../utils/cx.js';
+import { tableMinWidthVar, gridTemplateColumnsVar, scrollContainerStyle, innerWrapperStyle, bodyStyle, emptyStateStyle, virtualBodyStyle, totalHeightVar, rootRecipe, headerCellRecipe, headerStyle, skeletonRowStyle, skeletonCellStyle, skeletonBarStyle, cellRecipe, rowRecipe, headerCellInnerStyle, resizeHandleStyle, sortIndicatorRecipe } from './DataTable.css.js';
+
+const DENSITY_ROW_HEIGHT = {
+    comfortable: 40,
+    compact: 32,
+    dense: 24,
+};
+const VIRTUALIZATION_THRESHOLD_DEFAULT = 100;
+const SELECT_COLUMN_WIDTH = 40;
+function getRowKey(rowKey, row, rowIndex) {
+    if (typeof rowKey === 'function')
+        return rowKey(row, rowIndex);
+    const value = row[rowKey];
+    return typeof value === 'string' ? value : String(value);
+}
+function readCellValue(column, row, rowIndex) {
+    const accessor = column.accessor;
+    if (typeof accessor === 'function')
+        return accessor(row, rowIndex);
+    if (typeof accessor === 'string')
+        return row[accessor];
+    return row[column.id];
+}
+function defaultCompare(a, b) {
+    if (a === b)
+        return 0;
+    if (a === null || a === undefined)
+        return 1;
+    if (b === null || b === undefined)
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() - b.getTime();
+    if (typeof a === 'boolean' && typeof b === 'boolean')
+        return a === b ? 0 : a ? 1 : -1;
+    const sa = typeof a === 'string' ? a : JSON.stringify(a);
+    const sb = typeof b === 'string' ? b : JSON.stringify(b);
+    return sa.localeCompare(sb);
+}
+function nextSortDirection(current) {
+    if (current === null)
+        return 'asc';
+    if (current === 'asc')
+        return 'desc';
+    return null;
+}
+function resolveDimension(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === 'number' ? `${value}px` : value;
+}
+function getColumnTrack(column, override) {
+    if (override !== undefined) {
+        return { templateValue: `${override}px`, minPx: override };
+    }
+    if (column.width !== undefined) {
+        const resolved = resolveDimension(column.width) ?? '1fr';
+        const minPx = typeof column.width === 'number' ? column.width : 0;
+        return { templateValue: resolved, minPx };
+    }
+    const minWidth = column.minWidth ?? 80;
+    return { templateValue: `minmax(${minWidth}px, 1fr)`, minPx: minWidth };
+}
+/**
+ * Data-driven table with sortable columns, row selection, sticky header,
+ * optional sticky first column, optional column resizing, and optional
+ * row virtualization (auto-enabled above 100 rows).
+ *
+ * Uses a CSS grid layout under `role="grid"` so columns line up across the
+ * sticky header and individual virtualized rows without depending on real
+ * `<table>` semantics.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   rows={users}
+ *   rowKey="id"
+ *   columns={[
+ *     { id: 'name', header: 'Name', accessor: 'name', sortable: true },
+ *     { id: 'role', header: 'Role', accessor: 'role' },
+ *   ]}
+ *   selectionMode="multiple"
+ *   onSelectionChange={setSelected}
+ * />
+ * ```
+ */
+function DataTableInner(props) {
+    const { rows, columns, rowKey, density = 'comfortable', stickyHeader = true, sort, defaultSort, onSortChange, manualSort = false, selectionMode = false, selection, defaultSelection, onSelectionChange, isRowSelectable, onRowClick, onRowActivate, renderRow, emptyState, loading = false, loadingRowCount = 5, virtualized = 'auto', virtualizationThreshold = VIRTUALIZATION_THRESHOLD_DEFAULT, estimatedRowHeight, overscan = 8, height = 480, maxHeight, resizableColumns = false, onColumnResize, className, style, testId, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest } = props;
+    const [sortState, setSortState] = useControlledState({
+        value: sort ?? undefined,
+        defaultValue: defaultSort ?? undefined,
+        onChange: onSortChange,
+        fallback: { columnId: null, direction: null },
+    });
+    const [selectionState, setSelectionState] = useControlledState({
+        value: selection,
+        defaultValue: defaultSelection,
+        onChange: onSelectionChange,
+        fallback: [],
+    });
+    const [columnWidths, setColumnWidths] = useState({});
+    const [activeRowIndex, setActiveRowIndex] = useState(null);
+    const showSelectColumn = selectionMode === 'multiple';
+    const selectedSet = useMemo(() => new Set(selectionState), [selectionState]);
+    const sortedRows = useMemo(() => {
+        if (manualSort)
+            return rows;
+        const { columnId, direction } = sortState;
+        if (!columnId || direction === null)
+            return rows;
+        const column = columns.find(c => c.id === columnId);
+        if (!column)
+            return rows;
+        const indexed = rows.map((row, idx) => ({ row, idx }));
+        indexed.sort((a, b) => {
+            const valueA = readCellValue(column, a.row, a.idx);
+            const valueB = readCellValue(column, b.row, b.idx);
+            const cmp = column.sortComparator
+                ? column.sortComparator(valueA, valueB, a.row, b.row)
+                : defaultCompare(valueA, valueB);
+            return direction === 'asc' ? cmp : -cmp;
+        });
+        return indexed.map(item => item.row);
+    }, [rows, sortState, columns, manualSort]);
+    const rowKeys = useMemo(() => sortedRows.map((row, idx) => getRowKey(rowKey, row, idx)), [sortedRows, rowKey]);
+    const selectableIndexes = useMemo(() => {
+        if (!selectionMode)
+            return [];
+        if (!isRowSelectable)
+            return sortedRows.map((_, idx) => idx);
+        const result = [];
+        sortedRows.forEach((row, idx) => {
+            if (isRowSelectable(row, idx))
+                result.push(idx);
+        });
+        return result;
+    }, [sortedRows, isRowSelectable, selectionMode]);
+    const allSelectableSelected = selectableIndexes.length > 0 &&
+        selectableIndexes.every(idx => {
+            const k = rowKeys[idx];
+            return k !== undefined && selectedSet.has(k);
+        });
+    const someSelectableSelected = !allSelectableSelected &&
+        selectableIndexes.some(idx => {
+            const k = rowKeys[idx];
+            return k !== undefined && selectedSet.has(k);
+        });
+    const handleSortClick = useCallback((column) => {
+        if (!column.sortable)
+            return;
+        setSortState(prev => {
+            if (prev.columnId === column.id) {
+                const next = nextSortDirection(prev.direction);
+                return next === null
+                    ? { columnId: null, direction: null }
+                    : { columnId: column.id, direction: next };
+            }
+            return { columnId: column.id, direction: 'asc' };
+        });
+    }, [setSortState]);
+    const selectionAnchorRef = useRef(null);
+    const selectionShiftKeyRef = useRef(false);
+    const toggleRowSelection = useCallback((rowKeyValue, row, rowIdx, rangeMode = false) => {
+        if (!selectionMode)
+            return;
+        if (isRowSelectable && !isRowSelectable(row, rowIdx))
+            return;
+        if (selectionMode === 'single') {
+            selectionAnchorRef.current = rowIdx;
+            setSelectionState(prev => prev[0] === rowKeyValue ? [] : [rowKeyValue]);
+            return;
+        }
+        const anchor = selectionAnchorRef.current;
+        if (rangeMode && anchor !== null && anchor !== rowIdx) {
+            const [start, end] = anchor < rowIdx ? [anchor, rowIdx] : [rowIdx, anchor];
+            const rangeKeys = [];
+            for (let i = start; i <= end; i += 1) {
+                const candidate = sortedRows[i];
+                const candidateKey = rowKeys[i];
+                if (candidate === undefined || candidateKey === undefined)
+                    continue;
+                if (isRowSelectable && !isRowSelectable(candidate, i))
+                    continue;
+                rangeKeys.push(candidateKey);
+            }
+            setSelectionState(prev => {
+                const set = new Set(prev);
+                const shouldDeselect = set.has(rowKeyValue);
+                for (const key of rangeKeys) {
+                    if (shouldDeselect)
+                        set.delete(key);
+                    else
+                        set.add(key);
+                }
+                return Array.from(set);
+            });
+            return;
+        }
+        selectionAnchorRef.current = rowIdx;
+        setSelectionState(prev => {
+            const set = new Set(prev);
+            if (set.has(rowKeyValue))
+                set.delete(rowKeyValue);
+            else
+                set.add(rowKeyValue);
+            return Array.from(set);
+        });
+    }, [selectionMode, isRowSelectable, setSelectionState, sortedRows, rowKeys]);
+    const toggleSelectAll = useCallback(() => {
+        if (selectionMode !== 'multiple')
+            return;
+        if (allSelectableSelected) {
+            setSelectionState([]);
+            return;
+        }
+        const next = selectableIndexes
+            .map(idx => rowKeys[idx])
+            .filter((k) => typeof k === 'string');
+        setSelectionState(next);
+    }, [
+        allSelectableSelected,
+        selectableIndexes,
+        rowKeys,
+        selectionMode,
+        setSelectionState,
+    ]);
+    const scrollContainerRef = useRef(null);
+    const shouldVirtualize = virtualized === true ||
+        (virtualized === 'auto' && sortedRows.length > virtualizationThreshold);
+    const rowHeightPx = estimatedRowHeight ?? DENSITY_ROW_HEIGHT[density];
+    // TanStack Virtual's useVirtualizer returns functions that cannot be safely
+    // memoized; the Compiler flags it as an incompatible library. Behavior is
+    // correct here because the virtualizer is read imperatively per render.
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const virtualizer = useVirtualizer({
+        count: shouldVirtualize ? sortedRows.length : 0,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: () => rowHeightPx,
+        overscan,
+    });
+    const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+    const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;
+    const tracks = useMemo(() => {
+        const items = [];
+        let minWidth = 0;
+        if (showSelectColumn) {
+            items.push(`${SELECT_COLUMN_WIDTH}px`);
+            minWidth += SELECT_COLUMN_WIDTH;
+        }
+        columns.forEach(column => {
+            const t = getColumnTrack(column, columnWidths[column.id]);
+            items.push(t.templateValue);
+            minWidth += t.minPx;
+        });
+        return { template: items.join(' '), minWidth };
+    }, [columns, columnWidths, showSelectColumn]);
+    const renderSortIndicator = (column) => {
+        if (!column.sortable)
+            return null;
+        const active = sortState.columnId === column.id && sortState.direction !== null;
+        const direction = active ? sortState.direction : null;
+        const Icon = direction === 'asc'
+            ? ChevronUpIcon
+            : direction === 'desc'
+                ? ChevronDownIcon
+                : SortIcon;
+        return (jsx("span", { className: sortIndicatorRecipe({ active: active || undefined }), "aria-hidden": "true", children: jsx(Icon, { size: "sm" }) }));
+    };
+    const beginResize = useCallback((columnId, startX, startWidth, column) => {
+        const minWidth = column.minWidth ?? 40;
+        const maxWidth = column.maxWidth ?? Infinity;
+        const handleMove = (event) => {
+            const delta = event.clientX - startX;
+            const next = Math.max(minWidth, Math.min(maxWidth, startWidth + delta));
+            setColumnWidths(prev => ({ ...prev, [columnId]: next }));
+        };
+        const handleUp = () => {
+            window.removeEventListener('pointermove', handleMove);
+            window.removeEventListener('pointerup', handleUp);
+            setColumnWidths(prev => {
+                const finalWidth = prev[columnId];
+                if (finalWidth !== undefined)
+                    onColumnResize?.(columnId, finalWidth);
+                return prev;
+            });
+        };
+        window.addEventListener('pointermove', handleMove);
+        window.addEventListener('pointerup', handleUp);
+    }, [onColumnResize]);
+    const focusRow = useCallback((index) => {
+        if (sortedRows.length === 0)
+            return;
+        const clamped = Math.max(0, Math.min(sortedRows.length - 1, index));
+        setActiveRowIndex(clamped);
+        if (shouldVirtualize) {
+            virtualizer.scrollToIndex(clamped, { align: 'auto' });
+        }
+    }, [sortedRows.length, shouldVirtualize, virtualizer]);
+    const handleKeyDown = useCallback((event) => {
+        if (sortedRows.length === 0)
+            return;
+        const current = activeRowIndex ?? -1;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                focusRow(current + 1);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                focusRow(current - 1);
+                return;
+            case 'Home':
+                event.preventDefault();
+                focusRow(0);
+                return;
+            case 'End':
+                event.preventDefault();
+                focusRow(sortedRows.length - 1);
+                return;
+            case 'PageDown':
+                event.preventDefault();
+                focusRow(current + 10);
+                return;
+            case 'PageUp':
+                event.preventDefault();
+                focusRow(current - 10);
+                return;
+            case 'Enter': {
+                if (current < 0)
+                    return;
+                event.preventDefault();
+                const row = sortedRows[current];
+                if (row === undefined)
+                    return;
+                const k = rowKeys[current];
+                if (selectionMode === 'single' && k !== undefined) {
+                    toggleRowSelection(k, row, current);
+                }
+                onRowActivate?.(row, current);
+                return;
+            }
+            case ' ': {
+                if (current < 0)
+                    return;
+                if (selectionMode !== 'multiple')
+                    return;
+                event.preventDefault();
+                const row = sortedRows[current];
+                const k = rowKeys[current];
+                if (row === undefined || k === undefined)
+                    return;
+                toggleRowSelection(k, row, current, event.shiftKey);
+                return;
+            }
+            default:
+                return;
+        }
+    }, [
+        activeRowIndex,
+        focusRow,
+        sortedRows,
+        rowKeys,
+        selectionMode,
+        toggleRowSelection,
+        onRowActivate,
+    ]);
+    useEffect(() => {
+        if (activeRowIndex !== null && activeRowIndex >= sortedRows.length) {
+            setActiveRowIndex(sortedRows.length === 0 ? null : sortedRows.length - 1);
+        }
+    }, [activeRowIndex, sortedRows.length]);
+    const renderHeaderCell = (column) => {
+        const ariaSort = column.sortable
+            ? sortState.columnId === column.id && sortState.direction === 'asc'
+                ? 'ascending'
+                : sortState.columnId === column.id && sortState.direction === 'desc'
+                    ? 'descending'
+                    : 'none'
+            : undefined;
+        return (jsxs("div", { role: "columnheader", "data-column-id": column.id, className: cx(headerCellRecipe({
+                align: column.align ?? 'left',
+                sortable: column.sortable ? true : undefined,
+                sticky: column.sticky ? true : undefined,
+            }), column.className), "aria-sort": ariaSort, "aria-hidden": column.ariaHidden ? true : undefined, tabIndex: column.sortable ? 0 : undefined, onClick: column.sortable
+                ? () => {
+                    handleSortClick(column);
+                }
+                : undefined, onKeyDown: column.sortable
+                ? event => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleSortClick(column);
+                    }
+                }
+                : undefined, children: [jsxs("span", { className: headerCellInnerStyle, children: [jsx("span", { children: column.header }), renderSortIndicator(column)] }), resizableColumns && !column.disableResize && (jsx("span", { className: resizeHandleStyle, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize column ${column.id}`, onPointerDown: event => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const startWidth = columnWidths[column.id] ??
+                            event.currentTarget.parentElement?.getBoundingClientRect()
+                                .width ??
+                            100;
+                        beginResize(column.id, event.clientX, startWidth, column);
+                    } }))] }, column.id));
+    };
+    const renderHeader = () => (jsxs("div", { role: "row", "aria-rowindex": 1, className: headerStyle({ sticky: stickyHeader || undefined }), children: [showSelectColumn && (jsx("div", { role: "columnheader", className: headerCellRecipe({ selectColumn: true, sticky: true }), "aria-label": "Select all rows", children: jsx(Checkbox, { checked: allSelectableSelected, indeterminate: someSelectableSelected, onChange: () => {
+                        toggleSelectAll();
+                    }, "aria-label": "Select all rows", size: "sm" }) })), columns.map(renderHeaderCell)] }));
+    const renderCells = (row, rowIdx) => columns.map(column => {
+        const value = readCellValue(column, row, rowIdx);
+        return (jsx("div", { role: "gridcell", className: cx(cellRecipe({
+                align: column.align ?? 'left',
+                sticky: column.sticky ? true : undefined,
+            }), column.className), "data-column-id": column.id, children: column.cell
+                ? column.cell({ value, row, rowIndex: rowIdx, column })
+                : value === null || value === undefined
+                    ? ''
+                    : typeof value === 'string'
+                        ? value
+                        : typeof value === 'number' || typeof value === 'boolean'
+                            ? String(value)
+                            : JSON.stringify(value) }, column.id));
+    });
+    const renderRowElement = (row, rowIdx, options = {}) => {
+        const k = rowKeys[rowIdx] ?? `__row_${rowIdx}__`;
+        const isSelected = selectedSet.has(k);
+        const interactive = selectionMode === 'single' || onRowClick !== undefined;
+        const cells = (jsxs(Fragment, { children: [showSelectColumn && (jsx("div", { role: "gridcell", tabIndex: -1, className: cellRecipe({ selectColumn: true, sticky: true }), onClickCapture: event => {
+                        selectionShiftKeyRef.current = event.shiftKey;
+                    }, onClick: event => {
+                        event.stopPropagation();
+                    }, onKeyDown: event => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                            event.stopPropagation();
+                        }
+                    }, children: jsx(Checkbox, { checked: isSelected, disabled: isRowSelectable ? !isRowSelectable(row, rowIdx) : false, onChange: () => {
+                            toggleRowSelection(k, row, rowIdx, selectionShiftKeyRef.current);
+                            selectionShiftKeyRef.current = false;
+                        }, "aria-label": `Select row ${rowIdx + 1}`, size: "sm" }) })), renderCells(row, rowIdx)] }));
+        const handleRowClick = (event) => {
+            onRowClick?.(row, rowIdx, event);
+            if (selectionMode === 'single') {
+                toggleRowSelection(k, row, rowIdx);
+            }
+            setActiveRowIndex(rowIdx);
+        };
+        const handleRowDoubleClick = () => {
+            onRowActivate?.(row, rowIdx);
+        };
+        const handleRowKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                if (selectionMode === 'single') {
+                    toggleRowSelection(k, row, rowIdx);
+                }
+                setActiveRowIndex(rowIdx);
+            }
+        };
+        const rowContent = renderRow
+            ? renderRow({ row, rowIndex: rowIdx, selected: isSelected }, cells)
+            : cells;
+        const rowClassName = rowRecipe({
+            virtualized: options.virtualized ? true : undefined,
+            interactive: interactive ? true : undefined,
+            selected: isSelected ? true : undefined,
+            active: activeRowIndex === rowIdx ? true : undefined,
+        });
+        const rowStyle = options.virtualized && options.transformY !== undefined
+            ? { transform: `translateY(${options.transformY}px)` }
+            : undefined;
+        return (jsx("div", { role: "row", "aria-rowindex": rowIdx + 2, "aria-selected": selectionMode ? isSelected : undefined, "data-row-key": k, "data-row-index": rowIdx, "data-row-interactive": interactive ? 'true' : undefined, className: rowClassName, style: rowStyle, tabIndex: interactive ? -1 : undefined, onClick: interactive ? handleRowClick : undefined, onKeyDown: interactive ? handleRowKeyDown : undefined, onDoubleClick: onRowActivate ? handleRowDoubleClick : undefined, children: rowContent }, k));
+    };
+    const renderSkeletonRows = () => {
+        const rowsToRender = Array.from({ length: loadingRowCount }, (_, i) => i);
+        const cellCount = columns.length + (showSelectColumn ? 1 : 0);
+        return rowsToRender.map(idx => (jsx("div", { className: skeletonRowStyle, "aria-hidden": "true", children: Array.from({ length: cellCount }, (_, ci) => (jsx("div", { className: skeletonCellStyle, children: jsx("span", { className: skeletonBarStyle }) }, ci))) }, `__skeleton_${idx}__`)));
+    };
+    const containerStyle = {
+        height: resolveDimension(height),
+        ...(maxHeight !== undefined
+            ? { maxHeight: resolveDimension(maxHeight) }
+            : {}),
+        ...style,
+    };
+    const isEmpty = !loading && sortedRows.length === 0;
+    const totalColumnsCount = columns.length + (showSelectColumn ? 1 : 0);
+    const gridVars = assignInlineVars({
+        [gridTemplateColumnsVar]: tracks.template,
+        [tableMinWidthVar]: `${tracks.minWidth}px`,
+    });
+    return (jsx("div", { ref: ref, role: "grid", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-rowcount": sortedRows.length + 1, "aria-colcount": totalColumnsCount, "aria-multiselectable": selectionMode === 'multiple' ? true : undefined, "data-testid": testId, "data-density": density, tabIndex: 0, className: cx(rootRecipe({ density }), className), style: { ...containerStyle, ...gridVars }, onKeyDown: handleKeyDown, ...rest, children: jsx("div", { ref: scrollContainerRef, className: scrollContainerStyle, children: jsxs("div", { className: innerWrapperStyle, children: [renderHeader(), loading ? (jsx("div", { className: bodyStyle, children: renderSkeletonRows() })) : isEmpty ? (jsx("div", { className: bodyStyle, children: jsx("div", { className: emptyStateStyle, role: "row", children: jsx("div", { role: "gridcell", "aria-colspan": totalColumnsCount, children: emptyState ?? 'No rows to display' }) }) })) : shouldVirtualize ? (jsx("div", { className: virtualBodyStyle, style: assignInlineVars({
+                            [totalHeightVar]: `${totalSize}px`,
+                        }), children: virtualItems.map(item => {
+                            const row = sortedRows[item.index];
+                            if (row === undefined)
+                                return null;
+                            return renderRowElement(row, item.index, {
+                                virtualized: true,
+                                transformY: item.start,
+                            });
+                        }) })) : (jsx("div", { className: bodyStyle, children: sortedRows.map((row, rowIdx) => renderRowElement(row, rowIdx)) }))] }) }) }));
+}
+DataTableInner.displayName = 'DataTable';
+const DataTable = DataTableInner;
+
+export { DataTable };
+//# sourceMappingURL=DataTable.js.map

package/dist/esm/components/data/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../../../../src/components/data/DataTable/DataTable.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAkDA;AACE;AACA;AACA;;AAGF;AACA;AAEA;;AAKoC;AAClC;AACA;AACF;AAEA;AAKE;;AACoC;;AAElC;AACF;AACF;AAEA;;AACe;AACb;AAAmC;AACnC;;;;AAEA;;;;AAGA;AACA;AACA;AACF;AAEA;;AAGwB;;AACC;AACvB;AACF;AAEA;;AAG2B;AACzB;AACF;AAOA;AAIE;;;AAGA;;AAEE;AACA;;AAEF;;AAEF;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH;;AAuCE;;;AAGE;;AAED;AAED;AAEI;AACA;AACA;AACA;AACD;;;AAKH;AACA;AAEA;AACE;AAAgB;AAChB;AACA;AAAqC;AACrC;AACA;AAAa;;;AAGX;AACA;AACA;AACE;AACA;AACF;AACF;AACA;;AAGF;AAKA;AACE;AAAoB;AACpB;AAAsB;;;AAGpB;AAA+B;AACjC;AACA;;AAGF;AAEE;AACE;;AAEF;;AAGA;AACE;;AAEF;AAEF;;;;;;;;AAQU;;;AAGN;AACF;AAIF;AACA;AAEA;AAEI;;;;AAEA;AACE;;;;AAOF;;;;AAKE;AACE;AACA;AACA;;;;AAEA;;;AAGA;;AAEA;AACE;AAAoB;;AACf;;AAEP;AACF;;;AAIF;;AAEE;AACA;AAA0B;;AACrB;AACL;AACF;AACF;AAIF;;;;;;;;;;;AAUA;;;;;;AAMC;AAED;AAEA;;;;;;;;;AAYE;AACA;;AAED;AAED;AACA;AAEA;;;;AAII;;;AAGF;AACE;AACA;AACA;AACF;AACA;;AAGF;;AACwB;AACtB;AAEA;AACA;AAEI;;AAEE;;;AAUR;AAEA;AAOI;AACA;AACA;AACE;AACA;AACA;AACF;;AAEE;AACA;;AAEE;;AAC8B;AAC9B;AACF;AACF;AACA;AACA;AACF;AAIF;AAEI;;;;;;;;AAUJ;AAEI;;AACA;AACA;AACE;;AAEE;;AAEF;;AAEE;;AAEF;;;;AAIA;;AAEE;;AAEF;;AAEE;;AAEF;;AAEE;;;;;;AAKA;;;AAEA;;AAEE;;AAEF;;;;;;;;;AAOA;AACA;AACA;;;;;AAIF;;;AAGJ;;;;;;;;AASC;;;AAKC;;;AAIJ;AACE;AAEI;AACE;AACA;AACE;AACA;;AAER;AAOQ;;;AAGD;;;;AAWC;;AAKI;;;;;;;;AAqBF;AAEE;;AAEA;AACF;;AAMZ;AAEA;AAgBY;AACF;AAUV;;;AASY;;AAED;AAMD;AACA;AACE;AACA;AACE;;AAEE;AACA;AAGd;;;;;AAWA;AAQU;AACF;;AAGA;AAEE;;;AAGF;;AAYI;;AAWZ;;AAEE;AACE;;;AAGJ;;AAGE;AACF;AAEA;AACE;;AAEE;AACE;;;;AAIN;;AAGE;;;;;;;AAQD;;;;;AA0BH;;;AAIE;;AAcF;AAEA;AACE;;;;AAIA;;;AAIF;;AAGE;AACA;AACD;AAED;AAkCc;AACD;;;AAIwB;AACvB;AACE;;AAED;AACH;AAWd;AAEA;AAEO;;"}

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.css.js

@@ -0,0 +1,46 @@
+import './../../../assets/src/components/editor/AssetBrowser/AssetBrowser.css.ts.vanilla-B2S4cEiY.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var body = 'AssetBrowser_body__15pxmeug';
+var breadcrumbsBar = 'AssetBrowser_breadcrumbsBar__15pxmeuf';
+var cellHeightVar = 'var(--cellHeightVar__15pxmeu1)';
+var cellLabel = 'AssetBrowser_cellLabel__15pxmeu12';
+var cellRecipe = createRuntimeFn({defaultClassName:'AssetBrowser_cellRecipe__15pxmeut',variantClassNames:{selected:{true:'AssetBrowser_cellRecipe_selected_true__15pxmeuu',false:'AssetBrowser_cellRecipe_selected_false__15pxmeuv'},dropTarget:{true:'AssetBrowser_cellRecipe_dropTarget_true__15pxmeuw',false:'AssetBrowser_cellRecipe_dropTarget_false__15pxmeux'},disabled:{true:'AssetBrowser_cellRecipe_disabled_true__15pxmeuy',false:'AssetBrowser_cellRecipe_disabled_false__15pxmeuz'}},defaultVariants:{selected:false,dropTarget:false,disabled:false},compoundVariants:[]});
+var cellWidthVar = 'var(--cellWidthVar__15pxmeu0)';
+var columnsVar = 'var(--columnsVar__15pxmeu4)';
+var contextMenuTrigger = 'AssetBrowser_contextMenuTrigger__15pxmeuj';
+var emptyText = 'AssetBrowser_emptyText__15pxmeu18';
+var emptyWrap = 'AssetBrowser_emptyWrap__15pxmeum';
+var gridFlow = 'AssetBrowser_gridFlow__15pxmeus';
+var gridGapVar = 'var(--gridGapVar__15pxmeu3)';
+var gridScroller = 'AssetBrowser_gridScroller__15pxmeup';
+var gridSizer = 'AssetBrowser_gridSizer__15pxmeuq';
+var gridWindow = 'AssetBrowser_gridWindow__15pxmeur';
+var importOverlay = 'AssetBrowser_importOverlay__15pxmeu15';
+var listScroller = 'AssetBrowser_listScroller__15pxmeu16';
+var loadingGrid = 'AssetBrowser_loadingGrid__15pxmeun';
+var main = 'AssetBrowser_main__15pxmeui';
+var marquee = 'AssetBrowser_marquee__15pxmeu14';
+var marqueeHVar = 'var(--marqueeHVar__15pxmeua)';
+var marqueeWVar = 'var(--marqueeWVar__15pxmeu9)';
+var marqueeXVar = 'var(--marqueeXVar__15pxmeu7)';
+var marqueeYVar = 'var(--marqueeYVar__15pxmeu8)';
+var nameCell = 'AssetBrowser_nameCell__15pxmeu17';
+var offsetYVar = 'var(--offsetYVar__15pxmeu6)';
+var renameField = 'AssetBrowser_renameField__15pxmeu13';
+var root = 'AssetBrowser_root__15pxmeub';
+var searchField = 'AssetBrowser_searchField__15pxmeue';
+var sidebar = 'AssetBrowser_sidebar__15pxmeuh';
+var skeletonCell = 'AssetBrowser_skeletonCell__15pxmeuo';
+var srOnly = 'AssetBrowser_srOnly__15pxmeu19';
+var statusBar = 'AssetBrowser_statusBar__15pxmeuk';
+var statusSpacer = 'AssetBrowser_statusSpacer__15pxmeul';
+var thumb = 'AssetBrowser_thumb__15pxmeu10';
+var thumbImage = 'AssetBrowser_thumbImage__15pxmeu11';
+var thumbSizeVar = 'var(--thumbSizeVar__15pxmeu2)';
+var toolbar = 'AssetBrowser_toolbar__15pxmeuc';
+var toolbarSpacer = 'AssetBrowser_toolbarSpacer__15pxmeud';
+var totalHeightVar = 'var(--totalHeightVar__15pxmeu5)';
+
+export { body, breadcrumbsBar, cellHeightVar, cellLabel, cellRecipe, cellWidthVar, columnsVar, contextMenuTrigger, emptyText, emptyWrap, gridFlow, gridGapVar, gridScroller, gridSizer, gridWindow, importOverlay, listScroller, loadingGrid, main, marquee, marqueeHVar, marqueeWVar, marqueeXVar, marqueeYVar, nameCell, offsetYVar, renameField, root, searchField, sidebar, skeletonCell, srOnly, statusBar, statusSpacer, thumb, thumbImage, thumbSizeVar, toolbar, toolbarSpacer, totalHeightVar };
+//# sourceMappingURL=AssetBrowser.css.js.map

package/dist/esm/components/editor/AssetBrowser/AssetBrowser.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowser.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}