npm - react-restyle-components - Versions diffs - 0.4.41 → 0.4.42 - Mend

react-restyle-components 0.4.41 → 0.4.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/lib/src/core-components/src/components/ag-grid/AgGrid.js CHANGED Viewed

@@ -6,8 +6,24 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Reference: https://www.ag-grid.com/react-data-grid/getting-started/
  */
 import React, { forwardRef, useImperativeHandle, useMemo, useCallback, useState, useEffect, useRef, } from 'react';
-import { GridRoot, GridWrapper, GridToolbar, ToolbarGroup, ToolbarButton, QuickFilter, TableContainer, StyledTable, TableHead, HeaderRow, HeaderCell, HeaderCellContent, HeaderText, SortIndicator, FilterIndicator, ResizeHandle, GroupHeaderRow, GroupHeaderCell, FloatingFilterRow, FloatingFilterCell, TableBody, TableRow, TableCell, CellContent, Checkbox, CheckboxCell, ExpandButton, DragHandle, CellEditor, PaginationBar, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, StatusBar, StatusItem, LoadingOverlay, Spinner, NoRowsOverlay, ContextMenu, ContextMenuItem, ContextMenuDivider, MobileCardContainer, MobileCard, MobileCardHeader, MobileCardRow, MobileCardLabel, MobileCardValue, SelectionBar, SelectionActions, getTheme, } from './elements';
-import { useSorting, useFiltering, usePagination, useRowSelection, useRowExpansion, useColumnState, useCellEditing, useContextMenu, useResponsive, useClipboard, getNestedValue, createRowNode, exportToCsv, } from './hooks';
+import { GridRoot, GridWrapper, GridToolbar, ToolbarGroup, ToolbarButton, QuickFilter, TableContainer, StyledTable, TableHead, HeaderRow, HeaderCell, HeaderCellContent, HeaderText, SortIndicator, FilterIndicator, ResizeHandle, GroupHeaderRow, GroupHeaderCell, FloatingFilterRow, FloatingFilterCell, TableBody, TableRow, TableCell, CellContent, Checkbox, CheckboxCell, ExpandButton, DragHandle, CellEditor, PaginationBar, PaginationInfo, PaginationControls, PageButton, PageSizeSelect, StatusBar, StatusItem, LoadingOverlay, Spinner, NoRowsOverlay, ContextMenu, ContextMenuItem, ContextMenuDivider, MobileCardContainer, MobileCard, MobileCardHeader, MobileCardRow, MobileCardLabel, MobileCardValue, SelectionBar, SelectionActions, getTheme,
+// New Side Panel Components
+SidePanel, SidePanelTabs, SidePanelTab, SidePanelContent, SidePanelSearch, SidePanelSection, SidePanelSectionHeader, SidePanelColumnItem, SidePanelDragHandle, SidePanelGroupLabel,
+// Row Groups
+RowGroupsZone, RowGroupsLabel, RowGroupChip,
+// Values Panel
+ValuesPanel, ValueItem, ValueItemLabel, ValueItemRemove,
+// Pivot Mode
+PivotModeToggle, PivotModeLabel, ToggleSwitch,
+// Column Menu
+HeaderMenuButton, ColumnMenuPopup, ColumnMenuSection, ColumnMenuItem,
+// Set Filter
+SetFilterContainer, SetFilterHeader, SetFilterSearch, SetFilterList, SetFilterItem, SetFilterActions, SetFilterButton,
+// Filter Panel
+FilterPanelColumn, FilterPanelHeader, FilterPanelContent,
+// Layout
+GridLayout, GridMainArea, } from './elements';
+import { useSorting, useFiltering, usePagination, useRowSelection, useRowExpansion, useColumnState, useCellEditing, useContextMenu, useResponsive, useClipboard, getNestedValue, createRowNode, exportToCsv, useAggregationPanel, useRowGroupingPanel, useColumnMenu, useSidePanel, usePivotMode, } from './hooks';
 // ============================================================================
 // Icons
 // ============================================================================
@@ -26,6 +42,18 @@ const MenuIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", strok
 const GripIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", opacity: "0.5", children: [_jsx("circle", { cx: "9", cy: "5", r: "1.5" }), _jsx("circle", { cx: "9", cy: "12", r: "1.5" }), _jsx("circle", { cx: "9", cy: "19", r: "1.5" }), _jsx("circle", { cx: "15", cy: "5", r: "1.5" }), _jsx("circle", { cx: "15", cy: "12", r: "1.5" }), _jsx("circle", { cx: "15", cy: "19", r: "1.5" })] }));
 const EmptyIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M3 9h18M9 3v18", strokeLinecap: "round" })] }));
 const CloseIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const PinIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M12 2v10M12 22v-6M4 12h16", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+const PinLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 4v16M8 12h12M15 7l5 5-5 5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const PinRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M20 4v16M4 12h12M9 7l-5 5 5 5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const NoPinIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M3 3l18 18M12 2v10M12 22v-6", strokeLinecap: "round" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+const GroupIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 6h16M4 12h16M4 18h16", strokeLinecap: "round" }) }));
