@slickgrid-universal/react-row-detail-plugin 0.0.1 → 10.0.0-beta.0

package/LICENSE

@@ -0,0 +1,25 @@
+Copyright (c) 2020-present, Ghislain B. 
+https://github.com/ghiscoding/slickgrid-universal
+
+and the original author of SlickGrid 
+Michael Leibman, michael{dot}leibman{at}gmail{dot}com
+http://github.com/mleibman/slickgrid
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,45 +1,19 @@
-# @slickgrid-universal/react-row-detail-plugin
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![lerna--lite](https://img.shields.io/badge/maintained%20with-lerna--lite-e137ff)](https://github.com/ghiscoding/lerna-lite)
+[![npm](https://img.shields.io/npm/v/@slickgrid-universal/react-row-detail-plugin.svg)](https://www.npmjs.com/package/@slickgrid-universal/react-row-detail-plugin)
+[![npm](https://img.shields.io/npm/dy/@slickgrid-universal/react-row-detail-plugin)](https://www.npmjs.com/package/@slickgrid-universal/react-row-detail-plugin)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@slickgrid-universal/react-row-detail-plugin?color=success&label=gzip)](https://bundlephobia.com/result?p=@slickgrid-universal/react-row-detail-plugin)
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+[![Actions Status](https://github.com/ghiscoding/slickgrid-universal/workflows/CI%20Build/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions)
+[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
+[![Vitest](https://img.shields.io/badge/tested%20with-vitest-fcc72b.svg?logo=vitest)](https://vitest.dev/)
+[![codecov](https://codecov.io/gh/ghiscoding/slickgrid-universal/branch/master/graph/badge.svg)](https://codecov.io/gh/ghiscoding/slickgrid-universal)
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
+## Slickgrid-React Row Detail plugin
+#### @slickgrid-universal/react-row-detail-plugin
 
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
+Slickgrid-React Row Detail plugin
 
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@slickgrid-universal/react-row-detail-plugin`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+### Installation
+Follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './reactSlickRowDetailView.js';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './reactSlickRowDetailView.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC","sourcesContent":["export * from './reactSlickRowDetailView.js';\n"]}

package/dist/interfaces.d.ts

@@ -0,0 +1,12 @@
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+export interface RowDetailView extends UniversalRowDetailView {
+    /**
+     * Optionally pass your Parent Component reference to your Child Component (row detail component).
+     * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+     */
+    parentRef?: any;
+    /** View Model of the preload template which shows after opening row detail & before row detail data shows up */
+    preloadComponent?: any;
+    /** View Model template that will be loaded once the async function finishes */
+    viewComponent?: any;
+}

package/dist/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/dist/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../src/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';\n\nexport interface RowDetailView extends UniversalRowDetailView {\n  /**\n   * Optionally pass your Parent Component reference to your Child Component (row detail component).\n   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR\n   */\n  parentRef?: any;\n\n  /** View Model of the preload template which shows after opening row detail & before row detail data shows up */\n  preloadComponent?: any;\n\n  /** View Model template that will be loaded once the async function finishes */\n  viewComponent?: any;\n}\n"]}

package/dist/reactSlickRowDetailView.d.ts

@@ -0,0 +1,84 @@
+import { SlickEventData, type EventSubscription, type OnBeforeRowDetailToggleArgs, type OnRowBackOrOutOfViewportRangeArgs, type SelectionModel, type SlickGrid } from '@slickgrid-universal/common';
+import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import type { Root } from 'react-dom/client';
+import { type GridOption } from 'slickgrid-react';
+import type { RowDetailView } from './interfaces';
+export interface CreatedView {
+    id: string | number;
+    dataContext: any;
+    root: Root | null;
+    rendered?: boolean;
+}
+export declare class ReactSlickRowDetailView extends UniversalSlickRowDetailView {
+    private readonly eventPubSubService;
+    static readonly pluginName = "ReactSlickRowDetailView";
+    protected _component?: any;
+    protected _preloadComponent?: any;
+    protected _preloadRoot?: Root;
+    protected _views: CreatedView[];
+    protected _subscriptions: EventSubscription[];
+    protected _userProcessFn?: (item: any) => Promise<any>;
+    protected gridContainerElement: HTMLElement;
+    _root?: Root;
+    constructor(eventPubSubService: EventPubSubService);
+    get addonOptions(): import("slickgrid-react").RowDetailViewOption;
+    protected get datasetIdPropName(): string;
+    get gridOptions(): GridOption;
+    get rowDetailViewOptions(): RowDetailView | undefined;
+    /** Dispose of the RowDetailView Extension */
+    dispose(): void;
+    /** Dispose of all the opened Row Detail Panels Components */
+    disposeAllViewComponents(): void;
+    /** Get the instance of the SlickGrid addon (control or plugin). */
+    getAddonInstance(): ReactSlickRowDetailView | null;
+    init(grid: SlickGrid): void;
+    /**
+     * Create the plugin before the Grid creation, else it will behave oddly.
+     * Mostly because the column definitions might change after the grid creation
+     */
+    register(rowSelectionPlugin?: SelectionModel): this;
+    /** Redraw (re-render) all the expanded row detail View Components */
+    redrawAllViewComponents(forceRedraw?: boolean): Promise<void>;
+    /** Render all the expanded row detail View Components */
+    renderAllViewModels(): Promise<void>;
+    /** Redraw the necessary View Component */
+    redrawViewComponent(view: CreatedView): void;
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderPreloadView(item: any): void;
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderViewModel(item: any): void;
+    protected upsertViewRefs(item: any, root: Root | null): void;
+    protected disposeViewByItem(item: any, removeFromArray?: boolean): void;
+    protected disposeViewComponent(expandedView: CreatedView): CreatedView | void;
+    /**
+     * Just before the row get expanded or collapsed we will do the following
+     * First determine if the row is expanding or collapsing,
+     * if it's expanding we will add it to our View Components reference array,
+     * if we don't already have it or if it's collapsing we will remove it from our View Components reference array
+     */
+    protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: {
+        grid: SlickGrid;
+        item: any;
+    }): void;
+    /** When Row comes back to Viewport Range, we need to redraw the View */
+    protected handleOnRowBackToViewportRange(_e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>, args: {
+        item: any;
+        rowId: string | number;
+        rowIndex: number;
+        expandedRows: (string | number)[];
+        rowIdsOutOfViewport: (string | number)[];
+        grid: SlickGrid;
+    }): Promise<void>;
+    /**
+     * notify the onAsyncResponse with the "args.item" (required property)
+     * the plugin will then use item to populate the row detail panel with the "postTemplate"
+     * @param item
+     */
+    protected notifyTemplate(item: any): void;
+    /**
+     * On Processing, we will notify the plugin with the new item detail once backend server call completes
+     * @param item
+     */
+    protected onProcessing(item: any): Promise<void>;
+}

package/dist/reactSlickRowDetailView.js

@@ -0,0 +1,335 @@
+import { addToArrayWhenNotExists, createDomElement, SlickEventData, SlickHybridSelectionModel, unsubscribeAll, } from '@slickgrid-universal/common';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import { createReactComponentDynamically } from 'slickgrid-react';
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+export class ReactSlickRowDetailView extends UniversalSlickRowDetailView {
+    eventPubSubService;
+    static pluginName = 'ReactSlickRowDetailView';
+    _component;
+    _preloadComponent;
+    _preloadRoot;
+    _views = [];
+    _subscriptions = [];
+    _userProcessFn;
+    gridContainerElement;
+    _root;
+    constructor(eventPubSubService) {
+        super(eventPubSubService);
+        this.eventPubSubService = eventPubSubService;
+    }
+    get addonOptions() {
+        return this.getOptions();
+    }
+    get datasetIdPropName() {
+        return this.gridOptions.datasetIdPropertyName || 'id';
+    }
+    get gridOptions() {
+        return (this._grid?.getOptions() || {});
+    }
+    get rowDetailViewOptions() {
+        return this.gridOptions.rowDetailView;
+    }
+    /** Dispose of the RowDetailView Extension */
+    dispose() {
+        this.disposeAllViewComponents();
+        unsubscribeAll(this._subscriptions);
+        super.dispose();
+    }
+    /** Dispose of all the opened Row Detail Panels Components */
+    disposeAllViewComponents() {
+        do {
+            const view = this._views.pop();
+            if (view) {
+                this.disposeViewByItem(view);
+            }
+        } while (this._views.length > 0);
+    }
+    /** Get the instance of the SlickGrid addon (control or plugin). */
+    getAddonInstance() {
+        return this;
+    }
+    init(grid) {
+        this._grid = grid;
+        super.init(grid);
+        this.gridContainerElement = grid.getContainerNode();
+        this.register(grid.getSelectionModel());
+    }
+    /**
+     * Create the plugin before the Grid creation, else it will behave oddly.
+     * Mostly because the column definitions might change after the grid creation
+     */
+    register(rowSelectionPlugin) {
+        if (typeof this.gridOptions.rowDetailView?.process === 'function') {
+            // we need to keep the user "process" method and replace it with our own execution method
+            // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
+            this._userProcessFn = this.gridOptions.rowDetailView.process; // keep user's process method
+            this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one
+        }
+        else {
+            throw new Error('[Slickgrid-React] You need to provide a "process" function for the Row Detail Extension to work properly');
+        }
+        if (this._grid && this.gridOptions?.rowDetailView) {
+            // load the Preload & RowDetail Templates (could be straight HTML or React Components)
+            // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
+            if (!this.gridOptions.rowDetailView.preTemplate) {
+                this._preloadComponent = this.gridOptions.rowDetailView.preloadComponent;
+                this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });
+            }
+            if (!this.gridOptions.rowDetailView.postTemplate) {
+                this._component = this.gridOptions.rowDetailView.viewComponent;
+                this.addonOptions.postTemplate = (itemDetail) => createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });
+            }
+            if (this._grid && this.gridOptions) {
+                // this also requires the Row Selection Model to be registered as well
+                if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
+                    const selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';
+                    const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;
+                    rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });
+                    this._grid.setSelectionModel(rowSelectionPlugin);
+                }
+                // hook all events
+                if (this._grid && this.rowDetailViewOptions) {
+                    if (this.rowDetailViewOptions.onExtensionRegistered) {
+                        this.rowDetailViewOptions.onExtensionRegistered(this);
+                    }
+                    this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
+                        if (typeof this.rowDetailViewOptions?.onAsyncResponse === 'function') {
+                            this.rowDetailViewOptions.onAsyncResponse(event, args);
+                        }
+                    });
+                    this._eventHandler.subscribe(this.onAsyncEndUpdate, async (event, args) => {
+                        // dispose preload if exists
+                        this._preloadRoot?.unmount();
+                        // triggers after backend called "onAsyncResponse.notify()"
+                        // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail
+                        queueMicrotask(() => {
+                            this.renderViewModel(args?.item);
+                            if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+                            }
+                        });
+                    });
+                    this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
+                        // display preload template & re-render all the other Detail Views after toggling
+                        // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
+                        this.renderPreloadView(args.item);
+                        if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {
+                            this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);
+                        }
+                    });
+                    this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (event, args) => {
+                        // before toggling row detail, we need to create View Component if it doesn't exist
+                        this.handleOnBeforeRowDetailToggle(event, args);
+                        if (typeof this.rowDetailViewOptions?.onBeforeRowDetailToggle === 'function') {
+                            return this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);
+                        }
+                        return true;
+                    });
+                    this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {
+                        // when row is back to viewport range, we will re-render the View Component(s)
+                        this.handleOnRowBackToViewportRange(event, args);
+                        if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {
+                            this.rowDetailViewOptions.onRowBackToViewportRange(event, args);
+                        }
+                    });
+                    this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {
+                        if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {
+                            this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);
+                        }
+                        this.disposeViewByItem(args.item);
+                    });
+                    this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => {
+                        if (typeof this.rowDetailViewOptions?.onRowOutOfViewportRange === 'function') {
+                            this.rowDetailViewOptions.onRowOutOfViewportRange(event, args);
+                        }
+                    });
+                    // --
+                    // hook some events needed by the Plugin itself
+                    // we need to redraw the open detail views if we change column position (column reorder)
+                    this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false));
+                    // on row selection changed, we also need to redraw
+                    if (this.gridOptions.enableSelection || this.gridOptions.enableCheckboxSelector) {
+                        this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false));
+                    }
+                    // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well
+                    this._eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));
+                    // on filter changed, we need to re-render all Views
+                    this._subscriptions.push(this.eventPubSubService?.subscribe([
+                        'onFilterChanged',
+                        'onGridMenuColumnsChanged',
+                        'onColumnPickerColumnsChanged',
+                        'onGridMenuClearAllFilters',
+                        'onGridMenuClearAllSorting',
+                    ], () => this.redrawAllViewComponents(true)));
+                }
+            }
+        }
+        return this;
+    }
+    /** Redraw (re-render) all the expanded row detail View Components */
+    async redrawAllViewComponents(forceRedraw = false) {
+        setTimeout(() => {
+            this.resetRenderedRows();
+            this._views.forEach((view) => {
+                if (!view.rendered || forceRedraw) {
+                    forceRedraw && this.disposeViewComponent(view);
+                    this.redrawViewComponent(view);
+                }
+            });
+        });
+    }
+    /** Render all the expanded row detail View Components */
+    async renderAllViewModels() {
+        this._views.filter((x) => x?.dataContext).forEach((x) => this.renderViewModel(x.dataContext));
+    }
+    /** Redraw the necessary View Component */
+    redrawViewComponent(view) {
+        const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
+        if (containerElement) {
+            this.renderViewModel(view.dataContext);
+        }
+    }
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderPreloadView(item) {
+        const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);
+        if (this._preloadComponent && containerElement) {
+            // render row detail
+            const bindableData = {
+                model: item,
+                addon: this,
+                grid: this._grid,
+                dataView: this.dataView,
+                parentRef: this.rowDetailViewOptions?.parentRef,
+            };
+            const detailContainer = document.createElement('section');
+            containerElement.appendChild(detailContainer);
+            const { root } = createReactComponentDynamically(this._preloadComponent, detailContainer, bindableData);
+            this._preloadRoot = root;
+        }
+    }
+    /** Render (or re-render) the View Component (Row Detail) */
+    renderViewModel(item) {
+        const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
+        if (this._component && containerElement) {
+            const bindableData = {
+                model: item,
+                addon: this,
+                grid: this._grid,
+                dataView: this.dataView,
+                parentRef: this.rowDetailViewOptions?.parentRef,
+            };
+            // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below)
+            // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev
+            // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway
+            const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
+            const { root } = createReactComponentDynamically(this._component, containerElement, bindableData);
+            if (viewObj) {
+                viewObj.root = root;
+                viewObj.rendered = true;
+            }
+            else {
+                this.upsertViewRefs(item, root);
+            }
+        }
+    }
+    // --
+    // protected functions
+    // ------------------
+    upsertViewRefs(item, root) {
+        const viewIdx = this._views.findIndex((obj) => obj.id === item[this.datasetIdPropName]);
+        const viewInfo = {
+            id: item[this.datasetIdPropName],
+            dataContext: item,
+            root,
+            rendered: !!root,
+        };
+        if (viewIdx >= 0) {
+            this._views[viewIdx] = viewInfo;
+        }
+        else {
+            this._views.push(viewInfo);
+        }
+        addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);
+    }
+    disposeViewByItem(item, removeFromArray = false) {
+        const foundViewIdx = this._views.findIndex((view) => view.id === item[this.datasetIdPropName]);
+        if (foundViewIdx >= 0) {
+            this.disposeViewComponent(this._views[foundViewIdx]);
+            if (removeFromArray) {
+                this._views.splice(foundViewIdx, 1);
+            }
+        }
+    }
+    disposeViewComponent(expandedView) {
+        expandedView.rendered = false;
+        if (expandedView?.root) {
+            const container = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`);
+            if (container) {
+                expandedView.root.unmount();
+                container.textContent = '';
+                return expandedView;
+            }
+        }
+    }
+    /**
+     * Just before the row get expanded or collapsed we will do the following
+     * First determine if the row is expanding or collapsing,
+     * if it's expanding we will add it to our View Components reference array,
+     * if we don't already have it or if it's collapsing we will remove it from our View Components reference array
+     */
+    handleOnBeforeRowDetailToggle(_e, args) {
+        // expanding
+        if (args?.item?.__collapsed) {
+            // expanding row detail
+            this.upsertViewRefs(args.item, null);
+        }
+        else {
+            // collapsing, so dispose of the View
+            this.disposeViewByItem(args.item, true);
+        }
+    }
+    /** When Row comes back to Viewport Range, we need to redraw the View */
+    async handleOnRowBackToViewportRange(_e, args) {
+        const viewModel = this._views.find((x) => x.id === args.rowId);
+        if (viewModel && !viewModel.rendered) {
+            this.redrawViewComponent(viewModel);
+        }
+    }
+    /**
+     * notify the onAsyncResponse with the "args.item" (required property)
+     * the plugin will then use item to populate the row detail panel with the "postTemplate"
+     * @param item
+     */
+    notifyTemplate(item) {
+        this.onAsyncResponse.notify({ item }, new SlickEventData(), this);
+    }
+    /**
+     * On Processing, we will notify the plugin with the new item detail once backend server call completes
+     * @param item
+     */
+    async onProcessing(item) {
+        if (item && typeof this._userProcessFn === 'function') {
+            let awaitedItemDetail;
+            const userProcessFn = this._userProcessFn(item);
+            // wait for the "userProcessFn", once resolved we will save it into the "collection"
+            const response = await userProcessFn;
+            if (response.hasOwnProperty(this.datasetIdPropName)) {
+                awaitedItemDetail = response; // from Promise
+            }
+            else if (response instanceof Response && typeof response['json'] === 'function') {
+                awaitedItemDetail = await response['json'](); // from Fetch
+            }
+            else if (response && response['content']) {
+                awaitedItemDetail = response['content']; // from http-client
+            }
+            if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
+                throw new Error('[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' +
+                    `returns an item object that has an "${this.datasetIdPropName}" property`);
+            }
+            // notify the plugin with the new item details
+            this.notifyTemplate(awaitedItemDetail || {});
+        }
+    }
+}
+//# sourceMappingURL=reactSlickRowDetailView.js.map

package/dist/reactSlickRowDetailView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactSlickRowDetailView.js","sourceRoot":"","sources":["../src/reactSlickRowDetailView.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  addToArrayWhenNotExists,\n  createDomElement,\n  SlickEventData,\n  SlickHybridSelectionModel,\n  unsubscribeAll,\n  type EventSubscription,\n  type OnBeforeRowDetailToggleArgs,\n  type OnRowBackOrOutOfViewportRangeArgs,\n  type SelectionModel,\n  type SlickGrid,\n} from '@slickgrid-universal/common';\nimport { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';\nimport { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';\nimport type { Root } from 'react-dom/client';\nimport { createReactComponentDynamically, type GridOption, type ViewModelBindableInputData } from 'slickgrid-react';\nimport type { RowDetailView } from './interfaces';\n\nconst ROW_DETAIL_CONTAINER_PREFIX = 'container_';\nconst PRELOAD_CONTAINER_PREFIX = 'container_loading';\n\nexport interface CreatedView {\n  id: string | number;\n  dataContext: any;\n  root: Root | null;\n  rendered?: boolean;\n}\n\nexport class ReactSlickRowDetailView extends UniversalSlickRowDetailView {\n  static readonly pluginName = 'ReactSlickRowDetailView';\n  protected _component?: any;\n  protected _preloadComponent?: any;\n  protected _preloadRoot?: Root;\n  protected _views: CreatedView[] = [];\n  protected _subscriptions: EventSubscription[] = [];\n  protected _userProcessFn?: (item: any) => Promise<any>;\n  protected gridContainerElement!: HTMLElement;\n  _root?: Root;\n\n  constructor(private readonly eventPubSubService: EventPubSubService) {\n    super(eventPubSubService);\n  }\n\n  get addonOptions() {\n    return this.getOptions();\n  }\n\n  protected get datasetIdPropName(): string {\n    return this.gridOptions.datasetIdPropertyName || 'id';\n  }\n\n  get gridOptions(): GridOption {\n    return (this._grid?.getOptions() || {}) as GridOption;\n  }\n\n  get rowDetailViewOptions(): RowDetailView | undefined {\n    return this.gridOptions.rowDetailView;\n  }\n\n  /** Dispose of the RowDetailView Extension */\n  dispose() {\n    this.disposeAllViewComponents();\n    unsubscribeAll(this._subscriptions);\n    super.dispose();\n  }\n\n  /** Dispose of all the opened Row Detail Panels Components */\n  disposeAllViewComponents() {\n    do {\n      const view = this._views.pop();\n      if (view) {\n        this.disposeViewByItem(view);\n      }\n    } while (this._views.length > 0);\n  }\n\n  /** Get the instance of the SlickGrid addon (control or plugin). */\n  getAddonInstance(): ReactSlickRowDetailView | null {\n    return this;\n  }\n\n  init(grid: SlickGrid) {\n    this._grid = grid;\n    super.init(grid);\n    this.gridContainerElement = grid.getContainerNode();\n    this.register(grid.getSelectionModel());\n  }\n\n  /**\n   * Create the plugin before the Grid creation, else it will behave oddly.\n   * Mostly because the column definitions might change after the grid creation\n   */\n  register(rowSelectionPlugin?: SelectionModel) {\n    if (typeof this.gridOptions.rowDetailView?.process === 'function') {\n      // we need to keep the user \"process\" method and replace it with our own execution method\n      // we do this because when we get the item detail, we need to call \"onAsyncResponse.notify\" for the plugin to work\n      this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise<any>; // keep user's process method\n      this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one\n    } else {\n      throw new Error('[Slickgrid-React] You need to provide a \"process\" function for the Row Detail Extension to work properly');\n    }\n\n    if (this._grid && this.gridOptions?.rowDetailView) {\n      // load the Preload & RowDetail Templates (could be straight HTML or React Components)\n      // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)\n      if (!this.gridOptions.rowDetailView.preTemplate) {\n        this._preloadComponent = this.gridOptions.rowDetailView.preloadComponent;\n        this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });\n      }\n      if (!this.gridOptions.rowDetailView.postTemplate) {\n        this._component = this.gridOptions.rowDetailView.viewComponent;\n        this.addonOptions.postTemplate = (itemDetail: any) =>\n          createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });\n      }\n\n      if (this._grid && this.gridOptions) {\n        // this also requires the Row Selection Model to be registered as well\n        if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {\n          const selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';\n          const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;\n          rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });\n          this._grid.setSelectionModel(rowSelectionPlugin);\n        }\n\n        // hook all events\n        if (this._grid && this.rowDetailViewOptions) {\n          if (this.rowDetailViewOptions.onExtensionRegistered) {\n            this.rowDetailViewOptions.onExtensionRegistered(this);\n          }\n\n          this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {\n            if (typeof this.rowDetailViewOptions?.onAsyncResponse === 'function') {\n              this.rowDetailViewOptions.onAsyncResponse(event, args);\n            }\n          });\n\n          this._eventHandler.subscribe(this.onAsyncEndUpdate, async (event, args) => {\n            // dispose preload if exists\n            this._preloadRoot?.unmount();\n\n            // triggers after backend called \"onAsyncResponse.notify()\"\n            // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail\n            queueMicrotask(() => {\n              this.renderViewModel(args?.item);\n\n              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {\n                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);\n              }\n            });\n          });\n\n          this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {\n            // display preload template & re-render all the other Detail Views after toggling\n            // the preload View will eventually go away once the data gets loaded after the \"onAsyncEndUpdate\" event\n            this.renderPreloadView(args.item);\n\n            if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {\n              this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);\n            }\n          });\n\n          this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (event, args) => {\n            // before toggling row detail, we need to create View Component if it doesn't exist\n            this.handleOnBeforeRowDetailToggle(event, args);\n\n            if (typeof this.rowDetailViewOptions?.onBeforeRowDetailToggle === 'function') {\n              return this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);\n            }\n            return true;\n          });\n\n          this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {\n            // when row is back to viewport range, we will re-render the View Component(s)\n            this.handleOnRowBackToViewportRange(event, args);\n\n            if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {\n              this.rowDetailViewOptions.onRowBackToViewportRange(event, args);\n            }\n          });\n\n          this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {\n            if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {\n              this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);\n            }\n            this.disposeViewByItem(args.item);\n          });\n\n          this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => {\n            if (typeof this.rowDetailViewOptions?.onRowOutOfViewportRange === 'function') {\n              this.rowDetailViewOptions.onRowOutOfViewportRange(event, args);\n            }\n          });\n\n          // --\n          // hook some events needed by the Plugin itself\n\n          // we need to redraw the open detail views if we change column position (column reorder)\n          this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false));\n\n          // on row selection changed, we also need to redraw\n          if (this.gridOptions.enableSelection || this.gridOptions.enableCheckboxSelector) {\n            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false));\n          }\n\n          // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well\n          this._eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));\n\n          // on filter changed, we need to re-render all Views\n          this._subscriptions.push(\n            this.eventPubSubService?.subscribe(\n              [\n                'onFilterChanged',\n                'onGridMenuColumnsChanged',\n                'onColumnPickerColumnsChanged',\n                'onGridMenuClearAllFilters',\n                'onGridMenuClearAllSorting',\n              ],\n              () => this.redrawAllViewComponents(true)\n            )\n          );\n        }\n      }\n    }\n\n    return this;\n  }\n\n  /** Redraw (re-render) all the expanded row detail View Components */\n  async redrawAllViewComponents(forceRedraw = false) {\n    setTimeout(() => {\n      this.resetRenderedRows();\n      this._views.forEach((view) => {\n        if (!view.rendered || forceRedraw) {\n          forceRedraw && this.disposeViewComponent(view);\n          this.redrawViewComponent(view);\n        }\n      });\n    });\n  }\n\n  /** Render all the expanded row detail View Components */\n  async renderAllViewModels() {\n    this._views.filter((x) => x?.dataContext).forEach((x) => this.renderViewModel(x.dataContext));\n  }\n\n  /** Redraw the necessary View Component */\n  redrawViewComponent(view: CreatedView) {\n    const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);\n    if (containerElement) {\n      this.renderViewModel(view.dataContext);\n    }\n  }\n\n  /** Render (or re-render) the View Component (Row Detail) */\n  renderPreloadView(item: any) {\n    const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);\n    if (this._preloadComponent && containerElement) {\n      // render row detail\n      const bindableData = {\n        model: item,\n        addon: this,\n        grid: this._grid,\n        dataView: this.dataView,\n        parentRef: this.rowDetailViewOptions?.parentRef,\n      } as ViewModelBindableInputData;\n      const detailContainer = document.createElement('section');\n      containerElement.appendChild(detailContainer);\n\n      const { root } = createReactComponentDynamically(this._preloadComponent, detailContainer, bindableData);\n      this._preloadRoot = root;\n    }\n  }\n\n  /** Render (or re-render) the View Component (Row Detail) */\n  renderViewModel(item: any) {\n    const containerElement = this.gridContainerElement.querySelector<HTMLElement>(\n      `.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`\n    );\n    if (this._component && containerElement) {\n      const bindableData = {\n        model: item,\n        addon: this,\n        grid: this._grid,\n        dataView: this.dataView,\n        parentRef: this.rowDetailViewOptions?.parentRef,\n      } as ViewModelBindableInputData;\n\n      // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below)\n      // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev\n      // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway\n      const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);\n      const { root } = createReactComponentDynamically(this._component, containerElement, bindableData);\n      if (viewObj) {\n        viewObj.root = root;\n        viewObj.rendered = true;\n      } else {\n        this.upsertViewRefs(item, root);\n      }\n    }\n  }\n\n  // --\n  // protected functions\n  // ------------------\n\n  protected upsertViewRefs(item: any, root: Root | null) {\n    const viewIdx = this._views.findIndex((obj) => obj.id === item[this.datasetIdPropName]);\n    const viewInfo: CreatedView = {\n      id: item[this.datasetIdPropName],\n      dataContext: item,\n      root,\n      rendered: !!root,\n    };\n    if (viewIdx >= 0) {\n      this._views[viewIdx] = viewInfo;\n    } else {\n      this._views.push(viewInfo);\n    }\n    addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);\n  }\n\n  protected disposeViewByItem(item: any, removeFromArray = false): void {\n    const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]);\n    if (foundViewIdx >= 0) {\n      this.disposeViewComponent(this._views[foundViewIdx]);\n      if (removeFromArray) {\n        this._views.splice(foundViewIdx, 1);\n      }\n    }\n  }\n\n  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {\n    expandedView.rendered = false;\n    if (expandedView?.root) {\n      const container = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`);\n      if (container) {\n        expandedView.root.unmount();\n        container.textContent = '';\n        return expandedView;\n      }\n    }\n  }\n\n  /**\n   * Just before the row get expanded or collapsed we will do the following\n   * First determine if the row is expanding or collapsing,\n   * if it's expanding we will add it to our View Components reference array,\n   * if we don't already have it or if it's collapsing we will remove it from our View Components reference array\n   */\n  protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any }) {\n    // expanding\n    if (args?.item?.__collapsed) {\n      // expanding row detail\n      this.upsertViewRefs(args.item, null);\n    } else {\n      // collapsing, so dispose of the View\n      this.disposeViewByItem(args.item, true);\n    }\n  }\n\n  /** When Row comes back to Viewport Range, we need to redraw the View */\n  protected async handleOnRowBackToViewportRange(\n    _e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>,\n    args: {\n      item: any;\n      rowId: string | number;\n      rowIndex: number;\n      expandedRows: (string | number)[];\n      rowIdsOutOfViewport: (string | number)[];\n      grid: SlickGrid;\n    }\n  ) {\n    const viewModel = this._views.find((x) => x.id === args.rowId);\n    if (viewModel && !viewModel.rendered) {\n      this.redrawViewComponent(viewModel);\n    }\n  }\n\n  /**\n   * notify the onAsyncResponse with the \"args.item\" (required property)\n   * the plugin will then use item to populate the row detail panel with the \"postTemplate\"\n   * @param item\n   */\n  protected notifyTemplate(item: any) {\n    this.onAsyncResponse.notify({ item }, new SlickEventData(), this);\n  }\n\n  /**\n   * On Processing, we will notify the plugin with the new item detail once backend server call completes\n   * @param item\n   */\n  protected async onProcessing(item: any) {\n    if (item && typeof this._userProcessFn === 'function') {\n      let awaitedItemDetail: any;\n      const userProcessFn = this._userProcessFn(item);\n\n      // wait for the \"userProcessFn\", once resolved we will save it into the \"collection\"\n      const response: any | any[] = await userProcessFn;\n\n      if (response.hasOwnProperty(this.datasetIdPropName)) {\n        awaitedItemDetail = response; // from Promise\n      } else if (response instanceof Response && typeof response['json'] === 'function') {\n        awaitedItemDetail = await response['json'](); // from Fetch\n      } else if (response && response['content']) {\n        awaitedItemDetail = response['content']; // from http-client\n      }\n\n      if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {\n        throw new Error(\n          '[Slickgrid-React] could not process the Row Detail, please make sure that your \"process\" callback ' +\n            `returns an item object that has an \"${this.datasetIdPropName}\" property`\n        );\n      }\n\n      // notify the plugin with the new item details\n      this.notifyTemplate(awaitedItemDetail || {});\n    }\n  }\n}\n"]}

package/package.json

@@ -1,10 +1,43 @@
 {
   "name": "@slickgrid-universal/react-row-detail-plugin",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @slickgrid-universal/react-row-detail-plugin",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+  "version": "10.0.0-beta.0",
+  "description": "React Row Detail Plugin for SlickGrid-React",
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/dist",
+    "/src"
+  ],
+  "license": "MIT",
+  "author": "Ghislain B.",
+  "homepage": "https://github.com/ghiscoding/slickgrid-universal",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ghiscoding/slickgrid-universal.git",
+    "directory": "packages/react-row-detail-plugin"
+  },
+  "bugs": {
+    "url": "https://github.com/ghiscoding/slickgrid-universal/issues"
+  },
+  "dependencies": {
+    "@slickgrid-universal/common": "10.0.0-beta.0",
+    "@slickgrid-universal/event-pub-sub": "10.0.0-beta.0",
+    "@slickgrid-universal/row-detail-view-plugin": "10.0.0-beta.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "slickgrid-react": "10.0.0-beta.0",
+    "tslib": "^2.8.1"
+  },
+  "gitHead": "9ee3b4ce76e171dd3375f1e68e232e315364600e"
 }

package/src/index.ts

@@ -0,0 +1 @@
+export * from './reactSlickRowDetailView.js';

package/src/interfaces.ts

@@ -0,0 +1,15 @@
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+
+export interface RowDetailView extends UniversalRowDetailView {
+  /**
+   * Optionally pass your Parent Component reference to your Child Component (row detail component).
+   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+   */
+  parentRef?: any;
+
+  /** View Model of the preload template which shows after opening row detail & before row detail data shows up */
+  preloadComponent?: any;
+
+  /** View Model template that will be loaded once the async function finishes */
+  viewComponent?: any;
+}

package/src/reactSlickRowDetailView.ts

@@ -0,0 +1,419 @@
+import {
+  addToArrayWhenNotExists,
+  createDomElement,
+  SlickEventData,
+  SlickHybridSelectionModel,
+  unsubscribeAll,
+  type EventSubscription,
+  type OnBeforeRowDetailToggleArgs,
+  type OnRowBackOrOutOfViewportRangeArgs,
+  type SelectionModel,
+  type SlickGrid,
+} from '@slickgrid-universal/common';
+import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
+import type { Root } from 'react-dom/client';
+import { createReactComponentDynamically, type GridOption, type ViewModelBindableInputData } from 'slickgrid-react';
+import type { RowDetailView } from './interfaces';
+
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+
+export interface CreatedView {
+  id: string | number;
+  dataContext: any;
+  root: Root | null;
+  rendered?: boolean;
+}
+
+export class ReactSlickRowDetailView extends UniversalSlickRowDetailView {
+  static readonly pluginName = 'ReactSlickRowDetailView';
+  protected _component?: any;
+  protected _preloadComponent?: any;
+  protected _preloadRoot?: Root;
+  protected _views: CreatedView[] = [];
+  protected _subscriptions: EventSubscription[] = [];
+  protected _userProcessFn?: (item: any) => Promise<any>;
+  protected gridContainerElement!: HTMLElement;
+  _root?: Root;
+
+  constructor(private readonly eventPubSubService: EventPubSubService) {
+    super(eventPubSubService);
+  }
+
+  get addonOptions() {
+    return this.getOptions();
+  }
+
+  protected get datasetIdPropName(): string {
+    return this.gridOptions.datasetIdPropertyName || 'id';
+  }
+
+  get gridOptions(): GridOption {
+    return (this._grid?.getOptions() || {}) as GridOption;
+  }
+
+  get rowDetailViewOptions(): RowDetailView | undefined {
+    return this.gridOptions.rowDetailView;
+  }
+
+  /** Dispose of the RowDetailView Extension */
+  dispose() {
+    this.disposeAllViewComponents();
+    unsubscribeAll(this._subscriptions);
+    super.dispose();
+  }
+
+  /** Dispose of all the opened Row Detail Panels Components */
+  disposeAllViewComponents() {
+    do {
+      const view = this._views.pop();
+      if (view) {
+        this.disposeViewByItem(view);
+      }
+    } while (this._views.length > 0);
+  }
+
+  /** Get the instance of the SlickGrid addon (control or plugin). */
+  getAddonInstance(): ReactSlickRowDetailView | null {
+    return this;
+  }
+
+  init(grid: SlickGrid) {
+    this._grid = grid;
+    super.init(grid);
+    this.gridContainerElement = grid.getContainerNode();
+    this.register(grid.getSelectionModel());
+  }
+
+  /**
+   * Create the plugin before the Grid creation, else it will behave oddly.
+   * Mostly because the column definitions might change after the grid creation
+   */
+  register(rowSelectionPlugin?: SelectionModel) {
+    if (typeof this.gridOptions.rowDetailView?.process === 'function') {
+      // we need to keep the user "process" method and replace it with our own execution method
+      // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
+      this._userProcessFn = this.gridOptions.rowDetailView.process as (item: any) => Promise<any>; // keep user's process method
+      this.addonOptions.process = (item) => this.onProcessing(item); // replace process method & run our internal one
+    } else {
+      throw new Error('[Slickgrid-React] You need to provide a "process" function for the Row Detail Extension to work properly');
+    }
+
+    if (this._grid && this.gridOptions?.rowDetailView) {
+      // load the Preload & RowDetail Templates (could be straight HTML or React Components)
+      // when those are React Components, we need to create View Component & provide the html containers to the Plugin (preTemplate/postTemplate methods)
+      if (!this.gridOptions.rowDetailView.preTemplate) {
+        this._preloadComponent = this.gridOptions.rowDetailView.preloadComponent;
+        this.addonOptions.preTemplate = () => createDomElement('div', { className: `${PRELOAD_CONTAINER_PREFIX}` });
+      }
+      if (!this.gridOptions.rowDetailView.postTemplate) {
+        this._component = this.gridOptions.rowDetailView.viewComponent;
+        this.addonOptions.postTemplate = (itemDetail: any) =>
+          createDomElement('div', { className: `${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}` });
+      }
+
+      if (this._grid && this.gridOptions) {
+        // this also requires the Row Selection Model to be registered as well
+        if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
+          const selectionType = this.gridOptions.selectionOptions?.selectionType || 'row';
+          const selectActiveRow = this.gridOptions.selectionOptions?.selectActiveRow ?? true;
+          rowSelectionPlugin = new SlickHybridSelectionModel({ ...this.gridOptions.selectionOptions, selectionType, selectActiveRow });
+          this._grid.setSelectionModel(rowSelectionPlugin);
+        }
+
+        // hook all events
+        if (this._grid && this.rowDetailViewOptions) {
+          if (this.rowDetailViewOptions.onExtensionRegistered) {
+            this.rowDetailViewOptions.onExtensionRegistered(this);
+          }
+
+          this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
+            if (typeof this.rowDetailViewOptions?.onAsyncResponse === 'function') {
+              this.rowDetailViewOptions.onAsyncResponse(event, args);
+            }
+          });
+
+          this._eventHandler.subscribe(this.onAsyncEndUpdate, async (event, args) => {
+            // dispose preload if exists
+            this._preloadRoot?.unmount();
+
+            // triggers after backend called "onAsyncResponse.notify()"
+            // because of the preload destroy above, we need a small delay to make sure the DOM element is ready to render the Row Detail
+            queueMicrotask(() => {
+              this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
+          });
+
+          this._eventHandler.subscribe(this.onAfterRowDetailToggle, async (event, args) => {
+            // display preload template & re-render all the other Detail Views after toggling
+            // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
+            this.renderPreloadView(args.item);
+
+            if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {
+              this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);
+            }
+          });
+
+          this._eventHandler.subscribe(this.onBeforeRowDetailToggle, (event, args) => {
+            // before toggling row detail, we need to create View Component if it doesn't exist
+            this.handleOnBeforeRowDetailToggle(event, args);
+
+            if (typeof this.rowDetailViewOptions?.onBeforeRowDetailToggle === 'function') {
+              return this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);
+            }
+            return true;
+          });
+
+          this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {
+            // when row is back to viewport range, we will re-render the View Component(s)
+            this.handleOnRowBackToViewportRange(event, args);
+
+            if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {
+              this.rowDetailViewOptions.onRowBackToViewportRange(event, args);
+            }
+          });
+
+          this._eventHandler.subscribe(this.onBeforeRowOutOfViewportRange, (event, args) => {
+            if (typeof this.rowDetailViewOptions?.onBeforeRowOutOfViewportRange === 'function') {
+              this.rowDetailViewOptions.onBeforeRowOutOfViewportRange(event, args);
+            }
+            this.disposeViewByItem(args.item);
+          });
+
+          this._eventHandler.subscribe(this.onRowOutOfViewportRange, (event, args) => {
+            if (typeof this.rowDetailViewOptions?.onRowOutOfViewportRange === 'function') {
+              this.rowDetailViewOptions.onRowOutOfViewportRange(event, args);
+            }
+          });
+
+          // --
+          // hook some events needed by the Plugin itself
+
+          // we need to redraw the open detail views if we change column position (column reorder)
+          this.eventHandler.subscribe(this._grid.onColumnsReordered, () => this.redrawAllViewComponents(false));
+
+          // on row selection changed, we also need to redraw
+          if (this.gridOptions.enableSelection || this.gridOptions.enableCheckboxSelector) {
+            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, () => this.redrawAllViewComponents(false));
+          }
+
+          // on column sort/reorder, all row detail are collapsed so we can dispose of all the Views as well
+          this._eventHandler.subscribe(this._grid.onSort, this.disposeAllViewComponents.bind(this));
+
+          // on filter changed, we need to re-render all Views
+          this._subscriptions.push(
+            this.eventPubSubService?.subscribe(
+              [
+                'onFilterChanged',
+                'onGridMenuColumnsChanged',
+                'onColumnPickerColumnsChanged',
+                'onGridMenuClearAllFilters',
+                'onGridMenuClearAllSorting',
+              ],
+              () => this.redrawAllViewComponents(true)
+            )
+          );
+        }
+      }
+    }
+
+    return this;
+  }
+
+  /** Redraw (re-render) all the expanded row detail View Components */
+  async redrawAllViewComponents(forceRedraw = false) {
+    setTimeout(() => {
+      this.resetRenderedRows();
+      this._views.forEach((view) => {
+        if (!view.rendered || forceRedraw) {
+          forceRedraw && this.disposeViewComponent(view);
+          this.redrawViewComponent(view);
+        }
+      });
+    });
+  }
+
+  /** Render all the expanded row detail View Components */
+  async renderAllViewModels() {
+    this._views.filter((x) => x?.dataContext).forEach((x) => this.renderViewModel(x.dataContext));
+  }
+
+  /** Redraw the necessary View Component */
+  redrawViewComponent(view: CreatedView) {
+    const containerElement = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
+    if (containerElement) {
+      this.renderViewModel(view.dataContext);
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  renderPreloadView(item: any) {
+    const containerElement = this.gridContainerElement.querySelector(`.${PRELOAD_CONTAINER_PREFIX}`);
+    if (this._preloadComponent && containerElement) {
+      // render row detail
+      const bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        parentRef: this.rowDetailViewOptions?.parentRef,
+      } as ViewModelBindableInputData;
+      const detailContainer = document.createElement('section');
+      containerElement.appendChild(detailContainer);
+
+      const { root } = createReactComponentDynamically(this._preloadComponent, detailContainer, bindableData);
+      this._preloadRoot = root;
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  renderViewModel(item: any) {
+    const containerElement = this.gridContainerElement.querySelector<HTMLElement>(
+      `.${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`
+    );
+    if (this._component && containerElement) {
+      const bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        parentRef: this.rowDetailViewOptions?.parentRef,
+      } as ViewModelBindableInputData;
+
+      // load our Row Detail React Component dynamically, typically we would want to use `root.render()` after the preload component (last argument below)
+      // BUT the root render doesn't seem to work and shows a blank element, so we'll use `createRoot()` every time even though it shows a console log in Dev
+      // that is the only way I got it working so let's use it anyway and console warnings are removed in production anyway
+      const viewObj = this._views.find((obj) => obj.id === item[this.datasetIdPropName]);
+      const { root } = createReactComponentDynamically(this._component, containerElement, bindableData);
+      if (viewObj) {
+        viewObj.root = root;
+        viewObj.rendered = true;
+      } else {
+        this.upsertViewRefs(item, root);
+      }
+    }
+  }
+
+  // --
+  // protected functions
+  // ------------------
+
+  protected upsertViewRefs(item: any, root: Root | null) {
+    const viewIdx = this._views.findIndex((obj) => obj.id === item[this.datasetIdPropName]);
+    const viewInfo: CreatedView = {
+      id: item[this.datasetIdPropName],
+      dataContext: item,
+      root,
+      rendered: !!root,
+    };
+    if (viewIdx >= 0) {
+      this._views[viewIdx] = viewInfo;
+    } else {
+      this._views.push(viewInfo);
+    }
+    addToArrayWhenNotExists(this._views, viewInfo, this.datasetIdPropName);
+  }
+
+  protected disposeViewByItem(item: any, removeFromArray = false): void {
+    const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === item[this.datasetIdPropName]);
+    if (foundViewIdx >= 0) {
+      this.disposeViewComponent(this._views[foundViewIdx]);
+      if (removeFromArray) {
+        this._views.splice(foundViewIdx, 1);
+      }
+    }
+  }
+
+  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
+    expandedView.rendered = false;
+    if (expandedView?.root) {
+      const container = this.gridContainerElement.querySelector(`.${ROW_DETAIL_CONTAINER_PREFIX}${expandedView.id}`);
+      if (container) {
+        expandedView.root.unmount();
+        container.textContent = '';
+        return expandedView;
+      }
+    }
+  }
+
+  /**
+   * Just before the row get expanded or collapsed we will do the following
+   * First determine if the row is expanding or collapsing,
+   * if it's expanding we will add it to our View Components reference array,
+   * if we don't already have it or if it's collapsing we will remove it from our View Components reference array
+   */
+  protected handleOnBeforeRowDetailToggle(_e: SlickEventData<OnBeforeRowDetailToggleArgs>, args: { grid: SlickGrid; item: any }) {
+    // expanding
+    if (args?.item?.__collapsed) {
+      // expanding row detail
+      this.upsertViewRefs(args.item, null);
+    } else {
+      // collapsing, so dispose of the View
+      this.disposeViewByItem(args.item, true);
+    }
+  }
+
+  /** When Row comes back to Viewport Range, we need to redraw the View */
+  protected async handleOnRowBackToViewportRange(
+    _e: SlickEventData<OnRowBackOrOutOfViewportRangeArgs>,
+    args: {
+      item: any;
+      rowId: string | number;
+      rowIndex: number;
+      expandedRows: (string | number)[];
+      rowIdsOutOfViewport: (string | number)[];
+      grid: SlickGrid;
+    }
+  ) {
+    const viewModel = this._views.find((x) => x.id === args.rowId);
+    if (viewModel && !viewModel.rendered) {
+      this.redrawViewComponent(viewModel);
+    }
+  }
+
+  /**
+   * notify the onAsyncResponse with the "args.item" (required property)
+   * the plugin will then use item to populate the row detail panel with the "postTemplate"
+   * @param item
+   */
+  protected notifyTemplate(item: any) {
+    this.onAsyncResponse.notify({ item }, new SlickEventData(), this);
+  }
+
+  /**
+   * On Processing, we will notify the plugin with the new item detail once backend server call completes
+   * @param item
+   */
+  protected async onProcessing(item: any) {
+    if (item && typeof this._userProcessFn === 'function') {
+      let awaitedItemDetail: any;
+      const userProcessFn = this._userProcessFn(item);
+
+      // wait for the "userProcessFn", once resolved we will save it into the "collection"
+      const response: any | any[] = await userProcessFn;
+
+      if (response.hasOwnProperty(this.datasetIdPropName)) {
+        awaitedItemDetail = response; // from Promise
+      } else if (response instanceof Response && typeof response['json'] === 'function') {
+        awaitedItemDetail = await response['json'](); // from Fetch
+      } else if (response && response['content']) {
+        awaitedItemDetail = response['content']; // from http-client
+      }
+
+      if (!awaitedItemDetail || !awaitedItemDetail.hasOwnProperty(this.datasetIdPropName)) {
+        throw new Error(
+          '[Slickgrid-React] could not process the Row Detail, please make sure that your "process" callback ' +
+            `returns an item object that has an "${this.datasetIdPropName}" property`
+        );
+      }
+
+      // notify the plugin with the new item details
+      this.notifyTemplate(awaitedItemDetail || {});
+    }
+  }
+}