@vtx-ui/react 0.0.1-beta.16 → 0.0.1-beta.17

package/dist/esm/components/DataGrid/components/DataGrid/DataGrid.js

@@ -0,0 +1,569 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { useThemeContext } from '../../../../theme/theme/ThemeProvider.js';
+import '../../../../theme/theme/tokens.js';
+import Checkbox from '../../../Checkbox/components/Checkbox/Checkbox.js';
+import Typography from '../../../Typography/components/Typography/Typography.js';
+import Input from '../../../Input/components/Input/Input.js';
+import Button from '../../../Button/components/Button/Button.js';
+import { ArrowUpIcon, ArrowDownIcon } from '../../../../icons/icons/IconComponents.js';
+
+// Default filter operators for different column types
+const getStringOperators = () => [
+    {
+        label: 'contains',
+        value: 'contains',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            return (value) => {
+                if (value == null)
+                    return false;
+                return String(value).toLowerCase().includes(filterItem.value.toLowerCase());
+            };
+        },
+    },
+    {
+        label: 'equals',
+        value: 'equals',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            return (value) => {
+                if (value == null)
+                    return false;
+                return String(value).toLowerCase() === filterItem.value.toLowerCase();
+            };
+        },
+    },
+    {
+        label: 'starts with',
+        value: 'startsWith',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            return (value) => {
+                if (value == null)
+                    return false;
+                return String(value).toLowerCase().startsWith(filterItem.value.toLowerCase());
+            };
+        },
+    },
+    {
+        label: 'ends with',
+        value: 'endsWith',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            return (value) => {
+                if (value == null)
+                    return false;
+                return String(value).toLowerCase().endsWith(filterItem.value.toLowerCase());
+            };
+        },
+    },
+    {
+        label: 'is empty',
+        value: 'isEmpty',
+        getApplyFilterFn: () => {
+            return (value) => value == null || String(value).trim() === '';
+        },
+    },
+    {
+        label: 'is not empty',
+        value: 'isNotEmpty',
+        getApplyFilterFn: () => {
+            return (value) => value != null && String(value).trim() !== '';
+        },
+    },
+];
+const getNumberOperators = () => [
+    {
+        label: '=',
+        value: '=',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) === filterValue;
+        },
+    },
+    {
+        label: '!=',
+        value: '!=',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) !== filterValue;
+        },
+    },
+    {
+        label: '>',
+        value: '>',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) > filterValue;
+        },
+    },
+    {
+        label: '>=',
+        value: '>=',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) >= filterValue;
+        },
+    },
+    {
+        label: '<',
+        value: '<',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) < filterValue;
+        },
+    },
+    {
+        label: '<=',
+        value: '<=',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = Number(filterItem.value);
+            return (value) => Number(value) <= filterValue;
+        },
+    },
+    {
+        label: 'is empty',
+        value: 'isEmpty',
+        getApplyFilterFn: () => {
+            return (value) => value == null || value === '';
+        },
+    },
+    {
+        label: 'is not empty',
+        value: 'isNotEmpty',
+        getApplyFilterFn: () => {
+            return (value) => value != null && value !== '';
+        },
+    },
+];
+const getBooleanOperators = () => [
+    {
+        label: 'is',
+        value: 'is',
+        getApplyFilterFn: (filterItem) => {
+            if (filterItem.value == null)
+                return () => true;
+            const filterValue = filterItem.value === 'true';
+            return (value) => Boolean(value) === filterValue;
+        },
+    },
+];
+const getDateOperators = () => [
+    {
+        label: 'is',
+        value: 'is',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            const filterDate = new Date(filterItem.value).toDateString();
+            return (value) => {
+                if (!value)
+                    return false;
+                return new Date(value).toDateString() === filterDate;
+            };
+        },
+    },
+    {
+        label: 'after',
+        value: 'after',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            const filterDate = new Date(filterItem.value);
+            return (value) => {
+                if (!value)
+                    return false;
+                return new Date(value) > filterDate;
+            };
+        },
+    },
+    {
+        label: 'before',
+        value: 'before',
+        getApplyFilterFn: (filterItem) => {
+            if (!filterItem.value)
+                return () => true;
+            const filterDate = new Date(filterItem.value);
+            return (value) => {
+                if (!value)
+                    return false;
+                return new Date(value) < filterDate;
+            };
+        },
+    },
+];
+const getOperatorsForColumnType = (type = 'string') => {
+    switch (type) {
+        case 'number':
+            return getNumberOperators();
+        case 'boolean':
+            return getBooleanOperators();
+        case 'date':
+            return getDateOperators();
+        case 'string':
+        default:
+            return getStringOperators();
+    }
+};
+// Column Menu Component
+const ColumnMenu = ({ column, anchorEl, onClose, onSort, onFilter, currentSort, hasFilter }) => {
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (menuRef.current && !menuRef.current.contains(event.target) &&
+                anchorEl && !anchorEl.contains(event.target)) {
+                onClose();
+            }
+        };
+        if (anchorEl) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [anchorEl, onClose]);
+    if (!anchorEl)
+        return null;
+    const rect = anchorEl.getBoundingClientRect();
+    return (jsxs("div", { ref: menuRef, className: "vertex-datagrid-column-menu", style: {
+            position: 'fixed',
+            top: rect.bottom + 4,
+            left: rect.left,
+            zIndex: 1300,
+        }, children: [column.sortable && (jsxs(Fragment, { children: [jsxs("button", { className: "vertex-datagrid-column-menu-item", onClick: () => {
+                            onSort('asc');
+                            onClose();
+                        }, children: [jsx(ArrowUpIcon, { size: 16 }), jsx("span", { children: "Sort ascending" }), currentSort === 'asc' && jsx("span", { className: "vertex-datagrid-menu-check", children: "\u2713" })] }), jsxs("button", { className: "vertex-datagrid-column-menu-item", onClick: () => {
+                            onSort('desc');
+                            onClose();
+                        }, children: [jsx(ArrowDownIcon, { size: 16 }), jsx("span", { children: "Sort descending" }), currentSort === 'desc' && jsx("span", { className: "vertex-datagrid-menu-check", children: "\u2713" })] }), currentSort && (jsxs("button", { className: "vertex-datagrid-column-menu-item", onClick: () => {
+                            onSort(null);
+                            onClose();
+                        }, children: [jsx("span", { style: { width: 16 } }), jsx("span", { children: "Unsort" })] })), column.filterable && jsx("div", { className: "vertex-datagrid-column-menu-divider" })] })), column.filterable && (jsxs("button", { className: "vertex-datagrid-column-menu-item", onClick: () => {
+                    onFilter();
+                    onClose();
+                }, children: [jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) }), jsx("span", { children: hasFilter ? 'Edit filter' : 'Filter' }), hasFilter && jsx("span", { className: "vertex-datagrid-menu-badge", children: "\u25CF" })] }))] }));
+};
+// Filter Panel Component
+const FilterPanel = ({ columns, filterModel, onFilterModelChange, onClose, targetColumn }) => {
+    const filterableColumns = columns.filter((col) => col.filterable !== false);
+    const panelRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (panelRef.current && !panelRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [onClose]);
+    useEffect(() => {
+        if (targetColumn && filterModel.items.length === 0) {
+            addFilter(targetColumn);
+        }
+    }, [targetColumn]);
+    const addFilter = (field) => {
+        var _a, _b;
+        const selectedField = field || ((_a = filterableColumns[0]) === null || _a === void 0 ? void 0 : _a.field) || '';
+        const column = columns.find(col => col.field === selectedField);
+        const operators = (column === null || column === void 0 ? void 0 : column.filterOperators) || getOperatorsForColumnType(column === null || column === void 0 ? void 0 : column.type);
+        const newItem = {
+            id: Date.now(),
+            field: selectedField,
+            operator: ((_b = operators[0]) === null || _b === void 0 ? void 0 : _b.value) || 'contains',
+            value: '',
+        };
+        onFilterModelChange({
+            ...filterModel,
+            items: [...filterModel.items, newItem],
+        });
+    };
+    const updateFilter = (index, updates) => {
+        var _a;
+        const newItems = [...filterModel.items];
+        const oldItem = newItems[index];
+        newItems[index] = { ...oldItem, ...updates };
+        // If field changed, reset operator to first available for new type
+        if (updates.field && updates.field !== oldItem.field) {
+            const column = columns.find(col => col.field === updates.field);
+            const operators = (column === null || column === void 0 ? void 0 : column.filterOperators) || getOperatorsForColumnType(column === null || column === void 0 ? void 0 : column.type);
+            newItems[index].operator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
+        }
+        onFilterModelChange({
+            ...filterModel,
+            items: newItems,
+        });
+    };
+    const removeFilter = (index) => {
+        const newItems = filterModel.items.filter((_, i) => i !== index);
+        onFilterModelChange({
+            ...filterModel,
+            items: newItems,
+        });
+    };
+    const toggleLogicOperator = () => {
+        onFilterModelChange({
+            ...filterModel,
+            logicOperator: filterModel.logicOperator === 'and' ? 'or' : 'and',
+        });
+    };
+    return (jsx("div", { className: "vertex-datagrid-filter-panel-overlay", children: jsxs("div", { ref: panelRef, className: "vertex-datagrid-filter-panel", children: [jsxs("div", { className: "vertex-datagrid-filter-panel-header", children: [jsx(Typography, { weight: "semibold", size: "sm", children: "Filters" }), jsx("button", { className: "vertex-datagrid-filter-close", onClick: onClose, children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] }), jsx("div", { className: "vertex-datagrid-filter-panel-body", children: filterModel.items.length === 0 ? (jsxs("div", { className: "vertex-datagrid-filter-empty", children: [jsx("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) }), jsx(Typography, { size: "sm", color: "secondary", children: "No filters applied" }), jsx(Button, { variant: "outline", size: "sm", onClick: () => addFilter(), children: "Add filter" })] })) : (jsxs(Fragment, { children: [filterModel.items.map((item, index) => {
+                                var _a;
+                                const column = columns.find((col) => col.field === item.field);
+                                const operators = (column === null || column === void 0 ? void 0 : column.filterOperators) || getOperatorsForColumnType(column === null || column === void 0 ? void 0 : column.type);
+                                const needsInput = !['isEmpty', 'isNotEmpty'].includes(item.operator);
+                                return (jsxs("div", { className: "vertex-datagrid-filter-row", children: [index > 0 && (jsx("button", { className: "vertex-datagrid-filter-logic-btn", onClick: toggleLogicOperator, title: "Toggle AND/OR", children: ((_a = filterModel.logicOperator) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || 'OR' })), jsxs("div", { className: "vertex-datagrid-filter-controls", children: [jsx("select", { value: item.field, onChange: (e) => updateFilter(index, { field: e.target.value }), className: "vertex-datagrid-filter-select", children: filterableColumns.map((col) => (jsx("option", { value: col.field, children: col.headerName }, col.field))) }), jsx("select", { value: item.operator, onChange: (e) => updateFilter(index, { operator: e.target.value }), className: "vertex-datagrid-filter-select", children: operators.map((op) => (jsx("option", { value: op.value, children: op.label }, op.value))) }), needsInput && (jsx(Input, { value: item.value || '', onChange: (e) => updateFilter(index, { value: e.target.value }), placeholder: "Value", size: "sm" })), jsx("button", { className: "vertex-datagrid-filter-remove", onClick: () => removeFilter(index), title: "Remove filter", children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }, item.id || index));
+                            }), jsx("div", { className: "vertex-datagrid-filter-actions", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => addFilter(), children: "+ Add filter" }) })] })) }), filterModel.items.length > 0 && (jsx("div", { className: "vertex-datagrid-filter-panel-footer", children: jsx(Button, { variant: "ghost", size: "sm", onClick: () => onFilterModelChange({ items: [], logicOperator: 'or' }), children: "Clear all" }) }))] }) }));
+};
+// Main DataGrid component
+const DataGridBase = ({ columns, rows, getRowId = (row, index) => { var _a; return (_a = row.id) !== null && _a !== void 0 ? _a : index; }, 
+// Filtering
+filterModel: controlledFilterModel, onFilterModelChange, initialState, disableColumnFilter = false, ignoreDiacritics = false, 
+// Sorting
+sortModel: controlledSortModel, onSortModelChange, 
+// Selection
+checkboxSelection = false, rowSelectionModel: controlledSelectionModel, onRowSelectionModelChange, 
+// Pagination
+pagination = true, pageSize: initialPageSize = 10, pageSizeOptions = [5, 10, 25, 50, 100], 
+// UI
+loading = false, skeletonLoader = false, skeletonRows = 5, loadingContent, emptyStateIcon, emptyStateTitle = 'No data available', emptyStateDescription, autoHeight = false, density = 'standard', disableColumnMenu = false, hideFooter = false, size, className, ...props }) => {
+    var _a, _b;
+    const { theme } = useThemeContext();
+    const gridSize = size || theme.defaultSize;
+    // Internal states
+    const [internalFilterModel, setInternalFilterModel] = useState(((_a = initialState === null || initialState === void 0 ? void 0 : initialState.filter) === null || _a === void 0 ? void 0 : _a.filterModel) || { items: [], logicOperator: 'or' });
+    const [internalSortModel, setInternalSortModel] = useState([]);
+    const [internalSelectionModel, setInternalSelectionModel] = useState([]);
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const [filterPanelOpen, setFilterPanelOpen] = useState(false);
+    const [columnMenuState, setColumnMenuState] = useState(null);
+    const [filterTargetColumn, setFilterTargetColumn] = useState();
+    // Use controlled or internal state
+    const filterModel = controlledFilterModel !== null && controlledFilterModel !== void 0 ? controlledFilterModel : internalFilterModel;
+    const sortModel = controlledSortModel !== null && controlledSortModel !== void 0 ? controlledSortModel : internalSortModel;
+    const selectionModel = controlledSelectionModel !== null && controlledSelectionModel !== void 0 ? controlledSelectionModel : internalSelectionModel;
+    const handleFilterModelChange = useCallback((model) => {
+        if (onFilterModelChange) {
+            onFilterModelChange(model);
+        }
+        else {
+            setInternalFilterModel(model);
+        }
+    }, [onFilterModelChange]);
+    const handleSortModelChange = useCallback((model) => {
+        if (onSortModelChange) {
+            onSortModelChange(model);
+        }
+        else {
+            setInternalSortModel(model);
+        }
+    }, [onSortModelChange]);
+    const handleSelectionModelChange = useCallback((model) => {
+        if (onRowSelectionModelChange) {
+            onRowSelectionModelChange(model);
+        }
+        else {
+            setInternalSelectionModel(model);
+        }
+    }, [onRowSelectionModelChange]);
+    // Apply filters
+    const filteredRows = useMemo(() => {
+        if (disableColumnFilter || filterModel.items.length === 0) {
+            return rows;
+        }
+        return rows.filter((row) => {
+            const results = filterModel.items.map((filterItem) => {
+                const column = columns.find((col) => col.field === filterItem.field);
+                if (!column)
+                    return true;
+                const value = column.valueGetter ? column.valueGetter(row) : row[filterItem.field];
+                const operators = column.filterOperators || getOperatorsForColumnType(column.type);
+                const operator = operators.find((op) => op.value === filterItem.operator);
+                if (!operator)
+                    return true;
+                const filterFn = operator.getApplyFilterFn(filterItem);
+                return filterFn(value);
+            });
+            // Apply logic operator
+            if (filterModel.logicOperator === 'and') {
+                return results.every((result) => result);
+            }
+            else {
+                return results.some((result) => result);
+            }
+        });
+    }, [rows, filterModel, columns, disableColumnFilter]);
+    // Apply sorting
+    const sortedRows = useMemo(() => {
+        if (sortModel.length === 0) {
+            return filteredRows;
+        }
+        const sorted = [...filteredRows];
+        const sortItem = sortModel[0];
+        const column = columns.find((col) => col.field === sortItem.field);
+        if (!column)
+            return sorted;
+        sorted.sort((a, b) => {
+            const aValue = column.valueGetter ? column.valueGetter(a) : a[sortItem.field];
+            const bValue = column.valueGetter ? column.valueGetter(b) : b[sortItem.field];
+            if (aValue == null && bValue == null)
+                return 0;
+            if (aValue == null)
+                return 1;
+            if (bValue == null)
+                return -1;
+            let comparison = 0;
+            if (column.type === 'number') {
+                comparison = Number(aValue) - Number(bValue);
+            }
+            else if (column.type === 'date') {
+                comparison = new Date(aValue).getTime() - new Date(bValue).getTime();
+            }
+            else {
+                comparison = String(aValue).localeCompare(String(bValue));
+            }
+            return sortItem.sort === 'asc' ? comparison : -comparison;
+        });
+        return sorted;
+    }, [filteredRows, sortModel, columns]);
+    // Apply pagination
+    const paginatedRows = useMemo(() => {
+        if (!pagination) {
+            return sortedRows;
+        }
+        const start = page * pageSize;
+        const end = start + pageSize;
+        return sortedRows.slice(start, end);
+    }, [sortedRows, page, pageSize, pagination]);
+    // Handle column sort
+    const handleColumnSort = useCallback((column, direction) => {
+        if (!column.sortable)
+            return;
+        let newSortModel;
+        if (direction === null) {
+            newSortModel = [];
+        }
+        else {
+            newSortModel = [{ field: column.field, sort: direction }];
+        }
+        handleSortModelChange(newSortModel);
+    }, [handleSortModelChange]);
+    // Handle row selection
+    const handleRowSelect = useCallback((rowId) => {
+        const newSelection = selectionModel.includes(rowId)
+            ? selectionModel.filter((id) => id !== rowId)
+            : [...selectionModel, rowId];
+        handleSelectionModelChange(newSelection);
+    }, [selectionModel, handleSelectionModelChange]);
+    const handleSelectAll = useCallback(() => {
+        if (selectionModel.length === paginatedRows.length) {
+            handleSelectionModelChange([]);
+        }
+        else {
+            const allIds = paginatedRows.map((row, index) => getRowId(row, index));
+            handleSelectionModelChange(allIds);
+        }
+    }, [selectionModel, paginatedRows, handleSelectionModelChange, getRowId]);
+    const totalPages = Math.ceil(sortedRows.length / pageSize);
+    const hasActiveFilters = filterModel.items.length > 0;
+    const densityClass = `vertex-datagrid--${density}`;
+    const sizeClass = `vertex-datagrid--${gridSize}`;
+    const getCellPinnedStyle = (column, index, isHeader = false) => {
+        if (!column.pinned)
+            return {};
+        const style = {
+            position: 'sticky',
+            zIndex: isHeader ? 101 : 100,
+            background: isHeader ? '#fafafa' : 'inherit',
+        };
+        if (column.pinned === 'left') {
+            let leftOffset = checkboxSelection ? 58 : 0;
+            for (let i = 0; i < index; i++) {
+                if (columns[i].pinned === 'left') {
+                    leftOffset += columns[i].width || 150;
+                }
+            }
+            style.left = leftOffset;
+        }
+        else if (column.pinned === 'right') {
+            let rightOffset = 0;
+            const colIndex = columns.indexOf(column);
+            for (let i = colIndex + 1; i < columns.length; i++) {
+                if (columns[i].pinned === 'right') {
+                    rightOffset += columns[i].width || 150;
+                }
+            }
+            style.right = rightOffset;
+        }
+        return style;
+    };
+    return (jsxs("div", { className: `vertex-datagrid ${densityClass} ${sizeClass} ${autoHeight ? 'vertex-datagrid--auto-height' : ''} ${className || ''}`, ...props, children: [jsx("div", { className: "vertex-datagrid-container", children: jsxs("table", { className: "vertex-datagrid-table", children: [jsx("thead", { className: "vertex-datagrid-thead", children: jsxs("tr", { children: [checkboxSelection && (jsx("th", { className: "vertex-datagrid-th vertex-datagrid-checkbox-cell", children: jsx(Checkbox, { checked: selectionModel.length === paginatedRows.length && paginatedRows.length > 0, indeterminate: selectionModel.length > 0 && selectionModel.length < paginatedRows.length, onChange: handleSelectAll }) })), columns.map((column, colIndex) => {
+                                        const sortItem = sortModel.find((sort) => sort.field === column.field);
+                                        const isSorted = !!sortItem;
+                                        const sortDirection = sortItem === null || sortItem === void 0 ? void 0 : sortItem.sort;
+                                        const hasFilter = filterModel.items.some(item => item.field === column.field);
+                                        const pinnedStyle = getCellPinnedStyle(column, colIndex, true);
+                                        return (jsx("th", { className: `vertex-datagrid-th ${column.sortable ? 'vertex-datagrid-th--sortable' : ''} ${column.pinned ? `vertex-datagrid-th--pinned-${column.pinned}` : ''}`, style: {
+                                                width: column.width,
+                                                minWidth: column.minWidth,
+                                                maxWidth: column.maxWidth,
+                                                textAlign: column.headerAlign || column.align || 'left',
+                                                flex: column.flex,
+                                                ...pinnedStyle,
+                                            }, children: jsxs("div", { className: "vertex-datagrid-th-content", children: [jsxs("div", { className: "vertex-datagrid-th-label", onClick: () => column.sortable && handleColumnSort(column, !isSorted ? 'asc' : sortDirection === 'asc' ? 'desc' : null), children: [jsx("span", { className: "vertex-datagrid-th-text", children: column.headerName }), column.sortable && (jsx("div", { className: `vertex-datagrid-sort-icon ${isSorted ? 'vertex-datagrid-sort-icon--active' : ''}`, children: isSorted ? (sortDirection === 'asc' ? (jsx(ArrowUpIcon, { size: 18 })) : (jsx(ArrowDownIcon, { size: 18 }))) : (jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", opacity: "0.4", children: jsx("path", { d: "M12 5v14M5 12l7 7 7-7" }) })) }))] }), !disableColumnMenu && (column.sortable || column.filterable) && (jsxs("button", { className: `vertex-datagrid-column-menu-btn ${hasFilter ? 'vertex-datagrid-column-menu-btn--filtered' : ''}`, onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            setColumnMenuState({ column, anchorEl: e.currentTarget });
+                                                        }, title: "Column options", children: [jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: [jsx("circle", { cx: "12", cy: "5", r: "2" }), jsx("circle", { cx: "12", cy: "12", r: "2" }), jsx("circle", { cx: "12", cy: "19", r: "2" })] }), hasFilter && jsx("span", { className: "vertex-datagrid-filter-badge" })] }))] }) }, column.field));
+                                    })] }) }), jsx("tbody", { className: "vertex-datagrid-tbody", children: loading ? (skeletonLoader ? (
+                            // Skeleton loader rows
+                            Array.from({ length: skeletonRows }).map((_, index) => (jsxs("tr", { className: "vertex-datagrid-row vertex-datagrid-row--skeleton", children: [checkboxSelection && (jsx("td", { className: "vertex-datagrid-td vertex-datagrid-checkbox-cell", children: jsx("div", { className: "vertex-datagrid-skeleton vertex-datagrid-skeleton--checkbox" }) })), columns.map((column) => (jsx("td", { className: "vertex-datagrid-td", children: jsx("div", { className: "vertex-datagrid-skeleton vertex-datagrid-skeleton--text" }) }, column.field)))] }, `skeleton-${index}`)))) : (
+                            // Traditional loading state
+                            jsx("tr", { children: jsx("td", { colSpan: columns.length + (checkboxSelection ? 1 : 0), className: "vertex-datagrid-loading", children: jsx("div", { className: "vertex-datagrid-loading-content", children: loadingContent || (jsxs(Fragment, { children: [jsx("div", { className: "vertex-datagrid-spinner" }), jsx(Typography, { size: "sm", color: "secondary", children: "Loading..." })] })) }) }) }))) : paginatedRows.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: columns.length + (checkboxSelection ? 1 : 0), className: "vertex-datagrid-empty", children: emptyStateIcon || emptyStateDescription ? (jsxs("div", { className: "vertex-datagrid-empty-state", children: [emptyStateIcon && (jsx("div", { className: "vertex-datagrid-empty-state-icon", children: emptyStateIcon })), jsx("div", { className: "vertex-datagrid-empty-state-message", children: emptyStateTitle }), emptyStateDescription && (jsx("div", { className: "vertex-datagrid-empty-state-description", children: emptyStateDescription }))] })) : (jsxs("div", { className: "vertex-datagrid-empty-content", children: [jsxs("svg", { width: "64", height: "64", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", opacity: "0.3", children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), jsx("line", { x1: "3", y1: "9", x2: "21", y2: "9" }), jsx("line", { x1: "9", y1: "21", x2: "9", y2: "9" })] }), jsx(Typography, { size: "sm", color: "secondary", children: emptyStateTitle })] })) }) })) : (paginatedRows.map((row, rowIndex) => {
+                                const rowId = getRowId(row, rowIndex);
+                                const isSelected = selectionModel.includes(rowId);
+                                return (jsxs("tr", { className: `vertex-datagrid-row ${isSelected ? 'vertex-datagrid-row--selected' : ''}`, children: [checkboxSelection && (jsx("td", { className: "vertex-datagrid-td vertex-datagrid-checkbox-cell", children: jsx(Checkbox, { checked: isSelected, onChange: () => handleRowSelect(rowId) }) })), columns.map((column, colIndex) => {
+                                            const value = column.valueGetter ? column.valueGetter(row) : row[column.field];
+                                            const formattedValue = column.valueFormatter ? column.valueFormatter(value) : value;
+                                            const cellContent = column.renderCell
+                                                ? column.renderCell({ row, value, field: column.field })
+                                                : formattedValue;
+                                            const pinnedStyle = getCellPinnedStyle(column, colIndex, false);
+                                            return (jsx("td", { className: `vertex-datagrid-td ${column.pinned ? `vertex-datagrid-td--pinned-${column.pinned}` : ''}`, style: {
+                                                    textAlign: column.align || 'left',
+                                                    ...pinnedStyle,
+                                                }, children: cellContent }, column.field));
+                                        })] }, rowId));
+                            })) })] }) }), !hideFooter && pagination && (jsxs("div", { className: "vertex-datagrid-footer", children: [jsx("div", { className: "vertex-datagrid-footer-left", children: hasActiveFilters && (jsxs("button", { className: "vertex-datagrid-filter-chip", onClick: () => setFilterPanelOpen(true), children: [jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }) }), jsxs("span", { children: [filterModel.items.length, " ", filterModel.items.length === 1 ? 'filter' : 'filters'] })] })) }), jsx("div", { className: "vertex-datagrid-footer-center", children: jsx(Typography, { size: "sm", color: "secondary", children: sortedRows.length === 0 ? '0 rows' : `${page * pageSize + 1}–${Math.min((page + 1) * pageSize, sortedRows.length)} of ${sortedRows.length}` }) }), jsxs("div", { className: "vertex-datagrid-footer-right", children: [jsxs("label", { className: "vertex-datagrid-pagesize-label", children: [jsx(Typography, { size: "sm", color: "secondary", children: "Rows per page:" }), jsx("select", { value: pageSize, onChange: (e) => {
+                                            setPageSize(Number(e.target.value));
+                                            setPage(0);
+                                        }, className: "vertex-datagrid-pagesize-select", children: pageSizeOptions.map((option) => (jsx("option", { value: option, children: option }, option))) })] }), jsxs("div", { className: "vertex-datagrid-pagination", children: [jsx("button", { className: "vertex-datagrid-pagination-btn", onClick: () => setPage(0), disabled: page === 0, title: "First page", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M11 17l-5-5 5-5M18 17l-5-5 5-5" }) }) }), jsx("button", { className: "vertex-datagrid-pagination-btn", onClick: () => setPage((p) => Math.max(0, p - 1)), disabled: page === 0, title: "Previous page", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M15 18l-6-6 6-6" }) }) }), jsxs(Typography, { size: "sm", color: "secondary", children: ["Page ", page + 1, " of ", totalPages || 1] }), jsx("button", { className: "vertex-datagrid-pagination-btn", onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)), disabled: page >= totalPages - 1, title: "Next page", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M9 18l6-6-6-6" }) }) }), jsx("button", { className: "vertex-datagrid-pagination-btn", onClick: () => setPage(totalPages - 1), disabled: page >= totalPages - 1, title: "Last page", children: jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M13 17l5-5-5-5M6 17l5-5-5-5" }) }) })] })] })] })), columnMenuState && (jsx(ColumnMenu, { column: columnMenuState.column, anchorEl: columnMenuState.anchorEl, onClose: () => setColumnMenuState(null), onSort: (direction) => handleColumnSort(columnMenuState.column, direction), onFilter: () => {
+                    setFilterTargetColumn(columnMenuState.column.field);
+                    setFilterPanelOpen(true);
+                }, currentSort: (_b = sortModel.find(s => s.field === columnMenuState.column.field)) === null || _b === void 0 ? void 0 : _b.sort, hasFilter: filterModel.items.some(item => item.field === columnMenuState.column.field) })), filterPanelOpen && (jsx(FilterPanel, { columns: columns, filterModel: filterModel, onFilterModelChange: handleFilterModelChange, onClose: () => {
+                    setFilterPanelOpen(false);
+                    setFilterTargetColumn(undefined);
+                }, targetColumn: filterTargetColumn }))] }));
+};
+DataGridBase.displayName = 'DataGrid';
+
+export { DataGridBase as DataGrid, DataGridBase as default };
+//# sourceMappingURL=DataGrid.js.map