+const AutosizeIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 12h16M9 7l-5 5 5 5M15 7l5 5-5 5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ResetIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3 3v5h5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const SigmaIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M18 6H6l6 6-6 6h12", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const EyeIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+const EyeOffIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24" }), _jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })] }));
+const CheckIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "20 6 9 17 4 12", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const PanelRightIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M15 3v18", strokeLinecap: "round" })] }));
 // ============================================================================
 // Helper Functions
 // ============================================================================
@@ -123,14 +151,44 @@ function AgGridInner(props, ref) {
         }
     }, [controlledQuickFilter, setQuickFilterText]);
     // ============================================================================
-    // Processed Data (sort + filter)
+    // Set Filter State (for each column) - moved up for processedData dependency
+    // ============================================================================
+    const [setFilterStates, setSetFilterStates] = useState({});
+    // ============================================================================
+    // Processed Data (sort + filter + set filter)
     // ============================================================================
     const processedData = useMemo(() => {
         let data = [...rowData];
+        // Apply quick filter and column text filters
         data = filterData(data, visibleColumns);
+        // Apply set filters (filter by selected values)
+        Object.entries(setFilterStates).forEach(([field, selectedValues]) => {
+            // If no values selected or all values selected, skip filtering
+            const allValues = new Set();
+            rowData.forEach((row) => {
+                const value = getNestedValue(row, field);
+                if (value != null) {
+                    allValues.add(String(value));
+                }
+            });
+            // Only apply filter if some values are deselected
+            if (selectedValues.size > 0 && selectedValues.size < allValues.size) {
+                data = data.filter((row) => {
+                    const value = getNestedValue(row, field);
+                    if (value == null)
+                        return false;
+                    return selectedValues.has(String(value));
+                });
+            }
+            else if (selectedValues.size === 0) {
+                // No values selected means filter out all
+                data = [];
+            }
+        });
+        // Apply sorting
         data = sortData(data, visibleColumns);
         return data;
-    }, [rowData, filterData, sortData, visibleColumns]);
+    }, [rowData, filterData, sortData, visibleColumns, setFilterStates]);
     // ============================================================================
     // Pagination
     // ============================================================================
@@ -166,6 +224,143 @@ function AgGridInner(props, ref) {
     // ============================================================================
     const { isMobile } = useResponsive(mobileBreakpoint);
     // ============================================================================
+    // Side Panel
+    // ============================================================================
+    const { isOpen: isSidePanelOpen, activeTab: sidePanelTab, toggle: toggleSidePanel, switchTab: switchSidePanelTab, setIsOpen: setSidePanelOpen, } = useSidePanel(props.sideBar !== false, 'columns');
+    // ============================================================================
+    // Column Menu
+    // ============================================================================
+    const { menuState: columnMenuState, showColumnMenu, hideColumnMenu, filterDropdownState, showFilterDropdown, hideFilterDropdown, } = useColumnMenu();
+    // ============================================================================
+    // Row Grouping Panel
+    // ============================================================================
+    const { rowGroupColumns, addRowGroupColumn, removeRowGroupColumn, clearRowGroupColumns, groupableColumns, groupedColumnsInfo, } = useRowGroupingPanel(flatColumns);
+    // ============================================================================
+    // Aggregation Panel
+    // ============================================================================
+    const { valueColumns, addValueColumn, removeValueColumn, clearValueColumns, aggregatedValues, } = useAggregationPanel(processedData);
+    // ============================================================================
+    // Pivot Mode
+    // ============================================================================
+    const { isPivotMode, togglePivotMode, } = usePivotMode();
+    // ============================================================================
+    // Expanded Filter Panels State
+    // ============================================================================
+    const [expandedFilterPanels, setExpandedFilterPanels] = useState(new Set());
+    // ============================================================================
+    // Column Drag State (for reordering in side panel)
+    // ============================================================================
+    const [draggedColumnId, setDraggedColumnId] = useState(null);
+    const [dragOverColumnId, setDragOverColumnId] = useState(null);
+    const handleColumnDragStart = useCallback((e, colId) => {
+        setDraggedColumnId(colId);
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', colId);
+    }, []);
+    const handleColumnDragOver = useCallback((e, colId) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+        if (colId !== draggedColumnId) {
+            setDragOverColumnId(colId);
+        }
+    }, [draggedColumnId]);
+    const handleColumnDragLeave = useCallback(() => {
+        setDragOverColumnId(null);
+    }, []);
+    const handleColumnDrop = useCallback((e, targetColId) => {
+        e.preventDefault();
+        if (draggedColumnId && draggedColumnId !== targetColId) {
+            // Find indices in columnState
+            const fromIndex = columnState.findIndex((s) => s.colId === draggedColumnId);
+            const toIndex = columnState.findIndex((s) => s.colId === targetColId);
+            if (fromIndex !== -1 && toIndex !== -1) {
+                moveColumn(draggedColumnId, toIndex);
+            }
+        }
+        setDraggedColumnId(null);
+        setDragOverColumnId(null);
+    }, [draggedColumnId, columnState, moveColumn]);
+    const handleColumnDragEnd = useCallback(() => {
+        setDraggedColumnId(null);
+        setDragOverColumnId(null);
+    }, []);
+    // Extract unique values for a field
+    const getUniqueValuesForField = useCallback((field) => {
+        const values = new Set();
+        rowData.forEach((row) => {
+            const value = getNestedValue(row, field);
+            if (value != null) {
+                values.add(String(value));
+            }
+        });
+        return Array.from(values).sort();
+    }, [rowData]);
+    // Toggle filter panel expansion
+    const toggleFilterPanel = useCallback((field) => {
+        setExpandedFilterPanels((prev) => {
+            const next = new Set(prev);
+            if (next.has(field)) {
+                next.delete(field);
+            }
+            else {
+                next.add(field);
+            }
+            return next;
+        });
+    }, []);
+    // Toggle value in set filter
+    const toggleSetFilterValue = useCallback((field, value) => {
+        setSetFilterStates((prev) => {
+            const currentValues = prev[field] || new Set(getUniqueValuesForField(field));
+            const next = new Set(currentValues);
+            if (next.has(value)) {
+                next.delete(value);
+            }
+            else {
+                next.add(value);
+            }
+            return { ...prev, [field]: next };
+        });
+    }, [getUniqueValuesForField]);
+    // Select/deselect all in set filter
+    const toggleSetFilterSelectAll = useCallback((field) => {
+        setSetFilterStates((prev) => {
+            const allValues = getUniqueValuesForField(field);
+            const currentValues = prev[field];
+            const isAllSelected = !currentValues || currentValues.size === allValues.length;
+            if (isAllSelected) {
+                return { ...prev, [field]: new Set() };
+            }
+            else {
+                return { ...prev, [field]: new Set(allValues) };
+            }
+        });
+    }, [getUniqueValuesForField]);
+    // Check if set filter has active filter
+    const isSetFilterActive = useCallback((field) => {
+        const state = setFilterStates[field];
+        if (!state)
+            return false;
+        const allValues = getUniqueValuesForField(field);
+        return state.size > 0 && state.size < allValues.length;
+    }, [setFilterStates, getUniqueValuesForField]);
+    // Check if any set filter is active
+    const hasActiveSetFilters = useMemo(() => {
+        return Object.entries(setFilterStates).some(([field, selectedValues]) => {
+            const allValues = getUniqueValuesForField(field);
+            return selectedValues.size > 0 && selectedValues.size < allValues.length;
+        });
+    }, [setFilterStates, getUniqueValuesForField]);
+    // Clear all set filters
+    const clearSetFilters = useCallback(() => {
+        setSetFilterStates({});
+    }, []);
+    // Clear all filters (including set filters)
+    const clearAllFilters = useCallback(() => {
+        clearFilters();
+        clearSetFilters();
+    }, [clearFilters, clearSetFilters]);
+    // ============================================================================
     // Refs
     // ============================================================================
     const containerRef = useRef(null);
