slickgrid-react 9.13.0 → 10.0.0

package/dist/extensions/slickRowDetailView.js

@@ -1,334 +0,0 @@
-import { addToArrayWhenNotExists, createDomElement, SlickEventData, SlickHybridSelectionModel, SlickRowSelectionModel, unsubscribeAll, } from '@slickgrid-universal/common';
-import { SlickRowDetailView as UniversalSlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
-import { createReactComponentDynamically } from '../services/reactUtils.js';
-const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
-const PRELOAD_CONTAINER_PREFIX = 'container_loading';
-// interface SRDV extends React.Component<Props, State>, UniversalSlickRowDetailView {}s
-export class SlickRowDetailView extends UniversalSlickRowDetailView {
-    eventPubSubService;
-    _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 SelectionModelClass = this.gridOptions.enableHybridSelection ? SlickHybridSelectionModel : SlickRowSelectionModel;
-                    rowSelectionPlugin = new SelectionModelClass(this.gridOptions.selectionOptions ?? this.gridOptions.rowSelectionOptions ?? { selectActiveRow: true });
-                    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.enableRowSelection || this.gridOptions.enableHybridSelection || 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=slickRowDetailView.js.map

package/dist/extensions/slickRowDetailView.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"slickRowDetailView.js","sourceRoot":"","sources":["../../src/extensions/slickRowDetailView.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  addToArrayWhenNotExists,\n  createDomElement,\n  SlickEventData,\n  SlickHybridSelectionModel,\n  SlickRowSelectionModel,\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 type { GridOption, RowDetailView, ViewModelBindableInputData } from '../models/index.js';\nimport { createReactComponentDynamically } from '../services/reactUtils.js';\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// interface SRDV extends React.Component<Props, State>, UniversalSlickRowDetailView {}s\n\nexport class SlickRowDetailView extends UniversalSlickRowDetailView {\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(): SlickRowDetailView | 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 SelectionModelClass = this.gridOptions.enableHybridSelection ? SlickHybridSelectionModel : SlickRowSelectionModel;\n          rowSelectionPlugin = new SelectionModelClass(\n            this.gridOptions.selectionOptions ?? this.gridOptions.rowSelectionOptions ?? { selectActiveRow: true }\n          );\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.enableRowSelection || this.gridOptions.enableHybridSelection || 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"]}