@gp-grid/react 0.7.4 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -59,6 +59,21 @@ interface FillHandleState {
59
59
  /** Target column */
60
60
  targetCol: number;
61
61
  }
62
+ /** Event emitted when a cell value is changed via editing or fill drag */
63
+ interface CellValueChangedEvent<TData = Row> {
64
+ /** Stable row ID (from getRowId) */
65
+ rowId: RowId;
66
+ /** Column index */
67
+ colIndex: number;
68
+ /** Column field name */
69
+ field: string;
70
+ /** Previous cell value */
71
+ oldValue: CellValue;
72
+ /** New cell value */
73
+ newValue: CellValue;
74
+ /** The full row data object */
75
+ rowData: TData;
76
+ }
62
77
  //#endregion
63
78
  //#region ../core/src/types/highlighting.d.ts
64
79
  /**
@@ -503,6 +518,8 @@ interface GridCoreOptions<TData = Row> {
503
518
  getRowId?: (row: TData) => RowId;
504
519
  /** Row/column/cell highlighting configuration */
505
520
  highlighting?: HighlightingOptions<TData>;
521
+ /** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
522
+ onCellValueChanged?: (event: CellValueChangedEvent<TData>) => void;
506
523
  }
507
524
  //#endregion
508
525
  //#region ../core/src/types/input.d.ts
@@ -1029,6 +1046,8 @@ declare class GridCore<TData extends Row = Row> {
1029
1046
  private headerHeight;
1030
1047
  private overscan;
1031
1048
  private sortingEnabled;
1049
+ private getRowId?;
1050
+ private onCellValueChanged?;
1032
1051
  private scrollTop;
1033
1052
  private scrollLeft;
1034
1053
  private viewportWidth;
@@ -1055,6 +1074,7 @@ declare class GridCore<TData extends Row = Row> {
1055
1074
  private virtualContentHeight;
1056
1075
  private scrollRatio;
1057
1076
  private isDestroyed;
1077
+ private _isDataLoading;
1058
1078
  constructor(options: GridCoreOptions<TData>);
1059
1079
  /**
1060
1080
  * Initialize the grid and load initial data.
@@ -1089,6 +1109,7 @@ declare class GridCore<TData extends Row = Row> {
1089
1109
  getEditState(): EditState | null;
1090
1110
  getCellValue(row: number, col: number): CellValue;
1091
1111
  setCellValue(row: number, col: number, value: CellValue): void;
1112
+ private clearSelectionIfInvalid;
1092
1113
  private computeColumnPositions;
1093
1114
  private emitContentSize;
1094
1115
  private emitHeaders;
@@ -1140,6 +1161,12 @@ declare class GridCore<TData extends Row = Row> {
1140
1161
  * Refresh data from the data source.
1141
1162
  */
1142
1163
  refresh(): Promise<void>;
1164
+ /**
1165
+ * Fast-path refresh for transaction-based mutations.
1166
+ * Only re-fetches the visible window instead of all rows.
1167
+ * Use this when data was mutated via MutableDataSource transactions.
1168
+ */
1169
+ refreshFromTransaction(): Promise<void>;
1143
1170
  /**
1144
1171
  * Refresh slot display without refetching data.
1145
1172
  * Useful after in-place data modifications like fill operations.
@@ -1172,6 +1199,8 @@ declare class GridCore<TData extends Row = Row> {
1172
1199
  setRow(index: number, data: TData): void;
1173
1200
  /**
1174
1201
  * Update the data source and refresh.
1202
+ * Preserves grid state (sort, filter, scroll position).
1203
+ * Cancels any active edit and clamps selection to valid range.
1175
1204
  */
1176
1205
  setDataSource(dataSource: DataSource<TData>): Promise<void>;
1177
1206
  /**
@@ -1272,10 +1301,15 @@ interface MutableClientDataSourceOptions<TData> {
1272
1301
  debounceMs?: number;
1273
1302
  /** Callback when transactions are processed. */
1274
1303
  onTransactionProcessed?: (result: TransactionResult) => void;
1304
+ /** Use Web Worker for sorting large datasets (default: true) */
1305
+ useWorker?: boolean;
1306
+ /** Options for parallel sorting (only used when useWorker is true) */
1307
+ parallelSort?: ParallelSortOptions | false;
1275
1308
  }
1276
1309
  /**
1277
1310
  * Creates a mutable client-side data source with transaction support.
1278
1311
  * Uses IndexedDataStore for efficient incremental operations.
1312
+ * For large datasets, sorting is automatically offloaded to a Web Worker.
1279
1313
  */
1280
1314
  declare function createMutableClientDataSource<TData extends Row = Row>(data: TData[], options: MutableClientDataSourceOptions<TData>): MutableDataSource<TData>;
1281
1315
  //#endregion
@@ -1331,6 +1365,14 @@ interface GridProps<TData extends Row = Row> {
1331
1365
  gridRef?: React.MutableRefObject<GridRef<TData> | null>;
1332
1366
  /** Row/column/cell highlighting configuration */
1333
1367
  highlighting?: HighlightingOptions<TData>;
1368
+ /** Function to extract unique ID from row. Required when onCellValueChanged is provided. */
1369
+ getRowId?: (row: TData) => RowId;
1370
+ /** Called when a cell value is changed via editing or fill drag. Requires getRowId. */
1371
+ onCellValueChanged?: (event: CellValueChangedEvent<TData>) => void;
1372
+ /** Custom loading component to render instead of default spinner */
1373
+ loadingComponent?: React.ComponentType<{
1374
+ isLoading: boolean;
1375
+ }>;
1334
1376
  }
1335
1377
  //#endregion
1336
1378
  //#region src/Grid.d.ts