@@ -510,7 +705,28 @@ function AgGridInner(props, ref) {
                 const { sort: sortDir } = getSortForColumn(colId);
                 const state = columnState.find((s) => s.colId === colId);
                 const width = state?.width || col.width;
-                return (_jsxs(HeaderCell, { "$theme": gridTheme, "$align": col.headerAlign || col.align, "$sortable": col.sortable !== false && sortable, "$sorted": !!sortDir, "$resizable": col.resizable !== false, "$pinned": col.pinned, "$width": width, "$minWidth": col.minWidth, "$maxWidth": col.maxWidth, onClick: (e) => handleHeaderClick(col, e), children: [_jsxs(HeaderCellContent, { children: [_jsx(HeaderText, { children: col.headerName || col.field }), col.sortable !== false && sortable && (_jsx(SortIndicator, { "$direction": sortDir, "$active": !!sortDir, children: sortDir === 'desc' ? _jsx(SortDescIcon, {}) : _jsx(SortAscIcon, {}) })), col.filter && (_jsx(FilterIndicator, { "$active": isFilterActive(col.field || ''), "$theme": gridTheme, children: _jsx(FilterIcon, {}) }))] }), col.resizable !== false && (_jsx(ResizeHandle, { "$theme": gridTheme, "$resizing": resizing?.colId === colId, onMouseDown: (e) => handleResizeStart(e, colId, width || 100) }))] }, colId));
+                return (_jsxs(HeaderCell, { "$theme": gridTheme, "$align": col.headerAlign || col.align, "$sortable": col.sortable !== false && sortable, "$sorted": !!sortDir, "$resizable": col.resizable !== false, "$pinned": col.pinned, "$width": width, "$minWidth": col.minWidth, "$maxWidth": col.maxWidth, onClick: (e) => handleHeaderClick(col, e), onMouseEnter: (e) => {
+                        const target = e.currentTarget.querySelector('[data-menu-button]');
+                        if (target)
+                            target.style.opacity = '1';
+                    }, onMouseLeave: (e) => {
+                        const target = e.currentTarget.querySelector('[data-menu-button]');
+                        if (target && columnMenuState.colId !== colId)
+                            target.style.opacity = '0';
+                    }, children: [_jsxs(HeaderCellContent, { children: [_jsx(HeaderText, { children: col.headerName || col.field }), col.sortable !== false && sortable && (_jsx(SortIndicator, { "$direction": sortDir, "$active": !!sortDir, children: sortDir === 'desc' ? _jsx(SortDescIcon, {}) : _jsx(SortAscIcon, {}) })), col.filter && (_jsx(FilterIndicator, { "$active": isFilterActive(col.field || '') || isSetFilterActive(col.field || ''), "$theme": gridTheme, onClick: (e) => {
+                                        e.stopPropagation();
+                                        const rect = e.target.getBoundingClientRect();
+                                        showFilterDropdown(colId, rect.left, rect.bottom + 4);
+                                    }, children: _jsx(FilterIcon, {}) })), !col.suppressMenu && (_jsx(HeaderMenuButton, { "data-menu-button": true, "$theme": gridTheme, "$active": columnMenuState.visible && columnMenuState.colId === colId, onClick: (e) => {
+                                        e.stopPropagation();
+                                        const rect = e.target.getBoundingClientRect();
+                                        if (columnMenuState.visible && columnMenuState.colId === colId) {
+                                            hideColumnMenu();
+                                        }
+                                        else {
+                                            showColumnMenu(colId, rect.left, rect.bottom + 4);
+                                        }
+                                    }, children: _jsx(MenuIcon, {}) }))] }), col.resizable !== false && (_jsx(ResizeHandle, { "$theme": gridTheme, "$resizing": resizing?.colId === colId, onMouseDown: (e) => handleResizeStart(e, colId, width || 100) }))] }, colId));
             })] }));
     // ============================================================================
     // Render Floating Filters
