@ornery/ui-grid-react 0.1.4

package/dist/index.mjs

@@ -0,0 +1,2050 @@
+// src/useGridState.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  createGridApi,
+  getCellValue as getCellValue2,
+  setPathValue,
+  SORT_DIRECTIONS as SORT_DIRECTIONS2,
+  buildGridPipeline,
+  resolveGridLabels,
+  gridColumnWidth,
+  headerLabel as coreHeaderLabel,
+  gridSortButtonLabel,
+  gridSortAriaSort,
+  gridGroupingButtonLabel,
+  gridFilterPlaceholder,
+  gridGroupDisclosureLabel,
+  gridEditorInputType,
+  gridCellIndent,
+  gridTreeToggleLabelForRow,
+  gridExpandToggleLabelForRow,
+  isGridTreeRowExpanded,
+  isGridColumnSortable,
+  isGridColumnFilterable,
+  isGridColumnGrouped,
+  isGridGroupingEnabled,
+  isGridFilteringEnabled,
+  shouldShowGridTreeToggle,
+  shouldShowGridExpandToggle,
+  shouldShowGridPaginationControls,
+  buildGridCellContext,
+  formatGridCellDisplayValue,
+  buildGridFocusCellResult,
+  findNextGridCell,
+  isPrintableGridKey,
+  isGridCellPosition,
+  exportCsvRows,
+  buildGridRows,
+  resolveGridRowId as coreResolveGridRowId,
+  findGridRowById as coreFindGridRowById,
+  getEffectivePageSize as coreGetEffectivePageSize,
+  getCurrentPageValue as coreGetCurrentPageValue,
+  getTotalPagesValue as coreGetTotalPagesValue,
+  getFirstRowIndexValue as coreGetFirstRowIndexValue,
+  getLastRowIndexValue as coreGetLastRowIndexValue,
+  buildGridSavedState,
+  sanitizeDownloadFilename,
+  parseGridEditedValue,
+  canGridExpandRows,
+  areAllGridRowsExpanded,
+  addGridRowInvisibleReason,
+  clearGridRowInvisibleReason,
+  FEATURE_SORTING,
+  FEATURE_FILTERING,
+  FEATURE_GROUPING,
+  FEATURE_PAGINATION,
+  FEATURE_CELL_EDIT,
+  FEATURE_EXPANDABLE,
+  FEATURE_TREE_VIEW,
+  FEATURE_INFINITE_SCROLL,
+  FEATURE_COLUMN_MOVING,
+  FEATURE_CSV_EXPORT,
+  FEATURE_AUTO_RESIZE
+} from "@ornery/ui-grid";
+
+// ../ui-grid/src/lib/grid/grid.core.pagination.ts
+function seekGridPage(page, totalPages) {
+  return Math.min(Math.max(page, 1), Math.max(totalPages, 1));
+}
+function resolveGridPageSize(pageSize) {
+  return Number.isFinite(pageSize) && pageSize > 0 ? pageSize : null;
+}
+
+// ../ui-grid/src/lib/grid/grid.constants.ts
+var SORT_DIRECTIONS = {
+  asc: "asc",
+  desc: "desc",
+  none: "none"
+};
+
+// ../ui-grid/src/lib/grid/grid.utils.ts
+var PROTECTED_PATH_SEGMENTS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function getPathValue(record, path) {
+  return path.split(".").reduce((current, part) => {
+    if (current === null || current === void 0 || typeof current !== "object") {
+      return void 0;
+    }
+    if (PROTECTED_PATH_SEGMENTS.has(part)) {
+      return void 0;
+    }
+    if (!Object.prototype.hasOwnProperty.call(current, part)) {
+      return void 0;
+    }
+    return current[part];
+  }, record);
+}
+function getCellValue(row, column) {
+  if (column.valueGetter) {
+    return column.valueGetter(row);
+  }
+  if (column.field) {
+    return getPathValue(row, column.field);
+  }
+  return row[column.name];
+}
+
+// ../ui-grid/src/lib/grid/grid.core.identity.ts
+function buildGridSortState(columnName, direction) {
+  return {
+    columnName,
+    direction: direction ?? SORT_DIRECTIONS.asc
+  };
+}
+
+// ../ui-grid/src/lib/grid/grid.core.edit.ts
+function beginGridEditSession(rowId, columnName, editingValue) {
+  const position = { rowId, columnName };
+  return {
+    focusedCell: position,
+    editingCell: position,
+    editingValue
+  };
+}
+function clearGridEditSession() {
+  return {
+    editingCell: null,
+    editingValue: ""
+  };
+}
+function stringifyGridEditorValue(value) {
+  if (value instanceof Date) {
+    return value.toISOString().slice(0, 10);
+  }
+  return value === null || value === void 0 ? "" : String(value);
+}
+
+// ../ui-grid/src/lib/grid/grid.core.infinite-scroll.ts
+function maybeRequestInfiniteScrollData(context) {
+  if (context.state.dataLoading) {
+    return { request: null, nextState: context.state };
+  }
+  if (context.state.scrollUp && context.startIndex <= context.threshold) {
+    return {
+      request: "top",
+      nextState: {
+        ...context.state,
+        dataLoading: true,
+        previousVisibleRows: context.visibleRows
+      }
+    };
+  }
+  if (context.state.scrollDown && context.startIndex + context.viewportRows >= Math.max(context.visibleRows - context.threshold, 0)) {
+    return {
+      request: "bottom",
+      nextState: {
+        ...context.state,
+        dataLoading: true,
+        previousVisibleRows: context.visibleRows
+      }
+    };
+  }
+  return { request: null, nextState: context.state };
+}
+function completeInfiniteScrollDataLoad(state, scrollUp, scrollDown) {
+  return {
+    ...state,
+    scrollUp,
+    scrollDown,
+    dataLoading: false
+  };
+}
+function resetInfiniteScrollState(scrollUp, scrollDown) {
+  return {
+    scrollUp,
+    scrollDown,
+    dataLoading: false,
+    previousVisibleRows: 0
+  };
+}
+function saveInfiniteScrollPercentage(state, visibleRows) {
+  return {
+    ...state,
+    previousVisibleRows: visibleRows
+  };
+}
+function setInfiniteScrollDirectionsState(state, scrollUp, scrollDown) {
+  return {
+    ...state,
+    scrollUp,
+    scrollDown
+  };
+}
+
+// ../ui-grid/src/lib/grid/grid.core.row-state.ts
+function toggleGridRowExpanded(expandedRows, rowId) {
+  const expanded = !expandedRows[rowId];
+  return {
+    expanded,
+    nextExpandedRows: {
+      ...expandedRows,
+      [rowId]: expanded
+    }
+  };
+}
+function expandAllGridRows(rows) {
+  const nextExpandedRows = {};
+  for (const row of rows) {
+    nextExpandedRows[row.id] = true;
+  }
+  return nextExpandedRows;
+}
+function setGridTreeRowExpanded(expandedTreeRows, rowId, expanded) {
+  return {
+    ...expandedTreeRows,
+    [rowId]: expanded
+  };
+}
+function toggleGridTreeRowExpanded(expandedTreeRows, rowId) {
+  const expanded = !expandedTreeRows[rowId];
+  return {
+    expanded,
+    nextExpandedTreeRows: setGridTreeRowExpanded(expandedTreeRows, rowId, expanded)
+  };
+}
+function expandAllGridTreeRows(rows) {
+  const nextExpandedTreeRows = {};
+  for (const row of rows) {
+    if (row.hasChildren) {
+      nextExpandedTreeRows[row.id] = true;
+    }
+  }
+  return nextExpandedTreeRows;
+}
+
+// ../ui-grid/src/lib/grid/grid.core.state.ts
+function normalizeGridSavedState(state) {
+  const normalized = {};
+  if (Array.isArray(state.columnOrder)) {
+    normalized.columnOrder = state.columnOrder.filter(
+      (columnName) => typeof columnName === "string" && isSafeStateKey(columnName)
+    );
+  }
+  if (state.filters && typeof state.filters === "object") {
+    normalized.filters = Object.entries(state.filters).reduce((accumulator, [key, value]) => {
+      if (typeof key === "string" && isSafeStateKey(key) && typeof value === "string") {
+        accumulator[key] = value;
+      }
+      return accumulator;
+    }, {});
+  }
+  if (state.sort && typeof state.sort === "object") {
+    normalized.sort = {
+      columnName: typeof state.sort.columnName === "string" && isSafeStateKey(state.sort.columnName) ? state.sort.columnName : null,
+      direction: state.sort.direction === SORT_DIRECTIONS.asc || state.sort.direction === SORT_DIRECTIONS.desc ? state.sort.direction : SORT_DIRECTIONS.none
+    };
+  }
+  if (Array.isArray(state.grouping)) {
+    normalized.grouping = state.grouping.filter(
+      (columnName) => typeof columnName === "string" && isSafeStateKey(columnName)
+    );
+  }
+  if (state.pagination && typeof state.pagination === "object") {
+    const paginationCurrentPage = Number(state.pagination.paginationCurrentPage);
+    const paginationPageSize = Number(state.pagination.paginationPageSize);
+    normalized.pagination = {
+      paginationCurrentPage: Number.isFinite(paginationCurrentPage) && paginationCurrentPage > 0 ? Math.floor(paginationCurrentPage) : 1,
+      paginationPageSize: Number.isFinite(paginationPageSize) && paginationPageSize >= 0 ? Math.floor(paginationPageSize) : 0
+    };
+  }
+  if (state.expandable && typeof state.expandable === "object") {
+    normalized.expandable = normalizeBooleanMap(state.expandable);
+  }
+  if (state.treeView && typeof state.treeView === "object") {
+    normalized.treeView = normalizeBooleanMap(state.treeView);
+  }
+  return normalized;
+}
+function normalizeBooleanMap(value) {
+  return Object.entries(value).reduce((accumulator, [key, entry]) => {
+    if (typeof key === "string" && isSafeStateKey(key) && typeof entry === "boolean") {
+      accumulator[key] = entry;
+    }
+    return accumulator;
+  }, {});
+}
+function isSafeStateKey(value) {
+  return value !== "__proto__" && value !== "constructor" && value !== "prototype";
+}
+
+// ../ui-grid/src/lib/grid/ui-grid.events.ts
+function raiseGridRenderingComplete(gridApi) {
+  gridApi.core.raise.renderingComplete(gridApi);
+}
+function raiseGridRowsRendered(gridApi, rows) {
+  gridApi.core.raise.rowsRendered(rows);
+}
+function raiseGridRowsVisibleChanged(gridApi, rows) {
+  gridApi.core.raise.rowsVisibleChanged(rows);
+}
+function raiseGridCanvasHeightChanged(gridApi, oldHeight, newHeight) {
+  gridApi.core.raise.canvasHeightChanged(oldHeight, newHeight);
+}
+function raiseGridDimensionChanged(gridApi, oldHeight, oldWidth, newHeight, newWidth) {
+  gridApi.core.raise.gridDimensionChanged(oldHeight, oldWidth, newHeight, newWidth);
+}
+function raiseGridScrollBegin(gridApi) {
+  gridApi.core.raise.scrollBegin();
+}
+function raiseGridScrollEnd(gridApi) {
+  gridApi.core.raise.scrollEnd();
+}
+function raiseGridSortChanged(gridApi, sortState) {
+  gridApi.core.raise.sortChanged(sortState.columnName, sortState.direction);
+}
+function raiseGridFilterChanged(gridApi, filters) {
+  gridApi.core.raise.filterChanged(filters);
+}
+function raiseGridGroupingChanged(gridApi, groupByColumns) {
+  gridApi.core.raise.groupingChanged(groupByColumns);
+}
+function raiseGridColumnOrderChanged(gridApi, order) {
+  gridApi.core.raise.columnOrderChanged(order);
+}
+function raiseGridBenchmarkComplete(gridApi, result) {
+  gridApi.core.raise.benchmarkComplete(result);
+}
+function raiseGridPaginationChanged(gridApi, currentPage, pageSize) {
+  gridApi.pagination.raise.paginationChanged(currentPage, pageSize);
+}
+function raiseGridExpandableRowStateChanged(gridApi, row, expanded) {
+  gridApi.expandable.raise.rowExpandedStateChanged(row, expanded);
+}
+function raiseGridTreeRowStateChanged(gridApi, row, expanded) {
+  if (expanded) {
+    gridApi.treeBase.raise.rowExpanded(row);
+    return;
+  }
+  gridApi.treeBase.raise.rowCollapsed(row);
+}
+function raiseGridNeedMoreData(gridApi, request) {
+  if (request === "top") {
+    gridApi.infiniteScroll.raise.needLoadMoreDataTop();
+    return;
+  }
+  gridApi.infiniteScroll.raise.needLoadMoreData();
+}
+function raiseGridBeginCellEdit(gridApi, rowEntity, column, triggerEvent) {
+  gridApi.edit.raise.beginCellEdit(rowEntity, column, triggerEvent);
+}
+function raiseGridAfterCellEdit(gridApi, rowEntity, column, newValue, oldValue) {
+  gridApi.edit.raise.afterCellEdit(rowEntity, column, newValue, oldValue);
+}
+function raiseGridCancelCellEdit(gridApi, rowEntity, column) {
+  gridApi.edit.raise.cancelCellEdit(rowEntity, column);
+}
+
+// ../ui-grid/src/lib/grid/ui-grid.state.ts
+function moveArrayItem(items, fromIndex, toIndex) {
+  const next = [...items];
+  const [item] = next.splice(fromIndex, 1);
+  if (item === void 0) {
+    return next;
+  }
+  next.splice(toIndex, 0, item);
+  return next;
+}
+function moveGridColumnOrderState(current, fromIndex, toIndex) {
+  return moveArrayItem(current, fromIndex, toIndex);
+}
+function createGridRestoreMutationPlan(state) {
+  const normalizedState = normalizeGridSavedState(state);
+  const plan = {};
+  if (normalizedState.columnOrder) {
+    plan.columnOrder = normalizedState.columnOrder;
+  }
+  if (normalizedState.filters) {
+    plan.filters = normalizedState.filters;
+  }
+  if (normalizedState.sort) {
+    plan.sort = normalizedState.sort;
+  }
+  if (normalizedState.grouping) {
+    plan.grouping = normalizedState.grouping;
+  }
+  if (normalizedState.pagination) {
+    plan.pagination = {
+      currentPage: normalizedState.pagination.paginationCurrentPage,
+      pageSize: normalizedState.pagination.paginationPageSize
+    };
+  }
+  if (normalizedState.expandable) {
+    plan.expandable = normalizedState.expandable;
+  }
+  if (normalizedState.treeView) {
+    plan.treeView = normalizedState.treeView;
+  }
+  return plan;
+}
+
+// ../ui-grid/src/lib/grid/ui-grid.commands.ts
+function applyGridSortStateCommand(gridApi, setSortState, sortState) {
+  setSortState(sortState);
+  raiseGridSortChanged(gridApi, sortState);
+}
+function sortGridColumnCommand(gridApi, setSortState, columnName, direction) {
+  applyGridSortStateCommand(gridApi, setSortState, buildGridSortState(columnName, direction));
+}
+function updateGridFilterCommand(gridApi, updateFilters, getFilters, columnName, value) {
+  updateFilters((current) => ({
+    ...current,
+    [columnName]: value
+  }));
+  raiseGridFilterChanged(gridApi, getFilters());
+}
+function clearGridFiltersCommand(gridApi, setFilters) {
+  const nextFilters = {};
+  setFilters(nextFilters);
+  raiseGridFilterChanged(gridApi, nextFilters);
+}
+function clearGridGroupingCommand(gridApi, setGroupByColumns, shouldRaise = true) {
+  const nextGrouping = [];
+  setGroupByColumns(nextGrouping);
+  if (shouldRaise) {
+    raiseGridGroupingChanged(gridApi, nextGrouping);
+  }
+}
+function moveGridColumnCommand(gridApi, canMoveColumns, updateColumnOrder, fromIndex, toIndex) {
+  if (!canMoveColumns) {
+    return;
+  }
+  updateColumnOrder((current) => {
+    const next = moveGridColumnOrderState(current, fromIndex, toIndex);
+    raiseGridColumnOrderChanged(gridApi, next);
+    return next;
+  });
+}
+function seekGridPaginationCommand(gridApi, setCurrentPage, getTotalPages, getEffectivePageSize, page) {
+  const nextPage = seekGridPage(page, getTotalPages());
+  setCurrentPage(nextPage);
+  raiseGridPaginationChanged(gridApi, nextPage, getEffectivePageSize());
+}
+function setGridPaginationPageSizeCommand(gridApi, setPageSize, setCurrentPage, pageSize) {
+  const nextPageSize = resolveGridPageSize(pageSize);
+  if (nextPageSize === null) {
+    return;
+  }
+  setPageSize(nextPageSize);
+  setCurrentPage(1);
+  raiseGridPaginationChanged(gridApi, 1, nextPageSize);
+}
+function restoreGridStateCommand(gridApi, state, access) {
+  const restorePlan = createGridRestoreMutationPlan(state);
+  if (restorePlan.columnOrder) {
+    access.setColumnOrder(restorePlan.columnOrder);
+  }
+  if (restorePlan.filters) {
+    access.setActiveFilters(restorePlan.filters);
+    raiseGridFilterChanged(gridApi, restorePlan.filters);
+  }
+  if (restorePlan.sort) {
+    access.setSortState(restorePlan.sort);
+  }
+  if (restorePlan.grouping) {
+    access.setGroupByColumns(restorePlan.grouping);
+    raiseGridGroupingChanged(gridApi, restorePlan.grouping);
+  }
+  if (restorePlan.pagination) {
+    access.setCurrentPage(restorePlan.pagination.currentPage);
+    access.setPageSize(restorePlan.pagination.pageSize);
+    raiseGridPaginationChanged(gridApi, restorePlan.pagination.currentPage, access.getEffectivePageSize());
+  }
+  if (restorePlan.expandable) {
+    access.setExpandedRows(restorePlan.expandable);
+  }
+  if (restorePlan.treeView) {
+    access.setExpandedTreeRows(restorePlan.treeView);
+  }
+}
+function toggleGridRowExpansionCommand(gridApi, canExpandRows, currentExpandedRows, rowId, setExpandedRows, findRowById) {
+  if (!canExpandRows) {
+    return;
+  }
+  const { expanded, nextExpandedRows } = toggleGridRowExpanded(currentExpandedRows, rowId);
+  setExpandedRows(nextExpandedRows);
+  const gridRow = findRowById(rowId);
+  if (!gridRow) {
+    return;
+  }
+  gridRow.expanded = expanded;
+  raiseGridExpandableRowStateChanged(gridApi, gridRow, expanded);
+}
+function expandAllGridRowsCommand(buildRows, data, setExpandedRows) {
+  setExpandedRows(expandAllGridRows(buildRows(data)));
+}
+function collapseAllGridRowsCommand(setExpandedRows) {
+  setExpandedRows({});
+}
+function toggleGridTreeRowCommand(gridApi, currentExpandedTreeRows, rowId, setExpandedTreeRows, findRowById) {
+  const { expanded, nextExpandedTreeRows } = toggleGridTreeRowExpanded(currentExpandedTreeRows, rowId);
+  setExpandedTreeRows(nextExpandedTreeRows);
+  const gridRow = findRowById(rowId);
+  if (gridRow) {
+    raiseGridTreeRowStateChanged(gridApi, gridRow, expanded);
+  }
+}
+function setGridTreeRowExpandedCommand(gridApi, currentExpandedTreeRows, rowId, expanded, setExpandedTreeRows, findRowById) {
+  setExpandedTreeRows(setGridTreeRowExpanded(currentExpandedTreeRows, rowId, expanded));
+  const gridRow = findRowById(rowId);
+  if (gridRow) {
+    raiseGridTreeRowStateChanged(gridApi, gridRow, expanded);
+  }
+}
+function expandAllGridTreeRowsCommand(buildRows, data, setExpandedTreeRows) {
+  setExpandedTreeRows(expandAllGridTreeRows(buildRows(data)));
+}
+function collapseAllGridTreeRowsCommand(setExpandedTreeRows) {
+  setExpandedTreeRows({});
+}
+function beginGridCellEditCommand(gridApi, access, row, column, currentValue, triggerEvent, initialValue) {
+  const nextEditSession = beginGridEditSession(
+    row.id,
+    column.name,
+    initialValue ?? stringifyGridEditorValue(currentValue)
+  );
+  access.setFocusedCell(nextEditSession.focusedCell);
+  access.setEditingCell(nextEditSession.editingCell);
+  access.setEditingValue(nextEditSession.editingValue);
+  raiseGridBeginCellEdit(gridApi, row.entity, column, triggerEvent);
+  return nextEditSession.editingCell;
+}
+function commitGridCellEditCommand(gridApi, access) {
+  const editingCell = access.getEditingCell();
+  if (!editingCell) {
+    return { committed: false };
+  }
+  const row = access.findRowById(editingCell.rowId);
+  const column = access.findColumnByName(editingCell.columnName);
+  if (!row || !column) {
+    access.setEditingCell(null);
+    return { committed: false };
+  }
+  const oldValue = getCellValue(row.entity, column);
+  const newValue = access.parseEditedValue(column, access.getEditingValue(), oldValue);
+  access.setCellValue(row.entity, column, newValue);
+  const clearedEditSession = clearGridEditSession();
+  access.setEditingCell(clearedEditSession.editingCell);
+  raiseGridAfterCellEdit(gridApi, row.entity, column, newValue, oldValue);
+  access.setEditingValue(clearedEditSession.editingValue);
+  return {
+    committed: true,
+    focusTarget: { rowId: row.id, columnName: column.name },
+    row,
+    column
+  };
+}
+function cancelGridCellEditCommand(gridApi, access) {
+  const editingCell = access.getEditingCell();
+  if (!editingCell) {
+    return {};
+  }
+  const row = access.findRowById(editingCell.rowId);
+  const column = access.findColumnByName(editingCell.columnName);
+  const clearedEditSession = clearGridEditSession();
+  access.setEditingCell(clearedEditSession.editingCell);
+  access.setEditingValue(clearedEditSession.editingValue);
+  if (!row || !column) {
+    return {};
+  }
+  raiseGridCancelCellEdit(gridApi, row.entity, column);
+  return { focusTarget: editingCell };
+}
+function maybeRequestInfiniteScrollCommand(gridApi, access) {
+  if (!access.enabled || !access.virtualizationEnabled) {
+    return;
+  }
+  const { request, nextState } = maybeRequestInfiniteScrollData({
+    state: access.state,
+    startIndex: access.startIndex,
+    visibleRows: access.visibleRows,
+    viewportRows: access.viewportRows,
+    threshold: access.threshold
+  });
+  if (request === "top" || request === "bottom") {
+    access.setState(nextState);
+    raiseGridNeedMoreData(gridApi, request);
+  }
+}
+function completeGridInfiniteScrollDataLoadCommand(currentState, setState, scrollUp, scrollDown) {
+  setState(completeInfiniteScrollDataLoad(currentState, scrollUp, scrollDown));
+  return Promise.resolve();
+}
+function resetGridInfiniteScrollCommand(setState, scrollUp, scrollDown) {
+  setState(resetInfiniteScrollState(scrollUp, scrollDown));
+}
+function saveGridInfiniteScrollPercentageCommand(currentState, visibleRows, setState) {
+  setState(saveInfiniteScrollPercentage(currentState, visibleRows));
+}
+function setGridInfiniteScrollDirectionsCommand(currentState, setState, scrollUp, scrollDown) {
+  setState(setInfiniteScrollDirectionsState(currentState, scrollUp, scrollDown));
+}
+
+// ../ui-grid/src/lib/grid/ui-grid.host.ts
+function observeGridHostSize(hostElement, onSizeChange) {
+  if (typeof ResizeObserver === "undefined") {
+    return null;
+  }
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) {
+      return;
+    }
+    onSizeChange({
+      height: Math.round(entry.contentRect.height),
+      width: Math.round(entry.contentRect.width)
+    });
+  });
+  observer.observe(hostElement);
+  return observer;
+}
+function downloadGridCsvFile(csv, filename) {
+  if (typeof Blob === "undefined" || typeof URL === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+// src/useGridState.ts
+function useGridState(options, onRegisterApi) {
+  const [activeFilters, setActiveFilters] = useState({});
+  const [groupByColumns, setGroupByColumns] = useState([]);
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [columnOrder, setColumnOrder] = useState([]);
+  const [hiddenRowReasons, setHiddenRowReasons] = useState({});
+  const [sortState, setSortState] = useState({ columnName: null, direction: SORT_DIRECTIONS2.none });
+  const [focusedCell, setFocusedCell] = useState(null);
+  const [editingCell, setEditingCell] = useState(null);
+  const [editingValue, setEditingValue] = useState("");
+  const [expandedRows, setExpandedRows] = useState({});
+  const [expandedTreeRows, setExpandedTreeRows] = useState({});
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(0);
+  const [benchmarkResult, setBenchmarkResult] = useState(null);
+  const [infiniteScrollState, setInfiniteScrollState] = useState({
+    scrollUp: false,
+    scrollDown: true,
+    dataLoading: false,
+    previousVisibleRows: 0
+  });
+  const [autoViewportHeight, setAutoViewportHeight] = useState(null);
+  const gridContainerRef = useRef(null);
+  const initializedGridIdRef = useRef(null);
+  const lastCanvasHeightRef = useRef(0);
+  const lastGridHeightRef = useRef(0);
+  const lastGridWidthRef = useRef(0);
+  const scrollEndHandleRef = useRef(void 0);
+  const scrollingRef = useRef(false);
+  const editorFocusTokenRef = useRef(0);
+  const renderedCellFocusTokenRef = useRef(0);
+  const activeFiltersRef = useRef(activeFilters);
+  activeFiltersRef.current = activeFilters;
+  const groupByColumnsRef = useRef(groupByColumns);
+  groupByColumnsRef.current = groupByColumns;
+  const collapsedGroupsRef = useRef(collapsedGroups);
+  collapsedGroupsRef.current = collapsedGroups;
+  const columnOrderRef = useRef(columnOrder);
+  columnOrderRef.current = columnOrder;
+  const hiddenRowReasonsRef = useRef(hiddenRowReasons);
+  hiddenRowReasonsRef.current = hiddenRowReasons;
+  const sortStateRef = useRef(sortState);
+  sortStateRef.current = sortState;
+  const focusedCellRef = useRef(focusedCell);
+  focusedCellRef.current = focusedCell;
+  const editingCellRef = useRef(editingCell);
+  editingCellRef.current = editingCell;
+  const editingValueRef = useRef(editingValue);
+  editingValueRef.current = editingValue;
+  const expandedRowsRef = useRef(expandedRows);
+  expandedRowsRef.current = expandedRows;
+  const expandedTreeRowsRef = useRef(expandedTreeRows);
+  expandedTreeRowsRef.current = expandedTreeRows;
+  const currentPageRef = useRef(currentPage);
+  currentPageRef.current = currentPage;
+  const pageSizeRef = useRef(pageSize);
+  pageSizeRef.current = pageSize;
+  const infiniteScrollStateRef = useRef(infiniteScrollState);
+  infiniteScrollStateRef.current = infiniteScrollState;
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const rowSize = options.rowHeight ?? 44;
+  const visibleColumns = useMemo(() => {
+    const order = columnOrder;
+    return [...options.columnDefs].filter((column) => column.visible !== false).sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
+  }, [options.columnDefs, columnOrder]);
+  const visibleColumnsRef = useRef(visibleColumns);
+  visibleColumnsRef.current = visibleColumns;
+  const pipeline = useMemo(() => {
+    return buildGridPipeline({
+      options,
+      columns: visibleColumns,
+      activeFilters,
+      sortState,
+      groupByColumns,
+      collapsedGroups,
+      hiddenRowReasons,
+      expandedRows,
+      expandedTreeRows,
+      currentPage,
+      pageSize,
+      rowSize
+    });
+  }, [options, visibleColumns, activeFilters, sortState, groupByColumns, collapsedGroups, hiddenRowReasons, expandedRows, expandedTreeRows, currentPage, pageSize, rowSize]);
+  const pipelineRef = useRef(pipeline);
+  pipelineRef.current = pipeline;
+  const labels = useMemo(() => resolveGridLabels(options.labels), [options.labels]);
+  const gridTemplateColumns = useMemo(
+    () => visibleColumns.map((column) => gridColumnWidth(column)).join(" "),
+    [visibleColumns]
+  );
+  const resolveRowId = useCallback((row) => {
+    return coreResolveGridRowId(optionsRef.current, row);
+  }, []);
+  const buildRowsFromData = useCallback((data) => {
+    return buildGridRows(
+      { ...optionsRef.current, data },
+      optionsRef.current.rowHeight ?? 44,
+      hiddenRowReasonsRef.current,
+      expandedRowsRef.current
+    );
+  }, []);
+  const findRowById = useCallback((rowId) => {
+    return coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
+  }, [buildRowsFromData]);
+  const canExpandRowsFn = useCallback(() => {
+    return FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current);
+  }, []);
+  const effectivePageSizeFn = useCallback((totalItems) => {
+    return coreGetEffectivePageSize(optionsRef.current, pageSizeRef.current, totalItems);
+  }, []);
+  const getCurrentPageValueFn = useCallback((totalItems) => {
+    const ti = totalItems ?? pipelineRef.current.totalItems;
+    return coreGetCurrentPageValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+  }, []);
+  const getTotalPagesValueFn = useCallback((totalItems) => {
+    const ti = totalItems ?? pipelineRef.current.totalItems;
+    return coreGetTotalPagesValue(optionsRef.current, ti, pageSizeRef.current);
+  }, []);
+  const getFirstRowIndexValueFn = useCallback((totalItems) => {
+    const ti = totalItems ?? pipelineRef.current.totalItems;
+    return coreGetFirstRowIndexValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+  }, []);
+  const getLastRowIndexValueFn = useCallback((totalItems) => {
+    const ti = totalItems ?? pipelineRef.current.totalItems;
+    return coreGetLastRowIndexValue(optionsRef.current, currentPageRef.current, ti, pageSizeRef.current);
+  }, []);
+  const isCellEditable = useCallback((row, column, triggerEvent) => {
+    if (!FEATURE_CELL_EDIT) return false;
+    const editable = column.enableCellEdit ?? optionsRef.current.enableCellEdit ?? false;
+    if (!editable) return false;
+    const condition = column.cellEditableCondition ?? optionsRef.current.cellEditableCondition ?? true;
+    if (typeof condition === "boolean") return condition;
+    const context = {
+      row: row.entity,
+      column,
+      rowIndex: row.index,
+      triggerEvent
+    };
+    return condition(context);
+  }, []);
+  const shouldEditOnFocusFn = useCallback((column) => {
+    return column.enableCellEditOnFocus ?? optionsRef.current.enableCellEditOnFocus ?? false;
+  }, []);
+  const focusRenderedCell = useCallback((position) => {
+    const focusToken = ++renderedCellFocusTokenRef.current;
+    const selector = `.body-cell[data-row-id="${position.rowId}"][data-col-name="${position.columnName}"]`;
+    const doFocus = (retry = true) => {
+      if (focusToken !== renderedCellFocusTokenRef.current) return;
+      const container = gridContainerRef.current;
+      if (!container) return;
+      const target = container.querySelector(selector);
+      if (!target) {
+        if (retry) requestAnimationFrame(() => doFocus(false));
+        return;
+      }
+      target.focus();
+      if (retry && container.ownerDocument.activeElement !== target) {
+        requestAnimationFrame(() => doFocus(false));
+      }
+    };
+    queueMicrotask(() => doFocus(true));
+  }, []);
+  const focusEditorInput = useCallback((focusToken) => {
+    if (focusToken !== editorFocusTokenRef.current) return;
+    const ec = editingCellRef.current;
+    if (!ec) return;
+    const selector = `.cell-editor[data-row-id="${ec.rowId}"][data-col-name="${ec.columnName}"]`;
+    const doFocus = (retry = true) => {
+      if (focusToken !== editorFocusTokenRef.current) return;
+      const currentEc = editingCellRef.current;
+      if (!currentEc || currentEc.rowId !== ec.rowId || currentEc.columnName !== ec.columnName) return;
+      const container = gridContainerRef.current;
+      if (!container) return;
+      const input = container.querySelector(selector);
+      if (!input) {
+        if (retry) requestAnimationFrame(() => doFocus(false));
+        return;
+      }
+      input.focus();
+      input.select();
+    };
+    doFocus(true);
+  }, []);
+  const gridApiRef = useRef(null);
+  if (!gridApiRef.current) {
+    const bindings = {
+      refresh: () => setActiveFilters((current) => ({ ...current })),
+      getVisibleRows: () => pipelineRef.current.visibleRows,
+      setRowInvisible: (row, reason = "user") => {
+        const rowId = coreResolveGridRowId(optionsRef.current, row);
+        setHiddenRowReasons((current) => addGridRowInvisibleReason(current, rowId, reason));
+      },
+      clearRowInvisible: (row, reason = "user") => {
+        const rowId = coreResolveGridRowId(optionsRef.current, row);
+        setHiddenRowReasons((current) => clearGridRowInvisibleReason(current, rowId, reason));
+      },
+      setFilter: (columnName, value) => {
+        setActiveFilters((current) => {
+          const next = { ...current, [columnName]: value };
+          activeFiltersRef.current = next;
+          queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(next));
+          return next;
+        });
+      },
+      clearAllFilters: () => {
+        const nextFilters = {};
+        activeFiltersRef.current = nextFilters;
+        setActiveFilters(nextFilters);
+        queueMicrotask(() => gridApiRef.current.core.raise.filterChanged(nextFilters));
+      },
+      sortColumn: (columnName, direction) => {
+        sortGridColumnCommand(gridApiRef.current, (s) => setSortState(s), columnName, direction);
+      },
+      moveColumn: (fromIndex, toIndex) => {
+        moveGridColumnCommand(
+          gridApiRef.current,
+          FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+          (updater) => setColumnOrder((current) => updater(current)),
+          fromIndex,
+          toIndex
+        );
+      },
+      toggleGrouping: (columnName) => {
+        if (!(FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current))) return;
+        const current = groupByColumnsRef.current;
+        const next = current.includes(columnName) ? current.filter((n) => n !== columnName) : [...current, columnName];
+        groupByColumnsRef.current = next;
+        setGroupByColumns(next);
+        gridApiRef.current.core.raise.groupingChanged(next);
+      },
+      clearGrouping: () => {
+        clearGridGroupingCommand(gridApiRef.current, (grouping) => setGroupByColumns(grouping), false);
+      },
+      benchmark: (iterations) => {
+        return runBenchmarkFn(iterations);
+      },
+      exportCsv: () => {
+        exportCsvFn();
+      },
+      paginationGetPage: () => getCurrentPageValueFn(),
+      paginationGetTotalPages: () => getTotalPagesValueFn(),
+      paginationGetFirstRowIndex: () => getFirstRowIndexValueFn(),
+      paginationGetLastRowIndex: () => getLastRowIndexValueFn(),
+      paginationNextPage: () => seekPageFn(getCurrentPageValueFn() + 1),
+      paginationPreviousPage: () => seekPageFn(getCurrentPageValueFn() - 1),
+      paginationSeek: (page) => seekPageFn(page),
+      paginationSetPageSize: (ps) => setPaginationPageSizeFn(ps),
+      toggleRowExpansion: (row) => toggleRowExpansionByRefFn(row),
+      expandAllRows: () => expandAllRowsFn(),
+      collapseAllRows: () => {
+        collapseAllGridRowsCommand((e) => setExpandedRows(e));
+      },
+      toggleAllRows: () => toggleAllRowsFn(),
+      treeExpandAllRows: () => {
+        expandAllGridTreeRowsCommand(
+          (data) => buildRowsFromData(data),
+          optionsRef.current.data,
+          (e) => setExpandedTreeRows(e)
+        );
+      },
+      treeCollapseAllRows: () => {
+        collapseAllGridTreeRowsCommand((e) => setExpandedTreeRows(e));
+      },
+      treeToggleRow: (row) => toggleTreeRowByRefFn(row),
+      treeExpandRow: (row) => expandTreeRowByRefFn(row),
+      treeCollapseRow: (row) => collapseTreeRowByRefFn(row),
+      treeGetRowChildren: (row) => {
+        const rowId = coreResolveGridRowId(optionsRef.current, row);
+        return buildRowsFromData(optionsRef.current.data).filter((r) => r.parentId === rowId);
+      },
+      treeGetState: () => expandedTreeRowsRef.current,
+      treeSetState: (state) => setExpandedTreeRows({ ...state }),
+      infiniteScrollDataLoaded: (scrollUp, scrollDown) => {
+        return completeGridInfiniteScrollDataLoadCommand(
+          infiniteScrollStateRef.current,
+          (s) => setInfiniteScrollState(s),
+          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+        );
+      },
+      infiniteScrollReset: (scrollUp, scrollDown) => {
+        resetGridInfiniteScrollCommand(
+          (s) => setInfiniteScrollState(s),
+          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+        );
+      },
+      infiniteScrollSaveScrollPercentage: () => {
+        saveGridInfiniteScrollPercentageCommand(
+          infiniteScrollStateRef.current,
+          pipelineRef.current.visibleRows.length,
+          (s) => setInfiniteScrollState(s)
+        );
+      },
+      infiniteScrollDataRemovedTop: (scrollUp, scrollDown) => {
+        resetGridInfiniteScrollCommand(
+          (s) => setInfiniteScrollState(s),
+          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+        );
+      },
+      infiniteScrollDataRemovedBottom: (scrollUp, scrollDown) => {
+        resetGridInfiniteScrollCommand(
+          (s) => setInfiniteScrollState(s),
+          scrollUp ?? infiniteScrollStateRef.current.scrollUp,
+          scrollDown ?? infiniteScrollStateRef.current.scrollDown
+        );
+      },
+      infiniteScrollSetDirections: (scrollUp, scrollDown) => {
+        setGridInfiniteScrollDirectionsCommand(
+          infiniteScrollStateRef.current,
+          (s) => setInfiniteScrollState(s),
+          scrollUp,
+          scrollDown
+        );
+      },
+      saveState: () => {
+        return buildGridSavedState({
+          columnOrder: columnOrderRef.current,
+          activeFilters: activeFiltersRef.current,
+          sortState: sortStateRef.current,
+          groupByColumns: groupByColumnsRef.current,
+          currentPage: currentPageRef.current,
+          pageSize: pageSizeRef.current,
+          totalItems: pipelineRef.current.totalItems,
+          expandedRows: expandedRowsRef.current,
+          expandedTreeRows: expandedTreeRowsRef.current
+        });
+      },
+      restoreState: (state) => {
+        restoreGridStateCommand(gridApiRef.current, state, {
+          setColumnOrder: (order) => setColumnOrder(order),
+          setActiveFilters: (filters) => setActiveFilters(filters),
+          setSortState: (s) => setSortState(s),
+          setGroupByColumns: (grouping) => setGroupByColumns(grouping),
+          setCurrentPage: (page) => setCurrentPage(page),
+          setPageSize: (ps) => setPageSize(ps),
+          setExpandedRows: (e) => setExpandedRows(e),
+          setExpandedTreeRows: (e) => setExpandedTreeRows(e),
+          getEffectivePageSize: () => effectivePageSizeFn(pipelineRef.current.totalItems)
+        });
+      },
+      beginCellEdit: (row, columnName, triggerEvent) => {
+        const rowId = coreResolveGridRowId(optionsRef.current, row);
+        const gridRow = coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId);
+        const column = visibleColumnsRef.current.find((c) => c.name === columnName);
+        if (!gridRow || !column || !isCellEditable(gridRow, column, triggerEvent)) return;
+        startCellEditFn(gridRow, column, triggerEvent);
+      },
+      endCellEdit: () => commitCellEditFn(),
+      cancelCellEdit: () => cancelCellEditFn(),
+      getEditingCell: () => editingCellRef.current
+    };
+    gridApiRef.current = createGridApi(bindings);
+  }
+  const gridApi = gridApiRef.current;
+  const seekPageFn = useCallback((page) => {
+    seekGridPaginationCommand(
+      gridApiRef.current,
+      (nextPage) => setCurrentPage(nextPage),
+      () => getTotalPagesValueFn(),
+      () => effectivePageSizeFn(pipelineRef.current.totalItems),
+      page
+    );
+  }, [getTotalPagesValueFn, effectivePageSizeFn]);
+  const setPaginationPageSizeFn = useCallback((ps) => {
+    setGridPaginationPageSizeCommand(
+      gridApiRef.current,
+      (nextPageSize) => setPageSize(nextPageSize),
+      (nextPage) => setCurrentPage(nextPage),
+      ps
+    );
+  }, []);
+  const toggleRowExpansionByRefFn = useCallback((row) => {
+    const rowId = coreResolveGridRowId(optionsRef.current, row);
+    toggleGridRowExpansionCommand(
+      gridApiRef.current,
+      FEATURE_EXPANDABLE && canGridExpandRows(optionsRef.current),
+      expandedRowsRef.current,
+      rowId,
+      (e) => setExpandedRows(e),
+      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+    );
+  }, [buildRowsFromData]);
+  const expandAllRowsFn = useCallback(() => {
+    if (!canGridExpandRows(optionsRef.current)) return;
+    expandAllGridRowsCommand(
+      (data) => buildRowsFromData(data),
+      optionsRef.current.data,
+      (e) => setExpandedRows(e)
+    );
+  }, [buildRowsFromData]);
+  const toggleAllRowsFn = useCallback(() => {
+    const allExpanded = areAllGridRowsExpanded(buildRowsFromData(optionsRef.current.data), expandedRowsRef.current);
+    if (allExpanded) {
+      collapseAllGridRowsCommand((e) => setExpandedRows(e));
+    } else {
+      expandAllRowsFn();
+    }
+  }, [buildRowsFromData, expandAllRowsFn]);
+  const toggleTreeRowByRefFn = useCallback((row) => {
+    const rowId = coreResolveGridRowId(optionsRef.current, row);
+    toggleGridTreeRowCommand(
+      gridApiRef.current,
+      expandedTreeRowsRef.current,
+      rowId,
+      (e) => setExpandedTreeRows(e),
+      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+    );
+  }, [buildRowsFromData]);
+  const expandTreeRowByRefFn = useCallback((row) => {
+    const rowId = coreResolveGridRowId(optionsRef.current, row);
+    setGridTreeRowExpandedCommand(
+      gridApiRef.current,
+      expandedTreeRowsRef.current,
+      rowId,
+      true,
+      (e) => setExpandedTreeRows(e),
+      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+    );
+  }, [buildRowsFromData]);
+  const collapseTreeRowByRefFn = useCallback((row) => {
+    const rowId = coreResolveGridRowId(optionsRef.current, row);
+    setGridTreeRowExpandedCommand(
+      gridApiRef.current,
+      expandedTreeRowsRef.current,
+      rowId,
+      false,
+      (e) => setExpandedTreeRows(e),
+      (resolvedRowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), resolvedRowId)
+    );
+  }, [buildRowsFromData]);
+  const startCellEditFn = useCallback((row, column, triggerEvent, initialValue) => {
+    const currentValue = getCellValue2(row.entity, column);
+    const focusToken = ++editorFocusTokenRef.current;
+    const ec = beginGridCellEditCommand(
+      gridApiRef.current,
+      {
+        setFocusedCell: (fc) => setFocusedCell(fc),
+        setEditingCell: (ec2) => setEditingCell(ec2),
+        setEditingValue: (ev) => setEditingValue(ev)
+      },
+      row,
+      column,
+      currentValue,
+      triggerEvent,
+      initialValue
+    );
+    if (ec) {
+      queueMicrotask(() => focusEditorInput(focusToken));
+    }
+  }, [focusEditorInput]);
+  const commitCellEditFn = useCallback((direction, restoreFocus = true) => {
+    const result = commitGridCellEditCommand(gridApiRef.current, {
+      getEditingCell: () => editingCellRef.current,
+      getEditingValue: () => editingValueRef.current,
+      setEditingCell: (ec) => setEditingCell(ec),
+      setEditingValue: (ev) => setEditingValue(ev),
+      findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
+      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName),
+      parseEditedValue: (column, value, oldValue) => parseGridEditedValue(column, value, oldValue),
+      setCellValue: (rowEntity, column, value) => {
+        const fieldPath = column.editModelField ?? column.field ?? column.name;
+        setPathValue(rowEntity, fieldPath, value);
+      }
+    });
+    if (!result.committed || !result.row || !result.column || !result.focusTarget) return;
+    editorFocusTokenRef.current += 1;
+    if (direction) {
+      const moved = moveFocusFn(result.row, result.column, direction);
+      if (!moved) focusRenderedCell(result.focusTarget);
+    } else if (restoreFocus) {
+      focusRenderedCell(result.focusTarget);
+    }
+  }, [buildRowsFromData, focusRenderedCell]);
+  const cancelCellEditFn = useCallback(() => {
+    const hadEditingCell = editingCellRef.current !== null;
+    const result = cancelGridCellEditCommand(gridApiRef.current, {
+      getEditingCell: () => editingCellRef.current,
+      setEditingCell: (ec) => setEditingCell(ec),
+      setEditingValue: (ev) => setEditingValue(ev),
+      findRowById: (rowId) => coreFindGridRowById(buildRowsFromData(optionsRef.current.data), rowId),
+      findColumnByName: (columnName) => visibleColumnsRef.current.find((c) => c.name === columnName)
+    });
+    if (!hadEditingCell) return;
+    editorFocusTokenRef.current += 1;
+    if (result.focusTarget) focusRenderedCell(result.focusTarget);
+  }, [buildRowsFromData, focusRenderedCell]);
+  const moveFocusFn = useCallback((row, column, direction, triggerEvent) => {
+    const nextCell = findNextGridCell({
+      rows: pipelineRef.current.visibleRows,
+      columns: visibleColumnsRef.current,
+      rowId: row.id,
+      columnName: column.name,
+      direction
+    });
+    if (!nextCell) return false;
+    setFocusedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+    focusRenderedCell({ rowId: nextCell.row.id, columnName: nextCell.column.name });
+    if (shouldEditOnFocusFn(nextCell.column) && isCellEditable(nextCell.row, nextCell.column, triggerEvent)) {
+      startCellEditFn(nextCell.row, nextCell.column, triggerEvent);
+    }
+    return true;
+  }, [focusRenderedCell, isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
+  const runBenchmarkFn = useCallback((iterations) => {
+    const safeIterations = Math.max(1, iterations ?? optionsRef.current.benchmark?.iterations ?? 25);
+    const startedAt = performance.now();
+    let lastResult = buildGridPipeline({
+      options: optionsRef.current,
+      columns: visibleColumnsRef.current,
+      activeFilters: activeFiltersRef.current,
+      sortState: sortStateRef.current,
+      groupByColumns: groupByColumnsRef.current,
+      collapsedGroups: collapsedGroupsRef.current,
+      hiddenRowReasons: hiddenRowReasonsRef.current,
+      expandedRows: expandedRowsRef.current,
+      expandedTreeRows: expandedTreeRowsRef.current,
+      currentPage: currentPageRef.current,
+      pageSize: pageSizeRef.current,
+      rowSize: optionsRef.current.rowHeight ?? 44
+    });
+    for (let i = 1; i < safeIterations; i++) {
+      lastResult = buildGridPipeline({
+        options: optionsRef.current,
+        columns: visibleColumnsRef.current,
+        activeFilters: activeFiltersRef.current,
+        sortState: sortStateRef.current,
+        groupByColumns: groupByColumnsRef.current,
+        collapsedGroups: collapsedGroupsRef.current,
+        hiddenRowReasons: hiddenRowReasonsRef.current,
+        expandedRows: expandedRowsRef.current,
+        expandedTreeRows: expandedTreeRowsRef.current,
+        currentPage: currentPageRef.current,
+        pageSize: pageSizeRef.current,
+        rowSize: optionsRef.current.rowHeight ?? 44
+      });
+    }
+    const totalMs = performance.now() - startedAt;
+    const result = {
+      iterations: safeIterations,
+      totalMs,
+      averageMs: totalMs / safeIterations,
+      visibleRows: lastResult.visibleRows.length,
+      renderedItems: lastResult.displayItems.length
+    };
+    setBenchmarkResult(result);
+    raiseGridBenchmarkComplete(gridApiRef.current, result);
+    return result;
+  }, []);
+  const exportCsvFn = useCallback(() => {
+    if (!FEATURE_CSV_EXPORT) return;
+    const columns = visibleColumnsRef.current;
+    const csv = exportCsvRows(columns, pipelineRef.current.visibleRows);
+    downloadGridCsvFile(csv, `${sanitizeDownloadFilename(optionsRef.current.id)}.csv`);
+  }, []);
+  useEffect(() => {
+    if (initializedGridIdRef.current === options.id) return;
+    initializedGridIdRef.current = options.id;
+    setActiveFilters({});
+    setHiddenRowReasons({});
+    setCollapsedGroups({});
+    setFocusedCell(null);
+    setEditingCell(null);
+    setEditingValue("");
+    setExpandedRows({});
+    setExpandedTreeRows({});
+    setColumnOrder(options.columnDefs.map((column) => column.name));
+    setGroupByColumns(options.grouping?.groupBy ?? []);
+    setCurrentPage(options.paginationCurrentPage ?? 1);
+    setPageSize(coreGetEffectivePageSize(options, 0, options.data.length));
+    setInfiniteScrollState({
+      scrollUp: options.infiniteScrollUp === true,
+      scrollDown: options.infiniteScrollDown !== false,
+      dataLoading: false,
+      previousVisibleRows: 0
+    });
+    const initialSort = options.columnDefs.find(
+      (column) => column.sort?.direction && !column.sort.ignoreSort
+    );
+    setSortState({
+      columnName: initialSort?.name ?? null,
+      direction: initialSort?.sort?.direction ?? SORT_DIRECTIONS2.none
+    });
+    onRegisterApi?.(gridApi);
+    raiseGridRenderingComplete(gridApi);
+  }, [options.id]);
+  useEffect(() => {
+    raiseGridRowsRendered(gridApi, pipeline.visibleRows);
+    raiseGridRowsVisibleChanged(gridApi, pipeline.visibleRows);
+    const newHeight = pipeline.displayItems.length * rowSize;
+    if (newHeight !== lastCanvasHeightRef.current) {
+      raiseGridCanvasHeightChanged(gridApi, lastCanvasHeightRef.current, newHeight);
+      lastCanvasHeightRef.current = newHeight;
+    }
+  }, [pipeline, gridApi, rowSize]);
+  useEffect(() => {
+    if (!FEATURE_AUTO_RESIZE || !options.enableAutoResize) return;
+    const container = gridContainerRef.current;
+    if (!container) return;
+    const observer = observeGridHostSize(container, ({ height: nextHeight, width: nextWidth }) => {
+      if (nextHeight === lastGridHeightRef.current && nextWidth === lastGridWidthRef.current) return;
+      raiseGridDimensionChanged(gridApi, lastGridHeightRef.current, lastGridWidthRef.current, nextHeight, nextWidth);
+      lastGridHeightRef.current = nextHeight;
+      lastGridWidthRef.current = nextWidth;
+      if (!options.viewportHeight && nextHeight > 0) {
+        setAutoViewportHeight(nextHeight);
+      }
+    });
+    if (!observer) return;
+    return () => observer.disconnect();
+  }, [options.enableAutoResize, options.viewportHeight, gridApi]);
+  const totalRows = pipeline.totalItems;
+  const visibleRowCount = pipeline.visibleRows.length;
+  const displayItems = pipeline.displayItems;
+  const virtualizationEnabled = pipeline.virtualizationEnabled;
+  const pipelineMsVal = pipeline.pipelineMs;
+  const paginationCurrentPage = getCurrentPageValueFn();
+  const paginationTotalPages = getTotalPagesValueFn();
+  const paginationSelectedPageSize = effectivePageSizeFn(pipeline.totalItems);
+  const viewportHeightPx = `${options.viewportHeight ?? autoViewportHeight ?? 560}px`;
+  const headerLabelFn = useCallback((column) => coreHeaderLabel(column), []);
+  const isGroupItemFn = useCallback((item) => item.kind === "group", []);
+  const isExpandableItemFn = useCallback((item) => item.kind === "expandable", []);
+  const isRowItemFn = useCallback((item) => item.kind === "row", []);
+  const isOddStripedRowFn = useCallback((item) => item.kind === "row" && item.visibleIndex % 2 === 0, []);
+  const sortDirectionFn = useCallback((column) => {
+    return sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS2.none;
+  }, []);
+  const sortButtonLabelFn = useCallback((column) => {
+    return gridSortButtonLabel(sortDirectionFn(column), labels);
+  }, [labels, sortDirectionFn]);
+  const sortAriaSortFn = useCallback((column) => {
+    return gridSortAriaSort(sortDirectionFn(column));
+  }, [sortDirectionFn]);
+  const groupingButtonLabelFn = useCallback((column) => {
+    return gridGroupingButtonLabel(isGridColumnGrouped(groupByColumnsRef.current, column), labels);
+  }, [labels]);
+  const filterValueFn = useCallback((columnName) => {
+    return activeFiltersRef.current[columnName] ?? "";
+  }, []);
+  const filterPlaceholderFn = useCallback((column) => {
+    return gridFilterPlaceholder(isGridColumnFilterable(optionsRef.current, column), labels);
+  }, [labels]);
+  const isFilterInputDisabledFn = useCallback((column) => {
+    return !isGridColumnFilterable(optionsRef.current, column);
+  }, []);
+  const groupDisclosureLabelFn = useCallback((item) => {
+    return gridGroupDisclosureLabel(item.collapsed, labels);
+  }, [labels]);
+  const cellContextFn = useCallback((row, column) => {
+    return buildGridCellContext(row, column);
+  }, []);
+  const displayValueFn = useCallback((row, column) => {
+    return formatGridCellDisplayValue(cellContextFn(row, column));
+  }, [cellContextFn]);
+  const isFocusedCellFn = useCallback((row, column) => {
+    return isGridCellPosition(focusedCellRef.current, row.id, column.name);
+  }, []);
+  const isEditingCellFn = useCallback((row, column) => {
+    return isGridCellPosition(editingCellRef.current, row.id, column.name);
+  }, []);
+  const editorInputTypeFn = useCallback((column) => {
+    return gridEditorInputType(column);
+  }, []);
+  const expandedContextFn = useCallback((row) => {
+    return {
+      $implicit: row.entity,
+      row: row.entity,
+      rowIndex: row.index,
+      expanded: true,
+      ...optionsRef.current.expandableRowScope ?? {}
+    };
+  }, []);
+  const columnWidthFn = useCallback((column) => gridColumnWidth(column), []);
+  const isColumnSortableFn = useCallback((column) => {
+    return isGridColumnSortable(optionsRef.current, column);
+  }, []);
+  const isColumnFilterableFn = useCallback((column) => {
+    return isGridColumnFilterable(optionsRef.current, column);
+  }, []);
+  const cellIndentFn = useCallback((row, column) => {
+    return gridCellIndent(optionsRef.current, visibleColumnsRef.current, row, column);
+  }, []);
+  const treeToggleLabelFn = useCallback((row) => {
+    return gridTreeToggleLabelForRow(expandedTreeRowsRef.current, row, labels);
+  }, [labels]);
+  const isTreeRowExpandedFn = useCallback((row) => {
+    return isGridTreeRowExpanded(expandedTreeRowsRef.current, row);
+  }, []);
+  const expandToggleLabelFn = useCallback((row) => {
+    return gridExpandToggleLabelForRow(row, labels);
+  }, [labels]);
+  const isGroupedFn = useCallback((column) => {
+    return isGridColumnGrouped(groupByColumnsRef.current, column);
+  }, []);
+  const showTreeToggleFn = useCallback((row, column) => {
+    return shouldShowGridTreeToggle(optionsRef.current, visibleColumnsRef.current, row, column);
+  }, []);
+  const showExpandToggleFn = useCallback((row, column) => {
+    return shouldShowGridExpandToggle(optionsRef.current, visibleColumnsRef.current, column);
+  }, []);
+  const showPaginationControlsFn = useCallback(() => {
+    return FEATURE_PAGINATION && shouldShowGridPaginationControls(optionsRef.current);
+  }, []);
+  const paginationSummaryFn = useCallback(() => {
+    const ti = pipelineRef.current.totalItems;
+    if (ti === 0) return "0-0 of 0";
+    return `${getFirstRowIndexValueFn(ti) + 1}-${getLastRowIndexValueFn(ti) + 1} of ${ti}`;
+  }, [getFirstRowIndexValueFn, getLastRowIndexValueFn]);
+  const pageSizeOptionsFn = useCallback(() => {
+    return optionsRef.current.paginationPageSizes ?? [];
+  }, []);
+  const isGroupingEnabledFn = useCallback(() => {
+    return FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current);
+  }, []);
+  const isFilteringEnabledFn = useCallback(() => {
+    return FEATURE_FILTERING && isGridFilteringEnabled(optionsRef.current);
+  }, []);
+  const toggleSortFn = useCallback((column) => {
+    if (!FEATURE_SORTING || !isGridColumnSortable(optionsRef.current, column)) return;
+    const currentDirection = sortStateRef.current.columnName === column.name ? sortStateRef.current.direction : SORT_DIRECTIONS2.none;
+    const nextDirection = currentDirection === SORT_DIRECTIONS2.none ? SORT_DIRECTIONS2.asc : currentDirection === SORT_DIRECTIONS2.asc ? SORT_DIRECTIONS2.desc : SORT_DIRECTIONS2.none;
+    applyGridSortStateCommand(gridApiRef.current, (state) => setSortState(state), {
+      columnName: nextDirection === SORT_DIRECTIONS2.none ? null : column.name,
+      direction: nextDirection
+    });
+  }, []);
+  const updateFilterFn = useCallback((columnName, value) => {
+    updateGridFilterCommand(
+      gridApiRef.current,
+      (updater) => setActiveFilters((current) => updater(current)),
+      () => activeFiltersRef.current,
+      columnName,
+      value
+    );
+  }, []);
+  const clearAllFiltersFn = useCallback(() => {
+    clearGridFiltersCommand(gridApiRef.current, (filters) => setActiveFilters(filters));
+  }, []);
+  const toggleGroupingFn = useCallback((column, event) => {
+    event?.stopPropagation();
+    if (!(FEATURE_GROUPING && isGridGroupingEnabled(optionsRef.current))) return;
+    const current = groupByColumnsRef.current;
+    const next = current.includes(column.name) ? current.filter((n) => n !== column.name) : [...current, column.name];
+    groupByColumnsRef.current = next;
+    setGroupByColumns(next);
+    gridApiRef.current.core.raise.groupingChanged(next);
+  }, []);
+  const toggleGroupFn = useCallback((item) => {
+    setCollapsedGroups((current) => ({
+      ...current,
+      [item.id]: !current[item.id]
+    }));
+  }, []);
+  const focusCellFn = useCallback((row, column, triggerEvent) => {
+    const nextFocusResult = buildGridFocusCellResult({
+      currentFocusedCell: focusedCellRef.current,
+      currentEditingCell: editingCellRef.current,
+      rowId: row.id,
+      columnName: column.name,
+      shouldEditOnFocus: shouldEditOnFocusFn(column),
+      isCellEditable: isCellEditable(row, column, triggerEvent)
+    });
+    setFocusedCell(nextFocusResult.focusedCell);
+    if (nextFocusResult.shouldBeginEdit) {
+      startCellEditFn(row, column, triggerEvent);
+    }
+  }, [isCellEditable, shouldEditOnFocusFn, startCellEditFn]);
+  const handleCellKeyDownFn = useCallback((row, column, event) => {
+    focusCellFn(row, column, event.nativeEvent);
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        moveFocusFn(row, column, "left", event.nativeEvent);
+        return;
+      case "ArrowRight":
+        event.preventDefault();
+        moveFocusFn(row, column, "right", event.nativeEvent);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        moveFocusFn(row, column, "up", event.nativeEvent);
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        moveFocusFn(row, column, "down", event.nativeEvent);
+        return;
+      case "Tab":
+        event.preventDefault();
+        moveFocusFn(row, column, event.shiftKey ? "left" : "right", event.nativeEvent);
+        return;
+      case "Enter":
+        event.preventDefault();
+        moveFocusFn(row, column, event.shiftKey ? "up" : "down", event.nativeEvent);
+        return;
+      case "F2":
+        event.preventDefault();
+        if (isCellEditable(row, column, event.nativeEvent)) {
+          startCellEditFn(row, column, event.nativeEvent);
+        }
+        return;
+      case "Backspace":
+      case "Delete":
+        if (isCellEditable(row, column, event.nativeEvent)) {
+          event.preventDefault();
+          startCellEditFn(row, column, event.nativeEvent, "");
+        }
+        return;
+      default:
+        break;
+    }
+    if (isPrintableGridKey(event.key, event.ctrlKey, event.metaKey, event.altKey) && isCellEditable(row, column, event.nativeEvent)) {
+      event.preventDefault();
+      startCellEditFn(row, column, event.nativeEvent, event.key);
+    }
+  }, [focusCellFn, moveFocusFn, isCellEditable, startCellEditFn]);
+  const handleCellDoubleClickFn = useCallback((row, column, event) => {
+    focusCellFn(row, column, event.nativeEvent);
+    if (isCellEditable(row, column, event.nativeEvent)) {
+      startCellEditFn(row, column, event.nativeEvent);
+    }
+  }, [focusCellFn, isCellEditable, startCellEditFn]);
+  const updateEditingValueFn = useCallback((value) => {
+    setEditingValue(value);
+  }, []);
+  const handleEditorKeyDownFn = useCallback((event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelCellEditFn();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitCellEditFn(event.shiftKey ? "up" : "down");
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      commitCellEditFn(event.shiftKey ? "left" : "right");
+    }
+  }, [cancelCellEditFn, commitCellEditFn]);
+  const handleEditorBlurFn = useCallback((event) => {
+    const ec = editingCellRef.current;
+    const target = event.target;
+    if (!ec || !target) return;
+    if (target.dataset["rowId"] !== ec.rowId || target.dataset["colName"] !== ec.columnName) return;
+    commitCellEditFn(void 0, false);
+  }, [commitCellEditFn]);
+  const toggleRowExpansionFn = useCallback((row, event) => {
+    event?.stopPropagation();
+    toggleRowExpansionByRefFn(row);
+  }, [toggleRowExpansionByRefFn]);
+  const toggleTreeRowFn = useCallback((row, event) => {
+    event?.stopPropagation();
+    toggleTreeRowByRefFn(row);
+  }, [toggleTreeRowByRefFn]);
+  const moveColumnFn = useCallback((fromIndex, toIndex) => {
+    moveGridColumnCommand(
+      gridApiRef.current,
+      FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      (updater) => setColumnOrder((current) => updater(current)),
+      fromIndex,
+      toIndex
+    );
+  }, []);
+  const nextPageFn = useCallback(() => {
+    seekPageFn(getCurrentPageValueFn() + 1);
+  }, [seekPageFn, getCurrentPageValueFn]);
+  const previousPageFn = useCallback(() => {
+    seekPageFn(getCurrentPageValueFn() - 1);
+  }, [seekPageFn, getCurrentPageValueFn]);
+  const onPageSizeChangeFn = useCallback((value) => {
+    setPaginationPageSizeFn(Number(value));
+  }, [setPaginationPageSizeFn]);
+  const onViewportScrollFn = useCallback((startIndex) => {
+    if (!scrollingRef.current) {
+      scrollingRef.current = true;
+      raiseGridScrollBegin(gridApiRef.current);
+    }
+    if (scrollEndHandleRef.current) {
+      window.clearTimeout(scrollEndHandleRef.current);
+    }
+    scrollEndHandleRef.current = window.setTimeout(() => {
+      scrollingRef.current = false;
+      raiseGridScrollEnd(gridApiRef.current);
+    }, 120);
+    const isInfiniteScrollEnabled = FEATURE_INFINITE_SCROLL && (optionsRef.current.infiniteScrollRowsFromEnd !== void 0 || optionsRef.current.infiniteScrollUp === true || optionsRef.current.infiniteScrollDown !== void 0);
+    maybeRequestInfiniteScrollCommand(gridApiRef.current, {
+      enabled: isInfiniteScrollEnabled,
+      virtualizationEnabled: pipelineRef.current.virtualizationEnabled,
+      state: infiniteScrollStateRef.current,
+      startIndex,
+      visibleRows: pipelineRef.current.visibleRows.length,
+      viewportRows: Math.max(1, Math.ceil((optionsRef.current.viewportHeight ?? 560) / (optionsRef.current.rowHeight ?? 44))),
+      threshold: optionsRef.current.infiniteScrollRowsFromEnd ?? 20,
+      setState: (state) => setInfiniteScrollState(state)
+    });
+  }, []);
+  return {
+    pipeline,
+    visibleColumns,
+    labels,
+    gridTemplateColumns,
+    gridApi,
+    gridContainerRef,
+    activeFilters,
+    groupByColumns,
+    collapsedGroups,
+    sortState,
+    focusedCell,
+    editingCell,
+    editingValue,
+    expandedRows,
+    expandedTreeRows,
+    currentPage,
+    pageSize,
+    benchmarkResult,
+    infiniteScrollState,
+    totalRows,
+    visibleRowCount,
+    displayItems,
+    virtualizationEnabled,
+    pipelineMs: pipelineMsVal,
+    paginationCurrentPage,
+    paginationTotalPages,
+    paginationSelectedPageSize,
+    rowSize,
+    viewportHeightPx,
+    headerLabel: headerLabelFn,
+    isGroupItem: isGroupItemFn,
+    isExpandableItem: isExpandableItemFn,
+    isRowItem: isRowItemFn,
+    isOddStripedRow: isOddStripedRowFn,
+    sortButtonLabel: sortButtonLabelFn,
+    sortAriaSort: sortAriaSortFn,
+    sortDirection: sortDirectionFn,
+    groupingButtonLabel: groupingButtonLabelFn,
+    filterValue: filterValueFn,
+    filterPlaceholder: filterPlaceholderFn,
+    isFilterInputDisabled: isFilterInputDisabledFn,
+    groupDisclosureLabel: groupDisclosureLabelFn,
+    displayValue: displayValueFn,
+    isFocusedCell: isFocusedCellFn,
+    isEditingCell: isEditingCellFn,
+    editorInputType: editorInputTypeFn,
+    cellContext: cellContextFn,
+    expandedContext: expandedContextFn,
+    columnWidth: columnWidthFn,
+    isColumnSortable: isColumnSortableFn,
+    isColumnFilterable: isColumnFilterableFn,
+    cellIndent: cellIndentFn,
+    treeToggleLabel: treeToggleLabelFn,
+    isTreeRowExpanded: isTreeRowExpandedFn,
+    expandToggleLabel: expandToggleLabelFn,
+    isGrouped: isGroupedFn,
+    showTreeToggle: showTreeToggleFn,
+    showExpandToggle: showExpandToggleFn,
+    showPaginationControls: showPaginationControlsFn,
+    paginationSummary: paginationSummaryFn,
+    pageSizeOptions: pageSizeOptionsFn,
+    isCellEditable,
+    shouldEditOnFocus: shouldEditOnFocusFn,
+    sortingFeature: FEATURE_SORTING,
+    filteringFeature: FEATURE_FILTERING,
+    groupingFeature: FEATURE_GROUPING,
+    paginationFeature: FEATURE_PAGINATION,
+    cellEditFeature: FEATURE_CELL_EDIT,
+    expandableFeature: FEATURE_EXPANDABLE,
+    treeViewFeature: FEATURE_TREE_VIEW,
+    infiniteScrollFeature: FEATURE_INFINITE_SCROLL,
+    columnMovingFeature: FEATURE_COLUMN_MOVING,
+    csvExportFeature: FEATURE_CSV_EXPORT,
+    isGroupingEnabled: isGroupingEnabledFn,
+    isFilteringEnabled: isFilteringEnabledFn,
+    toggleSort: toggleSortFn,
+    updateFilter: updateFilterFn,
+    clearAllFilters: clearAllFiltersFn,
+    toggleGrouping: toggleGroupingFn,
+    toggleGroup: toggleGroupFn,
+    focusCell: focusCellFn,
+    handleCellKeyDown: handleCellKeyDownFn,
+    handleCellDoubleClick: handleCellDoubleClickFn,
+    updateEditingValue: updateEditingValueFn,
+    handleEditorKeyDown: handleEditorKeyDownFn,
+    handleEditorBlur: handleEditorBlurFn,
+    toggleRowExpansion: toggleRowExpansionFn,
+    toggleTreeRow: toggleTreeRowFn,
+    moveColumn: moveColumnFn,
+    nextPage: nextPageFn,
+    previousPage: previousPageFn,
+    onPageSizeChange: onPageSizeChangeFn,
+    runBenchmark: runBenchmarkFn,
+    exportCsv: exportCsvFn,
+    onViewportScroll: onViewportScrollFn
+  };
+}
+
+// src/useVirtualScroll.ts
+import { useCallback as useCallback2, useRef as useRef2, useState as useState2 } from "react";
+function useVirtualScroll(options) {
+  const { itemCount, itemSize, viewportHeight, overscan = 3 } = options;
+  const [scrollTop, setScrollTop] = useState2(0);
+  const viewportRef = useRef2(null);
+  const rawStart = Math.floor(scrollTop / itemSize) - overscan;
+  const start = Math.max(0, rawStart);
+  const rawEnd = rawStart + Math.ceil(viewportHeight / itemSize) + 2 * overscan;
+  const end = Math.min(itemCount, rawEnd);
+  const totalHeight = itemCount * itemSize;
+  const offsetY = start * itemSize;
+  const onScroll = useCallback2((event) => {
+    setScrollTop(event.currentTarget.scrollTop);
+  }, []);
+  return {
+    visibleRange: { start, end },
+    totalHeight,
+    offsetY,
+    onScroll,
+    viewportRef,
+    scrollTop
+  };
+}
+
+// src/UiGrid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, className }) {
+  const state = useGridState(options, onRegisterApi);
+  const {
+    pipeline,
+    visibleColumns,
+    labels,
+    gridTemplateColumns,
+    gridContainerRef,
+    displayItems,
+    virtualizationEnabled,
+    pipelineMs,
+    visibleRowCount,
+    totalRows,
+    benchmarkResult,
+    rowSize,
+    viewportHeightPx,
+    editingValue,
+    sortingFeature,
+    filteringFeature,
+    groupingFeature,
+    paginationFeature,
+    cellEditFeature,
+    expandableFeature,
+    treeViewFeature,
+    csvExportFeature,
+    paginationCurrentPage,
+    paginationTotalPages,
+    paginationSelectedPageSize
+  } = state;
+  const virtualScroll = useVirtualScroll({
+    itemCount: displayItems.length,
+    itemSize: rowSize,
+    viewportHeight: options.viewportHeight ?? 560,
+    overscan: 3
+  });
+  const itemsToRender = virtualizationEnabled ? displayItems.slice(virtualScroll.visibleRange.start, virtualScroll.visibleRange.end) : displayItems;
+  const onViewportScroll = (event) => {
+    virtualScroll.onScroll(event);
+    const startIndex = Math.floor(event.currentTarget.scrollTop / rowSize);
+    state.onViewportScroll(startIndex);
+  };
+  function renderDisplayItem(item) {
+    if (groupingFeature && state.isGroupItem(item)) {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "group-row ui-grid-row ui-grid-group-row",
+          "data-part": "group-row",
+          role: "row",
+          "aria-expanded": !item.collapsed,
+          style: { gridColumn: "1 / -1", paddingInlineStart: `${item.depth * 1.25 + 1}rem` },
+          onClick: () => state.toggleGroup(item),
+          children: [
+            /* @__PURE__ */ jsxs("strong", { children: [
+              item.field,
+              ": ",
+              item.label
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              item.count,
+              " ",
+              labels.groupRowsSuffix
+            ] }),
+            /* @__PURE__ */ jsx("svg", { className: "toggle-icon group-disclosure-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: item.collapsed ? "M10 7l5 5-5 5z" : "M7 10l5 5 5-5z" }) }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupDisclosureLabel(item) })
+          ]
+        },
+        item.id
+      );
+    }
+    if (expandableFeature && state.isExpandableItem(item)) {
+      const ctx = state.expandedContext(item.row);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "expandable-row ui-grid-row ui-grid-expandable-row",
+          "data-part": "expandable-row",
+          style: { gridColumn: "1 / -1", minHeight: `${item.row.expandedRowHeight}px` },
+          children: expandableRenderer?.(ctx)
+        },
+        item.id
+      );
+    }
+    if (item.kind !== "row") return null;
+    const rowItem = item;
+    return visibleColumns.map((column) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cellClassName(rowItem, column),
+        "data-part": "body-cell",
+        role: "gridcell",
+        tabIndex: 0,
+        "data-row-id": rowItem.row.id,
+        "data-col-name": column.name,
+        onFocus: () => state.focusCell(rowItem.row, column),
+        onClick: () => state.focusCell(rowItem.row, column),
+        onDoubleClick: (e) => state.handleCellDoubleClick(rowItem.row, column, e),
+        onKeyDown: (e) => state.handleCellKeyDown(rowItem.row, column, e),
+        children: /* @__PURE__ */ jsxs("div", { className: "cell-shell", style: { paddingInlineStart: state.cellIndent(rowItem.row, column) }, children: [
+          treeViewFeature && state.showTreeToggle(rowItem.row, column) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "row-toggle row-toggle-tree",
+              "data-part": "tree-toggle",
+              "aria-label": state.treeToggleLabel(rowItem.row),
+              "aria-expanded": state.isTreeRowExpanded(rowItem.row),
+              onClick: (e) => state.toggleTreeRow(rowItem.row, e),
+              children: /* @__PURE__ */ jsx("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: state.isTreeRowExpanded(rowItem.row) ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
+            }
+          ),
+          expandableFeature && state.showExpandToggle(rowItem.row, column) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "row-toggle row-toggle-expand",
+              "data-part": "expand-toggle",
+              "aria-label": state.expandToggleLabel(rowItem.row),
+              "aria-expanded": rowItem.row.expanded,
+              onClick: (e) => state.toggleRowExpansion(rowItem.row, e),
+              children: /* @__PURE__ */ jsx("svg", { className: "toggle-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: rowItem.row.expanded ? "M7 10l5 5 5-5z" : "M10 7l5 5-5 5z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "cell-value", children: cellEditFeature && state.isEditingCell(rowItem.row, column) ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "cell-editor",
+              "data-row-id": rowItem.row.id,
+              "data-col-name": column.name,
+              "aria-label": state.headerLabel(column),
+              type: state.editorInputType(column),
+              defaultValue: editingValue,
+              onChange: (e) => state.updateEditingValue(e.target.value),
+              onKeyDown: (e) => state.handleEditorKeyDown(e),
+              onBlur: (e) => state.handleEditorBlur(e)
+            }
+          ) : cellRenderer ? cellRenderer(state.cellContext(rowItem.row, column)) ?? state.displayValue(rowItem.row, column) : state.displayValue(rowItem.row, column) })
+        ] })
+      },
+      `${rowItem.row.id}-${column.name}`
+    ));
+  }
+  function cellClassName(item, column) {
+    const classes = ["body-cell", "ui-grid-cell"];
+    if (state.isOddStripedRow(item)) classes.push("body-cell-odd");
+    if (column.align === "center") classes.push("align-center");
+    if (column.align === "end") classes.push("align-end");
+    if (state.isFocusedCell(item.row, column)) classes.push("cell-focused");
+    if (cellEditFeature && state.isEditingCell(item.row, column)) classes.push("cell-editing");
+    return classes.join(" ");
+  }
+  function renderSortIcon(column) {
+    const direction = state.sortDirection(column);
+    switch (direction) {
+      case "asc":
+        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M12 5l-6 6h4v8h4v-8h4z" }) });
+      case "desc":
+        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M12 19l6-6h-4V5h-4v8H6z" }) });
+      default:
+        return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M7 6h10v2H7V6Zm0 5h7v2H7v-2Zm0 5h4v2H7v-2Z" }) });
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: `ui-grid-host ${className ?? ""}`, ref: gridContainerRef, children: /* @__PURE__ */ jsxs("section", { className: "grid-shell ui-grid-shell", "data-part": "shell", children: [
+    /* @__PURE__ */ jsxs("header", { className: "grid-hero ui-grid-toolbar-shell", "data-part": "hero", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "eyebrow", children: "React wrapper for @ornery/ui-grid" }),
+        /* @__PURE__ */ jsx("h1", { children: options.title ?? "UI Grid" }),
+        /* @__PURE__ */ jsx("p", { className: "deck", children: "Familiar `gridOptions` and `onRegisterApi`, built with React hooks, virtualization, grouping, sorting, filtering, and column ordering." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "hero-actions", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "action action-secondary", "data-part": "action benchmark-action", onClick: () => state.runBenchmark(), children: "Benchmark" }),
+        csvExportFeature && /* @__PURE__ */ jsx("button", { type: "button", className: "action action-secondary", "data-part": "action export-action", onClick: () => state.exportCsv(), children: "Export CSV" }),
+        /* @__PURE__ */ jsxs("div", { className: "stats-card", "data-part": "stats-card", children: [
+          /* @__PURE__ */ jsx("span", { children: visibleRowCount }),
+          /* @__PURE__ */ jsx("small", { children: labels.statsVisibleRows })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "metrics-strip", "data-part": "metrics", "aria-label": "Grid performance metrics", children: [
+      /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          pipelineMs.toFixed(2),
+          " ms"
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: "pipeline" })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
+        /* @__PURE__ */ jsx("strong", { children: virtualizationEnabled ? "On" : "Off" }),
+        /* @__PURE__ */ jsx("span", { children: "virtualization" })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
+        /* @__PURE__ */ jsx("strong", { children: state.groupByColumns.length }),
+        /* @__PURE__ */ jsx("span", { children: "group columns" })
+      ] }),
+      /* @__PURE__ */ jsxs("article", { "data-part": "metric-card", children: [
+        /* @__PURE__ */ jsx("strong", { children: benchmarkResult?.averageMs?.toFixed(2) || "\u2014" }),
+        /* @__PURE__ */ jsx("span", { children: "benchmark avg" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("section", { className: "grid-frame ui-grid", "data-part": "grid-frame", role: "grid", "aria-label": options.title ?? "Data grid", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid-toolbar", "data-part": "grid-toolbar", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("strong", { children: visibleRowCount }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            labels.toolbarOf,
+            " ",
+            totalRows,
+            " ",
+            labels.toolbarRows
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { children: "`gridOptions` compatibility layer: sorting, filtering, grouping, column moving, templating, and virtualized rendering." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid-table ui-grid-contents-wrapper", "data-part": "grid-table", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "header-grid ui-grid-header ui-grid-header-canvas",
+            "data-part": "header",
+            role: "row",
+            style: { gridTemplateColumns },
+            children: visibleColumns.map((column) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== "none" ? " is-active" : ""}`,
+                "data-part": "header-cell",
+                role: "columnheader",
+                "aria-sort": sortingFeature ? state.sortAriaSort(column) : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "header-label", children: state.headerLabel(column) }),
+                  /* @__PURE__ */ jsxs("div", { className: "header-actions", children: [
+                    sortingFeature && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: `header-action${!state.isColumnSortable(column) ? " header-action-disabled" : ""}`,
+                        disabled: !state.isColumnSortable(column),
+                        "aria-label": state.sortButtonLabel(column),
+                        title: state.sortButtonLabel(column),
+                        onClick: () => state.toggleSort(column),
+                        children: [
+                          renderSortIcon(column),
+                          /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.sortButtonLabel(column) })
+                        ]
+                      }
+                    ),
+                    groupingFeature && state.isGroupingEnabled() && column.enableGrouping !== false && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        className: `chip-action${state.isGrouped(column) ? " chip-action-active" : ""}`,
+                        "data-part": "group-toggle",
+                        "aria-label": state.groupingButtonLabel(column),
+                        title: state.groupingButtonLabel(column),
+                        onClick: (e) => state.toggleGrouping(column, e),
+                        children: [
+                          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M4 6h8v4H4V6Zm0 8h8v4H4v-4Zm10-8h6v4h-6V6Zm0 8h6v4h-6v-4Z" }) }),
+                          /* @__PURE__ */ jsx("span", { className: "sr-only ui-grid-sr-only", children: state.groupingButtonLabel(column) })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              },
+              column.name
+            ))
+          }
+        ),
+        filteringFeature && state.isFilteringEnabled() && /* @__PURE__ */ jsx("div", { className: "filter-grid ui-grid-header", "data-part": "filters", style: { gridTemplateColumns }, children: visibleColumns.map((column) => /* @__PURE__ */ jsxs("label", { className: "filter-cell ui-grid-filter-container", "data-part": "filter-cell", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only ui-grid-sr-only", children: [
+            labels.filterColumn,
+            " ",
+            state.headerLabel(column)
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "ui-grid-filter-input",
+              type: "text",
+              defaultValue: state.filterValue(column.name),
+              placeholder: state.filterPlaceholder(column),
+              disabled: state.isFilterInputDisabled(column),
+              onChange: (e) => state.updateFilter(column.name, e.target.value)
+            }
+          )
+        ] }, column.name)) }),
+        displayItems.length > 0 ? virtualizationEnabled ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid-viewport ui-grid-viewport",
+            "data-part": "viewport",
+            ref: virtualScroll.viewportRef,
+            style: { height: viewportHeightPx, overflow: "auto", position: "relative" },
+            onScroll: onViewportScroll,
+            children: /* @__PURE__ */ jsx("div", { style: { height: `${virtualScroll.totalHeight}px`, position: "relative" }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "body-grid ui-grid-canvas",
+                "data-part": "body",
+                role: "rowgroup",
+                style: {
+                  gridTemplateColumns,
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  transform: `translateY(${virtualScroll.offsetY}px)`
+                },
+                children: itemsToRender.map(renderDisplayItem)
+              }
+            ) })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "body-grid ui-grid-canvas",
+            "data-part": "body",
+            role: "rowgroup",
+            style: { gridTemplateColumns },
+            children: displayItems.map(renderDisplayItem)
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "empty-state ui-grid-no-row-overlay", "data-part": "empty-state", children: [
+          /* @__PURE__ */ jsx("strong", { children: options.emptyMessage ?? labels.emptyHeading }),
+          /* @__PURE__ */ jsx("p", { children: labels.emptyDescription })
+        ] }),
+        paginationFeature && state.showPaginationControls() && /* @__PURE__ */ jsxs("footer", { className: "pagination-bar ui-grid-pagination", "data-part": "pagination", role: "navigation", "aria-label": labels.paginationPage, children: [
+          /* @__PURE__ */ jsx("p", { children: state.paginationSummary() }),
+          /* @__PURE__ */ jsxs("div", { className: "pagination-controls", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "action action-secondary pagination-button",
+                "aria-label": labels.paginationPrevious,
+                disabled: paginationCurrentPage <= 1,
+                onClick: () => state.previousPage(),
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationPrevious })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { children: [
+              labels.paginationPage,
+              " ",
+              paginationCurrentPage,
+              " ",
+              labels.paginationOf,
+              " ",
+              paginationTotalPages
+            ] }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "action action-secondary pagination-button",
+                "aria-label": labels.paginationNext,
+                disabled: paginationCurrentPage >= paginationTotalPages,
+                onClick: () => state.nextPage(),
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "pagination-icon", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: false, children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationNext })
+                ]
+              }
+            ),
+            state.pageSizeOptions().length > 0 && /* @__PURE__ */ jsxs("label", { className: "pagination-size", children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.paginationRows }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  "aria-label": labels.paginationRows,
+                  value: paginationSelectedPageSize,
+                  onChange: (e) => state.onPageSizeChange(e.target.value),
+                  children: state.pageSizeOptions().map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/index.ts
+import { DEFAULT_GRID_LABELS } from "@ornery/ui-grid";
+export {
+  DEFAULT_GRID_LABELS,
+  UiGrid,
+  useGridState,
+  useVirtualScroll
+};