From aab305b7abeab452c641780513b1ae95b0307b1a Mon Sep 17 00:00:00 2001
From: Mikkel Espolin Birkeland <mikkeleb@gmail.com>
Date: Thu, 15 Jan 2026 13:53:35 +0100
Subject: [PATCH 1/3] Grid import not GridLite GridPro

---
 README.md                                     | 33 +++++++++---------
 .../grid-lite/minimal-nextjs/app/page.tsx     | 15 ++++----
 examples/grid-lite/minimal-react/src/App.tsx  | 11 +++---
 examples/grid-pro/minimal-nextjs/app/page.tsx | 21 ++++++------
 examples/grid-pro/minimal-react/src/App.tsx   | 11 +++---
 package.json                                  |  1 +
 packages/grid-lite-react/README.md            | 24 ++++++-------
 packages/grid-lite-react/src/Grid.tsx         | 17 +++++++---
 .../src/__tests__/Grid.test.tsx               |  6 ++--
 packages/grid-lite-react/src/index.ts         |  1 +
 packages/grid-pro-react/README.md             | 23 +++++++------
 packages/grid-pro-react/src/Grid.tsx          | 17 +++++++---
 .../src/__tests__/Grid.test.tsx               |  6 ++--
 packages/grid-pro-react/src/index.ts          |  1 +
 .../src/test/createGridTests.tsx              | 34 +++++++++++++++++--
 15 files changed, 134 insertions(+), 87 deletions(-)

diff --git a/README.md b/README.md
index 9f007f0..18b57d8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Highcharts Grid React
 
-Monorepo containing React wrappers for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) and [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro).
+Monorepo containing React packages for [Highcharts Grid Lite](https://www.highcharts.com/docs/grid/getting-started/grid-lite) and [Highcharts Grid Pro](https://www.highcharts.com/docs/grid/getting-started/grid-pro).
 
 ## Packages
 
@@ -8,12 +8,12 @@ This monorepo contains the following packages:
 
 ### Published Packages
 
-- **[@highcharts/grid-lite-react](./packages/grid-lite-react/)** - React wrapper for Highcharts Grid Lite
-- **[@highcharts/grid-pro-react](./packages/grid-pro-react/)** - React wrapper for Highcharts Grid Pro
+- **[@highcharts/grid-lite-react](./packages/grid-lite-react/)** - React package for Highcharts Grid Lite
+- **[@highcharts/grid-pro-react](./packages/grid-pro-react/)** - React package for Highcharts Grid Pro
 
 ### Internal Packages
 
-- **[@highcharts/grid-shared-react](./packages/grid-shared-react/)** - Shared core functionality used by both Grid Lite and Grid Pro React wrappers
+- **[@highcharts/grid-shared-react](./packages/grid-shared-react/)** - Shared core functionality used by both Grid Lite and Grid Pro React packages
 
 ## Quick Start
 
@@ -33,7 +33,7 @@ npm install @highcharts/grid-pro-react
 
 ```tsx
 import React, { useState } from 'react';
-import { GridLite, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -45,7 +45,7 @@ function App() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -53,7 +53,7 @@ function App() {
 
 ```tsx
 import React, { useState } from 'react';
-import { GridPro, type GridOptions } from '@highcharts/grid-pro-react';
+import { Grid, type GridOptions } from '@highcharts/grid-pro-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -65,7 +65,7 @@ function App() {
     }
   });
 