@@ -712,8 +928,116 @@ function AgGridInner(props, ref) {
             }) }));
     };
     // ============================================================================
+    // Render Column Menu Popup
+    // ============================================================================
+    const renderColumnMenuPopup = () => {
+        if (!columnMenuState.visible || !columnMenuState.colId)
+            return null;
+        const col = flatColumns.find((c) => c.colId === columnMenuState.colId);
+        if (!col)
+            return null;
+        const colId = columnMenuState.colId;
+        const { sort: sortDir } = getSortForColumn(colId);
+        return (_jsxs(ColumnMenuPopup, { "$theme": gridTheme, "$x": columnMenuState.x, "$y": columnMenuState.y, onClick: (e) => e.stopPropagation(), children: [_jsxs(ColumnMenuSection, { "$theme": gridTheme, children: [_jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                handleSort(colId, false);
+                                if (sortDir !== 'asc') {
+                                    // Force asc
+                                }
+                                hideColumnMenu();
+                            }, children: [_jsx(SortAscIcon, {}), _jsx("span", { children: "Sort Ascending" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                handleSort(colId, false);
+                                hideColumnMenu();
+                            }, children: [_jsx(SortDescIcon, {}), _jsx("span", { children: "Sort Descending" })] })] }), _jsxs(ColumnMenuSection, { "$theme": gridTheme, children: [_jsxs(ColumnMenuItem, { "$theme": gridTheme, "$hasSubmenu": true, onClick: () => { }, children: [_jsx(PinIcon, {}), _jsx("span", { children: "Pin Column" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                setColumnPinned(colId, 'left');
+                                hideColumnMenu();
+                            }, style: { paddingLeft: 36 }, children: [_jsx(PinLeftIcon, {}), _jsx("span", { children: "Pin Left" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                setColumnPinned(colId, 'right');
+                                hideColumnMenu();
+                            }, style: { paddingLeft: 36 }, children: [_jsx(PinRightIcon, {}), _jsx("span", { children: "Pin Right" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                setColumnPinned(colId, null);
+                                hideColumnMenu();
+                            }, style: { paddingLeft: 36 }, children: [_jsx(NoPinIcon, {}), _jsx("span", { children: "No Pin" })] })] }), _jsxs(ColumnMenuSection, { "$theme": gridTheme, children: [_jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                // Autosize this column (simplified)
+                                hideColumnMenu();
+                            }, children: [_jsx(AutosizeIcon, {}), _jsx("span", { children: "Autosize This Column" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                // Autosize all columns (simplified)
+                                hideColumnMenu();
+                            }, children: [_jsx(AutosizeIcon, {}), _jsx("span", { children: "Autosize All Columns" })] })] }), col.field && col.enableRowGroup !== false && (_jsx(ColumnMenuSection, { "$theme": gridTheme, children: _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                            addRowGroupColumn(col.field);
+                            hideColumnMenu();
+                        }, children: [_jsx(GroupIcon, {}), _jsxs("span", { children: ["Group by ", col.headerName || col.field] })] }) })), _jsxs(ColumnMenuSection, { "$theme": gridTheme, children: [_jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                setSidePanelOpen(true);
+                                switchSidePanelTab('columns');
+                                hideColumnMenu();
+                            }, children: [_jsx(ColumnsIcon, {}), _jsx("span", { children: "Choose Columns" })] }), _jsxs(ColumnMenuItem, { "$theme": gridTheme, onClick: () => {
+                                resetColumnState();
+                                hideColumnMenu();
+                            }, children: [_jsx(ResetIcon, {}), _jsx("span", { children: "Reset Columns" })] })] })] }));
+    };
+    // ============================================================================
+    // Render Set Filter Dropdown
+    // ============================================================================
+    const renderSetFilterDropdown = () => {
+        if (!filterDropdownState.visible || !filterDropdownState.colId)
+            return null;
+        const col = flatColumns.find((c) => c.colId === filterDropdownState.colId);
+        if (!col || !col.field)
+            return null;
+        const field = col.field;
+        const uniqueValues = getUniqueValuesForField(field);
+        const selectedValues = setFilterStates[field] || new Set(uniqueValues);
+        const isAllSelected = selectedValues.size === uniqueValues.length;
+        return (_jsxs(SetFilterContainer, { "$theme": gridTheme, style: {
+                position: 'fixed',
+                top: filterDropdownState.y,
+                left: filterDropdownState.x,
+                zIndex: 1000,
+            }, onClick: (e) => e.stopPropagation(), children: [_jsx(SetFilterHeader, { "$theme": gridTheme, children: "Text Filter" }), _jsx(SetFilterSearch, { "$theme": gridTheme, children: _jsx("input", { type: "text", placeholder: "Search...", autoFocus: true }) }), _jsxs(SetFilterList, { "$theme": gridTheme, children: [_jsxs(SetFilterItem, { "$theme": gridTheme, "$selectAll": true, children: [_jsx("input", { type: "checkbox", checked: isAllSelected, onChange: () => toggleSetFilterSelectAll(field) }), "(Select All)"] }), uniqueValues.map((value) => (_jsxs(SetFilterItem, { "$theme": gridTheme, children: [_jsx("input", { type: "checkbox", checked: selectedValues.has(value), onChange: () => toggleSetFilterValue(field, value) }), value] }, value)))] }), _jsxs(SetFilterActions, { "$theme": gridTheme, children: [_jsx(SetFilterButton, { "$theme": gridTheme, onClick: () => {
+                                toggleSetFilterSelectAll(field);
+                            }, children: "Reset" }), _jsx(SetFilterButton, { "$theme": gridTheme, "$primary": true, onClick: () => {
+                                hideFilterDropdown();
+                            }, children: "Apply" })] })] }));
+    };
+    // ============================================================================
+    // Render Side Panel
+    // ============================================================================
+    const renderSidePanel = () => {
+        if (props.sideBar === false)
+            return null;
+        return (_jsxs(SidePanel, { "$theme": gridTheme, "$open": isSidePanelOpen, children: [_jsx(SidePanelTabs, { "$theme": gridTheme, "$collapsed": !isSidePanelOpen, children: isSidePanelOpen ? (_jsxs(_Fragment, { children: [_jsxs(SidePanelTab, { "$theme": gridTheme, "$active": sidePanelTab === 'columns', onClick: () => switchSidePanelTab('columns'), children: [_jsx(ColumnsIcon, {}), "Columns"] }), _jsxs(SidePanelTab, { "$theme": gridTheme, "$active": sidePanelTab === 'filters', onClick: () => switchSidePanelTab('filters'), children: [_jsx(FilterIcon, {}), "Filters"] })] })) : (_jsxs(_Fragment, { children: [_jsx(SidePanelTab, { "$theme": gridTheme, "$collapsed": true, "$active": sidePanelTab === 'columns', onClick: () => { setSidePanelOpen(true); switchSidePanelTab('columns'); }, title: "Columns", children: _jsx(ColumnsIcon, {}) }), _jsx(SidePanelTab, { "$theme": gridTheme, "$collapsed": true, "$active": sidePanelTab === 'filters', onClick: () => { setSidePanelOpen(true); switchSidePanelTab('filters'); }, title: "Filters", children: _jsx(FilterIcon, {}) })] })) }), isSidePanelOpen && (_jsxs(SidePanelContent, { "$theme": gridTheme, children: [sidePanelTab === 'columns' && (_jsxs(_Fragment, { children: [_jsxs(PivotModeToggle, { "$theme": gridTheme, children: [_jsx(PivotModeLabel, { "$theme": gridTheme, children: "Pivot Mode" }), _jsxs(ToggleSwitch, { "$theme": gridTheme, children: [_jsx("input", { type: "checkbox", checked: isPivotMode, onChange: togglePivotMode }), _jsx("span", {})] })] }), _jsx(SidePanelSearch, { "$theme": gridTheme, children: _jsx("input", { type: "text", placeholder: "Search..." }) }), _jsxs(SidePanelSection, { "$theme": gridTheme, children: [_jsxs(SidePanelSectionHeader, { "$theme": gridTheme, children: [_jsx(ColumnsIcon, {}), "Columns"] }), processedColumns.map((col) => {
+                                            const colId = col.colId;
+                                            const isVisible = !col.hide;
+                                            const isDragging = draggedColumnId === colId;
+                                            const isDragOver = dragOverColumnId === colId;
+                                            return (_jsxs(SidePanelColumnItem, { "$theme": gridTheme, "$dragging": isDragging, "$selected": isDragOver, draggable: true, onDragStart: (e) => handleColumnDragStart(e, colId), onDragOver: (e) => handleColumnDragOver(e, colId), onDragLeave: handleColumnDragLeave, onDrop: (e) => handleColumnDrop(e, colId), onDragEnd: handleColumnDragEnd, children: [_jsx(SidePanelDragHandle, { "$theme": gridTheme, children: _jsx(GripIcon, {}) }), _jsx(Checkbox, { type: "checkbox", "$theme": gridTheme, checked: isVisible, onChange: (e) => {
+                                                            // Toggle visibility: if checked, show (visible=true); if unchecked, hide (visible=false)
+                                                            setColumnVisible(colId, e.target.checked);
+                                                        } }), _jsx(SidePanelGroupLabel, { children: col.headerName || col.field })] }, colId));
+                                        })] }), _jsxs(SidePanelSection, { "$theme": gridTheme, children: [_jsxs(SidePanelSectionHeader, { "$theme": gridTheme, children: [_jsx(GroupIcon, {}), "Row Groups"] }), _jsx(RowGroupsZone, { "$theme": gridTheme, "$hasItems": rowGroupColumns.length > 0, children: rowGroupColumns.length === 0 ? (_jsxs(RowGroupsLabel, { "$theme": gridTheme, children: [_jsx(GroupIcon, {}), "Drag here to set row groups"] })) : (groupedColumnsInfo.map(({ field, headerName }) => (_jsxs(RowGroupChip, { "$theme": gridTheme, children: [headerName, _jsx("button", { onClick: () => removeRowGroupColumn(field), children: _jsx(CloseIcon, {}) })] }, field)))) })] }), _jsxs(SidePanelSection, { "$theme": gridTheme, children: [_jsxs(SidePanelSectionHeader, { "$theme": gridTheme, children: [_jsx(SigmaIcon, {}), "Values"] }), _jsx(ValuesPanel, { "$theme": gridTheme, children: valueColumns.length === 0 ? (_jsx(RowGroupsZone, { "$theme": gridTheme, "$hasItems": false, children: _jsxs(RowGroupsLabel, { "$theme": gridTheme, children: [_jsx(SigmaIcon, {}), "Drag here to aggregate"] }) })) : (valueColumns.map(({ field, aggFunc, displayName }) => (_jsxs(ValueItem, { "$theme": gridTheme, children: [_jsxs(ValueItemLabel, { "$theme": gridTheme, children: [_jsx(SidePanelDragHandle, { "$theme": gridTheme, children: _jsx(GripIcon, {}) }), aggFunc, "(", displayName, ")"] }), _jsx(ValueItemRemove, { "$theme": gridTheme, onClick: () => removeValueColumn(field, aggFunc), children: _jsx(CloseIcon, {}) })] }, `${aggFunc}-${field}`)))) })] })] })), sidePanelTab === 'filters' && (_jsxs(_Fragment, { children: [_jsx(SidePanelSearch, { "$theme": gridTheme, children: _jsx("input", { type: "text", placeholder: "Search..." }) }), flatColumns
+                                    .filter((col) => col.filter && col.field)
+                                    .map((col) => {
+                                    const field = col.field;
+                                    const isExpanded = expandedFilterPanels.has(field);
+                                    const hasFilter = isFilterActive(field) || isSetFilterActive(field);
+                                    const uniqueValues = getUniqueValuesForField(field);
+                                    const selectedValues = setFilterStates[field] || new Set(uniqueValues);
+                                    return (_jsxs(FilterPanelColumn, { "$theme": gridTheme, children: [_jsxs(FilterPanelHeader, { "$theme": gridTheme, "$expanded": isExpanded, "$hasFilter": hasFilter, onClick: () => toggleFilterPanel(field), children: [_jsx(ChevronRightIcon, {}), col.headerName || col.field, hasFilter && _jsx(FilterIcon, {})] }), isExpanded && (_jsx(FilterPanelContent, { "$theme": gridTheme, "$expanded": isExpanded, children: _jsxs(SetFilterList, { "$theme": gridTheme, style: { maxHeight: 200, marginBottom: 8 }, children: [_jsxs(SetFilterItem, { "$theme": gridTheme, "$selectAll": true, children: [_jsx("input", { type: "checkbox", checked: selectedValues.size === uniqueValues.length, onChange: () => toggleSetFilterSelectAll(field) }), "(Select All)"] }), uniqueValues.slice(0, 20).map((value) => (_jsxs(SetFilterItem, { "$theme": gridTheme, children: [_jsx("input", { type: "checkbox", checked: selectedValues.has(value), onChange: () => toggleSetFilterValue(field, value) }), value] }, value))), uniqueValues.length > 20 && (_jsx(SetFilterItem, { "$theme": gridTheme, children: _jsxs("span", { style: { opacity: 0.6, fontSize: 12 }, children: ["...and ", uniqueValues.length - 20, " more"] }) }))] }) }))] }, col.colId));
+                                })] }))] }))] }));
+    };
+    // ============================================================================
     // Main Render
     // ============================================================================
