indas-ui 0.0.1 → 0.1.0

package/dist/components/datagrid/hooks/useClipboard.js

@@ -0,0 +1,151 @@
+'use client';
+import { useCallback, useEffect } from 'react';
+export function useClipboard(table, config = {}) {
+    const { enableCopy = true, enablePaste = false, copyFormat = 'csv', includeHeaders = true } = config;
+    const getSelectedData = useCallback(() => {
+        const selectedRows = table.getSelectedRowModel().rows;
+        const visibleColumns = table.getAllColumns().filter(col => col.getIsVisible() && col.id !== 'select');
+        return {
+            rows: selectedRows,
+            columns: visibleColumns
+        };
+    }, [table]);
+    const formatDataAsCsv = useCallback((rows, columns) => {
+        const lines = [];
+        // Add headers if enabled
+        if (includeHeaders) {
+            const headers = columns.map(col => {
+                const header = typeof col.columnDef.header === 'string'
+                    ? col.columnDef.header
+                    : col.id;
+                return `"${header}"`;
+            });
+            lines.push(headers.join(','));
+        }
+        // Add data rows
+        rows.forEach(row => {
+            const values = columns.map(col => {
+                const value = row.getValue(col.id);
+                if (value === null || value === undefined)
+                    return '';
+                // Escape quotes and wrap in quotes
+                const stringValue = String(value).replace(/"/g, '""');
+                return `"${stringValue}"`;
+            });
+            lines.push(values.join(','));
+        });
+        return lines.join('\n');
+    }, [includeHeaders]);
+    const formatDataAsTsv = useCallback((rows, columns) => {
+        const lines = [];
+        // Add headers if enabled
+        if (includeHeaders) {
+            const headers = columns.map(col => {
+                const header = typeof col.columnDef.header === 'string'
+                    ? col.columnDef.header
+                    : col.id;
+                return header;
+            });
+            lines.push(headers.join('\t'));
+        }
+        // Add data rows
+        rows.forEach(row => {
+            const values = columns.map(col => {
+                const value = row.getValue(col.id);
+                return value === null || value === undefined ? '' : String(value);
+            });
+            lines.push(values.join('\t'));
+        });
+        return lines.join('\n');
+    }, [includeHeaders]);
+    const formatDataAsJson = useCallback((rows, columns) => {
+        const data = rows.map(row => {
+            const rowData = {};
+            columns.forEach(col => {
+                rowData[col.id] = row.getValue(col.id);
+            });
+            return rowData;
+        });
+        return JSON.stringify(data, null, 2);
+    }, []);
+    const copyToClipboard = useCallback(async (customData) => {
+        try {
+            if (customData) {
+                await navigator.clipboard.writeText(customData);
+                return true;
+            }
+            const { rows, columns } = getSelectedData();
+            if (rows.length === 0) {
+                return false;
+            }
+            let formattedData;
+            switch (copyFormat) {
+                case 'csv':
+                    formattedData = formatDataAsCsv(rows, columns);
+                    break;
+                case 'tsv':
+                    formattedData = formatDataAsTsv(rows, columns);
+                    break;
+                case 'json':
+                    formattedData = formatDataAsJson(rows, columns);
+                    break;
+                default:
+                    formattedData = formatDataAsCsv(rows, columns);
+            }
+            await navigator.clipboard.writeText(formattedData);
+            return true;
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+            return false;
+        }
+    }, [getSelectedData, copyFormat, formatDataAsCsv, formatDataAsTsv, formatDataAsJson]);
+    const pasteFromClipboard = useCallback(async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            return text;
+        }
+        catch (error) {
+            console.error('Failed to paste from clipboard:', error);
+            return null;
+        }
+    }, []);
+    const handleKeyDown = useCallback(async (event) => {
+        // Ctrl+C to copy
+        if (enableCopy && event.key === 'c' && (event.ctrlKey || event.metaKey)) {
+            // Only handle if not in an input field
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                return;
+            }
+            event.preventDefault();
+            const success = await copyToClipboard();
+            if (success) {
+                // You can add a toast notification here
+            }
+        }
+        // Ctrl+V to paste (if enabled)
+        if (enablePaste && event.key === 'v' && (event.ctrlKey || event.metaKey)) {
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+                return;
+            }
+            event.preventDefault();
+            const data = await pasteFromClipboard();
+            if (data) {
+                // Handle paste logic here (emit event, update data, etc.)
+            }
+        }
+    }, [enableCopy, enablePaste, copyToClipboard, pasteFromClipboard]);
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    return {
+        copyToClipboard,
+        pasteFromClipboard,
+        getSelectedData
+    };
+}

