gp-grid-react 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -28,6 +28,37 @@ interface CellRange {
   endRow: number;
   endCol: number;
 }
+/** Selection state */
+interface SelectionState {
+  /** Active cell position */
+  activeCell: CellPosition | null;
+  /** Selection range */
+  range: CellRange | null;
+  /** Anchor cell for shift-extend selection */
+  anchor: CellPosition | null;
+  /** Whether selection mode is active (ctrl held) */
+  selectionMode: boolean;
+}
+/** Edit state */
+interface EditState {
+  /** Row index */
+  row: number;
+  /** Column index */
+  col: number;
+  /** Initial value */
+  initialValue: CellValue;
+  /** Current value */
+  currentValue: CellValue;
+}
+/** Fill handle state */
+interface FillHandleState {
+  /** Source range */
+  sourceRange: CellRange;
+  /** Target row */
+  targetRow: number;
+  /** Target column */
+  targetCol: number;
+}
 //#endregion
 //#region ../core/src/types/columns.d.ts
 /** Column definition */
@@ -124,6 +155,8 @@ interface DataSourceResponse<TData = Row> {
 /** Data source interface */
 interface DataSource<TData = Row> {
   fetch(request: DataSourceRequest): Promise<DataSourceResponse<TData>>;
+  /** Optional cleanup method to release resources */
+  destroy?: () => void;
 }
 //#endregion
 //#region ../core/src/types/instructions.d.ts
@@ -295,6 +328,10 @@ CreateSlotInstruction | DestroySlotInstruction | AssignSlotInstruction | MoveSlo
 /** Fill handle */ | StartFillInstruction | UpdateFillInstruction | CommitFillInstruction | CancelFillInstruction
 /** Data */ | DataLoadingInstruction | DataLoadedInstruction | DataErrorInstruction
 /** Transactions */ | RowsAddedInstruction | RowsRemovedInstruction | RowsUpdatedInstruction | TransactionProcessedInstruction;
+/** Instruction listener: Single instruction Listener that receives a single instruction, used by frameworks to update their state */
+type InstructionListener = (instruction: GridInstruction) => void;
+/** Batch instruction listener: Batch instruction Listener that receives an array of instructions, used by frameworks to update their state */
+type BatchInstructionListener = (instructions: GridInstruction[]) => void;
 //#endregion
 //#region ../core/src/types/renderers.d.ts
 /** Cell renderer params */
@@ -349,6 +386,474 @@ interface HeaderRendererParams {
   onFilterClick: () => void;
 }
 //#endregion
+//#region ../core/src/types/options.d.ts
+/** Grid core options */
+interface GridCoreOptions<TData = Row> {
+  /** Column definitions */
+  columns: ColumnDefinition[];
+  /** Data source */
+  dataSource: DataSource<TData>;
+  /** Row height */
+  rowHeight: number;
+  /** Header height: Default to row height */
+  headerHeight?: number;
+  /** Overscan: How many rows to render outside the viewport */
+  overscan?: number;
+  /** Enable/disable sorting globally. Default: true */
+  sortingEnabled?: boolean;
+  /** Debounce time for transactions in ms. Default 50. Set to 0 for sync. */
+  transactionDebounceMs?: number;
+  /** Function to extract unique ID from row. Required for mutations. */
+  getRowId?: (row: TData) => RowId;
+}
+//#endregion
+//#region ../core/src/types/input.d.ts
+/** Framework-agnostic pointer/mouse event data */
+interface PointerEventData {
+  /** X coordinate relative to viewport */
+  clientX: number;
+  /** Y coordinate relative to viewport */
+  clientY: number;
+  /** Mouse button (0 = left, 1 = middle, 2 = right) */
+  button: number;
+  /** Whether Shift key is pressed */
+  shiftKey: boolean;
+  /** Whether Ctrl key is pressed */
+  ctrlKey: boolean;
+  /** Whether Meta/Command key is pressed */
+  metaKey: boolean;
+}
+/** Framework-agnostic keyboard event data */
+interface KeyEventData {
+  /** Key value (e.g., 'Enter', 'ArrowUp', 'a') */
+  key: string;
+  /** Whether Shift key is pressed */
+  shiftKey: boolean;
+  /** Whether Ctrl key is pressed */
+  ctrlKey: boolean;
+  /** Whether Meta/Command key is pressed */
+  metaKey: boolean;
+}
+/** Container bounds and scroll position */
+interface ContainerBounds {
+  /** Top position relative to viewport */
+  top: number;
+  /** Left position relative to viewport */
+  left: number;
+  /** Container width */
+  width: number;
+  /** Container height */
+  height: number;
+  /** Current scroll top position */
+  scrollTop: number;
+  /** Current scroll left position */
+  scrollLeft: number;
+}
+/** Result from mouse/pointer input handlers */
+interface InputResult {
+  /** Whether to call preventDefault() on the event */
+  preventDefault: boolean;
+  /** Whether to call stopPropagation() on the event */
+  stopPropagation: boolean;
+  /** Whether framework should focus the container element */
+  focusContainer?: boolean;
+  /** Type of drag operation to start (framework manages global listeners) */
+  startDrag?: "selection" | "fill";
+}
+/** Result from keyboard input handler */
+interface KeyboardResult {
+  /** Whether to call preventDefault() on the event */
+  preventDefault: boolean;
+  /** Cell to scroll into view (if navigation occurred) */
+  scrollToCell?: CellPosition;
+}
+/** Result from drag move handler */
+interface DragMoveResult {
+  /** Target row index */
+  targetRow: number;
+  /** Target column index */
+  targetCol: number;
+  /** Auto-scroll deltas (null if no auto-scroll needed) */
+  autoScroll: {
+    dx: number;
+    dy: number;
+  } | null;
+}
+/** Options for InputHandler constructor */
+interface InputHandlerDeps {
+  /** Get header height */
+  getHeaderHeight: () => number;
+  /** Get row height */
+  getRowHeight: () => number;
+  /** Get column positions array */
+  getColumnPositions: () => number[];
+  /** Get column count */
+  getColumnCount: () => number;
+}
+/** Current drag state for UI rendering */
+interface DragState {
+  /** Whether any drag operation is active */
+  isDragging: boolean;
+  /** Type of active drag operation */
+  dragType: "selection" | "fill" | null;
+  /** Source range for fill operations */
+  fillSourceRange: CellRange | null;
+  /** Current fill target position */
+  fillTarget: {
+    row: number;
+    col: number;
+  } | null;
+}
+//#endregion
+//#region ../core/src/selection.d.ts
+type Direction = "up" | "down" | "left" | "right";
+interface SelectionManagerOptions {
+  getRowCount: () => number;
+  getColumnCount: () => number;
+  getCellValue: (row: number, col: number) => CellValue;
+  getRowData: (row: number) => Row | undefined;
+  getColumn: (col: number) => ColumnDefinition | undefined;
+}
+/**
+ * Manages Excel-style cell selection, keyboard navigation, and clipboard operations.
+ */
+declare class SelectionManager {
+  private state;
+  private options;
+  private listeners;
+  constructor(options: SelectionManagerOptions);
+  onInstruction(listener: InstructionListener): () => void;
+  private emit;
+  getState(): SelectionState;
+  getActiveCell(): CellPosition | null;
+  getSelectionRange(): CellRange | null;
+  isSelected(row: number, col: number): boolean;
+  isActiveCell(row: number, col: number): boolean;
+  /**
+   * Start a selection at the given cell.
+   * @param cell - The cell to select
+   * @param opts.shift - Extend selection from anchor (range select)
+   * @param opts.ctrl - Toggle selection mode
+   */
+  startSelection(cell: CellPosition, opts?: {
+    shift?: boolean;
+    ctrl?: boolean;
+  }): void;
+  /**
+   * Move focus in a direction, optionally extending the selection.
+   */
+  moveFocus(direction: Direction, extend?: boolean): void;
+  /**
+   * Select all cells in the grid (Ctrl+A).
+   */
+  selectAll(): void;
+  /**
+   * Clear the current selection.
+   */
+  clearSelection(): void;
+  /**
+   * Set the active cell directly.
+   */
+  setActiveCell(row: number, col: number): void;
+  /**
+   * Set the selection range directly.
+   */
+  setSelectionRange(range: CellRange): void;
+  /**
+   * Get the data from the currently selected cells as a 2D array.
+   */
+  getSelectedData(): CellValue[][];
+  /**
+   * Copy the selected data to the clipboard (Ctrl+C).
+   */
+  copySelectionToClipboard(): Promise<void>;
+  /**
+   * Clean up resources for garbage collection.
+   */
+  destroy(): void;
+  private clampPosition;
+}
+//#endregion
+//#region ../core/src/fill.d.ts
+interface FillManagerOptions {
+  getRowCount: () => number;
+  getColumnCount: () => number;
+  getCellValue: (row: number, col: number) => CellValue;
+  getColumn: (col: number) => ColumnDefinition | undefined;
+  setCellValue: (row: number, col: number, value: CellValue) => void;
+}
+/**
+ * Manages fill handle operations including pattern detection and auto-fill.
+ */
+declare class FillManager {
+  private state;
+  private options;
+  private listeners;
+  constructor(options: FillManagerOptions);
+  onInstruction(listener: InstructionListener): () => void;
+  private emit;
+  getState(): FillHandleState | null;
+  isActive(): boolean;
+  /**
+   * Start a fill drag operation from a source range.
+   */
+  startFillDrag(sourceRange: CellRange): void;
+  /**
+   * Update the fill drag target position.
+   */
+  updateFillDrag(targetRow: number, targetCol: number): void;
+  /**
+   * Commit the fill operation - apply pattern to target cells.
+   */
+  commitFillDrag(): void;
+  /**
+   * Cancel the fill operation.
+   */
+  cancelFillDrag(): void;
+  /**
+   * Clean up resources for garbage collection.
+   */
+  destroy(): void;
+  /**
+   * Calculate the values to fill based on source pattern.
+   */
+  private calculateFilledCells;
+  private getSourceColumnValues;
+  private detectPattern;
+  private applyPattern;
+}
+//#endregion
+//#region ../core/src/input-handler.d.ts
+declare class InputHandler<TData extends Row = Row> {
+  private core;
+  private deps;
+  private isDraggingSelection;
+  private isDraggingFill;
+  private fillSourceRange;
+  private fillTarget;
+  constructor(core: GridCore<TData>, deps: InputHandlerDeps);
+  /**
+   * Update dependencies (called when options change)
+   */
+  updateDeps(deps: Partial<InputHandlerDeps>): void;
+  /**
+   * Get current drag state for UI rendering
+   */
+  getDragState(): DragState;
+  /**
+   * Handle cell mouse down event
+   */
+  handleCellMouseDown(rowIndex: number, colIndex: number, event: PointerEventData): InputResult;
+  /**
+   * Handle cell double click event (start editing)
+   */
+  handleCellDoubleClick(rowIndex: number, colIndex: number): void;
+  /**
+   * Handle fill handle mouse down event
+   */
+  handleFillHandleMouseDown(activeCell: CellPosition | null, selectionRange: CellRange | null, _event: PointerEventData): InputResult;
+  /**
+   * Handle header click event (cycle sort direction)
+   */
+  handleHeaderClick(colId: string, addToExisting: boolean): void;
+  /**
+   * Start selection drag (called by framework after handleCellMouseDown returns startDrag: 'selection')
+   */
+  startSelectionDrag(): void;
+  /**
+   * Handle drag move event (selection or fill)
+   */
+  handleDragMove(event: PointerEventData, bounds: ContainerBounds): DragMoveResult | null;
+  /**
+   * Handle drag end event
+   */
+  handleDragEnd(): void;
+  /**
+   * Handle wheel event with dampening for large datasets
+   * Returns scroll deltas or null if no dampening needed
+   */
+  handleWheel(deltaY: number, deltaX: number, dampening: number): {
+    dy: number;
+    dx: number;
+  } | null;
+  /**
+   * Handle keyboard event
+   */
+  handleKeyDown(event: KeyEventData, activeCell: CellPosition | null, editingCell: {
+    row: number;
+    col: number;
+  } | null, filterPopupOpen: boolean): KeyboardResult;
+  /**
+   * Find column index at a given X coordinate
+   */
+  private findColumnAtX;
+  /**
+   * Calculate auto-scroll deltas based on mouse position
+   */
+  private calculateAutoScroll;
+}
+//#endregion
+//#region ../core/src/grid-core.d.ts
+declare class GridCore<TData extends Row = Row> {
+  private columns;
+  private dataSource;
+  private rowHeight;
+  private headerHeight;
+  private overscan;
+  private sortingEnabled;
+  private scrollTop;
+  private scrollLeft;
+  private viewportWidth;
+  private viewportHeight;
+  private cachedRows;
+  private totalRows;
+  private currentPageIndex;
+  private pageSize;
+  private sortModel;
+  private filterModel;
+  private openFilterColIndex;
+  readonly selection: SelectionManager;
+  readonly fill: FillManager;
+  readonly input: InputHandler<TData>;
+  private readonly slotPool;
+  private readonly editManager;
+  private columnPositions;
+  private listeners;
+  private batchListeners;
+  private naturalContentHeight;
+  private virtualContentHeight;
+  private scrollRatio;
+  constructor(options: GridCoreOptions<TData>);
+  onInstruction(listener: InstructionListener): () => void;
+  /**
+   * Subscribe to batched instructions for efficient React state updates.
+   * Batch listeners receive arrays of instructions instead of individual ones.
+   */
+  onBatchInstruction(listener: BatchInstructionListener): () => void;
+  private emit;
+  private emitBatch;
+  /**
+   * Initialize the grid and load initial data.
+   */
+  initialize(): Promise<void>;
+  /**
+   * Update viewport measurements and sync slots.
+   * When scroll virtualization is active, maps the DOM scroll position to the actual row position.
+   */
+  setViewport(scrollTop: number, scrollLeft: number, width: number, height: number): void;
+  private fetchData;
+  private fetchAllData;
+  setSort(colId: string, direction: SortDirection | null, addToExisting?: boolean): Promise<void>;
+  setFilter(colId: string, filter: ColumnFilterModel | string | null): Promise<void>;
+  /**
+   * Check if a column has an active filter
+   */
+  hasActiveFilter(colId: string): boolean;
+  /**
+   * Check if a column is sortable
+   */
+  isColumnSortable(colIndex: number): boolean;
+  /**
+   * Check if a column is filterable
+   */
+  isColumnFilterable(colIndex: number): boolean;
+  /**
+   * Get distinct values for a column (for filter dropdowns)
+   * For array-type columns (like tags), each unique array combination is returned.
+   * Arrays are sorted internally for consistent comparison.
+   * Limited to MAX_DISTINCT_VALUES to avoid performance issues with large datasets.
+   */
+  getDistinctValuesForColumn(colId: string, maxValues?: number): CellValue[];
+  /**
+   * Open filter popup for a column (toggles if already open for same column)
+   */
+  openFilterPopup(colIndex: number, anchorRect: {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+  }): void;
+  /**
+   * Close filter popup
+   */
+  closeFilterPopup(): void;
+  getSortModel(): SortModel[];
+  getFilterModel(): FilterModel;
+  startEdit(row: number, col: number): void;
+  updateEditValue(value: CellValue): void;
+  commitEdit(): void;
+  cancelEdit(): void;
+  getEditState(): EditState | null;
+  getCellValue(row: number, col: number): CellValue;
+  setCellValue(row: number, col: number, value: CellValue): void;
+  private getFieldValue;
+  private setFieldValue;
+  private computeColumnPositions;
+  private emitContentSize;
+  private emitHeaders;
+  getColumns(): ColumnDefinition[];
+  getColumnPositions(): number[];
+  getRowCount(): number;
+  getRowHeight(): number;
+  getHeaderHeight(): number;
+  getTotalWidth(): number;
+  getTotalHeight(): number;
+  /**
+   * Check if scroll scaling is active (large datasets exceeding browser scroll limits).
+   * When scaling is active, scrollRatio < 1 and scroll positions are compressed.
+   */
+  isScalingActive(): boolean;
+  /**
+   * Get the natural (uncapped) content height.
+   * Useful for debugging or displaying actual content size.
+   */
+  getNaturalHeight(): number;
+  /**
+   * Get the scroll ratio used for scroll virtualization.
+   * Returns 1 when no virtualization is needed, < 1 when content exceeds browser limits.
+   */
+  getScrollRatio(): number;
+  /**
+   * Get the visible row range (excluding overscan).
+   * Returns the first and last row indices that are actually visible in the viewport.
+   * Includes partially visible rows to avoid false positives when clicking on edge rows.
+   */
+  getVisibleRowRange(): {
+    start: number;
+    end: number;
+  };
+  /**
+   * Get the scroll position needed to bring a row into view.
+   * Accounts for scroll scaling when active.
+   */
+  getScrollTopForRow(rowIndex: number): number;
+  /**
+   * Get the row index at a given viewport Y position.
+   * Accounts for scroll scaling when active.
+   * @param viewportY Y position in viewport (physical pixels below header, NOT including scroll)
+   * @param virtualScrollTop Current scroll position from container.scrollTop (virtual/scaled)
+   */
+  getRowIndexAtDisplayY(viewportY: number, virtualScrollTop: number): number;
+  getRowData(rowIndex: number): TData | undefined;
+  /**
+   * Refresh data from the data source.
+   */
+  refresh(): Promise<void>;
+  /**
+   * Refresh slot display without refetching data.
+   * Useful after in-place data modifications like fill operations.
+   */
+  refreshSlotData(): void;
+  /**
+   * Update the data source and refresh.
+   */
+  setDataSource(dataSource: DataSource<TData>): Promise<void>;
+  /**
+   * Update columns and recompute layout.
+   */
+  setColumns(columns: ColumnDefinition[]): void;
+}
+//#endregion
 //#region ../core/src/data-source/client-data-source.d.ts
 interface ClientDataSourceOptions<TData> {
   /** Custom field accessor for nested properties */
@@ -411,6 +916,8 @@ interface MutableDataSource<TData = Row> extends DataSource<TData> {
   getTotalRowCount(): number;
   /** Subscribe to data change notifications. Returns unsubscribe function. */
   subscribe(listener: DataChangeListener): () => void;
+  /** Clear all data from the data source. */
+  clear(): void;
 }
 interface MutableClientDataSourceOptions<TData> {
   /** Function to extract unique ID from row. Required. */
@@ -429,6 +936,11 @@ interface MutableClientDataSourceOptions<TData> {
 declare function createMutableClientDataSource<TData extends Row = Row>(data: TData[], options: MutableClientDataSourceOptions<TData>): MutableDataSource<TData>;
 //#endregion
 //#region src/types.d.ts
+/** Ref handle exposed by the Grid component */
+interface GridRef<TData extends Row = Row> {
+  /** Access to the underlying GridCore instance */
+  core: GridCore<TData> | null;
+}
 /** React cell renderer: A function that renders a cell */
 type ReactCellRenderer = (params: CellRendererParams) => React.ReactNode;
 /** React edit renderer: A function that renders the cell while in edit mode */
@@ -467,6 +979,12 @@ interface GridProps<TData extends Row = Row> {
   editRenderer?: ReactEditRenderer;
   /** Global header renderer */
   headerRenderer?: ReactHeaderRenderer;
+  /** Initial viewport width for SSR (pixels). ResizeObserver takes over on client. */
+  initialWidth?: number;
+  /** Initial viewport height for SSR (pixels). ResizeObserver takes over on client. */
+  initialHeight?: number;
+  /** Optional ref to access GridCore API */
+  gridRef?: React.MutableRefObject<GridRef<TData> | null>;
 }
 //#endregion
 //#region src/Grid.d.ts
@@ -477,4 +995,4 @@ interface GridProps<TData extends Row = Row> {
  */
 declare function Grid<TData extends Row = Row>(props: GridProps<TData>): React$1.ReactNode;
 //#endregion
-export { type CellDataType, type CellPosition, type CellRange, type CellRendererParams, type CellValue, type ColumnDefinition, type DataSource, type DataSourceRequest, type DataSourceResponse, type EditRendererParams, type FilterModel, Grid, type GridInstruction, type GridProps, type HeaderRendererParams, type MutableDataSource, type ReactCellRenderer, type ReactEditRenderer, type ReactHeaderRenderer, type Row, type SortDirection, type SortModel, createClientDataSource, createDataSourceFromArray, createMutableClientDataSource, createServerDataSource };
+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 };

package/dist/index.js

@@ -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,buildCellClasses as c,calculateScaledColumnPositions as l,createClientDataSource as u,createClientDataSource as d,createDataSourceFromArray as f,createDataSourceFromArray as p,createMutableClientDataSource as m,createServerDataSource as h,getTotalWidth as g,injectStyles as _,isCellActive as v,isCellEditing as y,isCellInFillPreview as b,isCellSelected as x}from"gp-grid-core";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";const T=[{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 E({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])),E=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(()=>E.every(e=>g.has(e))&&(!D||v),[E,g,D,v]),k=t(()=>{_(new Set(E)),D&&y(!0)},[E,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})},[]),N=t(()=>{x(e=>[...e,{operator:`contains`,value:``,nextOperator:`and`}])},[]),P=t(e=>{x(t=>t.filter((t,n)=>n!==e))},[]),F=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]),I=t(()=>{i(null)},[i]);return w(`div`,{className:`gp-grid-filter-content gp-grid-filter-text`,children:[!l&&w(`div`,{className:`gp-grid-filter-mode-toggle`,children:[C(`button`,{type:`button`,className:u===`values`?`active`:``,onClick:()=>d(`values`),children:`Values`}),C(`button`,{type:`button`,className:u===`condition`?`active`:``,onClick:()=>d(`condition`),children:`Condition`})]}),l&&u===`condition`&&w(`div`,{className:`gp-grid-filter-info`,children:[`Too many unique values (`,c.length,`). Use conditions to filter.`]}),u===`values`&&w(S,{children:[C(`input`,{className:`gp-grid-filter-search`,type:`text`,placeholder:`Search...`,value:m,onChange:e=>h(e.target.value),autoFocus:!0}),w(`div`,{className:`gp-grid-filter-actions`,children:[C(`button`,{type:`button`,onClick:k,disabled:O,children:`Select All`}),C(`button`,{type:`button`,onClick:A,children:`Deselect All`})]}),w(`div`,{className:`gp-grid-filter-list`,children:[D&&w(`label`,{className:`gp-grid-filter-option`,children:[C(`input`,{type:`checkbox`,checked:v,onChange:()=>y(!v)}),C(`span`,{className:`gp-grid-filter-blank`,children:`(Blanks)`})]}),E.map(e=>w(`label`,{className:`gp-grid-filter-option`,children:[C(`input`,{type:`checkbox`,checked:g.has(e),onChange:()=>j(e)}),C(`span`,{children:e})]},e))]})]}),u===`condition`&&w(S,{children:[b.map((e,t)=>w(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&w(`div`,{className:`gp-grid-filter-combination`,children:[C(`button`,{type:`button`,className:b[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>M(t-1,{nextOperator:`and`}),children:`AND`}),C(`button`,{type:`button`,className:b[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>M(t-1,{nextOperator:`or`}),children:`OR`})]}),w(`div`,{className:`gp-grid-filter-row`,children:[C(`select`,{value:e.operator,onChange:e=>M(t,{operator:e.target.value}),autoFocus:t===0,children:T.map(e=>C(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&C(`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&&C(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>P(t),children:`×`})]})]},t)),C(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:N,children:`+ Add condition`})]}),w(`div`,{className:`gp-grid-filter-buttons`,children:[C(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:I,children:`Clear`}),C(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:F,children:`Apply`})]})]})}const D=[{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 O({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 w(`div`,{className:`gp-grid-filter-content gp-grid-filter-number`,children:[a.map((e,t)=>w(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&w(`div`,{className:`gp-grid-filter-combination`,children:[C(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),C(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),w(`div`,{className:`gp-grid-filter-row`,children:[C(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:D.map(e=>C(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&C(`input`,{type:`number`,value:e.value,onChange:e=>c(t,{value:e.target.value}),placeholder:`Value`}),e.operator===`between`&&w(S,{children:[C(`span`,{className:`gp-grid-filter-to`,children:`to`}),C(`input`,{type:`number`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value}),placeholder:`Value`})]}),a.length>1&&C(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),C(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),w(`div`,{className:`gp-grid-filter-buttons`,children:[C(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),C(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}const k=[{value:`=`,label:`=`},{value:`!=`,label:`≠`},{value:`>`,label:`>`},{value:`<`,label:`<`},{value:`between`,label:`↔`},{value:`blank`,label:`Is blank`},{value:`notBlank`,label:`Not blank`}];function A(e){if(!e)return``;let t=typeof e==`string`?new Date(e):e;return isNaN(t.getTime())?``:t.toISOString().split(`T`)[0]}function j({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:A(n.value),valueTo:A(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 w(`div`,{className:`gp-grid-filter-content gp-grid-filter-date`,children:[a.map((e,t)=>w(`div`,{className:`gp-grid-filter-condition`,children:[t>0&&w(`div`,{className:`gp-grid-filter-combination`,children:[C(`button`,{type:`button`,className:a[t-1]?.nextOperator===`and`?`active`:``,onClick:()=>c(t-1,{nextOperator:`and`}),children:`AND`}),C(`button`,{type:`button`,className:a[t-1]?.nextOperator===`or`?`active`:``,onClick:()=>c(t-1,{nextOperator:`or`}),children:`OR`})]}),w(`div`,{className:`gp-grid-filter-row`,children:[C(`select`,{value:e.operator,onChange:e=>c(t,{operator:e.target.value}),children:k.map(e=>C(`option`,{value:e.value,children:e.label},e.value))}),e.operator!==`blank`&&e.operator!==`notBlank`&&C(`input`,{type:`date`,value:e.value,onChange:e=>c(t,{value:e.target.value})}),e.operator===`between`&&w(S,{children:[C(`span`,{className:`gp-grid-filter-to`,children:`to`}),C(`input`,{type:`date`,value:e.valueTo,onChange:e=>c(t,{valueTo:e.target.value})})]}),a.length>1&&C(`button`,{type:`button`,className:`gp-grid-filter-remove`,onClick:()=>u(t),children:`×`})]})]},t)),C(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:l,children:`+ Add condition`}),w(`div`,{className:`gp-grid-filter-buttons`,children:[C(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:f,children:`Clear`}),C(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:d,children:`Apply`})]})]})}function M({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 w(`div`,{ref:u,className:`gp-grid-filter-popup`,style:f,children:[w(`div`,{className:`gp-grid-filter-header`,children:[`Filter: `,e.headerName??e.field]}),m&&C(E,{distinctValues:o,currentFilter:s,onApply:d,onClose:l}),h&&C(O,{currentFilter:s,onApply:d,onClose:l}),g&&C(j,{currentFilter:s,onApply:d,onClose:l}),!m&&!h&&!g&&C(E,{distinctValues:o,currentFilter:s,onApply:d,onClose:l})]})}function N(){return{slots:new Map,activeCell:null,selectionRange:null,editingCell:null,contentWidth:0,contentHeight:0,viewportWidth:0,headers:new Map,filterPopup:null,isLoading:!1,error:null,totalRows:0,visibleRowRange: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`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 L(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 R(e,r,i,s){let{activeCell:c,selectionRange:l,editingCell:u,filterPopupOpen:d,rowHeight:f,headerHeight:p,columnPositions:m,slots:h}=s,g=a(null),[_,v]=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:()=>i.length})},[e,p,f,m,i.length]);let y=t((e,t)=>{g.current&&clearInterval(g.current),g.current=setInterval(()=>{let n=r.current;n&&(n.scrollTop+=t,n.scrollLeft+=e)},16)},[r]),b=t(()=>{g.current&&=(clearInterval(g.current),null)},[]),x=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]),S=e=>({clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}),C=t(()=>{let t=t=>{let n=e.current,r=x();if(!n?.input||!r)return;let i=n.input.handleDragMove(S(t),r);i&&(i.autoScroll?y(i.autoScroll.dx,i.autoScroll.dy):b(),v(n.input.getDragState()))},n=()=>{let r=e.current;r?.input&&(r.input.handleDragEnd(),v(r.input.getDragState())),b(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)},[e,x,y,b]),w=t((t,n,i)=>{let a=e.current;if(!a?.input)return;let o=a.input.handleCellMouseDown(t,n,S(i));o.focusContainer&&r.current?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),v(a.input.getDragState()),C())},[e,r,C]),T=t((t,n)=>{let r=e.current;r?.input&&r.input.handleCellDoubleClick(t,n)},[e]),E=t(t=>{let n=e.current;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(c,l,S(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(v(n.input.getDragState()),C())},[e,c,l,C]),D=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]),O=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&&L(n,i,a.scrollToCell.row,f,p,h)},[e,r,c,u,d,f,p,h]),k=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(()=>()=>{b()},[b]),{handleCellMouseDown:w,handleCellDoubleClick:T,handleFillHandleMouseDown:E,handleHeaderClick:D,handleKeyDown:O,handleWheel:k,dragState:_}}function z(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 B(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s,cellRenderers:c,globalCellRenderer:l}=e,u=z(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 V(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:z(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):C(`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 H(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):w(S,{children:[C(`span`,{className:`gp-grid-header-text`,children:t.headerName??t.field}),w(`span`,{className:`gp-grid-header-icons`,children:[a&&w(`span`,{className:`gp-grid-sort-arrows`,children:[w(`span`,{className:`gp-grid-sort-arrows-stack`,children:[C(`svg`,{className:`gp-grid-sort-arrow-up${r===`asc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:C(`path`,{d:`M4 0L8 6H0L4 0Z`,fill:`currentColor`})}),C(`svg`,{className:`gp-grid-sort-arrow-down${r===`desc`?` active`:``}`,width:`8`,height:`6`,viewBox:`0 0 8 6`,children:C(`path`,{d:`M4 6L0 0H8L4 6Z`,fill:`currentColor`})})]}),i!==void 0&&i>0&&C(`span`,{className:`gp-grid-sort-index`,children:i})]}),o&&C(`span`,{className:`gp-grid-filter-icon${s?` active`:``}`,onMouseDown:e=>{e.stopPropagation(),e.preventDefault(),p.onFilterClick()},onClick:e=>{e.stopPropagation()},children:C(`svg`,{width:`16`,height:`16`,viewBox:`0 0 24 24`,fill:`currentColor`,children:C(`path`,{d:`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`})})})]})]})}function U(e){_();let{columns:o,dataSource:u,rowData:f,rowHeight:m,headerHeight:h=m,overscan:S=3,sortingEnabled:T=!0,darkMode:E=!1,wheelDampening:D=.1,cellRenderers:O={},editRenderers:k={},headerRenderers:A={},cellRenderer:j,editRenderer:P,headerRenderer:I}=e,L=a(null),z=a(null),[U,W]=i(F,null,N),G=h,K=r(()=>u||(f?p(f):d([])),[u,f]),{positions:q,widths:J}=r(()=>l(o,U.viewportWidth),[o,U.viewportWidth]),Y=g(q),{handleCellMouseDown:X,handleCellDoubleClick:ee,handleFillHandleMouseDown:te,handleHeaderClick:ne,handleKeyDown:re,handleWheel:ie,dragState:Z}=R(z,L,o,{activeCell:U.activeCell,selectionRange:U.selectionRange,editingCell:U.editingCell,filterPopupOpen:U.filterPopup?.isOpen??!1,rowHeight:m,headerHeight:G,columnPositions:q,slots:U.slots});n(()=>{let e=new s({columns:o,dataSource:K,rowHeight:m,headerHeight:G,overscan:S,sortingEnabled:T});z.current=e;let t=e.onBatchInstruction(e=>{W({type:`BATCH_INSTRUCTIONS`,instructions:e})});return e.initialize(),()=>{t(),z.current=null}},[o,K,m,G,S,T]),n(()=>{let e=K;if(e.subscribe)return e.subscribe(()=>{z.current?.refresh()})},[K]);let Q=t(()=>{let e=L.current,t=z.current;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},[]);n(()=>{let e=L.current,t=z.current;if(!e||!t)return;let n=new ResizeObserver(()=>{t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)});return n.observe(e),Q(),()=>n.disconnect()},[Q]);let ae=t((e,t)=>{let n=z.current;n&&n.setFilter(e,t)},[]),oe=t(()=>{let e=z.current;e&&e.closeFilterPopup()},[]),se=r(()=>Array.from(U.slots.values()),[U.slots]),$=r(()=>{let{activeCell:e,selectionRange:t,slots:n}=U;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.editable!==!0)return null}let c=null;for(let e of n.values())if(e.rowIndex===r){c=e.translateY;break}if(c===null)return null;let l=q[i]??0,u=J[i]??0;return{top:c+m-5,left:l+u-20}},[U.activeCell,U.selectionRange,U.slots,m,q,J,o]);return w(`div`,{ref:L,className:`gp-grid-container${E?` gp-grid-container--dark`:``}`,style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},onScroll:Q,onWheel:e=>ie(e,D),onKeyDown:re,tabIndex:0,children:[w(`div`,{style:{width:Math.max(U.contentWidth,Y),height:Math.max(U.contentHeight,G),position:`relative`,minWidth:`100%`},children:[C(`div`,{className:`gp-grid-header`,style:{position:`sticky`,top:0,left:0,height:h,width:Math.max(U.contentWidth,Y),minWidth:`100%`},children:o.map((e,t)=>{let n=U.headers.get(t);return C(`div`,{className:`gp-grid-header-cell`,"data-col-index":t,style:{position:`absolute`,left:`${q[t]}px`,top:0,width:`${J[t]}px`,height:`${h}px`,background:`transparent`},onClick:e=>ne(t,e),children:H({column:e,colIndex:t,sortDirection:n?.sortDirection,sortIndex:n?.sortIndex,sortable:n?.sortable??!0,filterable:n?.filterable??!0,hasFilter:n?.hasFilter??!1,coreRef:z,containerRef:L,headerRenderers:A,globalHeaderRenderer:I})},e.colId??e.field)})}),se.map(e=>e.rowIndex<0?null:C(`div`,{className:`gp-grid-row ${e.rowIndex%2==0?`gp-grid-row--even`:``}`,style:{position:`absolute`,top:0,left:0,transform:`translateY(${e.translateY}px)`,width:`${Math.max(U.contentWidth,Y)}px`,height:`${m}px`},children:o.map((t,n)=>{let r=y(e.rowIndex,n,U.editingCell),i=v(e.rowIndex,n,U.activeCell),a=x(e.rowIndex,n,U.selectionRange);return C(`div`,{className:c(i,a,r,b(e.rowIndex,n,Z.dragType===`fill`,Z.fillSourceRange,Z.fillTarget)),style:{position:`absolute`,left:`${q[n]}px`,top:0,width:`${J[n]}px`,height:`${m}px`},onMouseDown:t=>X(e.rowIndex,n,t),onDoubleClick:()=>ee(e.rowIndex,n),children:r&&U.editingCell?V({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,initialValue:U.editingCell.initialValue,coreRef:z,editRenderers:k,globalEditRenderer:P}):B({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,isActive:i,isSelected:a,isEditing:r,cellRenderers:O,globalCellRenderer:j})},`${e.slotId}-${n}`)})},e.slotId)),$&&!U.editingCell&&C(`div`,{className:`gp-grid-fill-handle`,style:{position:`absolute`,top:$.top,left:$.left,zIndex:200},onMouseDown:te}),U.isLoading&&w(`div`,{className:`gp-grid-loading`,children:[C(`div`,{className:`gp-grid-loading-spinner`}),`Loading...`]}),U.error&&w(`div`,{className:`gp-grid-error`,children:[`Error: `,U.error]}),!U.isLoading&&!U.error&&U.totalRows===0&&C(`div`,{className:`gp-grid-empty`,children:`No data to display`})]}),U.filterPopup?.isOpen&&U.filterPopup.column&&U.filterPopup.anchorRect&&C(M,{column:U.filterPopup.column,colIndex:U.filterPopup.colIndex,anchorRect:U.filterPopup.anchorRect,distinctValues:U.filterPopup.distinctValues,currentFilter:U.filterPopup.currentFilter,onApply:ae,onClose:oe})]})}export{U as Grid,u as createClientDataSource,f as createDataSourceFromArray,m as createMutableClientDataSource,h as createServerDataSource};
+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})},[]),N=t(()=>{x(e=>[...e,{operator:`contains`,value:``,nextOperator:`and`}])},[]),P=t(e=>{x(t=>t.filter((t,n)=>n!==e))},[]),F=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]),I=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:()=>P(t),children:`×`})]})]},t)),w(`button`,{type:`button`,className:`gp-grid-filter-add`,onClick:N,children:`+ Add condition`})]}),T(`div`,{className:`gp-grid-filter-buttons`,children:[w(`button`,{type:`button`,className:`gp-grid-filter-btn-clear`,onClick:I,children:`Clear`}),w(`button`,{type:`button`,className:`gp-grid-filter-btn-apply`,onClick:F,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 N({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 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}}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`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 I(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 L(e,t){for(let n of e.values())if(n.rowIndex===t)return n;return null}function R(e,t,n,r,i,a){let o=L(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 z(e,r,i,s){let{activeCell:c,selectionRange:l,editingCell:u,filterPopupOpen:d,rowHeight:f,headerHeight:p,columnPositions:m,slots:h}=s,g=a(null),[_,v]=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:()=>i.length})},[e,p,f,m,i.length]);let y=t((e,t)=>{g.current&&clearInterval(g.current),g.current=setInterval(()=>{let n=r.current;n&&(n.scrollTop+=t,n.scrollLeft+=e)},16)},[r]),b=t(()=>{g.current&&=(clearInterval(g.current),null)},[]),x=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]),S=e=>({clientX:e.clientX,clientY:e.clientY,button:e.button,shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,metaKey:e.metaKey}),C=t(()=>{let t=t=>{let n=e.current,r=x();if(!n?.input||!r)return;let i=n.input.handleDragMove(S(t),r);i&&(i.autoScroll?y(i.autoScroll.dx,i.autoScroll.dy):b(),v(n.input.getDragState()))},n=()=>{let r=e.current;r?.input&&(r.input.handleDragEnd(),v(r.input.getDragState())),b(),document.removeEventListener(`mousemove`,t),document.removeEventListener(`mouseup`,n)};document.addEventListener(`mousemove`,t),document.addEventListener(`mouseup`,n)},[e,x,y,b]),w=t((t,n,i)=>{let a=e.current;if(!a?.input)return;let o=a.input.handleCellMouseDown(t,n,S(i));o.focusContainer&&r.current?.focus(),o.startDrag===`selection`&&(a.input.startSelectionDrag(),v(a.input.getDragState()),C())},[e,r,C]),T=t((t,n)=>{let r=e.current;r?.input&&r.input.handleCellDoubleClick(t,n)},[e]),E=t(t=>{let n=e.current;if(!n?.input)return;let r=n.input.handleFillHandleMouseDown(c,l,S(t));r.preventDefault&&t.preventDefault(),r.stopPropagation&&t.stopPropagation(),r.startDrag===`fill`&&(v(n.input.getDragState()),C())},[e,c,l,C]),D=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]),O=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&&R(n,i,a.scrollToCell.row,f,p,h)},[e,r,c,u,d,f,p,h]),k=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(()=>()=>{b()},[b]),{handleCellMouseDown:w,handleCellDoubleClick:T,handleFillHandleMouseDown:E,handleHeaderClick:D,handleKeyDown:O,handleWheel:k,dragState:_}}function B(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 V(e){let{column:t,rowData:n,rowIndex:r,colIndex:i,isActive:a,isSelected:o,isEditing:s,cellRenderers:c,globalCellRenderer:l}=e,u=B(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 H(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:B(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 U(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 W(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:F,initialWidth:L,initialHeight:R}=e,B=a(null),W=a(null),[G,ee]=i(I,{initialWidth:L,initialHeight:R},P),K=h,q=r(()=>s||(d?m(d):f([])),[s,d]),{positions:J,widths:Y}=r(()=>u(o,G.viewportWidth),[o,G.viewportWidth]),X=_(J),{handleCellMouseDown:te,handleCellDoubleClick:ne,handleFillHandleMouseDown:re,handleHeaderClick:ie,handleKeyDown:ae,handleWheel:oe,dragState:Z}=z(W,B,o,{activeCell:G.activeCell,selectionRange:G.selectionRange,editingCell:G.editingCell,filterPopupOpen:G.filterPopup?.isOpen??!1,rowHeight:p,headerHeight:K,columnPositions:J,slots:G.slots});n(()=>{let e=new c({columns:o,dataSource:q,rowHeight:p,headerHeight:K,overscan:g,sortingEnabled:C});W.current=e;let t=e.onBatchInstruction(e=>{ee({type:`BATCH_INSTRUCTIONS`,instructions:e})});return e.initialize(),()=>{t(),W.current=null}},[o,q,p,K,g,C]),n(()=>{let e=q;if(e.subscribe)return e.subscribe(()=>{W.current?.refresh()})},[q]);let Q=t(()=>{let e=B.current,t=W.current;!e||!t||t.setViewport(e.scrollTop,e.scrollLeft,e.clientWidth,e.clientHeight)},[]);n(()=>{let e=B.current,t=W.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]);let se=t((e,t)=>{let n=W.current;n&&n.setFilter(e,t)},[]),ce=t(()=>{let e=W.current;e&&e.closeFilterPopup()},[]),le=r(()=>Array.from(G.slots.values()),[G.slots]),$=r(()=>{let{activeCell:e,selectionRange:t,slots:n}=G;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.editable!==!0)return null}let c=null;for(let e of n.values())if(e.rowIndex===r){c=e.translateY;break}if(c===null)return null;let l=J[i]??0,u=Y[i]??0;return{top:c+p-5,left:l+u-20}},[G.activeCell,G.selectionRange,G.slots,p,J,Y,o]);return T(`div`,{ref:B,className:`gp-grid-container${E?` gp-grid-container--dark`:``}`,style:{width:`100%`,height:`100%`,overflow:`auto`,position:`relative`},onScroll:Q,onWheel:e=>oe(e,D),onKeyDown:ae,tabIndex:0,children:[T(`div`,{style:{width:Math.max(G.contentWidth,X),height:Math.max(G.contentHeight,K),position:`relative`,minWidth:`100%`},children:[w(`div`,{className:`gp-grid-header`,style:{position:`sticky`,top:0,left:0,height:h,width:Math.max(G.contentWidth,X),minWidth:`100%`},children:o.map((e,t)=>{let n=G.headers.get(t);return w(`div`,{className:`gp-grid-header-cell`,"data-col-index":t,style:{position:`absolute`,left:`${J[t]}px`,top:0,width:`${Y[t]}px`,height:`${h}px`,background:`transparent`},onClick:e=>ie(t,e),children:U({column:e,colIndex:t,sortDirection:n?.sortDirection,sortIndex:n?.sortIndex,sortable:n?.sortable??!0,filterable:n?.filterable??!0,hasFilter:n?.hasFilter??!1,coreRef:W,containerRef:B,headerRenderers:A,globalHeaderRenderer:F})},e.colId??e.field)})}),le.map(e=>e.rowIndex<0?null:w(`div`,{className:`gp-grid-row ${e.rowIndex%2==0?`gp-grid-row--even`:``}`,style:{position:`absolute`,top:0,left:0,transform:`translateY(${e.translateY}px)`,width:`${Math.max(G.contentWidth,X)}px`,height:`${p}px`},children:o.map((t,n)=>{let r=b(e.rowIndex,n,G.editingCell),i=y(e.rowIndex,n,G.activeCell),a=S(e.rowIndex,n,G.selectionRange);return w(`div`,{className:l(i,a,r,x(e.rowIndex,n,Z.dragType===`fill`,Z.fillSourceRange,Z.fillTarget)),style:{position:`absolute`,left:`${J[n]}px`,top:0,width:`${Y[n]}px`,height:`${p}px`},onMouseDown:t=>te(e.rowIndex,n,t),onDoubleClick:()=>ne(e.rowIndex,n),children:r&&G.editingCell?H({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,initialValue:G.editingCell.initialValue,coreRef:W,editRenderers:k,globalEditRenderer:M}):V({column:t,rowData:e.rowData,rowIndex:e.rowIndex,colIndex:n,isActive:i,isSelected:a,isEditing:r,cellRenderers:O,globalCellRenderer:j})},`${e.slotId}-${n}`)})},e.slotId)),$&&!G.editingCell&&w(`div`,{className:`gp-grid-fill-handle`,style:{position:`absolute`,top:$.top,left:$.left,zIndex:200},onMouseDown:re}),G.isLoading&&T(`div`,{className:`gp-grid-loading`,children:[w(`div`,{className:`gp-grid-loading-spinner`}),`Loading...`]}),G.error&&T(`div`,{className:`gp-grid-error`,children:[`Error: `,G.error]}),!G.isLoading&&!G.error&&G.totalRows===0&&w(`div`,{className:`gp-grid-empty`,children:`No data to display`})]}),G.filterPopup?.isOpen&&G.filterPopup.column&&G.filterPopup.anchorRect&&w(N,{column:G.filterPopup.column,colIndex:G.filterPopup.colIndex,anchorRect:G.filterPopup.anchorRect,distinctValues:G.filterPopup.distinctValues,currentFilter:G.filterPopup.currentFilter,onApply:se,onClose:ce})]})}export{W as Grid,s as GridCore,d as createClientDataSource,p as createDataSourceFromArray,h as createMutableClientDataSource,g as createServerDataSource};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gp-grid-react",
   "description": "A high-performance React data grid component with virtual scrolling, cell selection, sorting, filtering, and Excel-like editing",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",
@@ -45,7 +45,7 @@
     "link-workspace-packages": false
   },
   "dependencies": {
-    "gp-grid-core": "0.3.0"
+    "gp-grid-core": "0.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",