+    // Close menus on outside click
+    useEffect(() => {
+        const handleClickOutside = () => {
+            if (columnMenuState.visible)
+                hideColumnMenu();
+            if (filterDropdownState.visible)
+                hideFilterDropdown();
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [columnMenuState.visible, filterDropdownState.visible, hideColumnMenu, hideFilterDropdown]);
     return (_jsxs(GridRoot, { ref: containerRef, "$theme": gridTheme, "$responsive": responsive, style: containerStyle, className: containerClassName, onKeyDown: handleKeyDown, tabIndex: 0, dir: enableRtl ? 'rtl' : 'ltr', children: [_jsxs(GridToolbar, { "$theme": gridTheme, children: [_jsxs(ToolbarGroup, { children: [_jsxs(QuickFilter, { "$theme": gridTheme, children: [_jsx(SearchIcon, {}), _jsx("input", { type: "text", placeholder: "Search...", value: quickFilterText, onChange: (e) => {
                                             setQuickFilterText(e.target.value);
                                             onFilterChanged?.({
@@ -722,9 +1046,9 @@ function AgGridInner(props, ref) {
                                                 columnApi,
                                                 context,
                                             });
-                                        } })] }), hasActiveFilters && (_jsxs(ToolbarButton, { "$theme": gridTheme, onClick: clearFilters, children: [_jsx(CloseIcon, {}), "Clear Filters"] }))] }), _jsxs(ToolbarGroup, { children: [!suppressCsvExport && (_jsxs(ToolbarButton, { "$theme": gridTheme, onClick: () => exportToCsv(processedData, visibleColumns, 'export.csv'), children: [_jsx(DownloadIcon, {}), "Export"] })), _jsxs(ToolbarButton, { "$theme": gridTheme, onClick: resetColumnState, children: [_jsx(RefreshIcon, {}), "Reset"] })] })] }), selectedRows.length > 0 && (_jsxs(SelectionBar, { "$theme": gridTheme, "$visible": selectedRows.length > 0, children: [_jsxs("span", { children: [selectedRows.length, " row", selectedRows.length !== 1 ? 's' : '', " selected"] }), _jsx(SelectionActions, { children: _jsxs(ToolbarButton, { "$theme": gridTheme, style: { background: 'transparent', border: 'none', color: 'white' }, onClick: deselectAll, children: [_jsx(CloseIcon, {}), "Clear"] }) })] })), _jsx(GridWrapper, { children: _jsxs(TableContainer, { "$stickyHeader": true, "$maxHeight": domLayout === 'autoHeight' ? undefined : 'calc(100% - 100px)', children: [responsive && isMobile ? (displayData.length === 0 ? renderEmptyState() : renderMobileCards()) : (
-                        /* Desktop Table View */
-                        _jsxs(_Fragment, { children: [displayData.length === 0 && !isLoading && renderEmptyState(), displayData.length > 0 && (_jsxs(StyledTable, { ref: tableRef, "$theme": gridTheme, "$fixedLayout": true, children: [_jsxs(TableHead, { "$theme": gridTheme, "$sticky": true, children: [renderColumnGroups(), renderHeader(), renderFloatingFilters()] }), _jsx(TableBody, { "$theme": gridTheme, children: displayData.map((row, i) => renderRow(row, startRow + i)) })] }))] })), isLoading && renderLoadingState()] }) }), renderPagination(), statusBar && (_jsxs(StatusBar, { "$theme": gridTheme, children: [_jsxs(StatusItem, { children: [_jsx("strong", { children: "Total:" }), " ", processedData.length, " rows"] }), _jsxs(StatusItem, { children: [_jsx("strong", { children: "Selected:" }), " ", selectedRows.length] })] })), renderContextMenu()] }));
+                                        } })] }), (hasActiveFilters || hasActiveSetFilters) && (_jsxs(ToolbarButton, { "$theme": gridTheme, onClick: clearAllFilters, children: [_jsx(CloseIcon, {}), "Clear Filters"] }))] }), _jsxs(ToolbarGroup, { children: [!suppressCsvExport && (_jsxs(ToolbarButton, { "$theme": gridTheme, onClick: () => exportToCsv(processedData, visibleColumns, 'export.csv'), children: [_jsx(DownloadIcon, {}), "Export"] })), _jsxs(ToolbarButton, { "$theme": gridTheme, onClick: resetColumnState, children: [_jsx(RefreshIcon, {}), "Reset"] }), props.sideBar !== false && (_jsx(ToolbarButton, { "$theme": gridTheme, "$active": isSidePanelOpen, onClick: toggleSidePanel, children: _jsx(PanelRightIcon, {}) }))] })] }), props.rowGroupPanelShow !== 'never' && rowGroupColumns.length > 0 && (_jsxs(RowGroupsZone, { "$theme": gridTheme, "$hasItems": true, children: [_jsx(RowGroupsLabel, { "$theme": gridTheme, children: _jsx(GroupIcon, {}) }), groupedColumnsInfo.map(({ field, headerName }) => (_jsxs(RowGroupChip, { "$theme": gridTheme, children: [headerName, _jsx("button", { onClick: () => removeRowGroupColumn(field), children: _jsx(CloseIcon, {}) })] }, field)))] })), selectedRows.length > 0 && (_jsxs(SelectionBar, { "$theme": gridTheme, "$visible": selectedRows.length > 0, children: [_jsxs("span", { children: [selectedRows.length, " row", selectedRows.length !== 1 ? 's' : '', " selected"] }), _jsx(SelectionActions, { children: _jsxs(ToolbarButton, { "$theme": gridTheme, style: { background: 'transparent', border: 'none', color: 'white' }, onClick: deselectAll, children: [_jsx(CloseIcon, {}), "Clear"] }) })] })), _jsxs(GridLayout, { children: [_jsxs(GridMainArea, { children: [_jsx(GridWrapper, { children: _jsxs(TableContainer, { "$stickyHeader": true, "$maxHeight": domLayout === 'autoHeight' ? undefined : 'calc(100% - 100px)', children: [responsive && isMobile ? (displayData.length === 0 ? renderEmptyState() : renderMobileCards()) : (
+                                        /* Desktop Table View */
+                                        _jsxs(_Fragment, { children: [displayData.length === 0 && !isLoading && renderEmptyState(), displayData.length > 0 && (_jsxs(StyledTable, { ref: tableRef, "$theme": gridTheme, "$fixedLayout": true, children: [_jsxs(TableHead, { "$theme": gridTheme, "$sticky": true, children: [renderColumnGroups(), renderHeader(), renderFloatingFilters()] }), _jsx(TableBody, { "$theme": gridTheme, children: displayData.map((row, i) => renderRow(row, startRow + i)) })] }))] })), isLoading && renderLoadingState()] }) }), renderPagination(), statusBar && (_jsxs(StatusBar, { "$theme": gridTheme, children: [_jsxs(StatusItem, { children: [_jsx("strong", { children: "Rows:" }), " ", processedData.length] }), _jsxs(StatusItem, { children: [_jsx("strong", { children: "Selected:" }), " ", selectedRows.length] })] }))] }), renderSidePanel()] }), renderContextMenu(), renderColumnMenuPopup(), renderSetFilterDropdown()] }));
 }
 // ============================================================================
 // Exported Component with ForwardRef