package/dist/components/datagrid/hooks/useDataGridState.d.ts

@@ -0,0 +1,46 @@
+import { SortingState, ColumnFiltersState, VisibilityState, ExpandedState } from '@tanstack/react-table';
+export interface UseDataGridStateProps<TData> {
+    data: TData[];
+    selectedRowIds: string[];
+    enablePagination: boolean;
+    paginationPageSize: number;
+    frozenColumns: string[];
+    enableViewToggle: boolean;
+    viewMode: 'all' | 'selected';
+    enableRowReordering: boolean;
+    getRowId?: (row: TData) => string;
+}
+export declare function useDataGridState<TData>({ data, selectedRowIds, enablePagination, paginationPageSize, frozenColumns, enableViewToggle, viewMode, enableRowReordering, getRowId, }: UseDataGridStateProps<TData>): {
+    sorting: SortingState;
+    setSorting: import("react").Dispatch<import("react").SetStateAction<SortingState>>;
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: import("react").Dispatch<import("react").SetStateAction<ColumnFiltersState>>;
+    columnVisibility: VisibilityState;
+    setColumnVisibility: import("react").Dispatch<import("react").SetStateAction<VisibilityState>>;
+    rowSelection: Record<string, boolean>;
+    setRowSelection: import("react").Dispatch<import("react").SetStateAction<Record<string, boolean>>>;
+    globalFilter: string;
+    setGlobalFilter: import("react").Dispatch<import("react").SetStateAction<string>>;
+    expanded: ExpandedState;
+    setExpanded: import("react").Dispatch<import("react").SetStateAction<ExpandedState>>;
+    frozenColumnsState: Set<string>;
+    setFrozenColumnsState: import("react").Dispatch<import("react").SetStateAction<Set<string>>>;
+    reorderedData: TData[];
+    setReorderedData: import("react").Dispatch<import("react").SetStateAction<TData[]>>;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    setPagination: import("react").Dispatch<import("react").SetStateAction<{
+        pageIndex: number;
+        pageSize: number;
+    }>>;
+    columnSearches: Record<string, string>;
+    setColumnSearches: import("react").Dispatch<import("react").SetStateAction<Record<string, string>>>;
+    isColumnSearchActive: Record<string, boolean>;
+    setIsColumnSearchActive: import("react").Dispatch<import("react").SetStateAction<Record<string, boolean>>>;
+    filteredData: TData[];
+    stableRowSelection: Record<string, boolean>;
+    safeSelectedCount: number;
+    toggleShouldBeVisible: boolean;
+};

package/dist/components/datagrid/hooks/useDataGridState.js

