react-restyle-components 0.4.47 → 0.4.48

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

@@ -1 +1,1057 @@
-"use strict";"use client";import{jsx as t,jsxs as i,Fragment as ie}from"react/jsx-runtime";import oe,{forwardRef as Gl,useImperativeHandle as zl,useMemo as z,useCallback as p,useState as V,useEffect as Ie,useRef as ln}from"react";import{GridRoot as Vl,GridWrapper as Hl,GridToolbar as Wl,ToolbarGroup as rn,ToolbarButton as ae,QuickFilter as Nl,TableContainer as jl,StyledTable as Ol,TableHead as ql,HeaderRow as Kl,HeaderCell as Pe,HeaderCellContent as Ql,HeaderText as Xl,SortIndicator as _l,FilterIndicator as Ul,ResizeHandle as Yl,GroupHeaderRow as Zl,GroupHeaderCell as on,FloatingFilterRow as Jl,FloatingFilterCell as Re,TableBody as er,TableRow as an,TableCell as H,CellContent as sn,Checkbox as De,CheckboxCell as dn,ExpandButton as tr,DragHandle as nr,CellEditor as lr,PaginationBar as rr,PaginationInfo as ir,PaginationControls as or,PageButton as Le,PageSizeSelect as ar,StatusBar as sr,StatusItem as cn,LoadingOverlay as hn,Spinner as dr,NoRowsOverlay as un,ContextMenu as cr,ContextMenuItem as rt,ContextMenuDivider as hr,MobileCardContainer as gn,MobileCard as pn,MobileCardHeader as ur,MobileCardRow as gr,MobileCardLabel as pr,MobileCardValue as mr,SelectionBar as Cr,SelectionActions as fr,getTheme as $r,SidePanel as kr,SidePanelTabs as vr,SidePanelTab as Fe,SidePanelContent as Sr,SidePanelSearch as mn,SidePanelSection as it,SidePanelSectionHeader as ot,SidePanelColumnItem as xr,SidePanelDragHandle as Cn,SidePanelGroupLabel as yr,RowGroupsZone as at,RowGroupsLabel as st,RowGroupChip as fn,ValuesPanel as br,ValueItem as wr,ValueItemLabel as Mr,ValueItemRemove as Ir,PivotModeToggle as Pr,PivotModeLabel as Rr,ToggleSwitch as Dr,HeaderMenuButton as Lr,ColumnMenuPopup as Fr,ColumnMenuSection as se,ColumnMenuItem as M,SetFilterContainer as Er,SetFilterHeader as Tr,SetFilterSearch as Ar,SetFilterList as $n,SetFilterItem as de,SetFilterActions as Br,SetFilterButton as kn,FilterPanelColumn as Gr,FilterPanelHeader as zr,FilterPanelContent as Vr,GridLayout as Hr,GridMainArea as Wr}from"./elements";import{useSorting as Nr,useFiltering as jr,usePagination as Or,useRowSelection as qr,useRowExpansion as Kr,useColumnState as Qr,useCellEditing as Xr,useContextMenu as _r,useResponsive as Ur,useClipboard as Yr,getNestedValue as D,createRowNode as x,exportToCsv as dt,useAggregationPanel as Zr,useRowGroupingPanel as Jr,useColumnMenu as ei,useSidePanel as ti,usePivotMode as ni}from"./hooks";const li=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"11",cy:"11",r:"8"}),t("path",{d:"M21 21l-4.35-4.35",strokeLinecap:"round"})]}),vn=()=>t("svg",{viewBox:"0 0 24 24",fill:"currentColor",children:t("path",{d:"M7 14l5-5 5 5H7z"})}),Sn=()=>t("svg",{viewBox:"0 0 24 24",fill:"currentColor",children:t("path",{d:"M7 10l5 5 5-5H7z"})}),Ee=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M22 3H2l8 9.46V19l4 2v-8.54L22 3z",strokeLinecap:"round",strokeLinejoin:"round"})}),ct=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M9 18l6-6-6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),ri=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M15 18l-6-6 6-6",strokeLinecap:"round",strokeLinejoin:"round"})}),ii=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M11 17l-5-5 5-5M18 17l-5-5 5-5",strokeLinecap:"round",strokeLinejoin:"round"})}),oi=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M13 7l5 5-5 5M6 7l5 5-5 5",strokeLinecap:"round",strokeLinejoin:"round"})}),ai=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3",strokeLinecap:"round",strokeLinejoin:"round"})}),Te=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("rect",{x:"3",y:"3",width:"7",height:"18",rx:"1"}),t("rect",{x:"14",y:"3",width:"7",height:"18",rx:"1"})]}),si=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M23 4v6h-6M1 20v-6h6",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15",strokeLinecap:"round",strokeLinejoin:"round"})]}),di=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("circle",{cx:"12",cy:"12",r:"1"}),t("circle",{cx:"12",cy:"5",r:"1"}),t("circle",{cx:"12",cy:"19",r:"1"})]}),ht=()=>i("svg",{viewBox:"0 0 24 24",fill:"currentColor",opacity:"0.5",children:[t("circle",{cx:"9",cy:"5",r:"1.5"}),t("circle",{cx:"9",cy:"12",r:"1.5"}),t("circle",{cx:"9",cy:"19",r:"1.5"}),t("circle",{cx:"15",cy:"5",r:"1.5"}),t("circle",{cx:"15",cy:"12",r:"1.5"}),t("circle",{cx:"15",cy:"19",r:"1.5"})]}),ci=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",children:[t("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),t("path",{d:"M3 9h18M9 3v18",strokeLinecap:"round"})]}),ce=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M18 6L6 18M6 6l12 12",strokeLinecap:"round",strokeLinejoin:"round"})}),hi=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M12 2v10M12 22v-6M4 12h16",strokeLinecap:"round"}),t("circle",{cx:"12",cy:"12",r:"3"})]}),ui=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M4 4v16M8 12h12M15 7l5 5-5 5",strokeLinecap:"round",strokeLinejoin:"round"})}),gi=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M20 4v16M4 12h12M9 7l-5 5 5 5",strokeLinecap:"round",strokeLinejoin:"round"})}),pi=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M3 3l18 18M12 2v10M12 22v-6",strokeLinecap:"round"}),t("circle",{cx:"12",cy:"12",r:"3"})]}),Ae=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M4 6h16M4 12h16M4 18h16",strokeLinecap:"round"})}),xn=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M4 12h16M9 7l-5 5 5 5M15 7l5 5-5 5",strokeLinecap:"round",strokeLinejoin:"round"})}),mi=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8",strokeLinecap:"round",strokeLinejoin:"round"}),t("path",{d:"M3 3v5h5",strokeLinecap:"round",strokeLinejoin:"round"})]}),yn=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("path",{d:"M18 6H6l6 6-6 6h12",strokeLinecap:"round",strokeLinejoin:"round"})}),Ai=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("path",{d:"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"}),t("circle",{cx:"12",cy:"12",r:"3"})]}),Bi=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("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"}),t("line",{x1:"1",y1:"1",x2:"23",y2:"23"})]}),Gi=()=>t("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t("polyline",{points:"20 6 9 17 4 12",strokeLinecap:"round",strokeLinejoin:"round"})}),Ci=()=>i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2"}),t("path",{d:"M15 3v18",strokeLinecap:"round"})]});function ut(R){return"children"in R}function Be(R){const Q=[];return R.forEach(b=>{ut(b)?Q.push(...Be(b.children)):Q.push(b)}),Q}function fi(R,Q){const{rowData:b,columnDefs:he,defaultColDef:gt,getRowId:k=e=>String(e.data._id??e.data.id??Math.random()),theme:pt="quartz",customTheme:mt,rowHeight:bn=42,headerHeight:wn=42,floatingFiltersHeight:Mn=32,domLayout:In="normal",rowSelection:L,rowMultiSelectWithClick:$i=!1,suppressRowClickSelection:Ct=!1,isRowSelectable:Pn,sortable:ue=!0,suppressMultiSort:Rn=!1,alwaysMultiSort:Ge=!1,filter:ki=!0,floatingFilter:Dn=!1,quickFilterText:ze,pagination:Ve=!1,paginationPageSize:Ln=10,paginationPageSizeSelector:ft=[10,25,50,100],suppressPaginationPanel:Fn=!1,singleClickEdit:ge=!1,stopEditingWhenCellsLoseFocus:En=!0,undoRedoCellEditing:vi=!1,groupDefaultExpanded:Tn=0,masterDetail:X=!1,detailCellRenderer:$t,isRowMaster:An,rowDragManaged:pe=!1,loadingOverlayComponent:kt,noRowsOverlayComponent:vt,statusBar:Bn,enableClipboard:St=!0,suppressCsvExport:Gn=!1,getContextMenuItems:zn,suppressContextMenu:xt=!1,enableBrowserTooltips:Vn=!1,responsive:yt=!0,mobileBreakpoint:Hn=768,mobileCardRenderer:bt,animateRows:Wn=!0,enableRtl:Nn=!1,onGridReady:jn,onCellClicked:wt,onCellDoubleClicked:Mt,onCellValueChanged:It,onRowClicked:Pt,onRowDoubleClicked:Si,onRowSelected:Rt,onSelectionChanged:Dt,onSortChanged:Lt,onFilterChanged:Ft,onPaginationChanged:On,containerStyle:qn,containerClassName:Kn,context:c,gridId:Qn}=R,l=z(()=>$r(pt,mt),[pt,mt]),_=z(()=>Be(he).map(n=>({...gt,...n,colId:n.colId||n.field||`col-${Math.random()}`})),[he,gt]),{columnState:T,processedColumns:me,visibleColumns:g,setColumnVisible:Ce,setColumnWidth:U,setColumnPinned:W,moveColumn:Y,resetColumnState:fe}=Qr(_,Qn),{sortModel:Et,handleSort:$e,getSortForColumn:ke,clearSort:xi,sortData:Tt}=Nr([],!Rn||Ge),{filterModel:At,quickFilterText:He,setQuickFilterText:Z,setColumnFilter:Xn,clearFilters:Bt,isFilterActive:Gt,hasActiveFilters:We,filterData:zt}=jr();Ie(()=>{ze!==void 0&&Z(ze)},[ze,Z]);const[F,Ne]=V({}),y=z(()=>{let e=[...b];return e=zt(e,g),Object.entries(F).forEach(([n,r])=>{const o=new Set;b.forEach(s=>{const a=D(s,n);a!=null&&o.add(String(a))}),r.size>0&&r.size<o.size?e=e.filter(s=>{const a=D(s,n);return a==null?!1:r.has(String(a))}):r.size===0&&(e=[])}),e=Tt(e,g),e},[b,zt,Tt,g,F]),{currentPage:A,pageSize:je,totalPages:J,startRow:ve,endRow:Oe,goToPage:Vt,goToNextPage:qe,goToPreviousPage:Ke,goToFirstPage:Qe,goToLastPage:Xe,changePageSize:_e,paginateData:Ht}=Or(y.length,Ln),m=z(()=>Ve?Ht(y):y,[y,Ve,Ht]),{selectedIds:yi,isSelected:Se,toggleRow:xe,selectAll:ye,deselectAll:ee,isAllSelected:_n,isIndeterminate:Un,selectedRows:C}=qr(m,e=>k({data:e}),L||"multiple",Pn),{isExpanded:Yn,toggleExpand:Zn,expandAll:Wt,collapseAll:Nt}=Kr(e=>k({data:e}),Tn),{editingCell:I,startEditing:N,stopEditing:B,isEditing:Jn}=Xr(),[te,j]=V(null),{contextMenu:w,showContextMenu:jt,hideContextMenu:bi}=_r(),{copyToClipboard:O}=Yr(),{isMobile:el}=Ur(Hn),{isOpen:ne,activeTab:q,toggle:tl,switchTab:le,setIsOpen:Ue}=ti(R.sideBar!==!1,"columns"),{menuState:v,showColumnMenu:nl,hideColumnMenu:S,filterDropdownState:G,showFilterDropdown:ll,hideFilterDropdown:Ye}=ei(),{rowGroupColumns:Ze,addRowGroupColumn:rl,removeRowGroupColumn:Ot,clearRowGroupColumns:wi,groupableColumns:Mi,groupedColumnsInfo:qt}=Jr(_),{valueColumns:Kt,addValueColumn:Ii,removeValueColumn:il,clearValueColumns:Pi,aggregatedValues:Ri}=Zr(y),{isPivotMode:ol,togglePivotMode:al}=ni(),[sl,dl]=V(new Set),[E,Je]=V(null),[cl,be]=V(null),hl=p((e,n)=>{Je(n),e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",n)},[]),ul=p((e,n)=>{e.preventDefault(),e.dataTransfer.dropEffect="move",n!==E&&be(n)},[E]),gl=p(()=>{be(null)},[]),pl=p((e,n)=>{if(e.preventDefault(),E&&E!==n){const r=T.findIndex(s=>s.colId===E),o=T.findIndex(s=>s.colId===n);r!==-1&&o!==-1&&Y(E,o)}Je(null),be(null)},[E,T,Y]),ml=p(()=>{Je(null),be(null)},[]),P=p(e=>{const n=new Set;return b.forEach(r=>{const o=D(r,e);o!=null&&n.add(String(o))}),Array.from(n).sort()},[b]),Cl=p(e=>{dl(n=>{const r=new Set(n);return r.has(e)?r.delete(e):r.add(e),r})},[]),Qt=p((e,n)=>{Ne(r=>{const o=r[e]||new Set(P(e)),s=new Set(o);return s.has(n)?s.delete(n):s.add(n),{...r,[e]:s}})},[P]),et=p(e=>{Ne(n=>{const r=P(e),o=n[e];return!o||o.size===r.length?{...n,[e]:new Set}:{...n,[e]:new Set(r)}})},[P]),Xt=p(e=>{const n=F[e];if(!n)return!1;const r=P(e);return n.size>0&&n.size<r.length},[F,P]),fl=z(()=>Object.entries(F).some(([e,n])=>{const r=P(e);return n.size>0&&n.size<r.length}),[F,P]),_t=p(()=>{Ne({})},[]),$l=p(()=>{Bt(),_t()},[Bt,_t]),we=ln(null),kl=ln(null),[Ut,Yt]=V(!1),[K,Zt]=V(null),vl=p((e,n,r)=>{e.preventDefault(),Zt({colId:n,startX:e.clientX,startWidth:r})},[]);Ie(()=>{if(!K)return;const e=r=>{const o=r.clientX-K.startX,s=Math.max(50,K.startWidth+o);U(K.colId,s)},n=()=>{Zt(null)};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",n),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",n)}},[K,U]);const h=z(()=>({setRowData:()=>{},getRowData:()=>b,applyTransaction:()=>{},applyTransactionAsync:()=>{},refreshCells:()=>{},redrawRows:()=>{},getRowNode:e=>m.find(n=>k({data:n})===e),forEachNode:e=>m.forEach((n,r)=>e(x(n,r),r)),forEachLeafNode:e=>m.forEach((n,r)=>e(x(n,r),r)),getDisplayedRowCount:()=>m.length,getDisplayedRowAtIndex:e=>x(m[e],e),getFirstDisplayedRow:()=>ve,getLastDisplayedRow:()=>Oe,selectAll:ye,deselectAll:ee,selectAllFiltered:ye,deselectAllFiltered:ee,getSelectedRows:()=>C,getSelectedNodes:()=>C.map((e,n)=>x(e,n)),getSortModel:()=>Et,setSortModel:()=>{},setFilterModel:()=>{},getFilterModel:()=>At,setQuickFilter:Z,isQuickFilterPresent:()=>He.length>0,isAnyFilterPresent:()=>We,destroyFilter:()=>{},getFilterInstance:()=>null,onFilterChanged:()=>{},paginationGetPageSize:()=>je,paginationSetPageSize:_e,paginationGetCurrentPage:()=>A,paginationGetTotalPages:()=>J,paginationGetRowCount:()=>y.length,paginationGoToPage:Vt,paginationGoToNextPage:qe,paginationGoToPreviousPage:Ke,paginationGoToFirstPage:Qe,paginationGoToLastPage:Xe,startEditingCell:({rowIndex:e,colKey:n})=>{const r=m[e];if(r){const o=D(r,n);N(k({data:r}),n,e,o)}},stopEditing:e=>B(e||!1),getEditingCells:()=>I?[{rowIndex:I.rowIndex,column:{}}]:[],exportDataAsCsv:e=>{dt(C.length>0&&e?.onlySelected?C:y,g,e?.fileName||"export.csv")},getDataAsCsv:()=>"",exportDataAsExcel:()=>{},copySelectedRangeToClipboard:e=>O(C,g,e),copySelectedRowsToClipboard:e=>O(C,g,e),pasteFromClipboard:()=>{},ensureIndexVisible:()=>{},ensureNodeVisible:()=>{},ensureColumnVisible:()=>{},getHorizontalScrollPosition:()=>we.current?.scrollLeft||0,getVerticalScrollPosition:()=>we.current?.scrollTop||0,resetRowHeights:()=>{},onRowHeightChanged:()=>{},sizeColumnsToFit:()=>{},autoSizeAllColumns:()=>{},autoSizeColumn:()=>{},expandAll:()=>Wt(m),collapseAll:Nt,setRowGroupColumns:()=>{},getRowGroupColumns:()=>[],addEventListener:()=>{},removeEventListener:()=>{},destroy:()=>{},getContext:()=>c,setContext:()=>{},isDestroyed:()=>!1,refreshHeader:()=>{},setHeaderHeight:()=>{},showLoadingOverlay:()=>Yt(!0),showNoRowsOverlay:()=>{},hideOverlay:()=>Yt(!1),getGridElement:()=>we.current}),[b,m,k,ve,Oe,ye,ee,C,Et,At,Z,He,We,je,_e,A,J,y,Vt,qe,Ke,Qe,Xe,N,B,I,g,O,Wt,Nt,c]),u=z(()=>({getAllColumns:()=>me.map((e,n)=>({...e,colId:e.colId,colDef:e,sort:null,visible:!e.hide,pinned:e.pinned||null,width:e.width||100,left:0,getColDef:()=>e,getColId:()=>e.colId,isVisible:()=>!e.hide,isPinned:()=>!!e.pinned,getSort:()=>ke(e.colId).sort,setSort:()=>{}})),getAllGridColumns:()=>[],getVisibleColumns:()=>g.map(e=>({colId:e.colId,colDef:e})),getColumn:e=>me.find(n=>n.colId===e),setColumnVisible:Ce,setColumnsVisible:(e,n)=>e.forEach(r=>Ce(String(r),n)),setColumnPinned:W,setColumnsPinned:(e,n)=>e.forEach(r=>W(String(r),n)),moveColumn:Y,moveColumns:(e,n)=>e.forEach((r,o)=>Y(String(r),n+o)),getColumnState:()=>T,applyColumnState:()=>!0,resetColumnState:fe,setColumnWidth:U,setColumnsWidth:(e,n)=>e.forEach(r=>U(String(r),n)),autoSizeColumn:()=>{},autoSizeColumns:()=>{},sizeColumnsToFit:()=>{},isPinningLeft:()=>g.some(e=>e.pinned==="left"),isPinningRight:()=>g.some(e=>e.pinned==="right"),getDisplayNameForColumn:e=>e.colDef.headerName||e.colDef.field||""}),[me,g,T,Ce,W,Y,fe,U,ke]);zl(Q,()=>({api:h,columnApi:u}),[h,u]),Ie(()=>{jn?.({type:"gridReady",api:h,columnApi:u,context:c})},[]);const Jt=p((e,n,r,o,s)=>{const a=o.field?D(n,o.field):null,d=x(n,r);wt?.({type:"cellClicked",api:h,columnApi:u,context:c,data:n,node:d,column:{colId:o.colId,colDef:o},colDef:o,value:a,rowIndex:r,event:e.nativeEvent}),ge&&o.editable&&(N(k({data:n}),o.colId,r,a),j(a)),L&&!Ct&&!o.checkboxSelection&&(xe(n,r),Rt?.({type:"rowSelected",api:h,columnApi:u,context:c,data:n,node:d,rowIndex:r}))},[h,u,c,wt,ge,L,Ct,xe,Rt,N,k]),en=p((e,n,r,o,s)=>{const a=o.field?D(n,o.field):null,d=x(n,r);Mt?.({type:"cellDoubleClicked",api:h,columnApi:u,context:c,data:n,node:d,column:{colId:o.colId,colDef:o},colDef:o,value:a,rowIndex:r,event:e.nativeEvent}),!ge&&o.editable&&(N(k({data:n}),o.colId,r,a),j(a))},[h,u,c,Mt,ge,N,k]),tt=p((e,n,r)=>{const o=x(n,r);Pt?.({type:"rowClicked",api:h,columnApi:u,context:c,data:n,node:o,rowIndex:r,event:e.nativeEvent})},[h,u,c,Pt]),Sl=p((e,n)=>{e.sortable!==!1&&ue&&($e(e.colId,n.shiftKey||Ge),Lt?.({type:"sortChanged",api:h,columnApi:u,context:c}))},[ue,$e,Ge,Lt,h,u,c]),tn=p((e,n,r,o)=>{xt||(e.preventDefault(),jt(e.clientX,e.clientY,{row:n,rowIndex:r,col:o}))},[xt,jt]),Me=p(e=>{I&&It?.({type:"cellValueChanged",api:h,columnApi:u,context:c,data:{},node:x({},I.rowIndex),column:{},colDef:{},oldValue:I.value,newValue:e,rowIndex:I.rowIndex}),B(!1,e),j(null)},[I,It,h,u,c,B]),xl=p(e=>{I&&(e.key==="Escape"?(B(!0),j(null)):e.key==="Enter"&&Me(te)),St&&(e.ctrlKey||e.metaKey)&&e.key==="c"&&O(C,g,!0)},[I,B,Me,te,St,O,C,g]),yl=he.some(ut),bl=()=>yl?t(Zl,{$theme:l,children:he.map((e,n)=>ut(e)?t(on,{$theme:l,$colSpan:Be(e.children).length,colSpan:Be(e.children).length,children:e.headerName},e.groupId||n):t(on,{$theme:l,$colSpan:1},e.field||n))}):null,wl=()=>i(Kl,{$theme:l,$height:wn,children:[L&&t(Pe,{$theme:l,$width:40,$align:"center",children:t(dn,{children:t(De,{type:"checkbox",$theme:l,checked:_n,ref:e=>e&&(e.indeterminate=Un),onChange:e=>{e.target.checked?ye():ee(),Dt?.({type:"selectionChanged",api:h,columnApi:u,context:c})}})})}),pe&&t(Pe,{$theme:l,$width:40,$align:"center"}),X&&t(Pe,{$theme:l,$width:40,$align:"center"}),g.map((e,n)=>{const r=e.colId,{sort:o}=ke(r),a=T.find(d=>d.colId===r)?.width||e.width;return i(Pe,{$theme:l,$align:e.headerAlign||e.align,$sortable:e.sortable!==!1&&ue,$sorted:!!o,$resizable:e.resizable!==!1,$pinned:e.pinned,$width:a,$minWidth:e.minWidth,$maxWidth:e.maxWidth,onClick:d=>Sl(e,d),onMouseEnter:d=>{const f=d.currentTarget.querySelector("[data-menu-button]");f&&(f.style.opacity="1")},onMouseLeave:d=>{const f=d.currentTarget.querySelector("[data-menu-button]");f&&v.colId!==r&&(f.style.opacity="0")},children:[i(Ql,{children:[t(Xl,{children:e.headerName||e.field}),e.sortable!==!1&&ue&&t(_l,{$direction:o,$active:!!o,children:o==="desc"?t(Sn,{}):t(vn,{})}),e.filter&&t(Ul,{$active:Gt(e.field||"")||Xt(e.field||""),$theme:l,onClick:d=>{d.stopPropagation();const f=d.target.getBoundingClientRect();ll(r,f.left,f.bottom+4)},children:t(Ee,{})}),!e.suppressMenu&&t(Lr,{"data-menu-button":!0,$theme:l,$active:v.visible&&v.colId===r,onClick:d=>{d.stopPropagation();const f=d.target.getBoundingClientRect();v.visible&&v.colId===r?S():nl(r,f.left,f.bottom+4)},children:t(di,{})})]}),e.resizable!==!1&&t(Yl,{$theme:l,$resizing:K?.colId===r,onMouseDown:d=>vl(d,r,a||100)})]},r)})]}),Ml=()=>Dn?i(Jl,{$theme:l,$height:Mn,children:[L&&t(Re,{$theme:l}),pe&&t(Re,{$theme:l}),X&&t(Re,{$theme:l}),g.map(e=>t(Re,{$theme:l,children:e.filter&&t("input",{type:"text",placeholder:`Filter ${e.headerName||e.field}...`,onChange:n=>{Xn(e.field||"",{filterType:"text",filter:n.target.value}),Ft?.({type:"filterChanged",api:h,columnApi:u,context:c})}})},e.colId))]}):null,Il=(e,n,r,o)=>{const s=r.colId,a=k({data:e}),d=r.field?D(e,r.field):null,f=Jn(a,s),nt=T.find($=>$.colId===s)?.width||r.width;if(f)return t(H,{$theme:l,$editing:!0,$align:r.align,$width:nt,children:t(lr,{$theme:l,children:t("input",{type:r.cellEditor==="agNumberCellEditor"?"number":"text",value:te??"",onChange:$=>j($.target.value),onBlur:()=>En&&Me(te),onKeyDown:$=>{$.key==="Enter"&&Me(te),$.key==="Escape"&&(B(!0),j(null))},autoFocus:!0})})},s);if(r.cellRenderer){const $=r.cellRenderer,Bl={value:d,data:e,node:x(e,n,a),rowIndex:n,colDef:r,column:{colId:s,colDef:r},api:h,columnApi:u,context:c,refreshCell:()=>{},eGridCell:null,getValue:()=>d,setValue:()=>{}};return t(H,{$theme:l,$align:r.align,$pinned:r.pinned,$width:nt,onClick:re=>Jt(re,e,n,r,o),onDoubleClick:re=>en(re,e,n,r,o),onContextMenu:re=>tn(re,e,n,r),children:t(sn,{$wrapText:r.wrapText,children:t($,{...Bl})})},s)}let lt=d;return r.valueFormatter&&(lt=r.valueFormatter({value:d,data:e,node:x(e,n,a),colDef:r,column:{colId:s,colDef:r},api:h,columnApi:u,context:c})),t(H,{$theme:l,$align:r.align,$pinned:r.pinned,$width:nt,title:Vn?String(lt??""):void 0,onClick:$=>Jt($,e,n,r,o),onDoubleClick:$=>en($,e,n,r,o),onContextMenu:$=>tn($,e,n,r),children:t(sn,{$wrapText:r.wrapText,children:lt??""})},s)},Pl=(e,n)=>{const r=k({data:e}),o=Se(r),s=Yn(r),a=X&&(An?.(e)??!0);return i(oe.Fragment,{children:[i(an,{$theme:l,$selected:o,$striped:!0,$even:n%2===0,$height:bn,$animate:Wn,onClick:d=>tt(d,e,n),children:[L&&t(H,{$theme:l,$align:"center",$width:40,children:t(dn,{children:t(De,{type:"checkbox",$theme:l,checked:o,onChange:()=>{xe(e,n),Dt?.({type:"selectionChanged",api:h,columnApi:u,context:c})},onClick:d=>d.stopPropagation()})})}),pe&&t(H,{$theme:l,$align:"center",$width:40,children:t(nr,{$theme:l,children:t(ht,{})})}),X&&t(H,{$theme:l,$align:"center",$width:40,children:a&&t(tr,{$theme:l,$expanded:s,onClick:d=>{d.stopPropagation(),Zn(e)},children:t(ct,{})})}),g.map((d,f)=>Il(e,n,d,f))]}),X&&a&&s&&$t&&t(an,{$theme:l,children:t(H,{$theme:l,colSpan:g.length+(L?1:0)+(pe?1:0)+1,style:{padding:"16px"},children:oe.createElement($t,{value:null,data:e,node:x(e,n,r),rowIndex:n,colDef:{},column:{},api:h,columnApi:u,context:c,refreshCell:()=>{},eGridCell:null,getValue:()=>null,setValue:()=>{}})})})]},r)},Rl=()=>bt?t(gn,{$theme:l,children:m.map((e,n)=>{const r=k({data:e});return t(pn,{$theme:l,$selected:Se(r),onClick:o=>tt(o,e,n),children:oe.createElement(bt,{data:e,node:x(e,n,r)})},r)})}):t(gn,{$theme:l,children:m.map((e,n)=>{const r=k({data:e});return i(pn,{$theme:l,$selected:Se(r),onClick:o=>tt(o,e,n),children:[L&&t(ur,{$theme:l,children:t(De,{type:"checkbox",$theme:l,checked:Se(r),onChange:()=>xe(e,n)})}),g.slice(0,6).map(o=>{const s=o.field?D(e,o.field):null;return i(gr,{$theme:l,children:[t(pr,{$theme:l,children:o.headerName||o.field}),t(mr,{$theme:l,children:String(s??"")})]},o.colId)})]},r)})}),nn=()=>vt?t(un,{$theme:l,children:oe.createElement(vt,{})}):i(un,{$theme:l,children:[t(ci,{}),t("span",{children:"No Rows To Show"})]}),Dl=()=>kt?t(hn,{$theme:l,children:oe.createElement(kt,{})}):i(hn,{$theme:l,children:[t(dr,{$theme:l}),t("span",{children:"Loading..."})]}),Ll=()=>!Ve||Fn?null:i(rr,{$theme:l,children:[i(ir,{$theme:l,children:["Showing ",ve+1," to ",Oe," of ",y.length," rows"]}),i(or,{children:[t(Le,{$theme:l,onClick:Qe,disabled:A===0,children:t(ii,{})}),t(Le,{$theme:l,onClick:Ke,disabled:A===0,children:t(ri,{})}),i("span",{style:{padding:"0 12px",fontSize:"13px"},children:["Page ",A+1," of ",J]}),t(Le,{$theme:l,onClick:qe,disabled:A>=J-1,children:t(ct,{})}),t(Le,{$theme:l,onClick:Xe,disabled:A>=J-1,children:t(oi,{})}),Array.isArray(ft)&&t(ar,{$theme:l,value:je,onChange:e=>{_e(Number(e.target.value)),On?.({type:"paginationChanged",api:h,columnApi:u,context:c,newPage:!1,newPageSize:!0,animate:!0,keepRenderedRows:!1})},children:ft.map(e=>i("option",{value:e,children:[e," rows"]},e))})]})]}),Fl=()=>{if(!w.visible)return null;const e=zn?.({node:w.data?.row?x(w.data.row,w.data.rowIndex):{},column:{colId:w.data?.col?.colId,colDef:w.data?.col},value:w.data?.col?.field?D(w.data.row,w.data.col.field):null})||["copy","separator","export"];return t(cr,{$theme:l,$x:w.x,$y:w.y,children:e.map((n,r)=>{if(n==="separator")return t(hr,{$theme:l},r);if(typeof n=="string")switch(n){case"copy":return i(rt,{$theme:l,onClick:()=>O(C,g,!0),children:["Copy",t("span",{className:"shortcut",children:"Ctrl+C"})]},n);case"export":return t(rt,{$theme:l,onClick:()=>dt(y,g,"export.csv"),children:"Export to CSV"},n);default:return null}return i(rt,{$theme:l,$disabled:n.disabled,$danger:n.cssClasses?.includes("danger"),onClick:()=>!n.disabled&&n.action?.(),children:[n.icon,n.name,n.shortcut&&t("span",{className:"shortcut",children:n.shortcut})]},n.name)})})},El=()=>{if(!v.visible||!v.colId)return null;const e=_.find(o=>o.colId===v.colId);if(!e)return null;const n=v.colId,{sort:r}=ke(n);return i(Fr,{$theme:l,$x:v.x,$y:v.y,onClick:o=>o.stopPropagation(),children:[i(se,{$theme:l,children:[i(M,{$theme:l,onClick:()=>{$e(n,!1),S()},children:[t(vn,{}),t("span",{children:"Sort Ascending"})]}),i(M,{$theme:l,onClick:()=>{$e(n,!1),S()},children:[t(Sn,{}),t("span",{children:"Sort Descending"})]})]}),i(se,{$theme:l,children:[i(M,{$theme:l,$hasSubmenu:!0,onClick:()=>{},children:[t(hi,{}),t("span",{children:"Pin Column"})]}),i(M,{$theme:l,onClick:()=>{W(n,"left"),S()},style:{paddingLeft:36},children:[t(ui,{}),t("span",{children:"Pin Left"})]}),i(M,{$theme:l,onClick:()=>{W(n,"right"),S()},style:{paddingLeft:36},children:[t(gi,{}),t("span",{children:"Pin Right"})]}),i(M,{$theme:l,onClick:()=>{W(n,null),S()},style:{paddingLeft:36},children:[t(pi,{}),t("span",{children:"No Pin"})]})]}),i(se,{$theme:l,children:[i(M,{$theme:l,onClick:()=>{S()},children:[t(xn,{}),t("span",{children:"Autosize This Column"})]}),i(M,{$theme:l,onClick:()=>{S()},children:[t(xn,{}),t("span",{children:"Autosize All Columns"})]})]}),e.field&&e.enableRowGroup!==!1&&t(se,{$theme:l,children:i(M,{$theme:l,onClick:()=>{rl(e.field),S()},children:[t(Ae,{}),i("span",{children:["Group by ",e.headerName||e.field]})]})}),i(se,{$theme:l,children:[i(M,{$theme:l,onClick:()=>{Ue(!0),le("columns"),S()},children:[t(Te,{}),t("span",{children:"Choose Columns"})]}),i(M,{$theme:l,onClick:()=>{fe(),S()},children:[t(mi,{}),t("span",{children:"Reset Columns"})]})]})]})},Tl=()=>{if(!G.visible||!G.colId)return null;const e=_.find(a=>a.colId===G.colId);if(!e||!e.field)return null;const n=e.field,r=P(n),o=F[n]||new Set(r),s=o.size===r.length;return i(Er,{$theme:l,style:{position:"fixed",top:G.y,left:G.x,zIndex:1e3},onClick:a=>a.stopPropagation(),children:[t(Tr,{$theme:l,children:"Text Filter"}),t(Ar,{$theme:l,children:t("input",{type:"text",placeholder:"Search...",autoFocus:!0})}),i($n,{$theme:l,children:[i(de,{$theme:l,$selectAll:!0,children:[t("input",{type:"checkbox",checked:s,onChange:()=>et(n)}),"(Select All)"]}),r.map(a=>i(de,{$theme:l,children:[t("input",{type:"checkbox",checked:o.has(a),onChange:()=>Qt(n,a)}),a]},a))]}),i(Br,{$theme:l,children:[t(kn,{$theme:l,onClick:()=>{et(n)},children:"Reset"}),t(kn,{$theme:l,$primary:!0,onClick:()=>{Ye()},children:"Apply"})]})]})},Al=()=>R.sideBar===!1?null:i(kr,{$theme:l,$open:ne,children:[t(vr,{$theme:l,$collapsed:!ne,children:ne?i(ie,{children:[i(Fe,{$theme:l,$active:q==="columns",onClick:()=>le("columns"),children:[t(Te,{}),"Columns"]}),i(Fe,{$theme:l,$active:q==="filters",onClick:()=>le("filters"),children:[t(Ee,{}),"Filters"]})]}):i(ie,{children:[t(Fe,{$theme:l,$collapsed:!0,$active:q==="columns",onClick:()=>{Ue(!0),le("columns")},title:"Columns",children:t(Te,{})}),t(Fe,{$theme:l,$collapsed:!0,$active:q==="filters",onClick:()=>{Ue(!0),le("filters")},title:"Filters",children:t(Ee,{})})]})}),ne&&i(Sr,{$theme:l,children:[q==="columns"&&i(ie,{children:[i(Pr,{$theme:l,children:[t(Rr,{$theme:l,children:"Pivot Mode"}),i(Dr,{$theme:l,children:[t("input",{type:"checkbox",checked:ol,onChange:al}),t("span",{})]})]}),t(mn,{$theme:l,children:t("input",{type:"text",placeholder:"Search..."})}),i(it,{$theme:l,children:[i(ot,{$theme:l,children:[t(Te,{}),"Columns"]}),me.map(e=>{const n=e.colId,r=!e.hide;return i(xr,{$theme:l,$dragging:E===n,$selected:cl===n,draggable:!0,onDragStart:a=>hl(a,n),onDragOver:a=>ul(a,n),onDragLeave:gl,onDrop:a=>pl(a,n),onDragEnd:ml,children:[t(Cn,{$theme:l,children:t(ht,{})}),t(De,{type:"checkbox",$theme:l,checked:r,onChange:a=>{Ce(n,a.target.checked)}}),t(yr,{children:e.headerName||e.field})]},n)})]}),i(it,{$theme:l,children:[i(ot,{$theme:l,children:[t(Ae,{}),"Row Groups"]}),t(at,{$theme:l,$hasItems:Ze.length>0,children:Ze.length===0?i(st,{$theme:l,children:[t(Ae,{}),"Drag here to set row groups"]}):qt.map(({field:e,headerName:n})=>i(fn,{$theme:l,children:[n,t("button",{onClick:()=>Ot(e),children:t(ce,{})})]},e))})]}),i(it,{$theme:l,children:[i(ot,{$theme:l,children:[t(yn,{}),"Values"]}),t(br,{$theme:l,children:Kt.length===0?t(at,{$theme:l,$hasItems:!1,children:i(st,{$theme:l,children:[t(yn,{}),"Drag here to aggregate"]})}):Kt.map(({field:e,aggFunc:n,displayName:r})=>i(wr,{$theme:l,children:[i(Mr,{$theme:l,children:[t(Cn,{$theme:l,children:t(ht,{})}),n,"(",r,")"]}),t(Ir,{$theme:l,onClick:()=>il(e,n),children:t(ce,{})})]},`${n}-${e}`))})]})]}),q==="filters"&&i(ie,{children:[t(mn,{$theme:l,children:t("input",{type:"text",placeholder:"Search..."})}),_.filter(e=>e.filter&&e.field).map(e=>{const n=e.field,r=sl.has(n),o=Gt(n)||Xt(n),s=P(n),a=F[n]||new Set(s);return i(Gr,{$theme:l,children:[i(zr,{$theme:l,$expanded:r,$hasFilter:o,onClick:()=>Cl(n),children:[t(ct,{}),e.headerName||e.field,o&&t(Ee,{})]}),r&&t(Vr,{$theme:l,$expanded:r,children:i($n,{$theme:l,style:{maxHeight:200,marginBottom:8},children:[i(de,{$theme:l,$selectAll:!0,children:[t("input",{type:"checkbox",checked:a.size===s.length,onChange:()=>et(n)}),"(Select All)"]}),s.slice(0,20).map(d=>i(de,{$theme:l,children:[t("input",{type:"checkbox",checked:a.has(d),onChange:()=>Qt(n,d)}),d]},d)),s.length>20&&t(de,{$theme:l,children:i("span",{style:{opacity:.6,fontSize:12},children:["...and ",s.length-20," more"]})})]})})]},e.colId)})]})]})]});return Ie(()=>{const e=()=>{v.visible&&S(),G.visible&&Ye()};return document.addEventListener("click",e),()=>document.removeEventListener("click",e)},[v.visible,G.visible,S,Ye]),i(Vl,{ref:we,$theme:l,$responsive:yt,style:qn,className:Kn,onKeyDown:xl,tabIndex:0,dir:Nn?"rtl":"ltr",children:[i(Wl,{$theme:l,children:[i(rn,{children:[i(Nl,{$theme:l,children:[t(li,{}),t("input",{type:"text",placeholder:"Search...",value:He,onChange:e=>{Z(e.target.value),Ft?.({type:"filterChanged",api:h,columnApi:u,context:c})}})]}),(We||fl)&&i(ae,{$theme:l,onClick:$l,children:[t(ce,{}),"Clear Filters"]})]}),i(rn,{children:[!Gn&&i(ae,{$theme:l,onClick:()=>dt(y,g,"export.csv"),children:[t(ai,{}),"Export"]}),i(ae,{$theme:l,onClick:fe,children:[t(si,{}),"Reset"]}),R.sideBar!==!1&&t(ae,{$theme:l,$active:ne,onClick:tl,children:t(Ci,{})})]})]}),R.rowGroupPanelShow!=="never"&&Ze.length>0&&i(at,{$theme:l,$hasItems:!0,children:[t(st,{$theme:l,children:t(Ae,{})}),qt.map(({field:e,headerName:n})=>i(fn,{$theme:l,children:[n,t("button",{onClick:()=>Ot(e),children:t(ce,{})})]},e))]}),C.length>0&&i(Cr,{$theme:l,$visible:C.length>0,children:[i("span",{children:[C.length," row",C.length!==1?"s":""," selected"]}),t(fr,{children:i(ae,{$theme:l,style:{background:"transparent",border:"none",color:"white"},onClick:ee,children:[t(ce,{}),"Clear"]})})]}),i(Hr,{children:[i(Wr,{children:[t(Hl,{children:i(jl,{$stickyHeader:!0,$maxHeight:In==="autoHeight"?void 0:"calc(100% - 100px)",children:[yt&&el?m.length===0?nn():Rl():i(ie,{children:[m.length===0&&!Ut&&nn(),m.length>0&&i(Ol,{ref:kl,$theme:l,$fixedLayout:!0,children:[i(ql,{$theme:l,$sticky:!0,children:[bl(),wl(),Ml()]}),t(er,{$theme:l,children:m.map((e,n)=>Pl(e,ve+n))})]})]}),Ut&&Dl()]})}),Ll(),Bn&&i(sr,{$theme:l,children:[i(cn,{children:[t("strong",{children:"Rows:"})," ",y.length]}),i(cn,{children:[t("strong",{children:"Selected:"})," ",C.length]})]})]}),Al()]}),Fl(),El(),Tl()]})}export const AgGrid=Gl(fi);export default AgGrid;
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AG Grid Component
+ * A comprehensive, AG Grid-like data table with all enterprise features
+ * 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, 
+// 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
+// ============================================================================
+const SearchIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "M21 21l-4.35-4.35", strokeLinecap: "round" })] }));
+const SortAscIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M7 14l5-5 5 5H7z" }) }));
+const SortDescIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M7 10l5 5 5-5H7z" }) }));
+const FilterIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M9 18l6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronLeftIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronsLeftIcon = () => (_jsx("svg", { 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", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ChevronsRightIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M13 7l5 5-5 5M6 7l5 5-5 5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const DownloadIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ColumnsIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "3", y: "3", width: "7", height: "18", rx: "1" }), _jsx("rect", { x: "14", y: "3", width: "7", height: "18", rx: "1" })] }));
+const RefreshIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M23 4v6h-6M1 20v-6h6", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+const MenuIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "1" }), _jsx("circle", { cx: "12", cy: "5", r: "1" }), _jsx("circle", { cx: "12", cy: "19", r: "1" })] }));
+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
+// ============================================================================
+function isColGroupDef(col) {
+    return 'children' in col;
+}
+function flattenColumnDefs(columns) {
+    const result = [];
+    columns.forEach((col) => {
+        if (isColGroupDef(col)) {
+            result.push(...flattenColumnDefs(col.children));
+        }
+        else {
+            result.push(col);
+        }
+    });
+    return result;
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+function AgGridInner(props, ref) {
+    const { 
+    // Data
+    rowData, columnDefs, defaultColDef, getRowId = (params) => String(params.data._id ?? params.data.id ?? Math.random()), 
+    // Theme
+    theme = 'quartz', customTheme, rowHeight = 42, headerHeight = 42, floatingFiltersHeight = 32, domLayout = 'normal', 
+    // Selection
+    rowSelection, rowMultiSelectWithClick = false, suppressRowClickSelection = false, isRowSelectable, 
+    // Sorting
+    sortable = true, suppressMultiSort = false, alwaysMultiSort = false, 
+    // Filtering
+    filter = true, floatingFilter = false, quickFilterText: controlledQuickFilter, 
+    // Pagination
+    pagination = false, paginationPageSize = 10, paginationPageSizeSelector = [10, 25, 50, 100], suppressPaginationPanel = false, 
+    // Editing
+    singleClickEdit = false, stopEditingWhenCellsLoseFocus = true, undoRedoCellEditing = false, 
+    // Row Grouping
+    groupDefaultExpanded = 0, 
+    // Master/Detail
+    masterDetail = false, detailCellRenderer, isRowMaster, 
+    // Row Dragging
+    rowDragManaged = false, 
+    // Overlays
+    loadingOverlayComponent, noRowsOverlayComponent, 
+    // Status Bar
+    statusBar, 
+    // Clipboard
+    enableClipboard = true, 
+    // Export
+    suppressCsvExport = false, 
+    // Context Menu
+    getContextMenuItems, suppressContextMenu = false, 
+    // Tooltips
+    enableBrowserTooltips = false, 
+    // Responsive
+    responsive = true, mobileBreakpoint = 768, mobileCardRenderer, 
+    // Misc
+    animateRows = true, enableRtl = false, 
+    // Events
+    onGridReady, onCellClicked, onCellDoubleClicked, onCellValueChanged, onRowClicked, onRowDoubleClicked, onRowSelected, onSelectionChanged, onSortChanged, onFilterChanged, onPaginationChanged, 
+    // Custom props
+    containerStyle, containerClassName, context, gridId, } = props;
+    // ============================================================================
+    // Theme
+    // ============================================================================
+    const gridTheme = useMemo(() => getTheme(theme, customTheme), [theme, customTheme]);
+    // ============================================================================
+    // Flatten and process columns
+    // ============================================================================
+    const flatColumns = useMemo(() => {
+        const flat = flattenColumnDefs(columnDefs);
+        return flat.map((col) => ({
+            ...defaultColDef,
+            ...col,
+            colId: col.colId || col.field || `col-${Math.random()}`,
+        }));
+    }, [columnDefs, defaultColDef]);
+    // ============================================================================
+    // Column State (visibility, width, order, pinning)
+    // ============================================================================
+    const { columnState, processedColumns, visibleColumns, setColumnVisible, setColumnWidth, setColumnPinned, moveColumn, resetColumnState, } = useColumnState(flatColumns, gridId);
+    // ============================================================================
+    // Sorting
+    // ============================================================================
+    const { sortModel, handleSort, getSortForColumn, clearSort, sortData, } = useSorting([], !suppressMultiSort || alwaysMultiSort);
+    // ============================================================================
+    // Filtering
+    // ============================================================================
+    const { filterModel, quickFilterText, setQuickFilterText, setColumnFilter, clearFilters, isFilterActive, hasActiveFilters, filterData, } = useFiltering();
+    // Sync controlled quick filter
+    useEffect(() => {
+        if (controlledQuickFilter !== undefined) {
+            setQuickFilterText(controlledQuickFilter);
+        }
+    }, [controlledQuickFilter, setQuickFilterText]);
+    // ============================================================================
+    // 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, setFilterStates]);
+    // ============================================================================
+    // Pagination
+    // ============================================================================
+    const { currentPage, pageSize, totalPages, startRow, endRow, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, changePageSize, paginateData, } = usePagination(processedData.length, paginationPageSize);
+    const displayData = useMemo(() => {
+        if (!pagination)
+            return processedData;
+        return paginateData(processedData);
+    }, [processedData, pagination, paginateData]);
+    // ============================================================================
+    // Selection
+    // ============================================================================
+    const { selectedIds, isSelected, toggleRow, selectAll, deselectAll, isAllSelected, isIndeterminate, selectedRows, } = useRowSelection(displayData, (row) => getRowId({ data: row }), rowSelection || 'multiple', isRowSelectable);
+    // ============================================================================
+    // Expansion (for master/detail)
+    // ============================================================================
+    const { isExpanded, toggleExpand, expandAll, collapseAll, } = useRowExpansion((row) => getRowId({ data: row }), groupDefaultExpanded);
+    // ============================================================================
+    // Cell Editing
+    // ============================================================================
+    const { editingCell, startEditing, stopEditing, isEditing, } = useCellEditing();
+    const [editValue, setEditValue] = useState(null);
+    // ============================================================================
+    // Context Menu
+    // ============================================================================
+    const { contextMenu, showContextMenu, hideContextMenu } = useContextMenu();
+    // ============================================================================
+    // Clipboard
+    // ============================================================================
+    const { copyToClipboard } = useClipboard();
+    // ============================================================================
+    // Responsive
+    // ============================================================================
+    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);
+    const tableRef = useRef(null);
+    const [isLoading, setIsLoading] = useState(false);
+    // ============================================================================
+    // Column Resize State
+    // ============================================================================
+    const [resizing, setResizing] = useState(null);
+    const handleResizeStart = useCallback((e, colId, currentWidth) => {
+        e.preventDefault();
+        setResizing({ colId, startX: e.clientX, startWidth: currentWidth });
+    }, []);
+    useEffect(() => {
+        if (!resizing)
+            return;
+        const handleMouseMove = (e) => {
+            const delta = e.clientX - resizing.startX;
+            const newWidth = Math.max(50, resizing.startWidth + delta);
+            setColumnWidth(resizing.colId, newWidth);
+        };
+        const handleMouseUp = () => {
+            setResizing(null);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [resizing, setColumnWidth]);
+    // ============================================================================
+    // Grid API
+    // ============================================================================
+    const gridApi = useMemo(() => ({
+        // Data
+        setRowData: () => { },
+        getRowData: () => rowData,
+        applyTransaction: () => { },
+        applyTransactionAsync: () => { },
+        refreshCells: () => { },
+        redrawRows: () => { },
+        // Row Nodes
+        getRowNode: (id) => displayData.find((row) => getRowId({ data: row }) === id),
+        forEachNode: (callback) => displayData.forEach((row, i) => callback(createRowNode(row, i), i)),
+        forEachLeafNode: (callback) => displayData.forEach((row, i) => callback(createRowNode(row, i), i)),
+        getDisplayedRowCount: () => displayData.length,
+        getDisplayedRowAtIndex: (index) => createRowNode(displayData[index], index),
+        getFirstDisplayedRow: () => startRow,
+        getLastDisplayedRow: () => endRow,
+        // Selection
+        selectAll,
+        deselectAll,
+        selectAllFiltered: selectAll,
+        deselectAllFiltered: deselectAll,
+        getSelectedRows: () => selectedRows,
+        getSelectedNodes: () => selectedRows.map((row, i) => createRowNode(row, i)),
+        // Sorting
+        getSortModel: () => sortModel,
+        setSortModel: () => { },
+        // Filtering
+        setFilterModel: () => { },
+        getFilterModel: () => filterModel,
+        setQuickFilter: setQuickFilterText,
+        isQuickFilterPresent: () => quickFilterText.length > 0,
+        isAnyFilterPresent: () => hasActiveFilters,
+        destroyFilter: () => { },
+        getFilterInstance: () => null,
+        onFilterChanged: () => { },
+        // Pagination
+        paginationGetPageSize: () => pageSize,
+        paginationSetPageSize: changePageSize,
+        paginationGetCurrentPage: () => currentPage,
+        paginationGetTotalPages: () => totalPages,
+        paginationGetRowCount: () => processedData.length,
+        paginationGoToPage: goToPage,
+        paginationGoToNextPage: goToNextPage,
+        paginationGoToPreviousPage: goToPreviousPage,
+        paginationGoToFirstPage: goToFirstPage,
+        paginationGoToLastPage: goToLastPage,
+        // Editing
+        startEditingCell: ({ rowIndex, colKey }) => {
+            const row = displayData[rowIndex];
+            if (row) {
+                const value = getNestedValue(row, colKey);
+                startEditing(getRowId({ data: row }), colKey, rowIndex, value);
+            }
+        },
+        stopEditing: (cancel) => stopEditing(cancel || false),
+        getEditingCells: () => editingCell ? [{ rowIndex: editingCell.rowIndex, column: {} }] : [],
+        // Export
+        exportDataAsCsv: (params) => {
+            exportToCsv(selectedRows.length > 0 && params?.onlySelected ? selectedRows : processedData, visibleColumns, params?.fileName || 'export.csv');
+        },
+        getDataAsCsv: () => '',
+        exportDataAsExcel: () => { },
+        // Clipboard
+        copySelectedRangeToClipboard: (includeHeaders) => copyToClipboard(selectedRows, visibleColumns, includeHeaders),
+        copySelectedRowsToClipboard: (includeHeaders) => copyToClipboard(selectedRows, visibleColumns, includeHeaders),
+        pasteFromClipboard: () => { },
+        // Scrolling
+        ensureIndexVisible: () => { },
+        ensureNodeVisible: () => { },
+        ensureColumnVisible: () => { },
+        getHorizontalScrollPosition: () => containerRef.current?.scrollLeft || 0,
+        getVerticalScrollPosition: () => containerRef.current?.scrollTop || 0,
+        // Row Height
+        resetRowHeights: () => { },
+        onRowHeightChanged: () => { },
+        // Display
+        sizeColumnsToFit: () => { },
+        autoSizeAllColumns: () => { },
+        autoSizeColumn: () => { },
+        // Grouping
+        expandAll: () => expandAll(displayData),
+        collapseAll,
+        setRowGroupColumns: () => { },
+        getRowGroupColumns: () => [],
+        // Events
+        addEventListener: () => { },
+        removeEventListener: () => { },
+        // Misc
+        destroy: () => { },
+        getContext: () => context,
+        setContext: () => { },
+        isDestroyed: () => false,
+        refreshHeader: () => { },
+        setHeaderHeight: () => { },
+        showLoadingOverlay: () => setIsLoading(true),
+        showNoRowsOverlay: () => { },
+        hideOverlay: () => setIsLoading(false),
+        getGridElement: () => containerRef.current,
+    }), [
+        rowData, displayData, getRowId, startRow, endRow, selectAll, deselectAll, selectedRows,
+        sortModel, filterModel, setQuickFilterText, quickFilterText, hasActiveFilters,
+        pageSize, changePageSize, currentPage, totalPages, processedData, goToPage,
+        goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, startEditing, stopEditing,
+        editingCell, visibleColumns, copyToClipboard, expandAll, collapseAll, context,
+    ]);
+    // ============================================================================
+    // Column API
+    // ============================================================================
+    const columnApi = useMemo(() => ({
+        getAllColumns: () => processedColumns.map((col, i) => ({ ...col, colId: col.colId, colDef: col, sort: null, visible: !col.hide, pinned: col.pinned || null, width: col.width || 100, left: 0, getColDef: () => col, getColId: () => col.colId, isVisible: () => !col.hide, isPinned: () => !!col.pinned, getSort: () => getSortForColumn(col.colId).sort, setSort: () => { } })),
+        getAllGridColumns: () => [],
+        getVisibleColumns: () => visibleColumns.map((col) => ({ colId: col.colId, colDef: col })),
+        getColumn: (colId) => processedColumns.find((c) => c.colId === colId),
+        setColumnVisible,
+        setColumnsVisible: (colIds, visible) => colIds.forEach((id) => setColumnVisible(String(id), visible)),
+        setColumnPinned,
+        setColumnsPinned: (colIds, pinned) => colIds.forEach((id) => setColumnPinned(String(id), pinned)),
+        moveColumn,
+        moveColumns: (colIds, toIndex) => colIds.forEach((id, i) => moveColumn(String(id), toIndex + i)),
+        getColumnState: () => columnState,
+        applyColumnState: () => true,
+        resetColumnState,
+        setColumnWidth,
+        setColumnsWidth: (colIds, width) => colIds.forEach((id) => setColumnWidth(String(id), width)),
+        autoSizeColumn: () => { },
+        autoSizeColumns: () => { },
+        sizeColumnsToFit: () => { },
+        isPinningLeft: () => visibleColumns.some((c) => c.pinned === 'left'),
+        isPinningRight: () => visibleColumns.some((c) => c.pinned === 'right'),
+        getDisplayNameForColumn: (column) => column.colDef.headerName || column.colDef.field || '',
+    }), [processedColumns, visibleColumns, columnState, setColumnVisible, setColumnPinned, moveColumn, resetColumnState, setColumnWidth, getSortForColumn]);
+    // ============================================================================
+    // Expose API via ref
+    // ============================================================================
+    useImperativeHandle(ref, () => ({ api: gridApi, columnApi }), [gridApi, columnApi]);
+    // ============================================================================
+    // Grid Ready Event
+    // ============================================================================
+    useEffect(() => {
+        onGridReady?.({
+            type: 'gridReady',
+            api: gridApi,
+            columnApi,
+            context,
+        });
+    }, []);
+    // ============================================================================
+    // Event Handlers
+    // ============================================================================
+    const handleCellClick = useCallback((e, row, rowIndex, col, colIndex) => {
+        const value = col.field ? getNestedValue(row, col.field) : null;
+        const node = createRowNode(row, rowIndex);
+        onCellClicked?.({
+            type: 'cellClicked',
+            api: gridApi,
+            columnApi,
+            context,
+            data: row,
+            node,
+            column: { colId: col.colId, colDef: col },
+            colDef: col,
+            value,
+            rowIndex,
+            event: e.nativeEvent,
+        });
+        // Single click edit
+        if (singleClickEdit && col.editable) {
+            startEditing(getRowId({ data: row }), col.colId, rowIndex, value);
+            setEditValue(value);
+        }
+        // Row selection on click
+        if (rowSelection && !suppressRowClickSelection && !col.checkboxSelection) {
+            toggleRow(row, rowIndex);
+            onRowSelected?.({
+                type: 'rowSelected',
+                api: gridApi,
+                columnApi,
+                context,
+                data: row,
+                node,
+                rowIndex,
+            });
+        }
+    }, [gridApi, columnApi, context, onCellClicked, singleClickEdit, rowSelection, suppressRowClickSelection, toggleRow, onRowSelected, startEditing, getRowId]);
+    const handleCellDoubleClick = useCallback((e, row, rowIndex, col, colIndex) => {
+        const value = col.field ? getNestedValue(row, col.field) : null;
+        const node = createRowNode(row, rowIndex);
+        onCellDoubleClicked?.({
+            type: 'cellDoubleClicked',
+            api: gridApi,
+            columnApi,
+            context,
+            data: row,
+            node,
+            column: { colId: col.colId, colDef: col },
+            colDef: col,
+            value,
+            rowIndex,
+            event: e.nativeEvent,
+        });
+        // Double click edit
+        if (!singleClickEdit && col.editable) {
+            startEditing(getRowId({ data: row }), col.colId, rowIndex, value);
+            setEditValue(value);
+        }
+    }, [gridApi, columnApi, context, onCellDoubleClicked, singleClickEdit, startEditing, getRowId]);
+    const handleRowClick = useCallback((e, row, rowIndex) => {
+        const node = createRowNode(row, rowIndex);
+        onRowClicked?.({
+            type: 'rowClicked',
+            api: gridApi,
+            columnApi,
+            context,
+            data: row,
+            node,
+            rowIndex,
+            event: e.nativeEvent,
+        });
+    }, [gridApi, columnApi, context, onRowClicked]);
+    const handleHeaderClick = useCallback((col, e) => {
+        if (col.sortable !== false && sortable) {
+            handleSort(col.colId, e.shiftKey || alwaysMultiSort);
+            onSortChanged?.({
+                type: 'sortChanged',
+                api: gridApi,
+                columnApi,
+                context,
+            });
+        }
+    }, [sortable, handleSort, alwaysMultiSort, onSortChanged, gridApi, columnApi, context]);
+    const handleContextMenu = useCallback((e, row, rowIndex, col) => {
+        if (suppressContextMenu)
+            return;
+        e.preventDefault();
+        showContextMenu(e.clientX, e.clientY, { row, rowIndex, col });
+    }, [suppressContextMenu, showContextMenu]);
+    const handleEditComplete = useCallback((newValue) => {
+        if (editingCell) {
+            onCellValueChanged?.({
+                type: 'cellValueChanged',
+                api: gridApi,
+                columnApi,
+                context,
+                data: {},
+                node: createRowNode({}, editingCell.rowIndex),
+                column: {},
+                colDef: {},
+                oldValue: editingCell.value,
+                newValue,
+                rowIndex: editingCell.rowIndex,
+            });
+        }
+        stopEditing(false, newValue);
+        setEditValue(null);
+    }, [editingCell, onCellValueChanged, gridApi, columnApi, context, stopEditing]);
+    // ============================================================================
+    // Keyboard Handlers
+    // ============================================================================
+    const handleKeyDown = useCallback((e) => {
+        if (editingCell) {
+            if (e.key === 'Escape') {
+                stopEditing(true);
+                setEditValue(null);
+            }
+            else if (e.key === 'Enter') {
+                handleEditComplete(editValue);
+            }
+        }
+        // Clipboard shortcuts
+        if (enableClipboard && (e.ctrlKey || e.metaKey)) {
+            if (e.key === 'c') {
+                copyToClipboard(selectedRows, visibleColumns, true);
+            }
+        }
+    }, [editingCell, stopEditing, handleEditComplete, editValue, enableClipboard, copyToClipboard, selectedRows, visibleColumns]);
+    // ============================================================================
+    // Render Column Groups (if any)
+    // ============================================================================
+    const hasColumnGroups = columnDefs.some(isColGroupDef);
+    const renderColumnGroups = () => {
+        if (!hasColumnGroups)
+            return null;
+        return (_jsx(GroupHeaderRow, { "$theme": gridTheme, children: columnDefs.map((col, i) => {
+                if (isColGroupDef(col)) {
+                    return (_jsx(GroupHeaderCell, { "$theme": gridTheme, "$colSpan": flattenColumnDefs(col.children).length, colSpan: flattenColumnDefs(col.children).length, children: col.headerName }, col.groupId || i));
+                }
+                return _jsx(GroupHeaderCell, { "$theme": gridTheme, "$colSpan": 1 }, col.field || i);
+            }) }));
+    };
+    // ============================================================================
+    // Render Header
+    // ============================================================================
+    const renderHeader = () => (_jsxs(HeaderRow, { "$theme": gridTheme, "$height": headerHeight, children: [rowSelection && (_jsx(HeaderCell, { "$theme": gridTheme, "$width": 40, "$align": "center", children: _jsx(CheckboxCell, { children: _jsx(Checkbox, { type: "checkbox", "$theme": gridTheme, checked: isAllSelected, ref: (el) => el && (el.indeterminate = isIndeterminate), onChange: (e) => {
+                            if (e.target.checked) {
+                                selectAll();
+                            }
+                            else {
+                                deselectAll();
+                            }
+                            onSelectionChanged?.({
+                                type: 'selectionChanged',
+                                api: gridApi,
+                                columnApi,
+                                context,
+                            });
+                        } }) }) })), rowDragManaged && (_jsx(HeaderCell, { "$theme": gridTheme, "$width": 40, "$align": "center" })), masterDetail && (_jsx(HeaderCell, { "$theme": gridTheme, "$width": 40, "$align": "center" })), visibleColumns.map((col, colIndex) => {
+                const colId = col.colId;
+                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), 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
+    // ============================================================================
+    const renderFloatingFilters = () => {
+        if (!floatingFilter)
+            return null;
+        return (_jsxs(FloatingFilterRow, { "$theme": gridTheme, "$height": floatingFiltersHeight, children: [rowSelection && _jsx(FloatingFilterCell, { "$theme": gridTheme }), rowDragManaged && _jsx(FloatingFilterCell, { "$theme": gridTheme }), masterDetail && _jsx(FloatingFilterCell, { "$theme": gridTheme }), visibleColumns.map((col) => (_jsx(FloatingFilterCell, { "$theme": gridTheme, children: col.filter && (_jsx("input", { type: "text", placeholder: `Filter ${col.headerName || col.field}...`, onChange: (e) => {
+                            setColumnFilter(col.field || '', {
+                                filterType: 'text',
+                                filter: e.target.value,
+                            });
+                            onFilterChanged?.({
+                                type: 'filterChanged',
+                                api: gridApi,
+                                columnApi,
+                                context,
+                            });
+                        } })) }, col.colId)))] }));
+    };
+    // ============================================================================
+    // Render Cell
+    // ============================================================================
+    const renderCell = (row, rowIndex, col, colIndex) => {
+        const colId = col.colId;
+        const rowId = getRowId({ data: row });
+        const value = col.field ? getNestedValue(row, col.field) : null;
+        const isEditingThis = isEditing(rowId, colId);
+        const state = columnState.find((s) => s.colId === colId);
+        const width = state?.width || col.width;
+        // Editing mode
+        if (isEditingThis) {
+            return (_jsx(TableCell, { "$theme": gridTheme, "$editing": true, "$align": col.align, "$width": width, children: _jsx(CellEditor, { "$theme": gridTheme, children: _jsx("input", { type: col.cellEditor === 'agNumberCellEditor' ? 'number' : 'text', value: editValue ?? '', onChange: (e) => setEditValue(e.target.value), onBlur: () => stopEditingWhenCellsLoseFocus && handleEditComplete(editValue), onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                handleEditComplete(editValue);
+                            if (e.key === 'Escape') {
+                                stopEditing(true);
+                                setEditValue(null);
+                            }
+                        }, autoFocus: true }) }) }, colId));
+        }
+        // Custom cell renderer
+        if (col.cellRenderer) {
+            const CellRenderer = col.cellRenderer;
+            const params = {
+                value,
+                data: row,
+                node: createRowNode(row, rowIndex, rowId),
+                rowIndex,
+                colDef: col,
+                column: { colId, colDef: col },
+                api: gridApi,
+                columnApi,
+                context,
+                refreshCell: () => { },
+                eGridCell: null,
+                getValue: () => value,
+                setValue: () => { },
+            };
+            return (_jsx(TableCell, { "$theme": gridTheme, "$align": col.align, "$pinned": col.pinned, "$width": width, onClick: (e) => handleCellClick(e, row, rowIndex, col, colIndex), onDoubleClick: (e) => handleCellDoubleClick(e, row, rowIndex, col, colIndex), onContextMenu: (e) => handleContextMenu(e, row, rowIndex, col), children: _jsx(CellContent, { "$wrapText": col.wrapText, children: _jsx(CellRenderer, { ...params }) }) }, colId));
+        }
+        // Value formatter
+        let displayValue = value;
+        if (col.valueFormatter) {
+            displayValue = col.valueFormatter({
+                value,
+                data: row,
+                node: createRowNode(row, rowIndex, rowId),
+                colDef: col,
+                column: { colId, colDef: col },
+                api: gridApi,
+                columnApi,
+                context,
+            });
+        }
+        return (_jsx(TableCell, { "$theme": gridTheme, "$align": col.align, "$pinned": col.pinned, "$width": width, title: enableBrowserTooltips ? String(displayValue ?? '') : undefined, onClick: (e) => handleCellClick(e, row, rowIndex, col, colIndex), onDoubleClick: (e) => handleCellDoubleClick(e, row, rowIndex, col, colIndex), onContextMenu: (e) => handleContextMenu(e, row, rowIndex, col), children: _jsx(CellContent, { "$wrapText": col.wrapText, children: displayValue ?? '' }) }, colId));
+    };
+    // ============================================================================
+    // Render Row
+    // ============================================================================
+    const renderRow = (row, rowIndex) => {
+        const rowId = getRowId({ data: row });
+        const selected = isSelected(rowId);
+        const expanded = isExpanded(rowId);
+        const isMaster = masterDetail && (isRowMaster?.(row) ?? true);
+        return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, { "$theme": gridTheme, "$selected": selected, "$striped": true, "$even": rowIndex % 2 === 0, "$height": rowHeight, "$animate": animateRows, onClick: (e) => handleRowClick(e, row, rowIndex), children: [rowSelection && (_jsx(TableCell, { "$theme": gridTheme, "$align": "center", "$width": 40, children: _jsx(CheckboxCell, { children: _jsx(Checkbox, { type: "checkbox", "$theme": gridTheme, checked: selected, onChange: () => {
+                                        toggleRow(row, rowIndex);
+                                        onSelectionChanged?.({
+                                            type: 'selectionChanged',
+                                            api: gridApi,
+                                            columnApi,
+                                            context,
+                                        });
+                                    }, onClick: (e) => e.stopPropagation() }) }) })), rowDragManaged && (_jsx(TableCell, { "$theme": gridTheme, "$align": "center", "$width": 40, children: _jsx(DragHandle, { "$theme": gridTheme, children: _jsx(GripIcon, {}) }) })), masterDetail && (_jsx(TableCell, { "$theme": gridTheme, "$align": "center", "$width": 40, children: isMaster && (_jsx(ExpandButton, { "$theme": gridTheme, "$expanded": expanded, onClick: (e) => {
+                                    e.stopPropagation();
+                                    toggleExpand(row);
+                                }, children: _jsx(ChevronRightIcon, {}) })) })), visibleColumns.map((col, colIndex) => renderCell(row, rowIndex, col, colIndex))] }), masterDetail && isMaster && expanded && detailCellRenderer && (_jsx(TableRow, { "$theme": gridTheme, children: _jsx(TableCell, { "$theme": gridTheme, colSpan: visibleColumns.length + (rowSelection ? 1 : 0) + (rowDragManaged ? 1 : 0) + 1, style: { padding: '16px' }, children: React.createElement(detailCellRenderer, {
+                            value: null,
+                            data: row,
+                            node: createRowNode(row, rowIndex, rowId),
+                            rowIndex,
+                            colDef: {},
+                            column: {},
+                            api: gridApi,
+                            columnApi,
+                            context,
+                            refreshCell: () => { },
+                            eGridCell: null,
+                            getValue: () => null,
+                            setValue: () => { },
+                        }) }) }))] }, rowId));
+    };
+    // ============================================================================
+    // Render Mobile Card View
+    // ============================================================================
+    const renderMobileCards = () => {
+        if (mobileCardRenderer) {
+            return (_jsx(MobileCardContainer, { "$theme": gridTheme, children: displayData.map((row, i) => {
+                    const rowId = getRowId({ data: row });
+                    return (_jsx(MobileCard, { "$theme": gridTheme, "$selected": isSelected(rowId), onClick: (e) => handleRowClick(e, row, i), children: React.createElement(mobileCardRenderer, {
+                            data: row,
+                            node: createRowNode(row, i, rowId),
+                        }) }, rowId));
+                }) }));
+        }
+        return (_jsx(MobileCardContainer, { "$theme": gridTheme, children: displayData.map((row, i) => {
+                const rowId = getRowId({ data: row });
+                return (_jsxs(MobileCard, { "$theme": gridTheme, "$selected": isSelected(rowId), onClick: (e) => handleRowClick(e, row, i), children: [rowSelection && (_jsx(MobileCardHeader, { "$theme": gridTheme, children: _jsx(Checkbox, { type: "checkbox", "$theme": gridTheme, checked: isSelected(rowId), onChange: () => toggleRow(row, i) }) })), visibleColumns.slice(0, 6).map((col) => {
+                            const value = col.field ? getNestedValue(row, col.field) : null;
+                            return (_jsxs(MobileCardRow, { "$theme": gridTheme, children: [_jsx(MobileCardLabel, { "$theme": gridTheme, children: col.headerName || col.field }), _jsx(MobileCardValue, { "$theme": gridTheme, children: String(value ?? '') })] }, col.colId));
+                        })] }, rowId));
+            }) }));
+    };
+    // ============================================================================
+    // Render Empty State
+    // ============================================================================
+    const renderEmptyState = () => {
+        if (noRowsOverlayComponent) {
+            return (_jsx(NoRowsOverlay, { "$theme": gridTheme, children: React.createElement(noRowsOverlayComponent, {}) }));
+        }
+        return (_jsxs(NoRowsOverlay, { "$theme": gridTheme, children: [_jsx(EmptyIcon, {}), _jsx("span", { children: "No Rows To Show" })] }));
+    };
+    // ============================================================================
+    // Render Loading State
+    // ============================================================================
+    const renderLoadingState = () => {
+        if (loadingOverlayComponent) {
+            return (_jsx(LoadingOverlay, { "$theme": gridTheme, children: React.createElement(loadingOverlayComponent, {}) }));
+        }
+        return (_jsxs(LoadingOverlay, { "$theme": gridTheme, children: [_jsx(Spinner, { "$theme": gridTheme }), _jsx("span", { children: "Loading..." })] }));
+    };
+    // ============================================================================
+    // Render Pagination
+    // ============================================================================
+    const renderPagination = () => {
+        if (!pagination || suppressPaginationPanel)
+            return null;
+        return (_jsxs(PaginationBar, { "$theme": gridTheme, children: [_jsxs(PaginationInfo, { "$theme": gridTheme, children: ["Showing ", startRow + 1, " to ", endRow, " of ", processedData.length, " rows"] }), _jsxs(PaginationControls, { children: [_jsx(PageButton, { "$theme": gridTheme, onClick: goToFirstPage, disabled: currentPage === 0, children: _jsx(ChevronsLeftIcon, {}) }), _jsx(PageButton, { "$theme": gridTheme, onClick: goToPreviousPage, disabled: currentPage === 0, children: _jsx(ChevronLeftIcon, {}) }), _jsxs("span", { style: { padding: '0 12px', fontSize: '13px' }, children: ["Page ", currentPage + 1, " of ", totalPages] }), _jsx(PageButton, { "$theme": gridTheme, onClick: goToNextPage, disabled: currentPage >= totalPages - 1, children: _jsx(ChevronRightIcon, {}) }), _jsx(PageButton, { "$theme": gridTheme, onClick: goToLastPage, disabled: currentPage >= totalPages - 1, children: _jsx(ChevronsRightIcon, {}) }), Array.isArray(paginationPageSizeSelector) && (_jsx(PageSizeSelect, { "$theme": gridTheme, value: pageSize, onChange: (e) => {
+                                changePageSize(Number(e.target.value));
+                                onPaginationChanged?.({
+                                    type: 'paginationChanged',
+                                    api: gridApi,
+                                    columnApi,
+                                    context,
+                                    newPage: false,
+                                    newPageSize: true,
+                                    animate: true,
+                                    keepRenderedRows: false,
+                                });
+                            }, children: paginationPageSizeSelector.map((size) => (_jsxs("option", { value: size, children: [size, " rows"] }, size))) }))] })] }));
+    };
+    // ============================================================================
+    // Render Context Menu
+    // ============================================================================
+    const renderContextMenu = () => {
+        if (!contextMenu.visible)
+            return null;
+        const items = getContextMenuItems?.({
+            node: contextMenu.data?.row ? createRowNode(contextMenu.data.row, contextMenu.data.rowIndex) : {},
+            column: { colId: contextMenu.data?.col?.colId, colDef: contextMenu.data?.col },
+            value: contextMenu.data?.col?.field ? getNestedValue(contextMenu.data.row, contextMenu.data.col.field) : null,
+        }) || ['copy', 'separator', 'export'];
+        return (_jsx(ContextMenu, { "$theme": gridTheme, "$x": contextMenu.x, "$y": contextMenu.y, children: items.map((item, i) => {
+                if (item === 'separator') {
+                    return _jsx(ContextMenuDivider, { "$theme": gridTheme }, i);
+                }
+                if (typeof item === 'string') {
+                    // Default menu items
+                    switch (item) {
+                        case 'copy':
+                            return (_jsxs(ContextMenuItem, { "$theme": gridTheme, onClick: () => copyToClipboard(selectedRows, visibleColumns, true), children: ["Copy", _jsx("span", { className: "shortcut", children: "Ctrl+C" })] }, item));
+                        case 'export':
+                            return (_jsx(ContextMenuItem, { "$theme": gridTheme, onClick: () => exportToCsv(processedData, visibleColumns, 'export.csv'), children: "Export to CSV" }, item));
+                        default:
+                            return null;
+                    }
+                }
+                return (_jsxs(ContextMenuItem, { "$theme": gridTheme, "$disabled": item.disabled, "$danger": item.cssClasses?.includes('danger'), onClick: () => !item.disabled && item.action?.(), children: [item.icon, item.name, item.shortcut && _jsx("span", { className: "shortcut", children: item.shortcut })] }, item.name));
+            }) }));
+    };
+    // ============================================================================
+    // 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?.({
+                                                type: 'filterChanged',
+                                                api: gridApi,
+                                                columnApi,
+                                                context,
+                                            });
+                                        } })] }), (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
+// ============================================================================
+export const AgGrid = forwardRef(AgGridInner);
+export default AgGrid;