@genesislcap/foundation-react-utils 14.481.2-alpha-829ad82.0 → 14.482.1-FUI-2575.1

package/dist/custom-elements.json

@@ -2,6 +2,129 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/create-grid-pro-cell-renderer.ts",
+      "declarations": [
+        {
+          "kind": "mixin",
+          "description": "Wraps a React component as an AG Grid cell renderer component class for use with\n`grid-pro` / `grid-pro-beta` (`<foundation-grid-pro>` / `<rapid-grid-pro>`).\n\nGrid Pro is a framework-agnostic Web Component, so AG Grid inside it only understands\nplain-JS component classes. This helper bridges the gap: it returns a class implementing\n`ICellRendererComp` that mounts the React component into the cell with its own React root,\nre-renders it on `refresh` (so value changes and cell flashing keep working without\nremounting), and unmounts it when the cell is destroyed.\n\nThe component receives the full AG Grid `ICellRendererParams` object as props — including\n`value`, `data`, `node`, `api` and anything supplied via the column's `cellRendererParams`.\nHooks and local state inside the component work as normal.\n\nNote on React Context/Redux: by default each cell is rendered into its own independent\nReact root, so renderers do NOT inherit contexts (Redux providers, theme context, React\nRouter, etc.) from the application tree hosting the grid. Either pass data/callbacks\nexplicitly via `cellRendererParams`, or opt into portal mode with the `portals` option\n(see GridProCellRendererOptions.portals and `createGridProCellPortals`) — portal\ncells share the application tree and inherit its contexts.\n\nNote on `key`: props are passed by spreading the AG Grid params object, and React reserves\n`key` — a `cellRendererParams` entry named `key` is consumed as the element key and never\nreaches the component, so avoid that name. (`ref` is fine: React 19 forwards it to function\ncomponents as a regular prop.)\n\nNote on styling: cells render inside grid-pro's shadow root, so document-level stylesheets\n(CSS files imported by your app/page) do NOT reach the rendered component. Style renderers\nwith inline styles or CSS-in-JS. Design-system tokens remain usable either way — CSS custom\nproperties inherit across shadow boundaries (e.g. `color: 'var(--accent-fill-rest)'`).",
+          "name": "createGridProCellRenderer",
+          "members": [
+            {
+              "kind": "field",
+              "name": "container",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "root",
+              "type": {
+                "text": "Root | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "portalId",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "init",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "params",
+                  "type": {
+                    "text": "P"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getGui",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "HTMLElement"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "refresh",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "params",
+                  "type": {
+                    "text": "P"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "destroy",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "parameters": [
+            {
+              "name": "Component",
+              "type": {
+                "text": "ComponentType<P>"
+              },
+              "description": "The React component to render inside the cell."
+            },
+            {
+              "name": "options",
+              "default": "{}",
+              "type": {
+                "text": "GridProCellRendererOptions"
+              },
+              "description": "Optional {@link GridProCellRendererOptions}to tune the wrapper behaviour.\n * "
+            }
+          ],
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "createGridProCellRenderer",
+          "declaration": {
+            "name": "createGridProCellRenderer",
+            "module": "src/create-grid-pro-cell-renderer.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/create-react-renderer.ts",
@@ -83,6 +206,54 @@
             "module": "./create-react-renderer"
           }
         },
+        {
+          "kind": "js",
+          "name": "createGridProCellRenderer",
+          "declaration": {
+            "name": "createGridProCellRenderer",
+            "module": "./create-grid-pro-cell-renderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "createGridProCellPortals",
+          "declaration": {
+            "name": "createGridProCellPortals",
+            "module": "./create-grid-pro-cell-portals"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridProCellPortals",
+          "declaration": {
+            "name": "GridProCellPortals",
+            "module": "./create-grid-pro-cell-portals"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridProCellRendererOptions",
+          "declaration": {
+            "name": "GridProCellRendererOptions",
+            "module": "./create-grid-pro-cell-renderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridProCellRendererProps",
+          "declaration": {
+            "name": "GridProCellRendererProps",
+            "module": "./create-grid-pro-cell-renderer"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridProReactCellRenderer",
+          "declaration": {
+            "name": "GridProReactCellRenderer",
+            "module": "./create-grid-pro-cell-renderer"
+          }
+        },
         {
           "kind": "js",
           "name": "RendererControlProps",

package/dist/dts/create-grid-pro-cell-portals.d.ts

@@ -0,0 +1,81 @@
+import { type ComponentType } from 'react';
+/**
+ * Shared portal manager for Grid Pro React cell renderers.
+ *
+ * Created with {@link createGridProCellPortals}. Render the {@link GridProCellPortals.Portals}
+ * component exactly once inside your React tree — cells rendered through this manager become
+ * part of that tree, so they inherit React Context (Redux providers, theme, router, etc.) from
+ * wherever `Portals` sits. Pass the manager to {@link createGridProCellRenderer} via the
+ * `portals` option to opt a renderer into portal mode.
+ *
+ * @public
+ */
+export interface GridProCellPortals {
+    /**
+     * Host component for all cells rendered through this manager. Render it exactly once,
+     * inside every provider the cell renderers should inherit, and keep it mounted for as
+     * long as the grid is on screen — unmounting it blanks all portal-rendered cells.
+     */
+    Portals: ComponentType;
+    /**
+     * Mounts a component into a cell container and returns the entry id.
+     * Called by the cell renderer wrapper — not intended for direct use.
+     * @internal
+     */
+    mount(container: HTMLElement, Component: ComponentType<any>, params: any): number;
+    /**
+     * Re-renders a mounted cell with new params.
+     * Called by the cell renderer wrapper — not intended for direct use.
+     * @internal
+     */
+    update(id: number, params: any): void;
+    /**
+     * Removes a mounted cell.
+     * Called by the cell renderer wrapper — not intended for direct use.
+     * @internal
+     */
+    remove(id: number): void;
+}
+/**
+ * Creates a {@link GridProCellPortals} manager: a single React root shared by every cell
+ * renderer registered with it, with each cell rendered into its grid cell via a portal.
+ *
+ * Use this instead of the default one-root-per-cell mode when cell renderers need to
+ * inherit React Context from the application tree (Redux, theme, router, query clients...)
+ * — portal-rendered cells live in the tree where `Portals` is rendered, so context updates
+ * propagate into visible cells like any other React state.
+ *
+ * @example
+ * ```tsx
+ * const cellPortals = createGridProCellPortals();
+ *
+ * const gridOptions = {
+ *   components: {
+ *     priceCell: createGridProCellRenderer(PriceCell, { portals: cellPortals }),
+ *   },
+ *   columnDefs: [{ field: 'price', cellRenderer: 'priceCell' }],
+ * };
+ *
+ * function Page() {
+ *   return (
+ *     <SomeProvider>
+ *       <cellPortals.Portals />
+ *       <RapidGridPro gridOptions={gridOptions} />
+ *     </SomeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * Trade-offs versus the default per-cell roots: all cells registered with one manager share
+ * a React tree, so a renderer that throws is contained by a per-cell error boundary (the
+ * failing cell renders empty rather than crashing the rest), and unmounting `Portals` while
+ * the grid is alive blanks every portal-rendered cell. Cell mounts are committed
+ * synchronously (so AG Grid measures real content), which re-renders the manager once per
+ * created cell — the per-cell portals are memoised, keeping that cheap at grid-pro's
+ * virtualised cell counts.
+ *
+ * @public
+ */
+export declare function createGridProCellPortals(): GridProCellPortals;
+//# sourceMappingURL=create-grid-pro-cell-portals.d.ts.map

package/dist/dts/create-grid-pro-cell-portals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-grid-pro-cell-portals.d.ts","sourceRoot":"","sources":["../../src/create-grid-pro-cell-portals.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AAgBf;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,OAAO,EAAE,aAAa,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC;IAClF;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAyCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,wBAAwB,IAAI,kBAAkB,CAyE7D"}

package/dist/dts/create-grid-pro-cell-renderer.d.ts

@@ -0,0 +1,140 @@
+import { type ComponentType } from 'react';
+import type { GridProCellPortals } from './create-grid-pro-cell-portals';
+/**
+ * Props passed to a React component used as a Grid Pro cell renderer.
+ *
+ * This is a structural subset of AG Grid's `ICellRendererParams` — the full params object
+ * (including any custom `cellRendererParams` from the column definition) is spread onto the
+ * component as props on every render, so anything available on `ICellRendererParams` is
+ * available here. Declared locally to avoid coupling this package to a specific
+ * `ag-grid-community` version.
+ *
+ * @public
+ */
+export interface GridProCellRendererProps<TData = any, TValue = any> {
+    /** The cell value. */
+    value: TValue;
+    /** Value formatted by the column's value formatter, if any. */
+    valueFormatted?: string | null;
+    /** The full row data. */
+    data: TData;
+    /** The AG Grid row node. */
+    node: any;
+    /** The AG Grid api. */
+    api: any;
+    /** The row index of the cell. */
+    rowIndex: number;
+    /** The grid context object, as supplied via `gridOptions.context`. */
+    context?: any;
+    /** The column this cell belongs to. */
+    column?: any;
+    /** The column definition. */
+    colDef?: any;
+    /** Custom params from `cellRendererParams` and any other AG Grid params. */
+    [key: string]: any;
+}
+/**
+ * Options for {@link createGridProCellRenderer}.
+ *
+ * @public
+ */
+export interface GridProCellRendererOptions {
+    /**
+     * When true (the default), the cell container is styled as a full-size flex row
+     * (`display: flex; align-items: center; height: 100%; width: 100%`) so content is
+     * vertically centred like grid-pro's built-in renderers.
+     *
+     * Set to false to leave the container unstyled and let the cell's own layout apply.
+     * Do this when the forced flex/height layout gets in the way, e.g.:
+     * - `autoHeight`/`wrapText` columns — `height: 100%` is circular when the row height
+     *   derives from the content, so the cell can collapse instead of growing;
+     * - right-aligned numeric cells relying on `text-align` (a flex item packs to the start);
+     * - content using `text-overflow: ellipsis` (a flex item won't truncate without
+     *   `min-width: 0`).
+     */
+    fillCell?: boolean;
+    /**
+     * Render cells through a shared {@link GridProCellPortals} manager instead of giving each
+     * cell its own React root. Portal-rendered cells become part of the React tree where the
+     * manager's `Portals` component is rendered, so they inherit React Context (Redux, theme,
+     * router, etc.) from the application — the main limitation of the default mode.
+     *
+     * Create one with `createGridProCellPortals()` and render `<manager.Portals />` once,
+     * inside the providers the cells should see. When omitted (the default), each cell gets
+     * its own isolated root.
+     */
+    portals?: GridProCellPortals;
+}
+/**
+ * The subset of AG Grid's `ICellRendererComp` contract implemented by the wrapper class
+ * returned from {@link createGridProCellRenderer}.
+ *
+ * @public
+ */
+export interface GridProReactCellRenderer {
+    init(params: GridProCellRendererProps): void;
+    getGui(): HTMLElement;
+    refresh(params: GridProCellRendererProps): boolean;
+    destroy(): void;
+}
+/**
+ * Wraps a React component as an AG Grid cell renderer component class for use with
+ * `grid-pro` / `grid-pro-beta` (`<foundation-grid-pro>` / `<rapid-grid-pro>`).
+ *
+ * Grid Pro is a framework-agnostic Web Component, so AG Grid inside it only understands
+ * plain-JS component classes. This helper bridges the gap: it returns a class implementing
+ * `ICellRendererComp` that mounts the React component into the cell with its own React root,
+ * re-renders it on `refresh` (so value changes and cell flashing keep working without
+ * remounting), and unmounts it when the cell is destroyed.
+ *
+ * The component receives the full AG Grid `ICellRendererParams` object as props — including
+ * `value`, `data`, `node`, `api` and anything supplied via the column's `cellRendererParams`.
+ * Hooks and local state inside the component work as normal.
+ *
+ * Note on React Context/Redux: by default each cell is rendered into its own independent
+ * React root, so renderers do NOT inherit contexts (Redux providers, theme context, React
+ * Router, etc.) from the application tree hosting the grid. Either pass data/callbacks
+ * explicitly via `cellRendererParams`, or opt into portal mode with the `portals` option
+ * (see {@link GridProCellRendererOptions.portals} and `createGridProCellPortals`) — portal
+ * cells share the application tree and inherit its contexts.
+ *
+ * Note on `key`: props are passed by spreading the AG Grid params object, and React reserves
+ * `key` — a `cellRendererParams` entry named `key` is consumed as the element key and never
+ * reaches the component, so avoid that name. (`ref` is fine: React 19 forwards it to function
+ * components as a regular prop.)
+ *
+ * Note on styling: cells render inside grid-pro's shadow root, so document-level stylesheets
+ * (CSS files imported by your app/page) do NOT reach the rendered component. Style renderers
+ * with inline styles or CSS-in-JS. Design-system tokens remain usable either way — CSS custom
+ * properties inherit across shadow boundaries (e.g. `color: 'var(--accent-fill-rest)'`).
+ *
+ * @example
+ * ```tsx
+ * import { createGridProCellRenderer, type GridProCellRendererProps } from '@genesislcap/foundation-react-utils';
+ *
+ * function PriceCell({ value }: GridProCellRendererProps) {
+ *   return <span style={{ color: value >= 0 ? 'green' : 'red' }}>{value}</span>;
+ * }
+ *
+ * const gridOptions = {
+ *   components: {
+ *     priceCell: createGridProCellRenderer(PriceCell),
+ *   },
+ *   columnDefs: [
+ *     { field: 'price', cellRenderer: 'priceCell' },
+ *   ],
+ * };
+ *
+ * // <rapid-grid-pro gridOptions={gridOptions} /> — or register via the grid's
+ * // `gridComponents` property to make the renderer available across all columns.
+ * ```
+ *
+ * @param Component - The React component to render inside the cell.
+ * @param options - Optional {@link GridProCellRendererOptions} to tune the wrapper behaviour.
+ * @returns A cell renderer component class registrable via `gridOptions.components`,
+ * the grid's `gridComponents` property, or directly as a column's `cellRenderer`.
+ *
+ * @public
+ */
+export declare function createGridProCellRenderer<P extends GridProCellRendererProps = GridProCellRendererProps>(Component: ComponentType<P>, options?: GridProCellRendererOptions): new () => GridProReactCellRenderer;
+//# sourceMappingURL=create-grid-pro-cell-renderer.d.ts.map

package/dist/dts/create-grid-pro-cell-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-grid-pro-cell-renderer.d.ts","sourceRoot":"","sources":["../../src/create-grid-pro-cell-renderer.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAIzE;;;;;;;;;;GAUG;AACH,MAAM,WAAW,wBAAwB,CAAC,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG;IACjE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yBAAyB;IACzB,IAAI,EAAE,KAAK,CAAC;IACZ,4BAA4B;IAC5B,IAAI,EAAE,GAAG,CAAC;IACV,uBAAuB;IACvB,GAAG,EAAE,GAAG,CAAC;IACT,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,uCAAuC;IACvC,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,6BAA6B;IAC7B,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,4EAA4E;IAC5E,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,0BAA0B;IACzC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,MAAM,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAC7C,MAAM,IAAI,WAAW,CAAC;IACtB,OAAO,CAAC,MAAM,EAAE,wBAAwB,GAAG,OAAO,CAAC;IACnD,OAAO,IAAI,IAAI,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,wBAAwB,GAAG,wBAAwB,EAE7D,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,OAAO,GAAE,0BAA+B,GACvC,UAAU,wBAAwB,CAiFpC"}

package/dist/dts/index.d.ts

@@ -7,10 +7,17 @@
  * - `createReactRenderer` — wraps a React component as a `RendererEntry` for use with
  *   `foundation-forms` `additionalRenderers`. Use this instead of writing raw FAST templates
  *   when your custom form renderer is authored in React/JSX.
+ * - `createGridProCellRenderer` — wraps a React component as an AG Grid cell renderer
+ *   component class for use with `grid-pro` (register via `gridOptions.components` or the
+ *   grid's `gridComponents` property).
  * - `reactFactory` / `reactFactoryWithProvider` — mount React component trees into
  *   Genesis Foundation layout regions.
  */
 export { reactFactory, reactFactoryWithProvider } from './react-layout-factory';
 export { createReactRenderer } from './create-react-renderer';
+export { createGridProCellRenderer } from './create-grid-pro-cell-renderer';
+export { createGridProCellPortals } from './create-grid-pro-cell-portals';
+export type { GridProCellPortals } from './create-grid-pro-cell-portals';
+export type { GridProCellRendererOptions, GridProCellRendererProps, GridProReactCellRenderer, } from './create-grid-pro-cell-renderer';
 export type { RendererControlProps } from '@genesislcap/foundation-forms';
 //# sourceMappingURL=index.d.ts.map

package/dist/dts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACzE,YAAY,EACV,0BAA0B,EAC1B,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,iCAAiC,CAAC;AACzC,YAAY,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/create-grid-pro-cell-portals.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { createLogger } from '@genesislcap/foundation-logger';
+import { Component as ReactClassComponent, memo, useEffect, useSyncExternalStore, } from 'react';
+import { createPortal, flushSync } from 'react-dom';
+const logger = createLogger('foundation-react-utils');
+/**
+ * Error boundary around each portal-rendered cell. A shared React tree means one throwing
+ * renderer would otherwise unmount every portal cell in the grid — this contains the blast
+ * radius to the failing cell (which renders empty).
+ * @internal
+ */
+class CellPortalErrorBoundary extends ReactClassComponent {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        logger.error('Grid Pro portal cell renderer threw during render:', error);
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+/**
+ * One portal per cell. Memoised on the entry object — `update()` swaps the entry, so only
+ * the changed cell reconciles when the manager re-renders.
+ * @internal
+ */
+const CellPortal = memo(function GridProCellPortal({ entry }) {
+    return createPortal(_jsx(CellPortalErrorBoundary, { children: _jsx(entry.Component, Object.assign({}, entry.params)) }), entry.container);
+});
+/**
+ * Creates a {@link GridProCellPortals} manager: a single React root shared by every cell
+ * renderer registered with it, with each cell rendered into its grid cell via a portal.
+ *
+ * Use this instead of the default one-root-per-cell mode when cell renderers need to
+ * inherit React Context from the application tree (Redux, theme, router, query clients...)
+ * — portal-rendered cells live in the tree where `Portals` is rendered, so context updates
+ * propagate into visible cells like any other React state.
+ *
+ * @example
+ * ```tsx
+ * const cellPortals = createGridProCellPortals();
+ *
+ * const gridOptions = {
+ *   components: {
+ *     priceCell: createGridProCellRenderer(PriceCell, { portals: cellPortals }),
+ *   },
+ *   columnDefs: [{ field: 'price', cellRenderer: 'priceCell' }],
+ * };
+ *
+ * function Page() {
+ *   return (
+ *     <SomeProvider>
+ *       <cellPortals.Portals />
+ *       <RapidGridPro gridOptions={gridOptions} />
+ *     </SomeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks
+ * Trade-offs versus the default per-cell roots: all cells registered with one manager share
+ * a React tree, so a renderer that throws is contained by a per-cell error boundary (the
+ * failing cell renders empty rather than crashing the rest), and unmounting `Portals` while
+ * the grid is alive blanks every portal-rendered cell. Cell mounts are committed
+ * synchronously (so AG Grid measures real content), which re-renders the manager once per
+ * created cell — the per-cell portals are memoised, keeping that cheap at grid-pro's
+ * virtualised cell counts.
+ *
+ * @public
+ */
+export function createGridProCellPortals() {
+    let entries = [];
+    let nextId = 0;
+    let portalsMounted = false;
+    const listeners = new Set();
+    const emit = () => {
+        listeners.forEach((listener) => listener());
+    };
+    /**
+     * Commits a store change synchronously so the cell content exists in the DOM before
+     * AG Grid measures the container (autoHeight, autoSizeColumns, sizeColumnsToFit).
+     * Mount runs from AG Grid's own (non-React) call stack, so flushing is safe; if it
+     * ever runs inside a host React render, React warns and defers the flush instead.
+     */
+    const emitSync = () => {
+        if (!portalsMounted) {
+            emit();
+            return;
+        }
+        flushSync(emit);
+    };
+    const subscribe = (listener) => {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    };
+    const getSnapshot = () => entries;
+    const Portals = () => {
+        const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+        useEffect(() => {
+            portalsMounted = true;
+            return () => {
+                portalsMounted = false;
+            };
+        }, []);
+        return (_jsx(_Fragment, { children: snapshot.map((entry) => (_jsx(CellPortal, { entry: entry }, entry.id))) }));
+    };
+    return {
+        Portals,
+        mount(container, Component, params) {
+            nextId += 1;
+            const id = nextId;
+            entries = [...entries, { id, container, Component, params }];
+            emitSync();
+            return id;
+        },
+        update(id, params) {
+            entries = entries.map((entry) => (entry.id === id ? Object.assign(Object.assign({}, entry), { params }) : entry));
+            // Async on purpose: refresh() has already returned true and AG Grid does not
+            // re-measure on refresh, so there is nothing to commit synchronously for.
+            emit();
+        },
+        remove(id) {
+            entries = entries.filter((entry) => entry.id !== id);
+            // AG Grid can destroy cells synchronously while React is rendering (e.g. React
+            // Router unmounting the page hosting the grid); notifying subscribers there would
+            // set state mid-render, so defer with a macrotask — the container is already
+            // detached by AG Grid, so the portal lingering one tick is invisible.
+            setTimeout(emit);
+        },
+    };
+}