-  return <GridPro options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -74,8 +74,8 @@ function App() {
 ```
 highcharts-grid-react/
 ├── packages/                    # Source packages
-│   ├── grid-lite-react/        # Grid Lite React wrapper
-│   ├── grid-pro-react/          # Grid Pro React wrapper
+│   ├── grid-lite-react/        # Grid Lite React package
+│   ├── grid-pro-react/          # Grid Pro React package
 │   └── grid-shared-react/         # Shared core functionality
 ├── examples/                    # Example applications
 │   ├── grid-lite/               # Grid Lite examples
@@ -89,9 +89,9 @@ highcharts-grid-react/
 
 ### Packages
 
-- **`packages/grid-lite-react/`** - React component wrapper for Highcharts Grid Lite. See [README](./packages/grid-lite-react/README.md) for details.
-- **`packages/grid-pro-react/`** - React component wrapper for Highcharts Grid Pro. See [README](./packages/grid-pro-react/README.md) for details.
-- **`packages/grid-shared-react/`** - Internal package containing shared React components and hooks used by both wrappers.
+- **`packages/grid-lite-react/`** - React component package for Highcharts Grid Lite. See [README](./packages/grid-lite-react/README.md) for details.
+- **`packages/grid-pro-react/`** - React component package for Highcharts Grid Pro. See [README](./packages/grid-pro-react/README.md) for details.
+- **`packages/grid-shared-react/`** - Internal package containing shared React components and hooks used by both packages.
 
 ### Examples
 
@@ -171,8 +171,8 @@ import { type GridOptions } from '@highcharts/grid-lite-react';
 import '@highcharts/grid-lite/css/grid-lite.css';
 
 // Disable SSR for the Grid component
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -186,7 +186,7 @@ export default function Page() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -210,4 +210,3 @@ See the [Next.js examples](./examples/) for complete working implementations.
 ## License
 
 SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/LICENSE).
-
diff --git a/examples/grid-lite/minimal-nextjs/app/page.tsx b/examples/grid-lite/minimal-nextjs/app/page.tsx
index fb41d38..54dd0de 100644
--- a/examples/grid-lite/minimal-nextjs/app/page.tsx
+++ b/examples/grid-lite/minimal-nextjs/app/page.tsx
@@ -9,8 +9,8 @@ import {
 } from '@highcharts/grid-lite-react';
 
 // Dynamically import Grid with SSR disabled to avoid window is not defined error
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -37,20 +37,19 @@ export default function Home() {
     }
   });
 
-  const gridLite = useRef<GridRefHandle<GridOptions> | null>(null);
+  const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridLite:', gridLite.current?.grid);
+    console.info('(ref) grid:', gridRef.current?.grid);
   };
-  const onGridLiteCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridLite:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-        <GridLite options={liteOptions} gridRef={gridLite} callback={onGridLiteCallback} />
+        <Grid options={liteOptions} ref={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
-
diff --git a/examples/grid-lite/minimal-react/src/App.tsx b/examples/grid-lite/minimal-react/src/App.tsx
index 064c523..6f0fbac 100644
--- a/examples/grid-lite/minimal-react/src/App.tsx
+++ b/examples/grid-lite/minimal-react/src/App.tsx
@@ -3,7 +3,7 @@ import {
   type GridInstance,
   type GridOptions,
   type GridRefHandle,
-  GridLite
+  Grid
 } from '@highcharts/grid-lite-react';
 
 function App() {
@@ -31,19 +31,18 @@ function App() {
   const grid = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridLite:', grid.current?.grid);
+    console.info('(ref) grid:', grid.current?.grid);
   };
-  const onGridLiteCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridLite:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-      <GridLite options={options} gridRef={grid} callback={onGridLiteCallback} />
+      <Grid options={options} ref={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
 
 export default App;
-
diff --git a/examples/grid-pro/minimal-nextjs/app/page.tsx b/examples/grid-pro/minimal-nextjs/app/page.tsx
index 06a5db4..4cb221f 100644
--- a/examples/grid-pro/minimal-nextjs/app/page.tsx
+++ b/examples/grid-pro/minimal-nextjs/app/page.tsx
@@ -3,14 +3,14 @@
 import { useState, useRef } from 'react';
 import dynamic from 'next/dynamic';
 import {
-    type GridInstance,
-    type GridOptions,
-    type GridRefHandle
+  type GridInstance,
+  type GridOptions,
+  type GridRefHandle
 } from '@highcharts/grid-pro-react';
 
 // Dynamically import Grid with SSR disabled to avoid window is not defined error
-const GridPro = dynamic(
-  () => import('@highcharts/grid-pro-react').then((mod) => mod.GridPro),
+const Grid = dynamic(
+  () => import('@highcharts/grid-pro-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -53,20 +53,19 @@ export default function Home() {
     }]
   });
 
-  const gridPro = useRef<GridRefHandle<GridOptions> | null>(null);
+  const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridPro:', gridPro.current?.grid);
+    console.info('(ref) grid:', gridRef.current?.grid);
   };
-  const onGridProCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridPro:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-        <GridPro options={proOptions} gridRef={gridPro} callback={onGridProCallback} />
+        <Grid options={proOptions} ref={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
-
diff --git a/examples/grid-pro/minimal-react/src/App.tsx b/examples/grid-pro/minimal-react/src/App.tsx
index 6f5b219..d82fa1e 100644
--- a/examples/grid-pro/minimal-react/src/App.tsx
+++ b/examples/grid-pro/minimal-react/src/App.tsx
@@ -3,7 +3,7 @@ import {
   type GridInstance,
   type GridOptions,
   type GridRefHandle,
-  GridPro,
+  Grid,
 } from '@highcharts/grid-pro-react';
 
 function App() {
@@ -47,19 +47,18 @@ function App() {
   const grid = useRef<GridRefHandle<GridOptions> | null>(null);
 
   const onButtonClick = () => {
-    console.info('(ref) gridPro:', grid.current?.grid);
+    console.info('(ref) grid:', grid.current?.grid);
   };
-  const onGridProCallback = (grid: GridInstance<GridOptions>) => {
-    console.info('(callback) gridPro:', grid);
+  const onGridCallback = (grid: GridInstance<GridOptions>) => {
+    console.info('(callback) grid:', grid);
   };
 
   return (
     <>
-      <GridPro options={options} gridRef={grid} callback={onGridProCallback} />
+      <Grid options={options} ref={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
 }
 
 export default App;
-
diff --git a/package.json b/package.json
index 83476ec..5d1eb21 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "scripts": {
         "test": "vitest run",
         "test:watch": "vitest",
+        "pretest:e2e": "pnpm build",
         "test:e2e": "vitest run --config vitest.e2e.config.ts",
         "test:all": "pnpm test && pnpm test:e2e",
         "check": "pnpm lint && pnpm test",
diff --git a/packages/grid-lite-react/README.md b/packages/grid-lite-react/README.md
index 977db12..2f8c259 100644
--- a/packages/grid-lite-react/README.md
+++ b/packages/grid-lite-react/README.md
@@ -16,7 +16,7 @@ npm install @highcharts/grid-lite-react
 
 ```tsx
 import React, { useState } from 'react';
-import { GridLite, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -32,20 +32,21 @@ function App() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
 ## API
 
-### `GridLite`
+### `Grid`
 
 React component that wraps Highcharts Grid Lite.
 
 #### Props
 
 - `options` (required): Configuration options for the grid. Type: `GridOptions`
-- `gridRef` (optional): Ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `ref` (optional): React ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `gridRef` (optional): Alternative prop-based ref. Type: `RefObject<GridRefHandle<GridOptions>>`
 - `callback` (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: `(grid: GridInstance<GridOptions>) => void`
 
 ### `GridOptions`
@@ -82,7 +83,7 @@ You can access the grid instance in two ways:
 **Using ref:**
 ```tsx
 import { useRef } from 'react';
-import { GridLite, type GridRefHandle, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
@@ -97,7 +98,7 @@ function App() {
 
   return (
     <>
-      <GridLite options={options} gridRef={gridRef} />
+      <Grid options={options} ref={gridRef} />
       <button onClick={handleClick}>Access Grid</button>
     </>
   );
@@ -106,14 +107,14 @@ function App() {
 
 **Using callback:**
 ```tsx
-import { GridLite, type GridInstance, type GridOptions } from '@highcharts/grid-lite-react';
+import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-lite-react';
 
 function App() {
   const handleGridReady = (grid: GridInstance<GridOptions>) => {
     console.log('Grid initialized:', grid);
   };
 
-  return <GridLite options={options} callback={handleGridReady} />;
+  return <Grid options={options} callback={handleGridReady} />;
 }
 ```
 
@@ -130,8 +131,8 @@ import { type GridOptions } from '@highcharts/grid-lite-react';
 import '@highcharts/grid-lite/css/grid-lite.css';
 
 // Disable SSR for the Grid component
-const GridLite = dynamic(
-  () => import('@highcharts/grid-lite-react').then((mod) => mod.GridLite),
+const Grid = dynamic(
+  () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -145,7 +146,7 @@ export default function Page() {
     }
   });
 
-  return <GridLite options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
@@ -158,4 +159,3 @@ For detailed documentation on available options and features, see the [Highchart
 ## License
 
 SEE LICENSE IN [LICENSE](https://github.com/highcharts/grid-react/blob/main/packages/grid-lite-react/LICENSE).
-
diff --git a/packages/grid-lite-react/src/Grid.tsx b/packages/grid-lite-react/src/Grid.tsx
index f4d21fb..7fc4a5c 100644
--- a/packages/grid-lite-react/src/Grid.tsx
+++ b/packages/grid-lite-react/src/Grid.tsx
@@ -7,14 +7,23 @@
  *
  */
 
+import { forwardRef, type ForwardedRef } from 'react';
 import {
     BaseGrid,
-    GridProps
+    GridProps,
+    type GridRefHandle
 } from '@highcharts/grid-shared-react';
 import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src';
 import '@highcharts/grid-lite/css/grid-lite.css';
 import type { Options } from '@highcharts/grid-lite/es-modules/Grid/Core/Options';
 
-export default function GridLite({ options, gridRef, callback }: GridProps<Options>) {
-    return <BaseGrid options={options} Grid={Grid} ref={gridRef} callback={callback} />;
-}
+const GridLite = forwardRef(function GridLite(
+    { options, gridRef, callback }: GridProps<Options>,
+    ref: ForwardedRef<GridRefHandle<Options>>
+) {
+    const resolvedRef = ref ?? gridRef;
+
+    return <BaseGrid options={options} Grid={Grid} ref={resolvedRef} callback={callback} />;
+});
+
+export default GridLite;
diff --git a/packages/grid-lite-react/src/__tests__/Grid.test.tsx b/packages/grid-lite-react/src/__tests__/Grid.test.tsx
index 0d0caad..770322a 100644
--- a/packages/grid-lite-react/src/__tests__/Grid.test.tsx
+++ b/packages/grid-lite-react/src/__tests__/Grid.test.tsx
@@ -1,9 +1,9 @@
 import { createGridTests } from '@highcharts/grid-shared-react/src/test/createGridTests';
-import { GridLite, GridOptions } from '../index';
+import { Grid, GridOptions } from '../index';
 
 createGridTests<GridOptions>(
-    'GridLite',
-    GridLite,
+    'Grid Lite',
+    Grid,
     {
         dataTable: {
             columns: {
diff --git a/packages/grid-lite-react/src/index.ts b/packages/grid-lite-react/src/index.ts
index a1a1520..93cb0e5 100644
--- a/packages/grid-lite-react/src/index.ts
+++ b/packages/grid-lite-react/src/index.ts
@@ -9,6 +9,7 @@
 
 import GridLite from '@highcharts/grid-lite';
 
+export { default as Grid } from './Grid';
 export { default as GridLite } from './Grid';
 export type { GridInstance } from '@highcharts/grid-shared-react';
 export type { GridRefHandle } from '@highcharts/grid-shared-react';
diff --git a/packages/grid-pro-react/README.md b/packages/grid-pro-react/README.md
index 2e858de..6afa19d 100644
--- a/packages/grid-pro-react/README.md
+++ b/packages/grid-pro-react/README.md
@@ -16,7 +16,7 @@ npm install @highcharts/grid-pro-react
 
 ```tsx
 import React, { useState } from 'react';
-import { GridPro, type GridOptions } from '@highcharts/grid-pro-react';
+import { Grid, type GridOptions } from '@highcharts/grid-pro-react';
 
 function App() {
   const [options] = useState<GridOptions>({
@@ -32,20 +32,21 @@ function App() {
     }
   });
 
-  return <GridPro options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
 ## API
 
-### `GridPro`
+### `Grid`
 
 React component that wraps Highcharts Grid Pro.
 
 #### Props
 
 - `options` (required): Configuration options for the grid. Type: `GridOptions`
-- `gridRef` (optional): Ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `ref` (optional): React ref to access the underlying grid instance. Type: `RefObject<GridRefHandle<GridOptions>>`
+- `gridRef` (optional): Alternative prop-based ref. Type: `RefObject<GridRefHandle<GridOptions>>`
 - `callback` (optional): Callback function called when the grid is initialized. Receives the grid instance as parameter. Type: `(grid: GridInstance<GridOptions>) => void`
 
 ### `GridOptions`
@@ -82,7 +83,7 @@ You can access the grid instance in two ways:
 **Using ref:**
 ```tsx
 import { useRef } from 'react';
-import { GridPro, type GridRefHandle, type GridOptions } from '@highcharts/grid-pro-react';
+import { Grid, type GridRefHandle, type GridOptions } from '@highcharts/grid-pro-react';
 
 function App() {
   const gridRef = useRef<GridRefHandle<GridOptions> | null>(null);
@@ -97,7 +98,7 @@ function App() {
 
   return (
     <>
-      <GridPro options={options} gridRef={gridRef} />
+      <Grid options={options} ref={gridRef} />
       <button onClick={handleClick}>Access Grid</button>
     </>
   );
@@ -106,14 +107,14 @@ function App() {
 
 **Using callback:**
 ```tsx
-import { GridPro, type GridInstance, type GridOptions } from '@highcharts/grid-pro-react';
+import { Grid, type GridInstance, type GridOptions } from '@highcharts/grid-pro-react';
 
 function App() {
   const handleGridReady = (grid: GridInstance<GridOptions>) => {
     console.log('Grid initialized:', grid);
   };
 
-  return <GridPro options={options} callback={handleGridReady} />;
+  return <Grid options={options} callback={handleGridReady} />;
 }
 ```
 
@@ -130,8 +131,8 @@ import { type GridOptions } from '@highcharts/grid-pro-react';
 import '@highcharts/grid-pro/css/grid-pro.css';
 
 // Disable SSR for the Grid component
-const GridPro = dynamic(
-  () => import('@highcharts/grid-pro-react').then((mod) => mod.GridPro),
+const Grid = dynamic(
+  () => import('@highcharts/grid-pro-react').then((mod) => mod.Grid),
   { ssr: false }
 );
 
@@ -145,7 +146,7 @@ export default function Page() {
     }
   });
 
-  return <GridPro options={options} />;
+  return <Grid options={options} />;
 }
 ```
 
diff --git a/packages/grid-pro-react/src/Grid.tsx b/packages/grid-pro-react/src/Grid.tsx
index 398edea..76e5899 100644
--- a/packages/grid-pro-react/src/Grid.tsx
+++ b/packages/grid-pro-react/src/Grid.tsx
@@ -7,14 +7,23 @@
  *
  */
 
+import { forwardRef, type ForwardedRef } from 'react';
 import {
     BaseGrid,
-    GridProps
+    GridProps,
+    type GridRefHandle
 } from '@highcharts/grid-shared-react';
 import Grid from '@highcharts/grid-pro/es-modules/masters/grid-pro.src';
 import '@highcharts/grid-pro/css/grid-pro.css';
 import type { Options } from '@highcharts/grid-pro/es-modules/Grid/Core/Options';
 
-export default function GridPro({ options, gridRef, callback }: GridProps<Options>) {
-    return <BaseGrid options={options} Grid={Grid} ref={gridRef} callback={callback} />;
-}
+const GridPro = forwardRef(function GridPro(
+    { options, gridRef, callback }: GridProps<Options>,
+    ref: ForwardedRef<GridRefHandle<Options>>
+) {
+    const resolvedRef = ref ?? gridRef;
+
+    return <BaseGrid options={options} Grid={Grid} ref={resolvedRef} callback={callback} />;
+});
+
+export default GridPro;
diff --git a/packages/grid-pro-react/src/__tests__/Grid.test.tsx b/packages/grid-pro-react/src/__tests__/Grid.test.tsx
index 5d72560..e44d6d9 100644
--- a/packages/grid-pro-react/src/__tests__/Grid.test.tsx
+++ b/packages/grid-pro-react/src/__tests__/Grid.test.tsx
@@ -1,9 +1,9 @@
 import { createGridTests } from '@highcharts/grid-shared-react/src/test/createGridTests';
-import { GridPro, GridOptions } from '../index';
+import { Grid, GridOptions } from '../index';
 
 createGridTests<GridOptions>(
-    'GridPro',
-    GridPro,
+    'Grid Pro',
+    Grid,
     {
         dataTable: {
             columns: {
diff --git a/packages/grid-pro-react/src/index.ts b/packages/grid-pro-react/src/index.ts
index 25207fa..a44be66 100644
--- a/packages/grid-pro-react/src/index.ts
+++ b/packages/grid-pro-react/src/index.ts
@@ -9,6 +9,7 @@
 
 import GridPro from '@highcharts/grid-pro';
 
+export { default as Grid } from './Grid';
 export { default as GridPro } from './Grid';
 export type { GridInstance } from '@highcharts/grid-shared-react';
 export type { GridRefHandle } from '@highcharts/grid-shared-react';
diff --git a/packages/grid-shared-react/src/test/createGridTests.tsx b/packages/grid-shared-react/src/test/createGridTests.tsx
index 5492516..7d34da3 100644
--- a/packages/grid-shared-react/src/test/createGridTests.tsx
+++ b/packages/grid-shared-react/src/test/createGridTests.tsx
@@ -1,5 +1,10 @@
 import { render, waitFor, fireEvent } from '@testing-library/react';
-import { useRef, useState, ComponentType } from 'react';
+import {
+    useRef,
+    useState,
+    type ForwardRefExoticComponent,
+    type RefAttributes
+} from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { GridProps, GridRefHandle } from '../components/BaseGrid';
 import { GridInstance } from '../hooks/useGrid';
@@ -18,7 +23,9 @@ interface TestOptions {
  */
 export function createGridTests<TOptions extends TestOptions>(
     name: string,
-    GridComponent: ComponentType<GridProps<TOptions>>,
+    GridComponent: ForwardRefExoticComponent<
+        GridProps<TOptions> & RefAttributes<GridRefHandle<TOptions>>
+    >,
     testOptions: TOptions,
     updatedOptions: TOptions
 ) {
@@ -46,6 +53,29 @@ export function createGridTests<TOptions extends TestOptions>(
             let gridRef: React.RefObject<GridRefHandle<TOptions> | null>;
             let initialized = false;
 
+            function TestComponent() {
+                gridRef = useRef<GridRefHandle<TOptions>>(null);
+                return (
+                    <GridComponent
+                        options={testOptions}
+                        ref={gridRef}
+                        callback={() => { initialized = true; }}
+                    />
+                );
+            }
+
+            render(<TestComponent />);
+
+            await waitFor(() => {
+                expect(initialized).toBe(true);
+                expect(gridRef.current?.grid).toBeDefined();
+            });
+        });
+
+        it('provides grid instance via gridRef prop', async () => {
+            let gridRef: React.RefObject<GridRefHandle<TOptions> | null>;
+            let initialized = false;
+
             function TestComponent() {
                 gridRef = useRef<GridRefHandle<TOptions>>(null);
                 return (

From 406bf480fd969aa6680e6319afe48979869b39be Mon Sep 17 00:00:00 2001
From: Mikkel Espolin Birkeland <mikkeleb@gmail.com>
Date: Tue, 20 Jan 2026 09:51:41 +0100
Subject: [PATCH 2/3] Fixed build warnings

---
 .../grid-shared-react/src/test/createGridTests.tsx     | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/grid-shared-react/src/test/createGridTests.tsx b/packages/grid-shared-react/src/test/createGridTests.tsx
index 7d34da3..50c7b15 100644
--- a/packages/grid-shared-react/src/test/createGridTests.tsx
+++ b/packages/grid-shared-react/src/test/createGridTests.tsx
@@ -9,19 +9,11 @@ import { describe, it, expect, vi } from 'vitest';
 import { GridProps, GridRefHandle } from '../components/BaseGrid';
 import { GridInstance } from '../hooks/useGrid';
 
-type CellValue = string | number | boolean | null;
-
-interface TestOptions {
-    dataTable?: {
-        columns?: Record<string, CellValue[]>;
-    };
-}
-
 /**
  * Creates a standard test suite for a Grid component.
  * Use this to avoid duplicating tests between grid-lite-react and grid-pro-react.
  */
-export function createGridTests<TOptions extends TestOptions>(
+export function createGridTests<TOptions>(
     name: string,
     GridComponent: ForwardRefExoticComponent<
         GridProps<TOptions> & RefAttributes<GridRefHandle<TOptions>>

From 21d052722b2a4fb166b9a9c79c0e76f3e311413a Mon Sep 17 00:00:00 2001
From: Mikkel Espolin Birkeland <mikkeleb@gmail.com>
Date: Tue, 20 Jan 2026 10:08:49 +0100
Subject: [PATCH 3/3] Revert back to gridRed due to Nextjs

---
 .../grid-lite/minimal-nextjs/app/page.tsx     |  5 ++--
 examples/grid-lite/minimal-react/src/App.tsx  |  2 +-
 examples/grid-pro/minimal-nextjs/app/page.tsx |  5 ++--
 examples/grid-pro/minimal-react/src/App.tsx   |  2 +-
 packages/grid-lite-react/src/Grid.tsx         | 17 +++--------
 packages/grid-pro-react/src/Grid.tsx          | 17 +++--------
 .../src/test/createGridTests.tsx              | 30 ++-----------------
 7 files changed, 18 insertions(+), 60 deletions(-)

diff --git a/examples/grid-lite/minimal-nextjs/app/page.tsx b/examples/grid-lite/minimal-nextjs/app/page.tsx
index 54dd0de..1d82cc4 100644
--- a/examples/grid-lite/minimal-nextjs/app/page.tsx
+++ b/examples/grid-lite/minimal-nextjs/app/page.tsx
@@ -8,7 +8,8 @@ import {
   type GridRefHandle
 } from '@highcharts/grid-lite-react';
 
-// Dynamically import Grid with SSR disabled to avoid window is not defined error
+// Dynamic import with ssr:false is required because @highcharts/grid-lite
+// accesses `window` at module load time
 const Grid = dynamic(
   () => import('@highcharts/grid-lite-react').then((mod) => mod.Grid),
   { ssr: false }
@@ -48,7 +49,7 @@ export default function Home() {
 
   return (
     <>
-        <Grid options={liteOptions} ref={gridRef} callback={onGridCallback} />
+        <Grid options={liteOptions} gridRef={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
diff --git a/examples/grid-lite/minimal-react/src/App.tsx b/examples/grid-lite/minimal-react/src/App.tsx
index 6f0fbac..9151ef7 100644
--- a/examples/grid-lite/minimal-react/src/App.tsx
+++ b/examples/grid-lite/minimal-react/src/App.tsx
@@ -39,7 +39,7 @@ function App() {
 
   return (
     <>
-      <Grid options={options} ref={grid} callback={onGridCallback} />
+      <Grid options={options} gridRef={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
diff --git a/examples/grid-pro/minimal-nextjs/app/page.tsx b/examples/grid-pro/minimal-nextjs/app/page.tsx
index 4cb221f..0397a91 100644
--- a/examples/grid-pro/minimal-nextjs/app/page.tsx
+++ b/examples/grid-pro/minimal-nextjs/app/page.tsx
@@ -8,7 +8,8 @@ import {
   type GridRefHandle
 } from '@highcharts/grid-pro-react';
 
-// Dynamically import Grid with SSR disabled to avoid window is not defined error
+// Dynamic import with ssr:false is required because @highcharts/grid-pro
+// accesses `window` at module load time
 const Grid = dynamic(
   () => import('@highcharts/grid-pro-react').then((mod) => mod.Grid),
   { ssr: false }
@@ -64,7 +65,7 @@ export default function Home() {
 
   return (
     <>
-        <Grid options={proOptions} ref={gridRef} callback={onGridCallback} />
+        <Grid options={proOptions} gridRef={gridRef} callback={onGridCallback} />
         <button onClick={onButtonClick}>Click me</button>
     </>
   );
diff --git a/examples/grid-pro/minimal-react/src/App.tsx b/examples/grid-pro/minimal-react/src/App.tsx
index d82fa1e..8abbbe0 100644
--- a/examples/grid-pro/minimal-react/src/App.tsx
+++ b/examples/grid-pro/minimal-react/src/App.tsx
@@ -55,7 +55,7 @@ function App() {
 
   return (
     <>
-      <Grid options={options} ref={grid} callback={onGridCallback} />
+      <Grid options={options} gridRef={grid} callback={onGridCallback} />
       <button onClick={onButtonClick}>Click me</button>
     </>
   );
diff --git a/packages/grid-lite-react/src/Grid.tsx b/packages/grid-lite-react/src/Grid.tsx
index 7fc4a5c..f4d21fb 100644
--- a/packages/grid-lite-react/src/Grid.tsx
+++ b/packages/grid-lite-react/src/Grid.tsx
@@ -7,23 +7,14 @@
  *
  */
 
-import { forwardRef, type ForwardedRef } from 'react';
 import {
     BaseGrid,
-    GridProps,
-    type GridRefHandle
+    GridProps
 } from '@highcharts/grid-shared-react';
 import Grid from '@highcharts/grid-lite/es-modules/masters/grid-lite.src';
 import '@highcharts/grid-lite/css/grid-lite.css';
 import type { Options } from '@highcharts/grid-lite/es-modules/Grid/Core/Options';
 
-const GridLite = forwardRef(function GridLite(
-    { options, gridRef, callback }: GridProps<Options>,
-    ref: ForwardedRef<GridRefHandle<Options>>
-) {
-    const resolvedRef = ref ?? gridRef;
-
-    return <BaseGrid options={options} Grid={Grid} ref={resolvedRef} callback={callback} />;
-});
-
-export default GridLite;
+export default function GridLite({ options, gridRef, callback }: GridProps<Options>) {
+    return <BaseGrid options={options} Grid={Grid} ref={gridRef} callback={callback} />;
+}
diff --git a/packages/grid-pro-react/src/Grid.tsx b/packages/grid-pro-react/src/Grid.tsx
index 76e5899..398edea 100644
--- a/packages/grid-pro-react/src/Grid.tsx
+++ b/packages/grid-pro-react/src/Grid.tsx
@@ -7,23 +7,14 @@
  *
  */
 
-import { forwardRef, type ForwardedRef } from 'react';
 import {
     BaseGrid,
-    GridProps,
-    type GridRefHandle
+    GridProps
 } from '@highcharts/grid-shared-react';
 import Grid from '@highcharts/grid-pro/es-modules/masters/grid-pro.src';
 import '@highcharts/grid-pro/css/grid-pro.css';
 import type { Options } from '@highcharts/grid-pro/es-modules/Grid/Core/Options';
 
-const GridPro = forwardRef(function GridPro(
-    { options, gridRef, callback }: GridProps<Options>,
-    ref: ForwardedRef<GridRefHandle<Options>>
-) {
-    const resolvedRef = ref ?? gridRef;
-
-    return <BaseGrid options={options} Grid={Grid} ref={resolvedRef} callback={callback} />;
-});
-
-export default GridPro;
+export default function GridPro({ options, gridRef, callback }: GridProps<Options>) {
+    return <BaseGrid options={options} Grid={Grid} ref={gridRef} callback={callback} />;
+}
diff --git a/packages/grid-shared-react/src/test/createGridTests.tsx b/packages/grid-shared-react/src/test/createGridTests.tsx
index 50c7b15..1faed12 100644
--- a/packages/grid-shared-react/src/test/createGridTests.tsx
+++ b/packages/grid-shared-react/src/test/createGridTests.tsx
@@ -2,8 +2,7 @@ import { render, waitFor, fireEvent } from '@testing-library/react';
 import {
     useRef,
     useState,
-    type ForwardRefExoticComponent,
-    type RefAttributes
+    type ComponentType
 } from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { GridProps, GridRefHandle } from '../components/BaseGrid';
@@ -15,9 +14,7 @@ import { GridInstance } from '../hooks/useGrid';
  */
 export function createGridTests<TOptions>(
     name: string,
-    GridComponent: ForwardRefExoticComponent<
-        GridProps<TOptions> & RefAttributes<GridRefHandle<TOptions>>
-    >,
+    GridComponent: ComponentType<GridProps<TOptions>>,
     testOptions: TOptions,
     updatedOptions: TOptions
 ) {
@@ -41,29 +38,6 @@ export function createGridTests<TOptions>(
             });
         });
 
-        it('provides grid instance via ref', async () => {
-            let gridRef: React.RefObject<GridRefHandle<TOptions> | null>;
-            let initialized = false;
-
-            function TestComponent() {
-                gridRef = useRef<GridRefHandle<TOptions>>(null);
-                return (
-                    <GridComponent
-                        options={testOptions}
-                        ref={gridRef}
-                        callback={() => { initialized = true; }}
-                    />
-                );
-            }
-
-            render(<TestComponent />);
-
-            await waitFor(() => {
-                expect(initialized).toBe(true);
-                expect(gridRef.current?.grid).toBeDefined();
-            });
-        });
-
         it('provides grid instance via gridRef prop', async () => {
             let gridRef: React.RefObject<GridRefHandle<TOptions> | null>;
             let initialized = false;