@@ -0,0 +1,112 @@
+'use client';
+import { useState, useMemo, useEffect } from 'react';
+export function useDataGridState({ data, selectedRowIds, enablePagination, paginationPageSize, frozenColumns, enableViewToggle, viewMode, enableRowReordering, getRowId, }) {
+    // Core table state
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [expanded, setExpanded] = useState({});
+    const [frozenColumnsState, setFrozenColumnsState] = useState(new Set(frozenColumns));
+    // Row selection state
+    const initialRowSelection = useMemo(() => {
+        const selection = {};
+        data.forEach((row, index) => {
+            const rowId = row.id || index.toString();
+            if (selectedRowIds.includes(rowId)) {
+                selection[rowId] = true;
+            }
+        });
+        return selection;
+    }, [selectedRowIds, data]);
+    const [rowSelection, setRowSelection] = useState(initialRowSelection);
+    // Row reordering state
+    const [reorderedData, setReorderedData] = useState(null);
+    // Pagination state
+    const [pagination, setPagination] = useState({
+        pageIndex: 0,
+        pageSize: enablePagination ? paginationPageSize : data.length,
+    });
+    // Search state
+    const [columnSearches, setColumnSearches] = useState({});
+    const [isColumnSearchActive, setIsColumnSearchActive] = useState({});
+    // Sync frozen columns with prop changes
+    useEffect(() => {
+        if (frozenColumns && frozenColumns.length > 0) {
+            setFrozenColumnsState(prev => {
+                const newSet = new Set(prev);
+                frozenColumns.forEach(colId => newSet.add(colId));
+                return newSet;
+            });
+        }
+    }, [frozenColumns]);
+    // Filter data based on view mode
+    const filteredData = useMemo(() => {
+        const baseData = (enableRowReordering && viewMode === 'selected' && reorderedData) ? reorderedData : data;
+        if (!enableViewToggle || viewMode === 'all') {
+            return baseData;
+        }
+        if (selectedRowIds.length === 0) {
+            return [];
+        }
+        const selectedIdsSet = new Set(selectedRowIds);
+        return baseData.filter(item => {
+            const itemId = getRowId ? getRowId(item) : item.id || baseData.indexOf(item).toString();
+            return selectedIdsSet.has(itemId);
+        });
+    }, [enableViewToggle, viewMode, data, selectedRowIds, getRowId, enableRowReordering, reorderedData]);
+    // Stable row selection
+    const stableRowSelection = useMemo(() => {
+        if (!enableViewToggle)
+            return rowSelection;
+        if (viewMode === 'selected' && selectedRowIds.length > 0) {
+            const preservedSelection = {};
+            filteredData.forEach((item, index) => {
+                const itemId = getRowId ? getRowId(item) : item.id || data.indexOf(item).toString();
+                if (selectedRowIds.includes(itemId)) {
+                    preservedSelection[index.toString()] = true;
+                }
+            });
+            return preservedSelection;
+        }
+        return rowSelection;
+    }, [enableViewToggle, viewMode, selectedRowIds, filteredData, rowSelection, getRowId, data]);
+    // Safe selected count
+    const safeSelectedCount = useMemo(() => {
+        return Array.isArray(selectedRowIds) ? selectedRowIds.length : 0;
+    }, [selectedRowIds]);
+    // Toggle visibility
+    const toggleShouldBeVisible = useMemo(() => {
+        return Boolean(enableViewToggle && true);
+    }, [enableViewToggle]);
+    return {
+        // State
+        sorting,
+        setSorting,
+        columnFilters,
+        setColumnFilters,
+        columnVisibility,
+        setColumnVisibility,
+        rowSelection,
+        setRowSelection,
+        globalFilter,
+        setGlobalFilter,
+        expanded,
+        setExpanded,
+        frozenColumnsState,
+        setFrozenColumnsState,
+        reorderedData,
+        setReorderedData,
+        pagination,
+        setPagination,
+        columnSearches,
+        setColumnSearches,
+        isColumnSearchActive,
+        setIsColumnSearchActive,
+        // Computed
+        filteredData,
+        stableRowSelection,
+        safeSelectedCount,
+        toggleShouldBeVisible,
+    };
+}

package/dist/components/datagrid/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,18 @@
+import { Table } from '@tanstack/react-table';
+export interface KeyboardNavigationConfig {
+    enableArrowKeys?: boolean;
+    enableTabNavigation?: boolean;
+    enableEnterToEdit?: boolean;
+    enableSpaceToSelect?: boolean;
+    enableCtrlA?: boolean;
+}
+export declare function useKeyboardNavigation<TData>(table: Table<TData>, config?: KeyboardNavigationConfig): {
+    focusedCell: {
+        rowIndex: number;
+        columnIndex: number;
+    };
+    setFocus: (rowIndex: number, columnIndex: number) => void;
+    clearFocus: () => void;
+    getCellClassName: (rowIndex: number, columnIndex: number) => "" | "ring-2 ring-blue-500 bg-blue-50";
+    moveFocus: (direction: "up" | "down" | "left" | "right") => void;
+};

