@gridstorm/react 0.1.2

package/dist/index.cjs

@@ -0,0 +1,1079 @@
+'use strict';
+
+var react = require('react');
+var core = require('@gridstorm/core');
+var domRenderer = require('@gridstorm/dom-renderer');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/GridStorm.tsx
+var GridContext = react.createContext(null);
+function useGridContext() {
+  const ctx = react.useContext(GridContext);
+  if (!ctx) {
+    throw new Error(
+      "[GridStorm] Hook must be used within a <GridStorm> component."
+    );
+  }
+  return ctx;
+}
+
+// src/renderers/ReactCellRenderer.ts
+var REACT_CELL_RENDERER = /* @__PURE__ */ Symbol.for("gridstorm:reactCellRenderer");
+function reactCellRenderer(Component2) {
+  const fn = () => "";
+  fn[REACT_CELL_RENDERER] = Component2;
+  return fn;
+}
+function isReactCellRenderer(fn) {
+  return typeof fn === "function" && REACT_CELL_RENDERER in fn;
+}
+function getReactCellComponent(fn) {
+  if (isReactCellRenderer(fn)) {
+    return fn[REACT_CELL_RENDERER];
+  }
+  return null;
+}
+
+// src/renderers/ReactHeaderRenderer.ts
+var REACT_HEADER_RENDERER = /* @__PURE__ */ Symbol.for("gridstorm:reactHeaderRenderer");
+function reactHeaderRenderer(Component2) {
+  const fn = () => "";
+  fn[REACT_HEADER_RENDERER] = Component2;
+  return fn;
+}
+function isReactHeaderRenderer(fn) {
+  return typeof fn === "function" && REACT_HEADER_RENDERER in fn;
+}
+function getReactHeaderComponent(fn) {
+  if (isReactHeaderRenderer(fn)) {
+    return fn[REACT_HEADER_RENDERER];
+  }
+  return null;
+}
+function CellRendererPortalInner(props) {
+  const { Component: Component2, rendererProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...rendererProps });
+}
+var CellRendererPortal = react.memo(
+  CellRendererPortalInner,
+  (prev, next) => prev.nodeVersion === next.nodeVersion && prev.rendererProps.value === next.rendererProps.value && prev.rendererProps.rowIndex === next.rendererProps.rowIndex && prev.rendererProps.colId === next.rendererProps.colId
+);
+function CellEditorPortal(props) {
+  const { state, api, engine, EditorComponent, editorParams, gridRootRect } = props;
+  const { editing, cellRect } = state;
+  const [value, setValue] = react.useState(editing.value);
+  const containerRef = react.useRef(null);
+  const onValueChange = react.useCallback(
+    (newValue) => {
+      setValue(newValue);
+      engine.commandBus.dispatch("editing:setValue", { value: newValue });
+    },
+    [engine]
+  );
+  const stopEditing = react.useCallback(
+    (cancel) => {
+      api.stopEditing(cancel);
+    },
+    [api]
+  );
+  react.useEffect(() => {
+    requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const focusable = el.querySelector(
+        "input, textarea, select, [tabindex]"
+      );
+      focusable?.focus();
+    });
+  }, []);
+  const column = engine.store.getState().columns.find((c) => c.colId === editing.colId);
+  const node = engine.store.getState().rowNodes.get(editing.rowId);
+  const top = cellRect.top - gridRootRect.top;
+  const left = cellRect.left - gridRootRect.left;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "gs-editor-portal",
+      style: {
+        position: "absolute",
+        top,
+        left,
+        width: cellRect.width,
+        height: cellRect.height,
+        zIndex: 10,
+        boxSizing: "border-box",
+        background: "var(--gs-color-cell-editing-bg, #fff)",
+        border: "2px solid var(--gs-color-cell-editing-border, #2196f3)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        EditorComponent,
+        {
+          value,
+          data: node?.data,
+          colId: editing.colId,
+          rowId: editing.rowId,
+          column,
+          editorParams,
+          onValueChange,
+          stopEditing,
+          api
+        }
+      )
+    }
+  );
+}
+function ContextMenuPortal(props) {
+  const { x, y, menuProps, Component: Component2 } = props;
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        menuProps.closeMenu();
+      }
+    };
+    const id = setTimeout(() => {
+      document.addEventListener("mousedown", handler);
+    }, 0);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("mousedown", handler);
+    };
+  }, [menuProps]);
+  react.useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") menuProps.closeMenu();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [menuProps]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: "gs-context-menu-portal",
+      style: {
+        position: "absolute",
+        top: y,
+        left: x,
+        zIndex: 100,
+        minWidth: 160
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...menuProps })
+    }
+  );
+}
+var WRAPPER_ATTR = "data-gs-portal";
+function getOrCreateWrapper(cell) {
+  for (let i = 0; i < cell.children.length; i++) {
+    const child = cell.children[i];
+    if (child.hasAttribute(WRAPPER_ATTR)) {
+      return child;
+    }
+  }
+  const wrapper = document.createElement("div");
+  wrapper.setAttribute(WRAPPER_ATTR, "");
+  wrapper.style.display = "contents";
+  cell.appendChild(wrapper);
+  return wrapper;
+}
+function PortalManager(props) {
+  const { engine, api, columns, rootElement, contextMenuComponent } = props;
+  const [cellPortals, setCellPortals] = react.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [headerPortals, setHeaderPortals] = react.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [editorPortal, setEditorPortal] = react.useState(null);
+  const [contextMenu, setContextMenu] = react.useState(null);
+  const columnsRef = react.useRef(columns);
+  columnsRef.current = columns;
+  const engineRef = react.useRef(engine);
+  engineRef.current = engine;
+  const scanningRef = react.useRef(false);
+  const reactCellRendererMap = react.useRef(/* @__PURE__ */ new Map());
+  const reactHeaderRendererMap = react.useRef(/* @__PURE__ */ new Map());
+  const reactEditorMap = react.useRef(/* @__PURE__ */ new Map());
+  react.useEffect(() => {
+    const cellMap = /* @__PURE__ */ new Map();
+    const headerMap = /* @__PURE__ */ new Map();
+    const editorMap = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      const colId = col.colId ?? col.field ?? "";
+      if (col.cellRenderer && isReactCellRenderer(col.cellRenderer)) {
+        cellMap.set(colId, getReactCellComponent(col.cellRenderer));
+      }
+      if (col.headerRenderer && isReactHeaderRenderer(col.headerRenderer)) {
+        headerMap.set(colId, getReactHeaderComponent(col.headerRenderer));
+      }
+      if (col.cellEditorComponent) {
+        editorMap.set(colId, col.cellEditorComponent);
+      }
+    }
+    reactCellRendererMap.current = cellMap;
+    reactHeaderRendererMap.current = headerMap;
+    reactEditorMap.current = editorMap;
+  }, [columns]);
+  const buildCellProps = react.useCallback(
+    (node, col, rowIndex) => {
+      const colDef = col.originalDef;
+      let value;
+      if (colDef.valueGetter) {
+        value = colDef.valueGetter({
+          data: node.data,
+          node,
+          colDef,
+          colId: col.colId
+        });
+      } else {
+        value = core.getValueFromData(node.data, col.field);
+      }
+      let formattedValue = value != null ? String(value) : "";
+      if (colDef.valueFormatter) {
+        formattedValue = colDef.valueFormatter({ value, data: node.data, node, colDef });
+      }
+      return {
+        value,
+        formattedValue,
+        data: node.data,
+        node,
+        colDef,
+        colId: col.colId,
+        rowIndex,
+        api
+      };
+    },
+    [api]
+  );
+  const scanVisibleRows = react.useCallback(() => {
+    if (!rootElement || scanningRef.current) return;
+    scanningRef.current = true;
+    try {
+      const bodyContainer = rootElement.querySelector(".gs-body");
+      if (!bodyContainer) return;
+      const state = engineRef.current.store.getState();
+      const cellRenderers = reactCellRendererMap.current;
+      if (cellRenderers.size === 0) return;
+      const newPortals = /* @__PURE__ */ new Map();
+      const rowElements = bodyContainer.querySelectorAll(".gs-row");
+      const rowIdIndexMap = /* @__PURE__ */ new Map();
+      for (let i = 0; i < state.displayedRowIds.length; i++) {
+        rowIdIndexMap.set(state.displayedRowIds[i], i);
+      }
+      const columnMap = /* @__PURE__ */ new Map();
+      for (const col of state.columns) {
+        columnMap.set(col.colId, col);
+      }
+      for (const rowEl of rowElements) {
+        const rowId = rowEl.getAttribute("data-row-id");
+        if (!rowId) continue;
+        const node = state.rowNodes.get(rowId);
+        if (!node) continue;
+        const cells = rowEl.querySelectorAll(".gs-cell");
+        for (const cellEl of cells) {
+          const colId = cellEl.getAttribute("data-col-id");
+          if (!colId || !cellRenderers.has(colId)) continue;
+          const key = `${rowId}:${colId}`;
+          const Component2 = cellRenderers.get(colId);
+          const colState = columnMap.get(colId);
+          if (!colState) continue;
+          const rowIndex = rowIdIndexMap.get(rowId) ?? -1;
+          const rendererProps = buildCellProps(node, colState, rowIndex);
+          const wrapper = getOrCreateWrapper(cellEl);
+          newPortals.set(key, {
+            key,
+            container: wrapper,
+            component: Component2,
+            props: rendererProps,
+            nodeVersion: node.version
+          });
+        }
+      }
+      setCellPortals(newPortals);
+    } finally {
+      scanningRef.current = false;
+    }
+  }, [rootElement, buildCellProps]);
+  const scanHeaderCells = react.useCallback(() => {
+    if (!rootElement) return;
+    const headerRenderers = reactHeaderRendererMap.current;
+    if (headerRenderers.size === 0) return;
+    const headerContainer = rootElement.querySelector(".gs-header");
+    if (!headerContainer) return;
+    const state = engineRef.current.store.getState();
+    const newPortals = /* @__PURE__ */ new Map();
+    const headerCells = headerContainer.querySelectorAll(".gs-header-cell");
+    for (const cellEl of headerCells) {
+      const colId = cellEl.getAttribute("data-col-id");
+      if (!colId || !headerRenderers.has(colId)) continue;
+      const Component2 = headerRenderers.get(colId);
+      const colState = state.columns.find((c) => c.colId === colId);
+      if (!colState) continue;
+      const sortItem = state.sortModel.find((s) => s.colId === colId);
+      const headerProps = {
+        colDef: colState.originalDef,
+        colId,
+        displayName: colState.headerName,
+        sortDirection: sortItem?.sort ?? null,
+        sortIndex: colState.sortIndex,
+        api,
+        onSortRequested: (multiSort) => {
+          engineRef.current.commandBus.dispatch("sort:toggle", { colId, multiSort });
+        }
+      };
+      const wrapper = getOrCreateWrapper(cellEl);
+      newPortals.set(colId, {
+        key: colId,
+        container: wrapper,
+        element: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...headerProps })
+      });
+    }
+    setHeaderPortals(newPortals);
+  }, [rootElement, api]);
+  react.useEffect(() => {
+    if (!rootElement) return;
+    const bodyContainer = rootElement.querySelector(".gs-body");
+    if (!bodyContainer) return;
+    const observer = new MutationObserver(() => {
+      scanVisibleRows();
+    });
+    observer.observe(bodyContainer, { childList: true });
+    scanVisibleRows();
+    scanHeaderCells();
+    return () => observer.disconnect();
+  }, [rootElement, scanVisibleRows, scanHeaderCells]);
+  const getVersionSnapshot = react.useCallback(() => engine.store.getVersion(), [engine]);
+  const subscribeStore = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const stateVersion = react.useSyncExternalStore(
+    subscribeStore,
+    getVersionSnapshot,
+    getVersionSnapshot
+  );
+  react.useEffect(() => {
+    scanVisibleRows();
+  }, [stateVersion, scanVisibleRows]);
+  react.useEffect(() => {
+    const unsubs = [
+      engine.eventBus.on("column:sort:changed", () => {
+        requestAnimationFrame(() => scanHeaderCells());
+      }),
+      engine.eventBus.on("columns:changed", () => {
+        requestAnimationFrame(() => scanHeaderCells());
+      })
+    ];
+    return () => unsubs.forEach((u) => u());
+  }, [engine, scanHeaderCells]);
+  react.useEffect(() => {
+    const unsubStart = engine.eventBus.on(
+      "cell:editingStarted",
+      (event) => {
+        const { node, colId } = event;
+        const editorComponent = reactEditorMap.current.get(colId);
+        if (!editorComponent || !rootElement) return;
+        const cellEl = rootElement.querySelector(
+          `.gs-row[data-row-id="${CSS.escape(node.id)}"] .gs-cell[data-col-id="${CSS.escape(colId)}"]`
+        );
+        if (!cellEl) return;
+        const state = engine.store.getState();
+        const editing = state.editing;
+        if (!editing) return;
+        setEditorPortal({
+          editing,
+          cellElement: cellEl,
+          cellRect: cellEl.getBoundingClientRect()
+        });
+      }
+    );
+    const unsubStop = engine.eventBus.on("cell:editingStopped", () => {
+      setEditorPortal(null);
+    });
+    return () => {
+      unsubStart();
+      unsubStop();
+    };
+  }, [engine, rootElement]);
+  react.useEffect(() => {
+    if (!rootElement || !contextMenuComponent) return;
+    const handler = (e) => {
+      e.preventDefault();
+      const target = e.target;
+      const cellEl = target.closest(".gs-cell");
+      const rowEl = target.closest(".gs-row");
+      if (!cellEl || !rowEl) return;
+      const rowId = rowEl.getAttribute("data-row-id");
+      const colId = cellEl.getAttribute("data-col-id");
+      if (!rowId || !colId) return;
+      const state = engine.store.getState();
+      const node = state.rowNodes.get(rowId);
+      if (!node) return;
+      const colState = state.columns.find((c) => c.colId === colId);
+      const value = colState ? core.getValueFromData(node.data, colState.field) : void 0;
+      const rootRect = rootElement.getBoundingClientRect();
+      const rowIndex = state.displayedRowIds.indexOf(rowId);
+      setContextMenu({
+        x: e.clientX - rootRect.left,
+        y: e.clientY - rootRect.top,
+        menuProps: {
+          position: { rowIndex, colId },
+          node,
+          colId,
+          value,
+          api,
+          closeMenu: () => setContextMenu(null)
+        }
+      });
+    };
+    rootElement.addEventListener("contextmenu", handler);
+    return () => rootElement.removeEventListener("contextmenu", handler);
+  }, [rootElement, contextMenuComponent, api, engine]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    Array.from(cellPortals.values()).map(
+      (entry) => reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CellRendererPortal,
+          {
+            Component: entry.component,
+            rendererProps: entry.props,
+            nodeVersion: entry.nodeVersion
+          },
+          entry.key
+        ),
+        entry.container,
+        entry.key
+      )
+    ),
+    Array.from(headerPortals.values()).map(
+      (entry) => reactDom.createPortal(entry.element, entry.container, entry.key)
+    ),
+    editorPortal && rootElement && (() => {
+      const editorComponent = reactEditorMap.current.get(editorPortal.editing.colId);
+      if (!editorComponent) return null;
+      const colDef = columnsRef.current.find(
+        (c) => (c.colId ?? c.field) === editorPortal.editing.colId
+      );
+      return reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CellEditorPortal,
+          {
+            state: editorPortal,
+            api,
+            engine,
+            EditorComponent: editorComponent,
+            editorParams: colDef?.cellEditorParams ?? {},
+            gridRootRect: rootElement.getBoundingClientRect()
+          }
+        ),
+        rootElement,
+        "gs-editor"
+      );
+    })(),
+    contextMenu && contextMenuComponent && rootElement && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ContextMenuPortal,
+        {
+          x: contextMenu.x,
+          y: contextMenu.y,
+          menuProps: contextMenu.menuProps,
+          Component: contextMenuComponent
+        }
+      ),
+      rootElement,
+      "gs-context-menu"
+    )
+  ] });
+}
+var GridErrorBoundary = class extends react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[GridStorm] Rendering error:", error, errorInfo.componentStack);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return null;
+    }
+    return this.props.children;
+  }
+};
+function useGridEngine(config) {
+  const [engine, setEngine] = react.useState(null);
+  const configRef = react.useRef(config);
+  configRef.current = config;
+  const rowDataMountedRef = react.useRef(false);
+  const columnsMountedRef = react.useRef(false);
+  react.useEffect(() => {
+    const eng = core.createGrid(configRef.current);
+    setEngine(eng);
+    rowDataMountedRef.current = false;
+    columnsMountedRef.current = false;
+    return () => {
+      eng.destroy();
+      setEngine(null);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!engine) return;
+    if (!rowDataMountedRef.current) {
+      rowDataMountedRef.current = true;
+      return;
+    }
+    if (config.rowData) {
+      engine.api.setRowData(config.rowData);
+    }
+  }, [config.rowData, engine]);
+  react.useEffect(() => {
+    if (!engine) return;
+    if (!columnsMountedRef.current) {
+      columnsMountedRef.current = true;
+      return;
+    }
+    if (config.columns) {
+      engine.api.setColumnDefs(config.columns);
+    }
+  }, [config.columns, engine]);
+  return engine;
+}
+function processColumns(reactColumns) {
+  return reactColumns.map((col) => {
+    const coreDef = { ...col };
+    delete coreDef.cellEditorComponent;
+    return coreDef;
+  });
+}
+function GridStorm(props) {
+  const {
+    // GridConfig props
+    columns: reactColumns,
+    rowData,
+    dataSource,
+    rowModelType,
+    getRowId,
+    plugins,
+    defaultColDef,
+    rowHeight,
+    headerHeight,
+    domLayout,
+    pinnedTopRowData,
+    pinnedBottomRowData,
+    suppressScrollX,
+    suppressScrollY,
+    rowSelection,
+    editType,
+    undoRedoCellEditing,
+    pagination,
+    paginationPageSize,
+    animateRows,
+    ariaLabel,
+    locale,
+    theme,
+    // Controlled state props
+    sortModel: controlledSortModel,
+    onSortModelChange,
+    filterModel: controlledFilterModel,
+    onFilterModelChange,
+    selectedRowIds: controlledSelectedRowIds,
+    onSelectedRowIdsChange,
+    currentPage: controlledCurrentPage,
+    onCurrentPageChange,
+    // Event props
+    onGridReady,
+    onRowDataChanged,
+    onSelectionChanged,
+    onSortChanged,
+    onFilterChanged,
+    onCellValueChanged,
+    onCellClicked,
+    onCellDoubleClicked,
+    onRowClicked,
+    onCellEditingStarted,
+    onCellEditingStopped,
+    onPaginationChanged,
+    onColumnResized,
+    // Renderer config props
+    enableCellEditing,
+    enableGrouping,
+    groupIndent,
+    checkboxSelection,
+    checkboxColumnWidth,
+    floatingFilter,
+    floatingFilterDebounce,
+    enablePagination,
+    pageSizeOptions,
+    // Component props
+    height = 400,
+    width = "100%",
+    containerClass,
+    containerStyle,
+    contextMenu,
+    children
+    // Rest are ignored (no HTML div passthrough to avoid TS errors)
+  } = props;
+  const containerRef = react.useRef(null);
+  const rendererRef = react.useRef(null);
+  const [rootElement, setRootElement] = react.useState(null);
+  const coreColumns = react.useMemo(
+    () => processColumns(reactColumns),
+    [reactColumns]
+  );
+  const config = react.useMemo(
+    () => ({
+      columns: coreColumns,
+      rowData,
+      dataSource,
+      rowModelType,
+      getRowId,
+      plugins,
+      defaultColDef,
+      rowHeight,
+      headerHeight,
+      domLayout,
+      pinnedTopRowData,
+      pinnedBottomRowData,
+      suppressScrollX,
+      suppressScrollY,
+      rowSelection,
+      editType,
+      undoRedoCellEditing,
+      pagination,
+      paginationPageSize,
+      animateRows,
+      ariaLabel,
+      locale,
+      theme
+    }),
+    // Only recreate config on structural changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [coreColumns, plugins, rowModelType, getRowId]
+  );
+  const engine = useGridEngine(config);
+  react.useEffect(() => {
+    if (!containerRef.current || !engine) return;
+    const renderer = new domRenderer.DomRenderer({
+      container: containerRef.current,
+      engine,
+      enableCellEditing,
+      enableGrouping,
+      groupIndent,
+      checkboxSelection,
+      checkboxColumnWidth,
+      floatingFilter,
+      floatingFilterDebounce,
+      enablePagination,
+      pageSizeOptions
+    });
+    renderer.mount();
+    rendererRef.current = renderer;
+    const root = containerRef.current.querySelector(".gs-root");
+    setRootElement(root);
+    requestAnimationFrame(() => {
+      engine.eventBus.emit("grid:ready", { api: engine.api });
+    });
+    return () => {
+      renderer.destroy();
+      rendererRef.current = null;
+      setRootElement(null);
+    };
+  }, [engine]);
+  const controlledCallbacksRef = react.useRef({
+    onSortModelChange,
+    onFilterModelChange,
+    onSelectedRowIdsChange,
+    onCurrentPageChange
+  });
+  controlledCallbacksRef.current = {
+    onSortModelChange,
+    onFilterModelChange,
+    onSelectedRowIdsChange,
+    onCurrentPageChange
+  };
+  react.useEffect(() => {
+    if (!engine) return;
+    const removeMw = engine.commandBus.use((ctx) => {
+      const cbs = controlledCallbacksRef.current;
+      if (ctx.commandType === "sort:toggle" && cbs.onSortModelChange) {
+        return;
+      }
+      if (ctx.commandType === "selection:select" && cbs.onSelectedRowIdsChange) {
+        return;
+      }
+    });
+    return removeMw;
+  }, [engine]);
+  react.useEffect(() => {
+    if (controlledSortModel !== void 0 && engine) {
+      engine.api.setSortModel(controlledSortModel);
+    }
+  }, [controlledSortModel, engine]);
+  react.useEffect(() => {
+    if (controlledFilterModel !== void 0 && engine) {
+      engine.api.setFilterModel(controlledFilterModel);
+    }
+  }, [controlledFilterModel, engine]);
+  react.useEffect(() => {
+    if (controlledCurrentPage !== void 0 && engine) {
+      engine.api.paginationGoToPage(controlledCurrentPage);
+    }
+  }, [controlledCurrentPage, engine]);
+  react.useEffect(() => {
+    if (controlledSelectedRowIds !== void 0 && engine) {
+      engine.commandBus.dispatch("selection:set", {
+        selectedRowIds: new Set(controlledSelectedRowIds)
+      });
+    }
+  }, [controlledSelectedRowIds, engine]);
+  const eventCallbacksRef = react.useRef({
+    onGridReady,
+    onRowDataChanged,
+    onSelectionChanged,
+    onSortChanged,
+    onFilterChanged,
+    onCellValueChanged,
+    onCellClicked,
+    onCellDoubleClicked,
+    onRowClicked,
+    onCellEditingStarted,
+    onCellEditingStopped,
+    onPaginationChanged,
+    onColumnResized
+  });
+  eventCallbacksRef.current = {
+    onGridReady,
+    onRowDataChanged,
+    onSelectionChanged,
+    onSortChanged,
+    onFilterChanged,
+    onCellValueChanged,
+    onCellClicked,
+    onCellDoubleClicked,
+    onRowClicked,
+    onCellEditingStarted,
+    onCellEditingStopped,
+    onPaginationChanged,
+    onColumnResized
+  };
+  react.useEffect(() => {
+    if (!engine) return;
+    const eb = engine.eventBus;
+    const cbs = () => eventCallbacksRef.current;
+    const unsubs = [
+      eb.on("rowData:changed", (e) => cbs().onRowDataChanged?.(e)),
+      eb.on("selection:changed", (e) => {
+        cbs().onSelectionChanged?.(e);
+        controlledCallbacksRef.current.onSelectedRowIdsChange?.(
+          engine.store.getState().selection.selectedRowIds,
+          e.source ?? "api"
+        );
+      }),
+      eb.on("column:sort:changed", (e) => {
+        cbs().onSortChanged?.(e);
+        controlledCallbacksRef.current.onSortModelChange?.(e.sortModel);
+      }),
+      eb.on("filter:changed", (e) => {
+        cbs().onFilterChanged?.(e);
+        controlledCallbacksRef.current.onFilterModelChange?.(e.filterModel);
+      }),
+      eb.on("cell:valueChanged", (e) => cbs().onCellValueChanged?.(e)),
+      eb.on("cell:clicked", (e) => cbs().onCellClicked?.(e)),
+      eb.on("cell:doubleClicked", (e) => cbs().onCellDoubleClicked?.(e)),
+      eb.on("row:clicked", (e) => cbs().onRowClicked?.(e)),
+      eb.on("cell:editingStarted", (e) => cbs().onCellEditingStarted?.(e)),
+      eb.on("cell:editingStopped", (e) => cbs().onCellEditingStopped?.(e)),
+      eb.on("pagination:changed", (e) => {
+        cbs().onPaginationChanged?.(e);
+        controlledCallbacksRef.current.onCurrentPageChange?.(e.currentPage);
+      }),
+      eb.on("column:resized", (e) => cbs().onColumnResized?.(e))
+    ];
+    return () => unsubs.forEach((u) => u());
+  }, [engine]);
+  react.useEffect(() => {
+    if (engine) {
+      onGridReady?.(engine.api);
+    }
+  }, [engine]);
+  const style = {
+    height: typeof height === "number" ? `${height}px` : height,
+    width: typeof width === "number" ? `${width}px` : width,
+    ...containerStyle
+  };
+  const contextValue = react.useMemo(
+    () => engine ? { engine, api: engine.api, rootElement } : null,
+    [engine, rootElement]
+  );
+  if (!engine || !contextValue) {
+    return /* @__PURE__ */ jsxRuntime.jsx(GridErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `gs-container ${containerClass ?? ""}`.trim(),
+        style
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(GridErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsxs(GridContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: `gs-container ${containerClass ?? ""}`.trim(),
+        style
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PortalManager,
+      {
+        engine,
+        api: engine.api,
+        columns: reactColumns,
+        rootElement,
+        contextMenuComponent: contextMenu
+      }
+    )
+  ] }) });
+}
+
+// src/hooks/useGridApi.ts
+function useGridApi() {
+  return useGridContext().api;
+}
+function useGridState(selector) {
+  const { engine } = useGridContext();
+  const getSnapshot = react.useCallback(
+    () => selector(engine.store.getState()),
+    [selector, engine]
+  );
+  return react.useSyncExternalStore(
+    (onStoreChange) => engine.store.subscribe(onStoreChange),
+    getSnapshot,
+    getSnapshot
+  );
+}
+function useGridSelection() {
+  const { engine, api } = useGridContext();
+  const getSelectionSnapshot = react.useCallback(() => engine.store.getState().selection.selectedRowIds, [engine]);
+  const subscribe = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const selectedRowIds = react.useSyncExternalStore(
+    subscribe,
+    getSelectionSnapshot,
+    getSelectionSnapshot
+  );
+  const selectedCount = selectedRowIds.size;
+  const isRowSelected = react.useCallback(
+    (rowId) => engine.store.getState().selection.selectedRowIds.has(rowId),
+    [engine]
+  );
+  const getSelectedRows = react.useCallback(() => api.getSelectedRows(), [api]);
+  const getSelectedNodes = react.useCallback(() => api.getSelectedNodes(), [api]);
+  const selectAll = react.useCallback(() => api.selectAll(), [api]);
+  const deselectAll = react.useCallback(() => api.deselectAll(), [api]);
+  return {
+    selectedRowIds,
+    selectedCount,
+    getSelectedRows,
+    getSelectedNodes,
+    isRowSelected,
+    selectAll,
+    deselectAll
+  };
+}
+function useGridSort() {
+  const { engine, api } = useGridContext();
+  const getSortSnapshot = react.useCallback(() => engine.store.getState().sortModel, [engine]);
+  const subscribe = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const sortModel = react.useSyncExternalStore(
+    subscribe,
+    getSortSnapshot,
+    getSortSnapshot
+  );
+  const isSorted = sortModel.length > 0;
+  const setSortModel = react.useCallback(
+    (model) => api.setSortModel(model),
+    [api]
+  );
+  const toggleSort = react.useCallback(
+    (colId, multiSort = false) => {
+      engine.commandBus.dispatch("sort:toggle", { colId, multiSort });
+    },
+    [engine]
+  );
+  const clearSort = react.useCallback(() => api.setSortModel([]), [api]);
+  return { sortModel, isSorted, setSortModel, toggleSort, clearSort };
+}
+function useGridFilter() {
+  const { engine, api } = useGridContext();
+  const getFilterSnapshot = react.useCallback(() => engine.store.getState().filterModel, [engine]);
+  const getQuickFilterSnapshot = react.useCallback(() => engine.store.getState().quickFilterText, [engine]);
+  const subscribe = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const filterModel = react.useSyncExternalStore(
+    subscribe,
+    getFilterSnapshot,
+    getFilterSnapshot
+  );
+  const quickFilterText = react.useSyncExternalStore(
+    subscribe,
+    getQuickFilterSnapshot,
+    getQuickFilterSnapshot
+  );
+  const isFiltered = Object.keys(filterModel).length > 0 || quickFilterText.length > 0;
+  const setFilterModel = react.useCallback(
+    (model) => api.setFilterModel(model),
+    [api]
+  );
+  const setQuickFilter = react.useCallback(
+    (text) => api.setQuickFilter(text),
+    [api]
+  );
+  const clearFilters = react.useCallback(() => {
+    api.setFilterModel({});
+    api.setQuickFilter("");
+  }, [api]);
+  return {
+    filterModel,
+    quickFilterText,
+    isFiltered,
+    setFilterModel,
+    setQuickFilter,
+    clearFilters
+  };
+}
+function useGridPagination() {
+  const { engine, api } = useGridContext();
+  const getPaginationSnapshot = react.useCallback(() => engine.store.getState().pagination, [engine]);
+  const subscribe = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const paginationState = react.useSyncExternalStore(
+    subscribe,
+    getPaginationSnapshot,
+    getPaginationSnapshot
+  );
+  const { currentPage, pageSize, totalRows } = paginationState;
+  const totalPages = Math.max(1, Math.ceil(totalRows / pageSize));
+  const hasNextPage = currentPage < totalPages - 1;
+  const hasPreviousPage = currentPage > 0;
+  const goToPage = react.useCallback(
+    (page) => api.paginationGoToPage(page),
+    [api]
+  );
+  const nextPage = react.useCallback(() => {
+    if (hasNextPage) api.paginationGoToPage(currentPage + 1);
+  }, [api, currentPage, hasNextPage]);
+  const previousPage = react.useCallback(() => {
+    if (hasPreviousPage) api.paginationGoToPage(currentPage - 1);
+  }, [api, currentPage, hasPreviousPage]);
+  const firstPage = react.useCallback(() => api.paginationGoToPage(0), [api]);
+  const lastPage = react.useCallback(
+    () => api.paginationGoToPage(totalPages - 1),
+    [api, totalPages]
+  );
+  return react.useMemo(
+    () => ({
+      currentPage,
+      totalPages,
+      pageSize,
+      totalRows,
+      hasNextPage,
+      hasPreviousPage,
+      goToPage,
+      nextPage,
+      previousPage,
+      firstPage,
+      lastPage
+    }),
+    [
+      currentPage,
+      totalPages,
+      pageSize,
+      totalRows,
+      hasNextPage,
+      hasPreviousPage,
+      goToPage,
+      nextPage,
+      previousPage,
+      firstPage,
+      lastPage
+    ]
+  );
+}
+function useGridEvent(event, handler) {
+  const { engine } = useGridContext();
+  const handlerRef = react.useRef(handler);
+  handlerRef.current = handler;
+  react.useEffect(() => {
+    const unsub = engine.eventBus.on(event, (payload) => {
+      handlerRef.current(payload);
+    });
+    return unsub;
+  }, [engine, event]);
+}
+function useGridColumn() {
+  const { engine, api } = useGridContext();
+  const getColumnsSnapshot = react.useCallback(() => engine.store.getState().columns, [engine]);
+  const subscribe = react.useCallback((cb) => engine.store.subscribe(cb), [engine]);
+  const allColumns = react.useSyncExternalStore(
+    subscribe,
+    getColumnsSnapshot,
+    getColumnsSnapshot
+  );
+  const visibleColumns = react.useMemo(
+    () => allColumns.filter((c) => !c.hide),
+    [allColumns]
+  );
+  const setColumnVisible = react.useCallback(
+    (colId, visible) => api.setColumnVisible(colId, visible),
+    [api]
+  );
+  const setColumnWidth = react.useCallback(
+    (colId, width) => api.setColumnWidth(colId, width),
+    [api]
+  );
+  const moveColumn = react.useCallback(
+    (colId, toIndex) => api.moveColumn(colId, toIndex),
+    [api]
+  );
+  const setColumnPinned = react.useCallback(
+    (colId, pinned) => api.setColumnPinned(colId, pinned),
+    [api]
+  );
+  const getColumn = react.useCallback(
+    (colId) => api.getColumn(colId),
+    [api]
+  );
+  return {
+    allColumns,
+    visibleColumns,
+    setColumnVisible,
+    setColumnWidth,
+    moveColumn,
+    setColumnPinned,
+    getColumn
+  };
+}
+
+exports.GridContext = GridContext;
+exports.GridErrorBoundary = GridErrorBoundary;
+exports.GridStorm = GridStorm;
+exports.isReactCellRenderer = isReactCellRenderer;
+exports.isReactHeaderRenderer = isReactHeaderRenderer;
+exports.reactCellRenderer = reactCellRenderer;
+exports.reactHeaderRenderer = reactHeaderRenderer;
+exports.useGridApi = useGridApi;
+exports.useGridColumn = useGridColumn;
+exports.useGridContext = useGridContext;
+exports.useGridEvent = useGridEvent;
+exports.useGridFilter = useGridFilter;
+exports.useGridPagination = useGridPagination;
+exports.useGridSelection = useGridSelection;
+exports.useGridSort = useGridSort;
+exports.useGridState = useGridState;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map