@@ -1341,4 +1383,52 @@ interface GridProps<TData extends Row = Row> {
1341
1383
  */
1342
1384
  declare function Grid<TData extends Row = Row>(props: GridProps<TData>): React$1.ReactNode;
1343
1385
  //#endregion
1344
- export { type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type ColumnDefinition, type ColumnFilterModel, type DataSource, type DataSourceRequest, type DataSourceResponse, type EditRendererParams, type FilterCondition, type FilterModel, Grid, GridCore, type GridInstruction, type GridProps, type GridRef, type HeaderRendererParams, type MutableDataSource, type ReactCellRenderer, type ReactEditRenderer, type ReactHeaderRenderer, type Row, type SortDirection, type SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource };
1386
+ //#region src/useGridData.d.ts
1387
+ interface UseGridDataOptions<TData> {
1388
+ /** Function to extract a unique ID from each row. Required. */
1389
+ getRowId: (row: TData) => RowId;
1390
+ /** Debounce time for batching transactions in ms. Default 50. */
1391
+ debounceMs?: number;
1392
+ /** Use Web Worker for sorting large datasets (default: true) */
1393
+ useWorker?: boolean;
1394
+ /** Options for parallel sorting (only used when useWorker is true) */
1395
+ parallelSort?: ParallelSortOptions | false;
1396
+ }
1397
+ interface UseGridDataResult<TData> {
1398
+ /** The data source to pass to <Grid dataSource={...} />. */
1399
+ dataSource: MutableDataSource<TData>;
1400
+ /** Update a single row by ID with partial data. */
1401
+ updateRow: (id: RowId, data: Partial<TData>) => void;
1402
+ /** Add rows to the data source. */
1403
+ addRows: (rows: TData[]) => void;
1404
+ /** Remove rows by ID. */
1405
+ removeRows: (ids: RowId[]) => void;
1406
+ /** Update a single cell value. */
1407
+ updateCell: (id: RowId, field: string, value: CellValue) => void;
1408
+ /** Clear all data from the data source. */
1409
+ clear: () => void;
1410
+ /** Get a row by its ID. */
1411
+ getRowById: (id: RowId) => TData | undefined;
1412
+ /** Get the current total row count. */
1413
+ getTotalRowCount: () => number;
1414
+ /** Force immediate processing of queued transactions. */
1415
+ flushTransactions: () => Promise<void>;
1416
+ }
1417
+ /**
1418
+ * React hook for efficient grid data mutations.
1419
+ *
1420
+ * Wraps `createMutableClientDataSource` to provide a simple API for
1421
+ * updating grid data without triggering full pipeline rebuilds.
1422
+ *
1423
+ * @example
1424
+ * ```tsx
1425
+ * const { dataSource, updateRow, addRows } = useGridData(initialData, {
1426
+ * getRowId: (row) => row.id,
1427
+ * });
1428
+ *
1429
+ * return <Grid dataSource={dataSource} columns={columns} rowHeight={36} />;
1430
+ * ```
1431
+ */
1432
+ declare const useGridData: <TData extends Row = Row>(initialData: TData[], options: UseGridDataOptions<TData>) => UseGridDataResult<TData>;
1433
+ //#endregion
1434
+ export { type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type CellValueChangedEvent, type ColumnDefinition, type ColumnFilterModel, type DataSource, type DataSourceRequest, type DataSourceResponse, type EditRendererParams, type FilterCondition, type FilterModel, Grid, GridCore, type GridInstruction, type GridProps, type GridRef, type HeaderRendererParams, type MutableDataSource, type ReactCellRenderer, type ReactEditRenderer, type ReactHeaderRenderer, type Row, type RowId, type SortDirection, type SortModel, type UseGridDataOptions, type UseGridDataResult, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource, useGridData };
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- import e,{useCallback as t,useEffect as n,useMemo as r,useReducer as i,useRef as a,useState as o}from"react";import{GridCore as s,GridCore as c,buildCellClasses as l,calculateScaledColumnPositions as u,createClientDataSource as d,createClientDataSource as f,createDataSourceFromArray as p,createDataSourceFromArray as m,createMutableClientDataSource as h,createServerDataSource as g,getTotalWidth as _,injectStyles as v,isCellActive as y,isCellEditing as b,isCellInFillPreview as x,isCellSelected as S}from"@gp-grid/core";import{Fragment as C,jsx as w,jsxs as T}from"react/jsx-runtime";const E=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}];function D({distinctValues:e,currentFilter:n,onApply:i,onClose:a}){let s=t(e=>Array.isArray(e)?e.join(`, `):String(e??``),[]),c=r(()=>{let t=e.filter(e=>e!=null&&e!==``&&!(Array.isArray(e)&&e.length===0)).map(e=>s(e));return Array.from(new Set(t)).sort((e,t)=>{let n=parseFloat(e),r=parseFloat(t);return!isNaN(n)&&!isNaN(r)?n-r:e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})})},[e,s]),l=c.length>100,[u,d]=o(r(()=>{if(!n?.conditions[0])return l?`condition`:`values`;let e=n.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`},[n,l])),f=r(()=>n?.conditions[0]?n.conditions[0].selectedValues??new Set:new Set,[n]),p=r(()=>n?.conditions[0]?n.conditions[0].includeBlank??!0:!0,[n]),[m,h]=o(``),[g,_]=o(f),[v,y]=o(p),[b,x]=o(r(()=>{if(!n?.conditions.length)return[{operator:`contains`,value:``,nextOperator:`and`}];let e=n.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,nextOperator:`and`}];let t=n.combination??`and`;return n.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,nextOperator:n.nextOperator??t}})},[n])),S=r(()=>{if(!m)return c;let e=m.toLowerCase();return c.filter(t=>t.toLowerCase().includes(e))},[c,m]),D=r(()=>e.some(e=>e==null||e===``),[e]),O=r(()=>S.every(e=>g.has(e))&&(!D||v),[S,g,D,v]),k=t(()=>{_(new Set(S)),D&&y(!0)},[S,D]),A=t(()=>{_(new Set),y(!1)},[]),j=t(e=>{_(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),M=t((e,t)=>{x(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),ee=t(()=>{x(e=>[...e,{operator:`contains`,value:``,nextOperator:`and`}])},[]),N=t(e=>{x(t=>t.filter((t,n)=>n!==e))},[]),P=t(()=>{if(u===`values`){if(c.every(e=>g.has(e))&&(!D||v)){i(null);return}i({conditions:[{type:`text`,operator:`equals`,selectedValues:g,includeBlank:v}],combination:`and`})}else{let e=b.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){i(null);return}i({conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}},[u,c,g,v,D,b,i]),F=t(()=>{i(null)},[i]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-text`,children:[!l&&T(`div`,{className:`gp-grid-filter-mode-toggle`,children:[w(`button`,{type:`button`,className:u===`values`?`active`:``,onClick:()=>d(`values`),children:`Values`}),w(`button`,{type:`button`,className:u===`condition`?`active`:``,onClick:()=>d(`condition`),children:`Condition`})]}),l&&u===`condition`&&T(`div`,{className:`gp-grid-filter-info`,children:[`Too many unique values (`,c.length,`). Use conditions to filter.`]}),u===`values`&&T(C,{children:[w(`input`,{className:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,value:m,onChange:e=>h(e.target.value),autoFocus:!0}),T(`div`,{className:`gp-grid-filter-actions`,children:[w(`button`,{type:`button`,onClick:k,disabled:O,children:`Select All`}),w(`button`,{type:`button`,onClick:A,children:`Deselect All`})]}),T(`div`,{className:`gp-grid-filter-list`,children:[D&&T(`label`,{className:`gp-grid-filter-option`,children:[w(`input`,{type:`checkbox`,checked:v,onChange:()=>y(!v)}),w(`span`,{className:`gp-grid-filter-blank`,children:`(Blanks)`})]}),S.map(e=>T(`label`,{className:`gp-grid-filter-option`,children:[w(`input`,{type:`checkbox`,checked:g.has(e),onChange:()=>j(e)}),w(`span`,{children:e})]},e))]})]}),u===`condition`&&T(C,{children:[b.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:b[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>M(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:b[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>M(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>M(t,{operator:e.target.value}),autoFocus:t===0,children:E.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`text`,value:e.value,onChange:e=>M(t,{value:e.target.value}),placeholder:`Value`,className:`gp-grid-filter-text-input`}),b.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>N(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:ee,children:`+ Add condition`})]}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:F,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:P,children:`Apply`})]})]})}const O=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function k({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-number`,children:[a.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:O.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`number`,value:e.value,onChange:e=>c(t,{value:e.target.value}),placeholder:`Value`}),e.operator===`between`&&T(C,{children:[w(`span`,{className:`gp-grid-filter-to`,children:`to`}),w(`input`,{type:`number`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value}),placeholder:`Value`})]}),a.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}const A=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function j(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}function M({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:j(n.value),valueTo:j(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return T(`div`,{className:`gp-grid-filter-content gp-grid-filter-date`,children:[a.map((e,t)=>T(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&T(`div`,{className:`gp-grid-filter-combination`,children:[w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),w(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),T(`div`,{className:`gp-grid-filter-row`,children:[w(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:A.map(e=>w(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&w(`input`,{type:`date`,value:e.value,onChange:e=>c(t,{value:e.target.value})}),e.operator===`between`&&T(C,{children:[w(`span`,{className:`gp-grid-filter-to`,children:`to`}),w(`input`,{type:`date`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value})})]}),a.length>1&&w(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}function ee({column:e,colIndex:r,anchorRect:i,distinctValues:o,currentFilter:s,onApply:c,onClose:l}){let u=a(null);n(()=>{let e=e=>{let t=e.target;t.closest(`.gp-grid-filter-icon`)||u.current&&!u.current.contains(t)&&l()},t=e=>{e.key===`Escape`&&l()};return requestAnimationFrame(()=>{document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)}),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[l]);let d=t(t=>{c(e.colId??e.field,t),l()},[e,c,l]),f={position:`fixed`,top:i.top+i.height+4,left:i.left,minWidth:Math.max(200,i.width),zIndex:1e4},p=e.cellDataType,m=p===`text`||p===`object`,h=p===`number`,g=p===`date`||p===`dateString`||p===`dateTime`||p===`dateTimeString`;return T(`div`,{ref:u,className:`gp-grid-filter-popup`,style:f,children:[T(`div`,{className:`gp-grid-filter-header`,children:[`Filter: `,e.headerName??e.field]}),m&&w(D,{distinctValues:o,currentFilter:s,onApply:d,onClose:l}),h&&w(k,{currentFilter:s,onApply:d,onClose:l}),g&&w(M,{currentFilter:s,onApply:d,onClose:l}),!m&&!h&&!g&&w(D,{distinctValues:o,currentFilter:s,onApply:d,onClose:l})]})}function N(e){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:e?.initialHeight??0,viewportWidth:e?.initialWidth??0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange:null,hoverPosition:null}}function P(e,t,n){switch(e.type){case`CREATE_SLOT`:return t.set(e.slotId,{slotId:e.slotId,rowIndex:-1,rowData:{},translateY:0}),null;case`DESTROY_SLOT`:return t.delete(e.slotId),null;case`ASSIGN_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,rowIndex:e.rowIndex,rowData:e.rowData}),null}case`MOVE_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,translateY:e.translateY}),null}case`SET_ACTIVE_CELL`:return{activeCell:e.position};case`SET_SELECTION_RANGE`:return{selectionRange:e.range};case`UPDATE_VISIBLE_RANGE`:return{visibleRowRange:{start:e.start,end:e.end}};case`SET_HOVER_POSITION`:return{hoverPosition:e.position};case`START_EDIT`:return{editingCell:{row:e.row,col:e.col,initialValue:e.initialValue}};case`STOP_EDIT`:return{editingCell:null};case`SET_CONTENT_SIZE`:return{contentWidth:e.width,contentHeight:e.height,viewportWidth:e.viewportWidth};case`UPDATE_HEADER`:return n.set(e.colIndex,{column:e.column,sortDirection:e.sortDirection,sortIndex:e.sortIndex,sortable:e.sortable,filterable:e.filterable,hasFilter:e.hasFilter}),null;case`OPEN_FILTER_POPUP`:return{filterPopup:{isOpen:!0,colIndex:e.colIndex,column:e.column,anchorRect:e.anchorRect,distinctValues:e.distinctValues,currentFilter:e.currentFilter}};case`CLOSE_FILTER_POPUP`:return{filterPopup:null};case`DATA_LOADING`:return{isLoading:!0,error:null};case`DATA_LOADED`:return{isLoading:!1,totalRows:e.totalRows};case`DATA_ERROR`:return{isLoading:!1,error:e.error};case`ROWS_ADDED`:case`ROWS_REMOVED`:return{totalRows:e.totalRows};case`ROWS_UPDATED`:case`TRANSACTION_PROCESSED`:return null;default:return null}}function F(e,t){if(t.type===`RESET`)return N();let{instructions:n}=t;if(n.length===0)return e;let r=new Map(e.slots),i=new Map(e.headers),a={};for(let e of n){let t=P(e,r,i);t&&(a={...a,...t})}return{...e,...a,slots:r,headers:i}}function I(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function te(e,t,n,r,i,a){let o=I(a,n),s=(o?o.translateY:i+n*r)-t.scrollTop,c=s+r,l=i,u=t.clientHeight;if(s<l)t.scrollTop=e.getScrollTopForRow(n);else if(c>u){let a=t.clientHeight-i,o=Math.floor(a/r),s=Math.max(0,n-o+1);t.scrollTop=e.getScrollTopForRow(s)}}function ne(e,r,i,s){let{activeCell:c,selectionRange:l,editingCell:u,filterPopupOpen:d,rowHeight:f,headerHeight:p,columnPositions:m,visibleColumnsWithIndices:h,slots:g}=s,_=a(null),[v,y]=o({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null});n(()=>{let t=e.current;t?.input&&t.input.updateDeps({getHeaderHeight:()=>p,getRowHeight:()=>f,getColumnPositions:()=>m,getColumnCount:()=>h.length,getOriginalColumnIndex:e=>{let t=h[e];return t?t.originalIndex:e}})},[e,p,f,m,h]);let b=t((e,t)=>{_.current&&clearInterval(_.current),_.current=setInterval(()=>{let n=r.current;n&&(n.scrollTop+=t,n.scrollLeft+=e)},16)},[r]),x=t(()=>{_.current&&=(clearInterval(_.current),null)},[]),S=t(()=>{let e=r.current;if(!e)return null;let t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}},[r]),C=e=>({clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}),w=t(()=>{let t=t=>{let n=e.current,r=S();if(!n?.input||!r)return;let i=n.input.handleDragMove(C(t),r);i&&(i.autoScroll?b(i.autoScroll.dx,i.autoScroll.dy):x(),y(n.input.getDragState()))},n=()=>{let r=e.current;r?.input&&(r.input.handleDragEnd(),y(r.input.getDragState())),x(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)},[e,S,b,x]),T=t((t,n,i)=>{let a=e.current;if(!a?.input)return;let o=a.input.handleCellMouseDown(t,n,C(i));o.focusContainer&&r.current?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),y(a.input.getDragState()),w())},[e,r,w]),E=t((t,n)=>{let r=e.current;r?.input&&r.input.handleCellDoubleClick(t,n)},[e]),D=t(t=>{let n=e.current;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(c,l,C(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(y(n.input.getDragState()),w())},[e,c,l,w]),O=t((t,n)=>{let r=e.current;if(!r?.input)return;let a=i[t];if(!a)return;let o=a.colId??a.field;r.input.handleHeaderClick(o,n.shiftKey)},[e,i]),k=t(t=>{let n=e.current,i=r.current;if(!n?.input)return;let a=n.input.handleKeyDown({key:t.key,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey},c,u,d);a.preventDefault&&t.preventDefault(),a.scrollToCell&&i&&te(n,i,a.scrollToCell.row,f,p,g)},[e,r,c,u,d,f,p,g]),A=t((t,n)=>{let i=e.current,a=r.current;if(!i?.input||!a)return;let o=i.input.handleWheel(t.deltaY,t.deltaX,n);o&&(t.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)},[e,r]);return n(()=>()=>{x()},[x]),{handleCellMouseDown:T,handleCellDoubleClick:E,handleFillHandleMouseDown:D,handleHeaderClick:O,handleKeyDown:k,handleWheel:A,dragState:v}}function L(e,t){let n=t.split(`.`),r=e;for(let e of n){if(typeof r!=`object`||!r)return null;r=r[e]}return r??null}function re(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s,cellRenderers:c,globalCellRenderer:l}=e,u=L(n,t.field),d={value:u,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s};if(t.cellRenderer&&typeof t.cellRenderer==`string`){let e=c[t.cellRenderer];if(e)return e(d)}return l?l(d):u==null?``:String(u)}function ie(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,coreRef:o,editRenderers:s,globalEditRenderer:c}=e,l=o.current;if(!l)return null;let u={value:L(n,t.field),rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>l.updateEditValue(e),onCommit:()=>l.commitEdit(),onCancel:()=>l.cancelEdit()};if(t.editRenderer&&typeof t.editRenderer==`string`){let e=s[t.editRenderer];if(e)return e(u)}return c?c(u):w(`input`,{className:`gp-grid-edit-input`,type:`text`,defaultValue:a==null?``:String(a),autoFocus:!0,onFocus:e=>e.target.select(),onChange:e=>l.updateEditValue(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`?l.commitEdit():e.key===`Escape`?l.cancelEdit():e.key===`Tab`&&(e.preventDefault(),l.commitEdit(),l.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>l.commitEdit()})}function ae(e){let{column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,coreRef:c,containerRef:l,headerRenderers:u,globalHeaderRenderer:d}=e,f=c.current,p={column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,onSort:(e,n)=>{f&&a&&f.setSort(t.colId??t.field,e,n)},onFilterClick:()=>{if(f&&o){let e=l.current?.querySelector(`[data-col-index="${n}"]`);if(e){let t=e.getBoundingClientRect();f.openFilterPopup(n,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(t.headerRenderer&&typeof t.headerRenderer==`string`){let e=u[t.headerRenderer];if(e)return e(p)}return d?d(p):T(C,{children:[w(`span`,{className:`gp-grid-header-text`,children:t.headerName??t.field}),T(`span`,{className:`gp-grid-header-icons`,children:[a&&T(`span`,{className:`gp-grid-sort-arrows`,children:[T(`span`,{className:`gp-grid-sort-arrows-stack`,children:[w(`svg`,{className:`gp-grid-sort-arrow-up${r===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:w(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})}),w(`svg`,{className:`gp-grid-sort-arrow-down${r===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:w(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})})]}),i!==void 0&&i>0&&w(`span`,{className:`gp-grid-sort-index`,children:i})]}),o&&w(`span`,{className:`gp-grid-filter-icon${s?` active`:``}`,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),p.onFilterClick()},onClick:e=>{e.stopPropagation()},children:w(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,children:w(`path`,{d:`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`})})})]})]})}function R(e){v();let{columns:o,dataSource:s,rowData:d,rowHeight:p,headerHeight:h=p,overscan:g=3,sortingEnabled:C=!0,darkMode:E=!1,wheelDampening:D=.1,cellRenderers:O={},editRenderers:k={},headerRenderers:A={},cellRenderer:j,editRenderer:M,headerRenderer:P,initialWidth:I,initialHeight:te,gridRef:L,highlighting:R}=e,z=a(null),B=a(null),oe=a(null),se=a(!1),[V,H]=i(F,{initialWidth:I,initialHeight:te},N),U=h,W=a(null),G=W.current;(!G||G.providedDataSource!==s||G.rowData!==d)&&(G?.ownsDataSource&&G.dataSource.destroy?.(),s?W.current={dataSource:s,ownsDataSource:!1,providedDataSource:s,rowData:d}:d?W.current={dataSource:m(d),ownsDataSource:!0,providedDataSource:s,rowData:d}:W.current={dataSource:f([]),ownsDataSource:!0,providedDataSource:s,rowData:d});let{dataSource:K,ownsDataSource:ce}=W.current;n(()=>()=>{W.current?.ownsDataSource&&(W.current.dataSource.destroy?.(),W.current=null)},[]),n(()=>{let e=oe.current;e&&e!==K&&H({type:`RESET`}),oe.current=K},[K]);let q=r(()=>o.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden),[o]),{positions:J,widths:Y}=r(()=>u(q.map(e=>e.column),V.viewportWidth),[q,V.viewportWidth]),X=_(J),{handleCellMouseDown:le,handleCellDoubleClick:ue,handleFillHandleMouseDown:de,handleHeaderClick:fe,handleKeyDown:pe,handleWheel:me,dragState:Z}=ne(B,z,o,{activeCell:V.activeCell,selectionRange:V.selectionRange,editingCell:V.editingCell,filterPopupOpen:V.filterPopup?.isOpen??!1,rowHeight:p,headerHeight:U,columnPositions:J,visibleColumnsWithIndices:q,slots:V.slots});n(()=>{se.current&&H({type:`RESET`}),se.current=!0;let e=new c({columns:o,dataSource:K,rowHeight:p,headerHeight:U,overscan:g,sortingEnabled:C,highlighting:R});B.current=e,e.input.updateDeps({getHeaderHeight:()=>U,getRowHeight:()=>p,getColumnPositions:()=>J,getColumnCount:()=>q.length,getOriginalColumnIndex:e=>{let t=q[e];return t?t.originalIndex:e}}),L&&(L.current={core:e});let t=e.onBatchInstruction(e=>{H({type:`BATCH_INSTRUCTIONS`,instructions:e})});e.initialize();let n=z.current;return n&&e.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight),()=>{t(),e.destroy(),B.current=null,L&&(L.current=null)}},[o,K,p,U,g,C,L,R]),n(()=>{let e=K;if(e.subscribe)return e.subscribe(()=>{B.current?.refresh()})},[K]);let Q=t(()=>{let e=z.current,t=B.current;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},[]);n(()=>{let e=z.current,t=B.current;if(!e||!t)return;if(typeof ResizeObserver>`u`){Q();return}let n=new ResizeObserver(()=>{t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)});return n.observe(e),Q(),()=>n.disconnect()},[Q]),n(()=>{let e=z.current;if(!e)return;let t=e=>{me(e,D)};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[me,D]);let he=t((e,t)=>{let n=B.current;n&&n.setFilter(e,t)},[]),ge=t(()=>{let e=B.current;e&&e.closeFilterPopup()},[]),_e=t((e,t)=>{B.current?.input.handleCellMouseEnter(e,t)},[]),ve=t(()=>{B.current?.input.handleCellMouseLeave()},[]),ye=r(()=>Array.from(V.slots.values()),[V.slots]),$=r(()=>{let{activeCell:e,selectionRange:t,slots:n}=V;if(!e&&!t)return null;let r,i,a,s;if(t)r=Math.max(t.startRow,t.endRow),i=Math.max(t.startCol,t.endCol),a=Math.min(t.startCol,t.endCol),s=Math.max(t.startCol,t.endCol);else if(e)r=e.row,i=e.col,a=i,s=i;else return null;for(let e=a;e<=s;e++){let t=o[e];if(!(!t||t.hidden)&&t.editable!==!0)return null}let c=q.findIndex(e=>e.originalIndex===i);if(c===-1)return null;let l=null;for(let e of n.values())if(e.rowIndex===r){l=e.translateY;break}if(l===null)return null;let u=J[c]??0,d=Y[c]??0;return{top:l+p-5,left:u+d-20}},[V.activeCell,V.selectionRange,V.slots,p,J,Y,o,q]);return T(`div`,{ref:z,className:`gp-grid-container${E?` gp-grid-container--dark`:``}`,style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},onScroll:Q,onKeyDown:pe,tabIndex:0,children:[T(`div`,{style:{width:Math.max(V.contentWidth,X),height:Math.max(V.contentHeight,U),position:`relative`,minWidth:`100%`},children:[w(`div`,{className:`gp-grid-header`,style:{position:`sticky`,top:0,left:0,height:h,width:Math.max(V.contentWidth,X),minWidth:`100%`},children:q.map(({column:e,originalIndex:t},n)=>{let r=V.headers.get(t);return w(`div`,{className:`gp-grid-header-cell`,"data-col-index":t,style:{position:`absolute`,left:`${J[n]}px`,top:0,width:`${Y[n]}px`,height:`${h}px`,background:`transparent`},onClick:e=>fe(t,e),children:ae({column:e,colIndex:t,sortDirection:r?.sortDirection,sortIndex:r?.sortIndex,sortable:r?.sortable??!0,filterable:r?.filterable??!0,hasFilter:r?.hasFilter??!1,coreRef:B,containerRef:z,headerRenderers:A,globalHeaderRenderer:P})},e.colId??e.field)})}),ye.map(e=>e.rowIndex<0?null:w(`div`,{className:[`gp-grid-row`,...B.current?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,top:0,left:0,transform:`translateY(${e.translateY}px)`,width:`${Math.max(V.contentWidth,X)}px`,height:`${p}px`},children:q.map(({column:t,originalIndex:n},r)=>{let i=b(e.rowIndex,n,V.editingCell),a=y(e.rowIndex,n,V.activeCell),o=S(e.rowIndex,n,V.selectionRange);return w(`div`,{className:[l(a,o,i,x(e.rowIndex,n,Z.dragType===`fill`,Z.fillSourceRange,Z.fillTarget)),...B.current?.highlight?.computeCombinedCellClasses(e.rowIndex,n,t,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,left:`${J[r]}px`,top:0,width:`${Y[r]}px`,height:`${p}px`},onMouseDown:t=>le(e.rowIndex,n,t),onDoubleClick:()=>ue(e.rowIndex,n),onMouseEnter:()=>_e(e.rowIndex,n),onMouseLeave:ve,children:i&&V.editingCell?ie({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,initialValue:V.editingCell.initialValue,coreRef:B,editRenderers:k,globalEditRenderer:M}):re({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,isActive:a,isSelected:o,isEditing:i,cellRenderers:O,globalCellRenderer:j})},`${e.slotId}-${n}`)})},e.slotId)),$&&!V.editingCell&&w(`div`,{className:`gp-grid-fill-handle`,style:{position:`absolute`,top:$.top,left:$.left,zIndex:200},onMouseDown:de}),V.isLoading&&T(`div`,{className:`gp-grid-loading`,children:[w(`div`,{className:`gp-grid-loading-spinner`}),`Loading...`]}),V.error&&T(`div`,{className:`gp-grid-error`,children:[`Error: `,V.error]}),!V.isLoading&&!V.error&&V.totalRows===0&&w(`div`,{className:`gp-grid-empty`,children:`No data to display`})]}),V.filterPopup?.isOpen&&V.filterPopup.column&&V.filterPopup.anchorRect&&w(ee,{column:V.filterPopup.column,colIndex:V.filterPopup.colIndex,anchorRect:V.filterPopup.anchorRect,distinctValues:V.filterPopup.distinctValues,currentFilter:V.filterPopup.currentFilter,onApply:he,onClose:ge})]})}export{R as Grid,s as GridCore,d as createClientDataSource,p as createDataSourceFromArray,h as createMutableClientDataSource,g as createServerDataSource};
1
+ import e,{useCallback as t,useEffect as n,useMemo as r,useReducer as i,useRef as a,useState as o}from"react";import{GridCore as s,GridCore as c,buildCellClasses as l,calculateScaledColumnPositions as u,createClientDataSource as d,createClientDataSource as f,createDataSourceFromArray as p,createDataSourceFromArray as m,createMutableClientDataSource as h,createMutableClientDataSource as g,createServerDataSource as _,getTotalWidth as v,injectStyles as y,isCellActive as b,isCellEditing as x,isCellInFillPreview as S,isCellSelected as C}from"@gp-grid/core";import{Fragment as w,jsx as T,jsxs as E}from"react/jsx-runtime";const D=[{value:`contains`,label:`Contains`},{value:`notContains`,label:`Does not contain`},{value:`equals`,label:`Equals`},{value:`notEquals`,label:`Does not equal`},{value:`startsWith`,label:`Starts with`},{value:`endsWith`,label:`Ends with`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Is not blank`}];function O({distinctValues:e,currentFilter:n,onApply:i,onClose:a}){let s=t(e=>Array.isArray(e)?e.join(`, `):String(e??``),[]),c=r(()=>{let t=e.filter(e=>e!=null&&e!==``&&!(Array.isArray(e)&&e.length===0)).map(e=>s(e));return Array.from(new Set(t)).sort((e,t)=>{let n=parseFloat(e),r=parseFloat(t);return!isNaN(n)&&!isNaN(r)?n-r:e.localeCompare(t,void 0,{numeric:!0,sensitivity:`base`})})},[e,s]),l=c.length>100,[u,d]=o(r(()=>{if(!n?.conditions[0])return l?`condition`:`values`;let e=n.conditions[0];return e.selectedValues&&e.selectedValues.size>0?`values`:`condition`},[n,l])),f=r(()=>n?.conditions[0]?n.conditions[0].selectedValues??new Set:new Set,[n]),p=r(()=>n?.conditions[0]?n.conditions[0].includeBlank??!0:!0,[n]),[m,h]=o(``),[g,_]=o(f),[v,y]=o(p),[b,x]=o(r(()=>{if(!n?.conditions.length)return[{operator:`contains`,value:``,nextOperator:`and`}];let e=n.conditions[0];if(e.selectedValues&&e.selectedValues.size>0)return[{operator:`contains`,value:``,nextOperator:`and`}];let t=n.combination??`and`;return n.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value??``,nextOperator:n.nextOperator??t}})},[n])),S=r(()=>{if(!m)return c;let e=m.toLowerCase();return c.filter(t=>t.toLowerCase().includes(e))},[c,m]),C=r(()=>e.some(e=>e==null||e===``),[e]),O=r(()=>S.every(e=>g.has(e))&&(!C||v),[S,g,C,v]),k=t(()=>{_(new Set(S)),C&&y(!0)},[S,C]),A=t(()=>{_(new Set),y(!1)},[]),j=t(e=>{_(t=>{let n=new Set(t);return n.has(e)?n.delete(e):n.add(e),n})},[]),M=t((e,t)=>{x(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),N=t(()=>{x(e=>[...e,{operator:`contains`,value:``,nextOperator:`and`}])},[]),ee=t(e=>{x(t=>t.filter((t,n)=>n!==e))},[]),P=t(()=>{if(u===`values`){if(c.every(e=>g.has(e))&&(!C||v)){i(null);return}i({conditions:[{type:`text`,operator:`equals`,selectedValues:g,includeBlank:v}],combination:`and`})}else{let e=b.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.value.trim()!==``);if(e.length===0){i(null);return}i({conditions:e.map(e=>({type:`text`,operator:e.operator,value:e.value,nextOperator:e.nextOperator})),combination:`and`})}},[u,c,g,v,C,b,i]),F=t(()=>{i(null)},[i]);return E(`div`,{className:`gp-grid-filter-content gp-grid-filter-text`,children:[!l&&E(`div`,{className:`gp-grid-filter-mode-toggle`,children:[T(`button`,{type:`button`,className:u===`values`?`active`:``,onClick:()=>d(`values`),children:`Values`}),T(`button`,{type:`button`,className:u===`condition`?`active`:``,onClick:()=>d(`condition`),children:`Condition`})]}),l&&u===`condition`&&E(`div`,{className:`gp-grid-filter-info`,children:[`Too many unique values (`,c.length,`). Use conditions to filter.`]}),u===`values`&&E(w,{children:[T(`input`,{className:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,value:m,onChange:e=>h(e.target.value),autoFocus:!0}),E(`div`,{className:`gp-grid-filter-actions`,children:[T(`button`,{type:`button`,onClick:k,disabled:O,children:`Select All`}),T(`button`,{type:`button`,onClick:A,children:`Deselect All`})]}),E(`div`,{className:`gp-grid-filter-list`,children:[C&&E(`label`,{className:`gp-grid-filter-option`,children:[T(`input`,{type:`checkbox`,checked:v,onChange:()=>y(!v)}),T(`span`,{className:`gp-grid-filter-blank`,children:`(Blanks)`})]}),S.map(e=>E(`label`,{className:`gp-grid-filter-option`,children:[T(`input`,{type:`checkbox`,checked:g.has(e),onChange:()=>j(e)}),T(`span`,{children:e})]},e))]})]}),u===`condition`&&E(w,{children:[b.map((e,t)=>E(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&E(`div`,{className:`gp-grid-filter-combination`,children:[T(`button`,{type:`button`,className:b[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>M(t-1,{nextOperator:`and`}),children:`AND`}),T(`button`,{type:`button`,className:b[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>M(t-1,{nextOperator:`or`}),children:`OR`})]}),E(`div`,{className:`gp-grid-filter-row`,children:[T(`select`,{value:e.operator,onChange:e=>M(t,{operator:e.target.value}),autoFocus:t===0,children:D.map(e=>T(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&T(`input`,{type:`text`,value:e.value,onChange:e=>M(t,{value:e.target.value}),placeholder:`Value`,className:`gp-grid-filter-text-input`}),b.length>1&&T(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>ee(t),children:`×`})]})]},t)),T(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:N,children:`+ Add condition`})]}),E(`div`,{className:`gp-grid-filter-buttons`,children:[T(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:F,children:`Clear`}),T(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:P,children:`Apply`})]})]})}const k=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`>=`,label:`≥`},{value:`<=`,label:`≤`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function A({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:n.value==null?``:String(n.value),valueTo:n.valueTo==null?``:String(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`number`,operator:e.operator,value:e.value?parseFloat(e.value):void 0,valueTo:e.valueTo?parseFloat(e.valueTo):void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return E(`div`,{className:`gp-grid-filter-content gp-grid-filter-number`,children:[a.map((e,t)=>E(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&E(`div`,{className:`gp-grid-filter-combination`,children:[T(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),T(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),E(`div`,{className:`gp-grid-filter-row`,children:[T(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:k.map(e=>T(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&T(`input`,{type:`number`,value:e.value,onChange:e=>c(t,{value:e.target.value}),placeholder:`Value`}),e.operator===`between`&&E(w,{children:[T(`span`,{className:`gp-grid-filter-to`,children:`to`}),T(`input`,{type:`number`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value}),placeholder:`Value`})]}),a.length>1&&T(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),T(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),E(`div`,{className:`gp-grid-filter-buttons`,children:[T(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),T(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}const j=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function M(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}function N({currentFilter:e,onApply:n,onClose:i}){let[a,s]=o(r(()=>{if(!e?.conditions.length)return[{operator:`=`,value:``,valueTo:``,nextOperator:`and`}];let t=e.combination??`and`;return e.conditions.map(e=>{let n=e;return{operator:n.operator,value:M(n.value),valueTo:M(n.valueTo),nextOperator:n.nextOperator??t}})},[e])),c=t((e,t)=>{s(n=>{let r=[...n];return r[e]={...r[e],...t},r})},[]),l=t(()=>{s(e=>[...e,{operator:`=`,value:``,valueTo:``,nextOperator:`and`}])},[]),u=t(e=>{s(t=>t.filter((t,n)=>n!==e))},[]),d=t(()=>{let e=a.filter(e=>e.operator===`blank`||e.operator===`notBlank`?!0:e.operator===`between`?e.value!==``&&e.valueTo!==``:e.value!==``);if(e.length===0){n(null);return}n({conditions:e.map(e=>({type:`date`,operator:e.operator,value:e.value||void 0,valueTo:e.valueTo||void 0,nextOperator:e.nextOperator})),combination:`and`})},[a,n]),f=t(()=>{n(null)},[n]);return E(`div`,{className:`gp-grid-filter-content gp-grid-filter-date`,children:[a.map((e,t)=>E(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&E(`div`,{className:`gp-grid-filter-combination`,children:[T(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),T(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),E(`div`,{className:`gp-grid-filter-row`,children:[T(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:j.map(e=>T(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&T(`input`,{type:`date`,value:e.value,onChange:e=>c(t,{value:e.target.value})}),e.operator===`between`&&E(w,{children:[T(`span`,{className:`gp-grid-filter-to`,children:`to`}),T(`input`,{type:`date`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value})})]}),a.length>1&&T(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),T(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),E(`div`,{className:`gp-grid-filter-buttons`,children:[T(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),T(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}function ee({column:e,colIndex:r,anchorRect:i,distinctValues:o,currentFilter:s,onApply:c,onClose:l}){let u=a(null);n(()=>{let e=e=>{let t=e.target;t.closest(`.gp-grid-filter-icon`)||u.current&&!u.current.contains(t)&&l()},t=e=>{e.key===`Escape`&&l()};return requestAnimationFrame(()=>{document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t)}),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[l]);let d=t(t=>{c(e.colId??e.field,t),l()},[e,c,l]),f={position:`fixed`,top:i.top+i.height+4,left:i.left,minWidth:Math.max(200,i.width),zIndex:1e4},p=e.cellDataType,m=p===`text`||p===`object`,h=p===`number`,g=p===`date`||p===`dateString`||p===`dateTime`||p===`dateTimeString`;return E(`div`,{ref:u,className:`gp-grid-filter-popup`,style:f,children:[E(`div`,{className:`gp-grid-filter-header`,children:[`Filter: `,e.headerName??e.field]}),m&&T(O,{distinctValues:o,currentFilter:s,onApply:d,onClose:l}),h&&T(A,{currentFilter:s,onApply:d,onClose:l}),g&&T(N,{currentFilter:s,onApply:d,onClose:l}),!m&&!h&&!g&&T(O,{distinctValues:o,currentFilter:s,onApply:d,onClose:l})]})}function P(e){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:e?.initialHeight??0,viewportWidth:e?.initialWidth??0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange:null,hoverPosition:null}}function F(e,t,n){switch(e.type){case`CREATE_SLOT`:return t.set(e.slotId,{slotId:e.slotId,rowIndex:-1,rowData:{},translateY:0}),null;case`DESTROY_SLOT`:return t.delete(e.slotId),null;case`ASSIGN_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,rowIndex:e.rowIndex,rowData:e.rowData}),null}case`MOVE_SLOT`:{let n=t.get(e.slotId);return n&&t.set(e.slotId,{...n,translateY:e.translateY}),null}case`SET_ACTIVE_CELL`:return{activeCell:e.position};case`SET_SELECTION_RANGE`:return{selectionRange:e.range};case`UPDATE_VISIBLE_RANGE`:return{visibleRowRange:{start:e.start,end:e.end}};case`SET_HOVER_POSITION`:return{hoverPosition:e.position};case`START_EDIT`:return{editingCell:{row:e.row,col:e.col,initialValue:e.initialValue}};case`STOP_EDIT`:return{editingCell:null};case`SET_CONTENT_SIZE`:return{contentWidth:e.width,contentHeight:e.height,viewportWidth:e.viewportWidth};case`UPDATE_HEADER`:return n.set(e.colIndex,{column:e.column,sortDirection:e.sortDirection,sortIndex:e.sortIndex,sortable:e.sortable,filterable:e.filterable,hasFilter:e.hasFilter}),null;case`OPEN_FILTER_POPUP`:return{filterPopup:{isOpen:!0,colIndex:e.colIndex,column:e.column,anchorRect:e.anchorRect,distinctValues:e.distinctValues,currentFilter:e.currentFilter}};case`CLOSE_FILTER_POPUP`:return{filterPopup:null};case`DATA_LOADING`:return{isLoading:!0,error:null};case`DATA_LOADED`:return{isLoading:!1,totalRows:e.totalRows};case`DATA_ERROR`:return{isLoading:!1,error:e.error};case`ROWS_ADDED`:case`ROWS_REMOVED`:return{totalRows:e.totalRows};case`ROWS_UPDATED`:case`TRANSACTION_PROCESSED`:return null;default:return null}}function te(e,t){if(t.type===`RESET`)return P();let{instructions:n}=t;if(n.length===0)return e;let r=new Map(e.slots),i=new Map(e.headers),a={};for(let e of n){let t=F(e,r,i);t&&(a={...a,...t})}return{...e,...a,slots:r,headers:i}}function ne(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function re(e,t,n,r,i,a){let o=ne(a,n),s=(o?o.translateY:i+n*r)-t.scrollTop,c=s+r,l=i,u=t.clientHeight;if(s<l)t.scrollTop=e.getScrollTopForRow(n);else if(c>u){let a=t.clientHeight-i,o=Math.floor(a/r),s=Math.max(0,n-o+1);t.scrollTop=e.getScrollTopForRow(s)}}function ie(e,r,i,s){let{activeCell:c,selectionRange:l,editingCell:u,filterPopupOpen:d,rowHeight:f,headerHeight:p,columnPositions:m,visibleColumnsWithIndices:h,slots:g}=s,_=a(null),[v,y]=o({isDragging:!1,dragType:null,fillSourceRange:null,fillTarget:null});n(()=>{let t=e.current;t?.input&&t.input.updateDeps({getHeaderHeight:()=>p,getRowHeight:()=>f,getColumnPositions:()=>m,getColumnCount:()=>h.length,getOriginalColumnIndex:e=>{let t=h[e];return t?t.originalIndex:e}})},[e,p,f,m,h]);let b=t((e,t)=>{_.current&&clearInterval(_.current),_.current=setInterval(()=>{let n=r.current;n&&(n.scrollTop+=t,n.scrollLeft+=e)},16)},[r]),x=t(()=>{_.current&&=(clearInterval(_.current),null)},[]),S=t(()=>{let e=r.current;if(!e)return null;let t=e.getBoundingClientRect();return{top:t.top,left:t.left,width:t.width,height:t.height,scrollTop:e.scrollTop,scrollLeft:e.scrollLeft}},[r]),C=e=>({clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}),w=t(()=>{let t=t=>{let n=e.current,r=S();if(!n?.input||!r)return;let i=n.input.handleDragMove(C(t),r);i&&(i.autoScroll?b(i.autoScroll.dx,i.autoScroll.dy):x(),y(n.input.getDragState()))},n=()=>{let r=e.current;r?.input&&(r.input.handleDragEnd(),y(r.input.getDragState())),x(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)},[e,S,b,x]),T=t((t,n,i)=>{let a=e.current;if(!a?.input)return;let o=a.input.handleCellMouseDown(t,n,C(i));o.focusContainer&&r.current?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),y(a.input.getDragState()),w())},[e,r,w]),E=t((t,n)=>{let r=e.current;r?.input&&r.input.handleCellDoubleClick(t,n)},[e]),D=t(t=>{let n=e.current;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(c,l,C(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(y(n.input.getDragState()),w())},[e,c,l,w]),O=t((t,n)=>{let r=e.current;if(!r?.input)return;let a=i[t];if(!a)return;let o=a.colId??a.field;r.input.handleHeaderClick(o,n.shiftKey)},[e,i]),k=t(t=>{let n=e.current,i=r.current;if(!n?.input)return;let a=n.input.handleKeyDown({key:t.key,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey},c,u,d);a.preventDefault&&t.preventDefault(),a.scrollToCell&&i&&re(n,i,a.scrollToCell.row,f,p,g)},[e,r,c,u,d,f,p,g]),A=t((t,n)=>{let i=e.current,a=r.current;if(!i?.input||!a)return;let o=i.input.handleWheel(t.deltaY,t.deltaX,n);o&&(t.preventDefault(),a.scrollTop+=o.dy,a.scrollLeft+=o.dx)},[e,r]);return n(()=>()=>{x()},[x]),{handleCellMouseDown:T,handleCellDoubleClick:E,handleFillHandleMouseDown:D,handleHeaderClick:O,handleKeyDown:k,handleWheel:A,dragState:v}}function I(e,t){let n=t.split(`.`),r=e;for(let e of n){if(typeof r!=`object`||!r)return null;r=r[e]}return r??null}function ae(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s,cellRenderers:c,globalCellRenderer:l}=e,u=I(n,t.field),d={value:u,rowData:n,column:t,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s};if(t.cellRenderer&&typeof t.cellRenderer==`string`){let e=c[t.cellRenderer];if(e)return e(d)}return l?l(d):u==null?``:String(u)}function oe(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,initialValue:a,coreRef:o,editRenderers:s,globalEditRenderer:c}=e,l=o.current;if(!l)return null;let u={value:I(n,t.field),rowData:n,column:t,rowIndex:r,colIndex:i,isActive:!0,isSelected:!0,isEditing:!0,initialValue:a,onValueChange:e=>l.updateEditValue(e),onCommit:()=>l.commitEdit(),onCancel:()=>l.cancelEdit()};if(t.editRenderer&&typeof t.editRenderer==`string`){let e=s[t.editRenderer];if(e)return e(u)}return c?c(u):T(`input`,{className:`gp-grid-edit-input`,type:`text`,defaultValue:a==null?``:String(a),autoFocus:!0,onFocus:e=>e.target.select(),onChange:e=>l.updateEditValue(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`?l.commitEdit():e.key===`Escape`?l.cancelEdit():e.key===`Tab`&&(e.preventDefault(),l.commitEdit(),l.selection.moveFocus(e.shiftKey?`left`:`right`,!1))},onBlur:()=>l.commitEdit()})}function se(e){let{column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,coreRef:c,containerRef:l,headerRenderers:u,globalHeaderRenderer:d}=e,f=c.current,p={column:t,colIndex:n,sortDirection:r,sortIndex:i,sortable:a,filterable:o,hasFilter:s,onSort:(e,n)=>{f&&a&&f.setSort(t.colId??t.field,e,n)},onFilterClick:()=>{if(f&&o){let e=l.current?.querySelector(`[data-col-index="${n}"]`);if(e){let t=e.getBoundingClientRect();f.openFilterPopup(n,{top:t.top,left:t.left,width:t.width,height:t.height})}}}};if(t.headerRenderer&&typeof t.headerRenderer==`string`){let e=u[t.headerRenderer];if(e)return e(p)}return d?d(p):E(w,{children:[T(`span`,{className:`gp-grid-header-text`,children:t.headerName??t.field}),E(`span`,{className:`gp-grid-header-icons`,children:[a&&E(`span`,{className:`gp-grid-sort-arrows`,children:[E(`span`,{className:`gp-grid-sort-arrows-stack`,children:[T(`svg`,{className:`gp-grid-sort-arrow-up${r===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:T(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})}),T(`svg`,{className:`gp-grid-sort-arrow-down${r===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:T(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})})]}),i!==void 0&&i>0&&T(`span`,{className:`gp-grid-sort-index`,children:i})]}),o&&T(`span`,{className:`gp-grid-filter-icon${s?` active`:``}`,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),p.onFilterClick()},onClick:e=>{e.stopPropagation()},children:T(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,children:T(`path`,{d:`M4 4h16l-6 8v5l-4 2v-7L4 4z`})})})]})]})}function L(o){y();let{columns:s,dataSource:d,rowData:p,rowHeight:h,headerHeight:g=h,overscan:_=3,sortingEnabled:D=!0,darkMode:O=!1,wheelDampening:k=.1,cellRenderers:A={},editRenderers:j={},headerRenderers:M={},cellRenderer:N,editRenderer:F,headerRenderer:ne,initialWidth:re,initialHeight:I,gridRef:L,highlighting:R,getRowId:ce,onCellValueChanged:le,loadingComponent:ue}=o,z=a(null),B=a(null),V=a(null),de=a(!1),[H,fe]=i(te,{initialWidth:re,initialHeight:I},P),U=g,W=a(null),G=W.current;(!G||G.providedDataSource!==d||G.rowData!==p)&&(G&&p&&p.length>1e4&&console.warn(`[gp-grid] rowData prop changed with ${p.length} rows — this triggers a full rebuild. Use useGridData() for efficient updates.`),G?.ownsDataSource&&G.dataSource.destroy?.(),d?W.current={dataSource:d,ownsDataSource:!1,providedDataSource:d,rowData:p}:p?W.current={dataSource:m(p),ownsDataSource:!0,providedDataSource:d,rowData:p}:W.current={dataSource:f([]),ownsDataSource:!0,providedDataSource:d,rowData:p});let{dataSource:K,ownsDataSource:pe}=W.current;n(()=>()=>{W.current?.ownsDataSource&&(W.current.dataSource.destroy?.(),W.current=null)},[]);let me=a(ce);me.current=ce;let q=a(le);q.current=le;let he=a(K);he.current=K;let J=r(()=>s.map((e,t)=>({column:e,originalIndex:t})).filter(({column:e})=>!e.hidden),[s]),{positions:Y,widths:X}=r(()=>u(J.map(e=>e.column),H.viewportWidth),[J,H.viewportWidth]),Z=v(Y),{handleCellMouseDown:ge,handleCellDoubleClick:_e,handleFillHandleMouseDown:ve,handleHeaderClick:ye,handleKeyDown:be,handleWheel:xe,dragState:Q}=ie(B,z,s,{activeCell:H.activeCell,selectionRange:H.selectionRange,editingCell:H.editingCell,filterPopupOpen:H.filterPopup?.isOpen??!1,rowHeight:h,headerHeight:U,columnPositions:Y,visibleColumnsWithIndices:J,slots:H.slots});n(()=>{de.current&&fe({type:`RESET`}),de.current=!0;let e=new c({columns:s,dataSource:he.current,rowHeight:h,headerHeight:U,overscan:_,sortingEnabled:D,highlighting:R,getRowId:me.current,onCellValueChanged:q.current?e=>q.current?.(e):void 0});B.current=e,e.input.updateDeps({getHeaderHeight:()=>U,getRowHeight:()=>h,getColumnPositions:()=>Y,getColumnCount:()=>J.length,getOriginalColumnIndex:e=>{let t=J[e];return t?t.originalIndex:e}}),L&&(L.current={core:e});let t=e.onBatchInstruction(e=>{fe({type:`BATCH_INSTRUCTIONS`,instructions:e})});e.initialize();let n=z.current;return n&&e.setViewport(n.scrollTop,n.scrollLeft,n.clientWidth,n.clientHeight),()=>{t(),e.destroy(),B.current=null,L&&(L.current=null)}},[s,h,U,_,D,L,R]),n(()=>{let e=B.current;if(!e)return;let t=V.current;if(!t||t===K){V.current=K;return}V.current=K,e.setDataSource(K)},[K]),n(()=>{let e=K;if(e.subscribe)return e.subscribe(()=>{B.current?.refreshFromTransaction()})},[K]);let $=t(()=>{let e=z.current,t=B.current;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},[]);n(()=>{let e=z.current,t=B.current;if(!e||!t)return;if(typeof ResizeObserver>`u`){$();return}let n=new ResizeObserver(()=>{t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)});return n.observe(e),$(),()=>n.disconnect()},[$]),n(()=>{let e=z.current;if(!e)return;let t=e=>{xe(e,k)};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[xe,k]);let Se=t((e,t)=>{let n=B.current;n&&n.setFilter(e,t)},[]),Ce=t(()=>{let e=B.current;e&&e.closeFilterPopup()},[]),we=t((e,t)=>{B.current?.input.handleCellMouseEnter(e,t)},[]),Te=t(()=>{B.current?.input.handleCellMouseLeave()},[]),Ee=r(()=>Array.from(H.slots.values()),[H.slots]),De=r(()=>{let{activeCell:e,selectionRange:t,slots:n}=H;if(!e&&!t)return null;let r,i,a,o;if(t)r=Math.max(t.startRow,t.endRow),i=Math.max(t.startCol,t.endCol),a=Math.min(t.startCol,t.endCol),o=Math.max(t.startCol,t.endCol);else if(e)r=e.row,i=e.col,a=i,o=i;else return null;for(let e=a;e<=o;e++){let t=s[e];if(!(!t||t.hidden)&&t.editable!==!0)return null}let c=J.findIndex(e=>e.originalIndex===i);if(c===-1)return null;let l=null;for(let e of n.values())if(e.rowIndex===r){l=e.translateY;break}if(l===null)return null;let u=Y[c]??0,d=X[c]??0;return{top:l+h-5,left:u+d-20}},[H.activeCell,H.selectionRange,H.slots,h,Y,X,s,J]);return E(`div`,{ref:z,className:`gp-grid-container${O?` gp-grid-container--dark`:``}`,style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},onScroll:$,onKeyDown:be,tabIndex:0,children:[E(`div`,{style:{width:Math.max(H.contentWidth,Z),height:Math.max(H.contentHeight,U),position:`relative`,minWidth:`100%`},children:[T(`div`,{className:`gp-grid-header${H.isLoading?` gp-grid-header--loading`:``}`,style:{position:`sticky`,top:0,left:0,height:g,width:Math.max(H.contentWidth,Z),minWidth:`100%`},children:J.map(({column:e,originalIndex:t},n)=>{let r=H.headers.get(t);return T(`div`,{className:`gp-grid-header-cell`,"data-col-index":t,style:{position:`absolute`,left:`${Y[n]}px`,top:0,width:`${X[n]}px`,height:`${g}px`,background:`transparent`},onClick:e=>ye(t,e),children:se({column:e,colIndex:t,sortDirection:r?.sortDirection,sortIndex:r?.sortIndex,sortable:r?.sortable??!0,filterable:r?.filterable??!0,hasFilter:r?.hasFilter??!1,coreRef:B,containerRef:z,headerRenderers:M,globalHeaderRenderer:ne})},e.colId??e.field)})}),Ee.map(e=>e.rowIndex<0?null:T(`div`,{className:[`gp-grid-row`,...B.current?.highlight?.computeRowClasses(e.rowIndex,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,top:0,left:0,transform:`translateY(${e.translateY}px)`,width:`${Math.max(H.contentWidth,Z)}px`,height:`${h}px`},children:J.map(({column:t,originalIndex:n},r)=>{let i=x(e.rowIndex,n,H.editingCell),a=b(e.rowIndex,n,H.activeCell),o=C(e.rowIndex,n,H.selectionRange);return T(`div`,{className:[l(a,o,i,S(e.rowIndex,n,Q.dragType===`fill`,Q.fillSourceRange,Q.fillTarget)),...B.current?.highlight?.computeCombinedCellClasses(e.rowIndex,n,t,e.rowData)??[]].filter(Boolean).join(` `),style:{position:`absolute`,left:`${Y[r]}px`,top:0,width:`${X[r]}px`,height:`${h}px`},onMouseDown:t=>ge(e.rowIndex,n,t),onDoubleClick:()=>_e(e.rowIndex,n),onMouseEnter:()=>we(e.rowIndex,n),onMouseLeave:Te,children:i&&H.editingCell?oe({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,initialValue:H.editingCell.initialValue,coreRef:B,editRenderers:j,globalEditRenderer:F}):ae({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,isActive:a,isSelected:o,isEditing:i,cellRenderers:A,globalCellRenderer:N})},`${e.slotId}-${n}`)})},e.slotId)),De&&!H.editingCell&&T(`div`,{className:`gp-grid-fill-handle`,style:{position:`absolute`,top:De.top,left:De.left,zIndex:200},onMouseDown:ve}),H.isLoading&&E(w,{children:[T(`div`,{className:`gp-grid-loading-overlay`}),ue?e.createElement(ue,{isLoading:!0}):T(`div`,{className:`gp-grid-loading`,children:T(`div`,{className:`gp-grid-loading-spinner`})})]}),H.error&&E(`div`,{className:`gp-grid-error`,children:[`Error: `,H.error]}),!H.isLoading&&!H.error&&H.totalRows===0&&T(`div`,{className:`gp-grid-empty`,children:`No data to display`})]}),H.filterPopup?.isOpen&&H.filterPopup.column&&H.filterPopup.anchorRect&&T(ee,{column:H.filterPopup.column,colIndex:H.filterPopup.colIndex,anchorRect:H.filterPopup.anchorRect,distinctValues:H.filterPopup.distinctValues,currentFilter:H.filterPopup.currentFilter,onApply:Se,onClose:Ce})]})}const R=(e,t)=>{let n=r(()=>g(e,{getRowId:t.getRowId,debounceMs:t.debounceMs??0,useWorker:t.useWorker,parallelSort:t.parallelSort}),[]);return{dataSource:n,updateRow:n.updateRow,addRows:n.addRows,removeRows:n.removeRows,updateCell:n.updateCell,clear:n.clear,getRowById:n.getRowById,getTotalRowCount:n.getTotalRowCount,flushTransactions:n.flushTransactions}};export{L as Grid,s as GridCore,d as createClientDataSource,p as createDataSourceFromArray,h as createMutableClientDataSource,_ as createServerDataSource,R as useGridData};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@gp-grid/react",
3
3
  "description": "A high-performance React data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
4
- "version": "0.7.4",
4
+ "version": "0.8.0",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
@@ -45,7 +45,7 @@
45
45
  "link-workspace-packages": false
46
46
  },
47
47
  "dependencies": {
48
- "@gp-grid/core": "0.7.4"
48
+ "@gp-grid/core": "0.8.0"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": "^19.0.0",