package/dist/components/datagrid/hooks/useKeyboardNavigation.js

@@ -0,0 +1,117 @@
+'use client';
+import { useEffect, useCallback, useState } from 'react';
+export function useKeyboardNavigation(table, config = {}) {
+    const { enableArrowKeys = true, enableTabNavigation = true, enableEnterToEdit = true, enableSpaceToSelect = true, enableCtrlA = true } = config;
+    const [focusedCell, setFocusedCell] = useState(null);
+    const rows = table.getRowModel().rows;
+    const columns = table.getAllColumns().filter(col => col.getIsVisible());
+    const moveFocus = useCallback((direction) => {
+        if (!focusedCell) {
+            // Start at first cell
+            setFocusedCell({ rowIndex: 0, columnIndex: 0 });
+            return;
+        }
+        let { rowIndex, columnIndex } = focusedCell;
+        switch (direction) {
+            case 'up':
+                rowIndex = Math.max(0, rowIndex - 1);
+                break;
+            case 'down':
+                rowIndex = Math.min(rows.length - 1, rowIndex + 1);
+                break;
+            case 'left':
+                columnIndex = Math.max(0, columnIndex - 1);
+                break;
+            case 'right':
+                columnIndex = Math.min(columns.length - 1, columnIndex + 1);
+                break;
+        }
+        setFocusedCell({ rowIndex, columnIndex });
+    }, [focusedCell, rows.length, columns.length]);
+    const handleKeyDown = useCallback((event) => {
+        // Arrow keys navigation
+        if (enableArrowKeys) {
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                moveFocus('up');
+            }
+            else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                moveFocus('down');
+            }
+            else if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                moveFocus('left');
+            }
+            else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                moveFocus('right');
+            }
+        }
+        // Tab navigation
+        if (enableTabNavigation && event.key === 'Tab') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                moveFocus('left');
+            }
+            else {
+                moveFocus('right');
+            }
+        }
+        // Space to select row
+        if (enableSpaceToSelect && event.key === ' ') {
+            if (focusedCell) {
+                event.preventDefault();
+                const row = rows[focusedCell.rowIndex];
+                if (row) {
+                    row.toggleSelected();
+                }
+            }
+        }
+        // Ctrl+A disabled - users can use the select all checkbox instead
+        // This allows Ctrl+A to work normally in input fields
+        // Enter to edit (can be handled by parent component)
+        if (enableEnterToEdit && event.key === 'Enter') {
+            // This will be handled by the cell component
+            // Just prevent default here
+            event.preventDefault();
+        }
+    }, [
+        enableArrowKeys,
+        enableTabNavigation,
+        enableSpaceToSelect,
+        enableCtrlA,
+        enableEnterToEdit,
+        focusedCell,
+        moveFocus,
+        rows,
+        table
+    ]);
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    const getCellClassName = useCallback((rowIndex, columnIndex) => {
+        if (focusedCell &&
+            focusedCell.rowIndex === rowIndex &&
+            focusedCell.columnIndex === columnIndex) {
+            return 'ring-2 ring-blue-500 bg-blue-50';
+        }
+        return '';
+    }, [focusedCell]);
+    const setFocus = useCallback((rowIndex, columnIndex) => {
+        setFocusedCell({ rowIndex, columnIndex });
+    }, []);
+    const clearFocus = useCallback(() => {
+        setFocusedCell(null);
+    }, []);
+    return {
+        focusedCell,
+        setFocus,
+        clearFocus,
+        getCellClassName,
+        moveFocus
+    };
+}

package/dist/components/datagrid/index.d.ts

