indas-ui 0.0.1 → 0.1.0

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

@@ -0,0 +1,154 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClipboard = useClipboard;
+const react_1 = require("react");
+function useClipboard(table, config = {}) {
+    const { enableCopy = true, enablePaste = false, copyFormat = 'csv', includeHeaders = true } = config;
+    const getSelectedData = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.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]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    return {
+        copyToClipboard,
+        pasteFromClipboard,
+        getSelectedData
+    };
+}

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

@@ -0,0 +1,115 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridState = useDataGridState;
+const react_1 = require("react");
+function useDataGridState({ data, selectedRowIds, enablePagination, paginationPageSize, frozenColumns, enableViewToggle, viewMode, enableRowReordering, getRowId, }) {
+    // Core table state
+    const [sorting, setSorting] = (0, react_1.useState)([]);
+    const [columnFilters, setColumnFilters] = (0, react_1.useState)([]);
+    const [columnVisibility, setColumnVisibility] = (0, react_1.useState)({});
+    const [globalFilter, setGlobalFilter] = (0, react_1.useState)('');
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [frozenColumnsState, setFrozenColumnsState] = (0, react_1.useState)(new Set(frozenColumns));
+    // Row selection state
+    const initialRowSelection = (0, react_1.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] = (0, react_1.useState)(initialRowSelection);
+    // Row reordering state
+    const [reorderedData, setReorderedData] = (0, react_1.useState)(null);
+    // Pagination state
+    const [pagination, setPagination] = (0, react_1.useState)({
+        pageIndex: 0,
+        pageSize: enablePagination ? paginationPageSize : data.length,
+    });
+    // Search state
+    const [columnSearches, setColumnSearches] = (0, react_1.useState)({});
+    const [isColumnSearchActive, setIsColumnSearchActive] = (0, react_1.useState)({});
+    // Sync frozen columns with prop changes
+    (0, react_1.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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        return Array.isArray(selectedRowIds) ? selectedRowIds.length : 0;
+    }, [selectedRowIds]);
+    // Toggle visibility
+    const toggleShouldBeVisible = (0, react_1.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/cjs/components/datagrid/hooks/useKeyboardNavigation.js

@@ -0,0 +1,120 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardNavigation = useKeyboardNavigation;
+const react_1 = require("react");
+function useKeyboardNavigation(table, config = {}) {
+    const { enableArrowKeys = true, enableTabNavigation = true, enableEnterToEdit = true, enableSpaceToSelect = true, enableCtrlA = true } = config;
+    const [focusedCell, setFocusedCell] = (0, react_1.useState)(null);
+    const rows = table.getRowModel().rows;
+    const columns = table.getAllColumns().filter(col => col.getIsVisible());
+    const moveFocus = (0, react_1.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 = (0, react_1.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
+    ]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
+    const getCellClassName = (0, react_1.useCallback)((rowIndex, columnIndex) => {
+        if (focusedCell &&
+            focusedCell.rowIndex === rowIndex &&
+            focusedCell.columnIndex === columnIndex) {
+            return 'ring-2 ring-blue-500 bg-blue-50';
+        }
+        return '';
+    }, [focusedCell]);
+    const setFocus = (0, react_1.useCallback)((rowIndex, columnIndex) => {
+        setFocusedCell({ rowIndex, columnIndex });
+    }, []);
+    const clearFocus = (0, react_1.useCallback)(() => {
+        setFocusedCell(null);
+    }, []);
+    return {
+        focusedCell,
+        setFocus,
+        clearFocus,
+        getCellClassName,
+        moveFocus
+    };
+}

package/dist/cjs/components/datagrid/index.js

@@ -0,0 +1,90 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.importFromJSON = exports.importFromExcel = exports.importFromCSV = exports.importData = exports.exportToJSON = exports.exportToPDF = exports.exportToExcel = exports.exportToCSV = exports.exportData = exports.useDataGridState = exports.useCellRangeSelection = exports.useClipboard = exports.useKeyboardNavigation = exports.SearchNewModal = exports.fuzzyMatch = exports.advancedSearch = exports.SearchHighlighter = exports.useSearchNavigation = exports.SearchNavigator = exports.InlineSearchCell = exports.BooleanCell = exports.SelectionCheckbox = exports.SelectionCell = exports.CellRenderer = exports.useCellEditing = exports.EditableCell = exports.SummaryRow = exports.DraggableRow = exports.ProcessBreakdown = exports.ExpansionToggleHeader = exports.ExpansionToggleCell = exports.ExpandableRow = exports.createSelectColumn = exports.createActionsColumn = exports.ActionsColumn = exports.ColumnContextMenu = exports.DraggableColumnHeader = exports.DataVisualization = exports.ChartView = exports.CardView = exports.ColumnChooserModal = exports.AdvancedFilterModal = exports.ActionsMenu = exports.AutoResizeButton = exports.PaginationControls = exports.DataGrid = void 0;
+// Main component
+var DataGrid_1 = require("./DataGrid.js");
+Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return DataGrid_1.DataGrid; } });
+// Controls
+var PaginationControls_1 = require("./controls/PaginationControls.js");
+Object.defineProperty(exports, "PaginationControls", { enumerable: true, get: function () { return PaginationControls_1.PaginationControls; } });
+var AutoResizeButton_1 = require("./controls/AutoResizeButton.js");
+Object.defineProperty(exports, "AutoResizeButton", { enumerable: true, get: function () { return AutoResizeButton_1.AutoResizeButton; } });
+// Menu & Sections
+var menu_1 = require("./controls/menu/index.js");
+Object.defineProperty(exports, "ActionsMenu", { enumerable: true, get: function () { return menu_1.ActionsMenu; } });
+var AdvancedFilterModal_1 = require("./controls/menu/filter/AdvancedFilterModal.js");
+Object.defineProperty(exports, "AdvancedFilterModal", { enumerable: true, get: function () { return AdvancedFilterModal_1.AdvancedFilterModal; } });
+var ColumnChooserModal_1 = require("./controls/menu/column/ColumnChooserModal.js");
+Object.defineProperty(exports, "ColumnChooserModal", { enumerable: true, get: function () { return ColumnChooserModal_1.ColumnChooserModal; } });
+var CardView_1 = require("./controls/menu/view/CardView.js");
+Object.defineProperty(exports, "CardView", { enumerable: true, get: function () { return CardView_1.CardView; } });
+var ChartView_1 = require("./controls/menu/view/ChartView.js");
+Object.defineProperty(exports, "ChartView", { enumerable: true, get: function () { return ChartView_1.ChartView; } });
+// Legacy export for backward compatibility
+var ChartView_2 = require("./controls/menu/view/ChartView.js");
+Object.defineProperty(exports, "DataVisualization", { enumerable: true, get: function () { return ChartView_2.ChartView; } });
+// Columns
+var DraggableColumnHeader_1 = require("./columns/DraggableColumnHeader.js");
+Object.defineProperty(exports, "DraggableColumnHeader", { enumerable: true, get: function () { return DraggableColumnHeader_1.DraggableColumnHeader; } });
+var ColumnContextMenu_1 = require("./columns/ColumnContextMenu.js");
+Object.defineProperty(exports, "ColumnContextMenu", { enumerable: true, get: function () { return ColumnContextMenu_1.ColumnContextMenu; } });
+var ActionsColumn_1 = require("./columns/ActionsColumn.js");
+Object.defineProperty(exports, "ActionsColumn", { enumerable: true, get: function () { return ActionsColumn_1.ActionsColumn; } });
+Object.defineProperty(exports, "createActionsColumn", { enumerable: true, get: function () { return ActionsColumn_1.createActionsColumn; } });
+// Rows
+var SelectColumn_1 = require("./rows/SelectColumn.js");
+Object.defineProperty(exports, "createSelectColumn", { enumerable: true, get: function () { return SelectColumn_1.createSelectColumn; } });
+var ExpandableRow_1 = require("./rows/ExpandableRow.js");
+Object.defineProperty(exports, "ExpandableRow", { enumerable: true, get: function () { return ExpandableRow_1.ExpandableRow; } });
+Object.defineProperty(exports, "ExpansionToggleCell", { enumerable: true, get: function () { return ExpandableRow_1.ExpansionToggleCell; } });
+Object.defineProperty(exports, "ExpansionToggleHeader", { enumerable: true, get: function () { return ExpandableRow_1.ExpansionToggleHeader; } });
+Object.defineProperty(exports, "ProcessBreakdown", { enumerable: true, get: function () { return ExpandableRow_1.ProcessBreakdown; } });
+var DraggableRow_1 = require("./rows/DraggableRow.js");
+Object.defineProperty(exports, "DraggableRow", { enumerable: true, get: function () { return DraggableRow_1.DraggableRow; } });
+var SummaryRow_1 = require("./rows/SummaryRow.js");
+Object.defineProperty(exports, "SummaryRow", { enumerable: true, get: function () { return SummaryRow_1.SummaryRow; } });
+// Cells
+var EditableCell_1 = require("./cells/EditableCell.js");
+Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return EditableCell_1.EditableCell; } });
+Object.defineProperty(exports, "useCellEditing", { enumerable: true, get: function () { return EditableCell_1.useCellEditing; } });
+var CellRenderer_1 = require("./cells/CellRenderer.js");
+Object.defineProperty(exports, "CellRenderer", { enumerable: true, get: function () { return CellRenderer_1.CellRenderer; } });
+var SelectionCell_1 = require("./cells/SelectionCell.js");
+Object.defineProperty(exports, "SelectionCell", { enumerable: true, get: function () { return SelectionCell_1.SelectionCell; } });
+Object.defineProperty(exports, "SelectionCheckbox", { enumerable: true, get: function () { return SelectionCell_1.SelectionCheckbox; } });
+var BooleanCell_1 = require("./cells/BooleanCell.js");
+Object.defineProperty(exports, "BooleanCell", { enumerable: true, get: function () { return BooleanCell_1.BooleanCell; } });
+// Search
+var InlineSearchCell_1 = require("./search/InlineSearchCell.js");
+Object.defineProperty(exports, "InlineSearchCell", { enumerable: true, get: function () { return InlineSearchCell_1.InlineSearchCell; } });
+var SearchNavigator_1 = require("./search/SearchNavigator.js");
+Object.defineProperty(exports, "SearchNavigator", { enumerable: true, get: function () { return SearchNavigator_1.SearchNavigator; } });
+Object.defineProperty(exports, "useSearchNavigation", { enumerable: true, get: function () { return SearchNavigator_1.useSearchNavigation; } });
+var SearchHighlighter_1 = require("./search/SearchHighlighter.js");
+Object.defineProperty(exports, "SearchHighlighter", { enumerable: true, get: function () { return SearchHighlighter_1.SearchHighlighter; } });
+Object.defineProperty(exports, "advancedSearch", { enumerable: true, get: function () { return SearchHighlighter_1.advancedSearch; } });
+Object.defineProperty(exports, "fuzzyMatch", { enumerable: true, get: function () { return SearchHighlighter_1.fuzzyMatch; } });
+var SearchNewModal_1 = require("./search/SearchNewModal.js");
+Object.defineProperty(exports, "SearchNewModal", { enumerable: true, get: function () { return SearchNewModal_1.SearchNewModal; } });
+// Hooks
+var useKeyboardNavigation_1 = require("./hooks/useKeyboardNavigation.js");
+Object.defineProperty(exports, "useKeyboardNavigation", { enumerable: true, get: function () { return useKeyboardNavigation_1.useKeyboardNavigation; } });
+var useClipboard_1 = require("./hooks/useClipboard.js");
+Object.defineProperty(exports, "useClipboard", { enumerable: true, get: function () { return useClipboard_1.useClipboard; } });
+var useCellRangeSelection_1 = require("./hooks/useCellRangeSelection.js");
+Object.defineProperty(exports, "useCellRangeSelection", { enumerable: true, get: function () { return useCellRangeSelection_1.useCellRangeSelection; } });
+var useDataGridState_1 = require("./hooks/useDataGridState.js");
+Object.defineProperty(exports, "useDataGridState", { enumerable: true, get: function () { return useDataGridState_1.useDataGridState; } });
+// Utils - Export/Import
+var export_1 = require("./controls/menu/export/export.js");
+Object.defineProperty(exports, "exportData", { enumerable: true, get: function () { return export_1.exportData; } });
+Object.defineProperty(exports, "exportToCSV", { enumerable: true, get: function () { return export_1.exportToCSV; } });
+Object.defineProperty(exports, "exportToExcel", { enumerable: true, get: function () { return export_1.exportToExcel; } });
+Object.defineProperty(exports, "exportToPDF", { enumerable: true, get: function () { return export_1.exportToPDF; } });
+Object.defineProperty(exports, "exportToJSON", { enumerable: true, get: function () { return export_1.exportToJSON; } });
+var import_1 = require("./controls/menu/import/import.js");
+Object.defineProperty(exports, "importData", { enumerable: true, get: function () { return import_1.importData; } });
+Object.defineProperty(exports, "importFromCSV", { enumerable: true, get: function () { return import_1.importFromCSV; } });
+Object.defineProperty(exports, "importFromExcel", { enumerable: true, get: function () { return import_1.importFromExcel; } });
+Object.defineProperty(exports, "importFromJSON", { enumerable: true, get: function () { return import_1.importFromJSON; } });

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

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DraggableRow = DraggableRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const lucide_react_1 = require("lucide-react");
+const CellRenderer_1 = require("../cells/CellRenderer.js");
+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, } = (0, sortable_1.useSortable)({
+        id: rowId,
+    });
+    const style = {
+        ...rowStyle,
+        transform: utilities_1.CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    };
+    return ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { className: "w-full h-full flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { className: "h-4 w-4 text-gray-400" }) }) })), row.getVisibleCells().map((cell, cellIndex) => ((0, jsx_runtime_1.jsx)(CellRenderer_1.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)))] }));
+}