package/lib/src/core-components/src/components/ag-grid/elements.d.ts CHANGED Viewed

@@ -104,6 +104,7 @@ export declare const TableCell: import("styled-components/dist/types").IStyledCo
 }>> & string;
 export declare const CellContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $wrapText?: boolean | undefined;
+    $theme?: AgGridTheme | undefined;
 }>> & string;
 export declare const Checkbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
     $theme: AgGridTheme;
@@ -243,4 +244,139 @@ export declare const SelectionBar: import("styled-components/dist/types").IStyle
     $visible: boolean;
 }>> & string;
 export declare const SelectionActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SidePanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $open: boolean;
+    $width?: number | undefined;
+}>> & string;
+export declare const SidePanelTabs: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $collapsed?: boolean | undefined;
+}>> & string;
+export declare const SidePanelTab: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $theme: AgGridTheme;
+    $active?: boolean | undefined;
+    $collapsed?: boolean | undefined;
+}>> & string;
+export declare const SidePanelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SidePanelSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SidePanelSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SidePanelSectionHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $collapsible?: boolean | undefined;
+}>> & string;
+export declare const SidePanelColumnItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $indent?: number | undefined;
+    $dragging?: boolean | undefined;
+    $selected?: boolean | undefined;
+}>> & string;
+export declare const SidePanelDragHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SidePanelGroupLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const RowGroupsZone: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $dragOver?: boolean | undefined;
+    $hasItems?: boolean | undefined;
+}>> & string;
+export declare const RowGroupsLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const RowGroupChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ValuesPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ValueItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ValueItemLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ValueItemRemove: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const PivotModeToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const PivotModeLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ToggleSwitch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const HeaderMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $theme: AgGridTheme;
+    $active?: boolean | undefined;
+}>> & string;
+export declare const ColumnMenuPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $x: number;
+    $y: number;
+}>> & string;
+export declare const ColumnMenuSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ColumnMenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $disabled?: boolean | undefined;
+    $hasSubmenu?: boolean | undefined;
+}>> & string;
+export declare const ColumnMenuSubmenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $theme: AgGridTheme;
+    $selectAll?: boolean | undefined;
+}>> & string;
+export declare const SetFilterActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const SetFilterButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $theme: AgGridTheme;
+    $primary?: boolean | undefined;
+}>> & string;
+export declare const FilterPanelColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const FilterPanelHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $expanded?: boolean | undefined;
+    $hasFilter?: boolean | undefined;
+}>> & string;
+export declare const FilterPanelContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+    $expanded?: boolean | undefined;
+}>> & string;
+export declare const GridLayout: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GridMainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ColumnVisibilityDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ColumnVisibilityList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $theme: AgGridTheme;
+}>> & string;
+export declare const ColumnVisibilityItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $theme: AgGridTheme;
+}>> & string;
 export { themes };