@@ -0,0 +1,34 @@
+export { DataGrid } from './DataGrid.js';
+export type { DataGridProps } from './DataGrid.js';
+export { PaginationControls } from './controls/PaginationControls.js';
+export { AutoResizeButton } from './controls/AutoResizeButton.js';
+export { ActionsMenu } from './controls/menu/index.js';
+export { AdvancedFilterModal } from './controls/menu/filter/AdvancedFilterModal.js';
+export { ColumnChooserModal } from './controls/menu/column/ColumnChooserModal.js';
+export { CardView } from './controls/menu/view/CardView.js';
+export { ChartView } from './controls/menu/view/ChartView.js';
+export { ChartView as DataVisualization } from './controls/menu/view/ChartView.js';
+export { DraggableColumnHeader } from './columns/DraggableColumnHeader.js';
+export { ColumnContextMenu } from './columns/ColumnContextMenu.js';
+export { ActionsColumn, createActionsColumn } from './columns/ActionsColumn.js';
+export type { ActionsColumnConfig } from './columns/ActionsColumn.js';
+export { createSelectColumn } from './rows/SelectColumn.js';
+export { ExpandableRow, ExpansionToggleCell, ExpansionToggleHeader, ProcessBreakdown } from './rows/ExpandableRow.js';
+export { DraggableRow } from './rows/DraggableRow.js';
+export { SummaryRow } from './rows/SummaryRow.js';
+export { EditableCell, useCellEditing } from './cells/EditableCell.js';
+export type { EditableCellProps } from './cells/EditableCell.js';
+export { CellRenderer } from './cells/CellRenderer.js';
+export { SelectionCell, SelectionCheckbox } from './cells/SelectionCell.js';
+export { BooleanCell } from './cells/BooleanCell.js';
+export { InlineSearchCell } from './search/InlineSearchCell.js';
+export { SearchNavigator, useSearchNavigation } from './search/SearchNavigator.js';
+export { SearchHighlighter, advancedSearch, fuzzyMatch } from './search/SearchHighlighter.js';
+export { SearchNewModal } from './search/SearchNewModal.js';
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
+export { useClipboard } from './hooks/useClipboard.js';
+export { useCellRangeSelection } from './hooks/useCellRangeSelection.js';
+export { useDataGridState } from './hooks/useDataGridState.js';
+export { exportData, exportToCSV, exportToExcel, exportToPDF, exportToJSON, } from './controls/menu/export/export.js';
+export { importData, importFromCSV, importFromExcel, importFromJSON } from './controls/menu/import/import.js';
+export type { ImportResult } from './controls/menu/import/import.js';

package/dist/components/datagrid/index.js

@@ -0,0 +1,41 @@
+'use client';
+// Main component
+export { DataGrid } from './DataGrid.js';
+// Controls
+export { PaginationControls } from './controls/PaginationControls.js';
+export { AutoResizeButton } from './controls/AutoResizeButton.js';
+// Menu & Sections
+export { ActionsMenu } from './controls/menu/index.js';
+export { AdvancedFilterModal } from './controls/menu/filter/AdvancedFilterModal.js';
+export { ColumnChooserModal } from './controls/menu/column/ColumnChooserModal.js';
+export { CardView } from './controls/menu/view/CardView.js';
+export { ChartView } from './controls/menu/view/ChartView.js';
+// Legacy export for backward compatibility
+export { ChartView as DataVisualization } from './controls/menu/view/ChartView.js';
+// Columns
+export { DraggableColumnHeader } from './columns/DraggableColumnHeader.js';
+export { ColumnContextMenu } from './columns/ColumnContextMenu.js';
+export { ActionsColumn, createActionsColumn } from './columns/ActionsColumn.js';
+// Rows
+export { createSelectColumn } from './rows/SelectColumn.js';
+export { ExpandableRow, ExpansionToggleCell, ExpansionToggleHeader, ProcessBreakdown } from './rows/ExpandableRow.js';
+export { DraggableRow } from './rows/DraggableRow.js';
+export { SummaryRow } from './rows/SummaryRow.js';
+// Cells
+export { EditableCell, useCellEditing } from './cells/EditableCell.js';
+export { CellRenderer } from './cells/CellRenderer.js';
+export { SelectionCell, SelectionCheckbox } from './cells/SelectionCell.js';
+export { BooleanCell } from './cells/BooleanCell.js';
+// Search
+export { InlineSearchCell } from './search/InlineSearchCell.js';
+export { SearchNavigator, useSearchNavigation } from './search/SearchNavigator.js';
+export { SearchHighlighter, advancedSearch, fuzzyMatch } from './search/SearchHighlighter.js';
+export { SearchNewModal } from './search/SearchNewModal.js';
+// Hooks
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';
+export { useClipboard } from './hooks/useClipboard.js';
+export { useCellRangeSelection } from './hooks/useCellRangeSelection.js';
+export { useDataGridState } from './hooks/useDataGridState.js';
+// Utils - Export/Import
+export { exportData, exportToCSV, exportToExcel, exportToPDF, exportToJSON, } from './controls/menu/export/export.js';
+export { importData, importFromCSV, importFromExcel, importFromJSON } from './controls/menu/import/import.js';

package/dist/components/datagrid/rows/DraggableRow.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Row } from '@tanstack/react-table';
+interface DraggableRowProps<TData> {
+    row: Row<TData>;
+    rowIndex: number;
+    enableBacchaSearch?: boolean;
+    mainColumnsArray?: string[];
+    frozenColumnsState?: Set<string>;
+    isHighlighted?: boolean;
+    isSelected?: boolean;
+    onRowClick?: (e: React.MouseEvent) => void;
+    onRowDoubleClick?: () => void;
+    onRowContextMenu?: (e: React.MouseEvent) => void;
+    showDragHandle?: boolean;
+    navigationState?: {
+        searchTerm?: string;
+    };
+    columnSearches?: Record<string, string>;
+    isColumnSearchActive?: Record<string, boolean>;
+    onColumnSearch?: (columnId: string, rowId: string, value: string) => void;
+    onClearColumnSearch?: (columnId: string) => void;
+    SearchHighlighter?: React.ComponentType<{
+        text: string;
+        searchTerm: string;
+    }>;
+    InlineSearchCell?: React.ComponentType<any>;
+    /** Extra classes from DataGrid's getRowProps (e.g. status/margin row tint) */
+    className?: string;
+    /** Inline style from DataGrid's getRowProps — merged under the drag transform */
+    rowStyle?: React.CSSProperties;
+}
+export declare function DraggableRow<TData>({ row, rowIndex, enableBacchaSearch, mainColumnsArray, frozenColumnsState, isHighlighted, isSelected, onRowClick, onRowDoubleClick, onRowContextMenu, showDragHandle, navigationState, columnSearches, isColumnSearchActive, onColumnSearch, onClearColumnSearch, SearchHighlighter, InlineSearchCell, className, rowStyle, }: DraggableRowProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/rows/DraggableRow.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical } from 'lucide-react';
+import { CellRenderer } from '../cells/CellRenderer.js';
+export function DraggableRow({ row, rowIndex, enableBacchaSearch = false, mainColumnsArray = [], frozenColumnsState = new Set(), isHighlighted = false, isSelected = false, onRowClick, onRowDoubleClick, onRowContextMenu, showDragHandle = true, 
+// Search features
+navigationState = {}, columnSearches = {}, isColumnSearchActive = {}, onColumnSearch, onClearColumnSearch, SearchHighlighter, InlineSearchCell, className, rowStyle, }) {
+    const rowId = row.original.id || row.id;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({
+        id: rowId,
+    });
+    const style = {
+        ...rowStyle,
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    };
+    return (_jsxs("tr", { ref: setNodeRef, style: style, className: `
+        cursor-pointer group
+        transition-colors duration-150 ease-out
+        ${isDragging ? 'shadow-lg z-50' : ''}
+        ${isHighlighted
+            ? 'border-2 border-[rgb(var(--color-primary))] bg-gradient-to-r from-[rgb(var(--color-primary))]/10 to-[rgb(var(--color-primary))]/20 shadow-lg relative'
+            : isSelected
+                ? 'bg-[color-mix(in_srgb,rgb(var(--color-primary))_8%,rgb(var(--bg-surface)))] shadow-sm hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_15%,rgb(var(--bg-surface)))]'
+                : 'hover:bg-[color-mix(in_srgb,rgb(var(--color-primary))_5%,rgb(var(--bg-surface)))]'}
+        ${className ?? ''}
+      `, onClick: onRowClick, onDoubleClick: onRowDoubleClick, onContextMenu: onRowContextMenu, children: [showDragHandle && (_jsx("td", { className: "text-center align-middle cursor-grab active:cursor-grabbing", style: { width: '1.875rem', minWidth: '1.875rem', maxWidth: '1.875rem' }, ...attributes, ...listeners, children: _jsx("div", { className: "w-full h-full flex items-center justify-center", children: _jsx(GripVertical, { className: "h-4 w-4 text-gray-400" }) }) })), row.getVisibleCells().map((cell, cellIndex) => (_jsx(CellRenderer, { cell: cell, cellIndex: cellIndex, row: row, enableBacchaSearch: enableBacchaSearch, mainColumnsArray: mainColumnsArray, frozenColumnsState: frozenColumnsState, navigationState: navigationState, columnSearches: columnSearches, isColumnSearchActive: isColumnSearchActive, onColumnSearch: onColumnSearch, onClearColumnSearch: onClearColumnSearch, SearchHighlighter: SearchHighlighter, InlineSearchCell: InlineSearchCell, isSelected: isSelected }, cell.id)))] }));
+}

package/dist/components/datagrid/rows/ExpandableRow.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Row, ColumnDef } from '@tanstack/react-table';
+interface ExpandableRowProps<TData> {
+    row: Row<TData>;
+    renderSubComponent?: (row: Row<TData>) => React.ReactNode;
+    /** 'basic' = custom content in colSpan td, 'detailed' = real grid rows from subData */
+    expandMode?: 'basic' | 'detailed';
+    /** Data items to render as rows in detailed mode */
+    subData?: TData[];
+    /** Column definitions for detailed mode (should match parent grid columns) */
+    subColumns?: ColumnDef<TData, any>[];
+    /** Row ID accessor for detailed mode */
+    getSubRowId?: (row: TData) => string;
+    /** Callback when a sub-row is clicked in detailed mode */
+    onSubRowClick?: (item: TData) => void;
+    /** Callback when a sub-row is selected (clicked) — propagates selection to parent */
+    onSubRowSelect?: (item: TData) => void;
+    /** Per sub-row class/style (DataGrid forwards getRowProps so revisions get the same tint) */
+    getSubRowProps?: (item: TData) => {
+        className?: string;
+        style?: React.CSSProperties;
+    };
+    onRowClick?: (e: React.MouseEvent) => void;
+    onRowDoubleClick?: () => void;
+    onRowContextMenu?: (e: React.MouseEvent) => void;
+    className?: string;
+    /** Inline style from DataGrid's getRowProps (e.g. a row tint that sticky cells inherit via --dg-row-bg) */
+    style?: React.CSSProperties;
+    rowHeight?: number;
+    children: React.ReactNode;
+}
+export declare function ExpandableRow<TData>({ row, renderSubComponent, expandMode, subData, subColumns, getSubRowId, onSubRowClick, onSubRowSelect, getSubRowProps, onRowClick, onRowDoubleClick, onRowContextMenu, className, style, rowHeight, children }: ExpandableRowProps<TData>): React.JSX.Element;
+interface ExpansionToggleCellProps<TData> {
+    row: Row<TData>;
+}
+export declare function ExpansionToggleCell<TData>({ row }: ExpansionToggleCellProps<TData>): React.JSX.Element;
+export declare function ExpansionToggleHeader({ table }: {
+    table: any;
+}): React.JSX.Element;
+interface ProcessBreakdownProps {
+    processes: Array<{
+        name: string;
+        totalCost: number;
+        unitCost: number;
+    }>;
+}
+export declare function ProcessBreakdown({ processes }: ProcessBreakdownProps): React.JSX.Element;
+export {};