slickgrid-react 5.7.1 → 5.9.0

package/src/slickgrid-react/extensions/slickRowDetailView.ts

@@ -0,0 +1,383 @@
+import {
+  addToArrayWhenNotExists,
+  type EventSubscription,
+  type OnBeforeRowDetailToggleArgs,
+  type OnRowBackToViewportRangeArgs,
+  SlickEventData,
+  type SlickEventHandler,
+  type SlickGrid,
+  SlickRowSelectionModel,
+  unsubscribeAll,
+} 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, RowDetailView, ViewModelBindableInputData } from '../models/index';
+import { loadReactComponentDynamically } from '../services/reactUtils';
+
+const ROW_DETAIL_CONTAINER_PREFIX = 'container_';
+const PRELOAD_CONTAINER_PREFIX = 'container_loading';
+
+export interface CreatedView {
+  id: string | number;
+  dataContext: any;
+  root: Root | null;
+}
+// interface SRDV extends React.Component<Props, State>, UniversalSlickRowDetailView {}s
+
+export class SlickRowDetailView extends UniversalSlickRowDetailView {
+  protected _component?: any;
+  protected _preloadComponent?: any;
+  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 eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
+  set eventHandler(eventHandler: SlickEventHandler) {
+    this._eventHandler = eventHandler;
+  }
+
+  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() {
+    if (Array.isArray(this._views)) {
+      this._views.forEach((view) => this.disposeViewComponent(view));
+    }
+    this._views = [];
+  }
+
+  /** Get the instance of the SlickGrid addon (control or plugin). */
+  getAddonInstance(): SlickRowDetailView | null {
+    return this;
+  }
+
+  init(grid: SlickGrid) {
+    this._grid = grid;
+    super.init(this._grid);
+    this.gridContainerElement = grid.getContainerNode();
+    this.register(grid?.getSelectionModel() as SlickRowSelectionModel);
+  }
+
+  /**
+   * 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?: SlickRowSelectionModel) {
+    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 = () => this._grid.sanitizeHtmlString(`<div class="${PRELOAD_CONTAINER_PREFIX}"></div>`) as string;
+      }
+      if (!this.gridOptions.rowDetailView.postTemplate) {
+        this._component = this.gridOptions?.rowDetailView?.viewComponent;
+        this.addonOptions.postTemplate = (itemDetail: any) => {
+          return this._grid.sanitizeHtmlString(`<div class="${ROW_DETAIL_CONTAINER_PREFIX}${itemDetail[this.datasetIdPropName]}"></div>`) as string
+        };
+      }
+
+      if (this._grid && this.gridOptions) {
+        // this also requires the Row Selection Model to be registered as well
+        if (!rowSelectionPlugin || !this._grid.getSelectionModel()) {
+          rowSelectionPlugin = new SlickRowSelectionModel(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);
+          }
+
+          if (this.onAsyncResponse) {
+            this._eventHandler.subscribe(this.onAsyncResponse, (event, args) => {
+              if (typeof this.rowDetailViewOptions?.onAsyncResponse === 'function') {
+                this.rowDetailViewOptions.onAsyncResponse(event, args);
+              }
+            });
+          }
+
+          if (this.onAsyncEndUpdate) {
+            this._eventHandler.subscribe(this.onAsyncEndUpdate, async (event, args) => {
+              // triggers after backend called "onAsyncResponse.notify()"
+              await this.renderViewModel(args?.item);
+
+              if (typeof this.rowDetailViewOptions?.onAsyncEndUpdate === 'function') {
+                this.rowDetailViewOptions.onAsyncEndUpdate(event, args);
+              }
+            });
+          }
+
+          if (this.onAfterRowDetailToggle) {
+            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
+              await this.renderPreloadView(args.item);
+              this.renderAllViewModels();
+
+              if (typeof this.rowDetailViewOptions?.onAfterRowDetailToggle === 'function') {
+                this.rowDetailViewOptions.onAfterRowDetailToggle(event, args);
+              }
+            });
+          }
+
+          if (this.onBeforeRowDetailToggle) {
+            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;
+            });
+          }
+
+          if (this.onRowBackToViewportRange) {
+            this._eventHandler.subscribe(this.onRowBackToViewportRange, async (event, args) => {
+              // when row is back to viewport range, we will re-render the View Component(s)
+              await this.handleOnRowBackToViewportRange(event, args);
+
+              if (typeof this.rowDetailViewOptions?.onRowBackToViewportRange === 'function') {
+                this.rowDetailViewOptions.onRowBackToViewportRange(event, args);
+              }
+            });
+          }
+
+          if (this.onRowOutOfViewportRange) {
+            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.bind(this));
+
+          // on row selection changed, we also need to redraw
+          if (this.gridOptions.enableRowSelection || this.gridOptions.enableCheckboxSelector) {
+            this._eventHandler.subscribe(this._grid.onSelectedRowsChanged, this.redrawAllViewComponents.bind(this));
+          }
+
+          // 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'], this.redrawAllViewComponents.bind(this)),
+            this.eventPubSubService?.subscribe(['onGridMenuClearAllFilters', 'onGridMenuClearAllSorting'], () => window.setTimeout(() => this.redrawAllViewComponents())),
+          );
+        }
+      }
+    }
+
+    return this;
+  }
+
+  /** Redraw (re-render) all the expanded row detail View Components */
+  async redrawAllViewComponents() {
+    await Promise.all(this._views.map(async x => this.redrawViewComponent(x)));
+  }
+
+  /** Render all the expanded row detail View Components */
+  async renderAllViewModels() {
+    await Promise.all(this._views.filter(x => x?.dataContext).map(async x => this.renderViewModel(x.dataContext)));
+  }
+
+  /** Redraw the necessary View Component */
+  async redrawViewComponent(view: CreatedView) {
+    const containerElement = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${view.id}`);
+    if (containerElement?.length >= 0) {
+      await this.renderViewModel(view.dataContext);
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  async renderPreloadView(item: any) {
+    const containerElements = this.gridContainerElement.getElementsByClassName(`${PRELOAD_CONTAINER_PREFIX}`);
+    if (this._preloadComponent && containerElements?.length) {
+      const detailContainer = document.createElement('section');
+      containerElements[containerElements.length - 1]!.appendChild(detailContainer);
+
+      console.log('elm', containerElements[containerElements.length - 1])
+      const { root } = await loadReactComponentDynamically(this._preloadComponent, detailContainer as HTMLElement);
+      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
+      this._root = root;
+      if (viewObj) {
+        viewObj.root = root;
+      }
+    }
+  }
+
+  /** Render (or re-render) the View Component (Row Detail) */
+  async renderViewModel(item: any) {
+    const containerElements = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${item[this.datasetIdPropName]}`);
+    if (this._component && containerElements?.length) {
+      const bindableData = {
+        model: item,
+        addon: this,
+        grid: this._grid,
+        dataView: this.dataView,
+        parent: this.rowDetailViewOptions?.parent,
+      } as ViewModelBindableInputData;
+      const viewObj = this._views.find(obj => obj.id === item[this.datasetIdPropName]);
+
+      // 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 { root } = await loadReactComponentDynamically(this._component, containerElements[containerElements.length - 1] as HTMLElement, bindableData /*, viewObj?.root */);
+      if (!viewObj) {
+        this.addViewInfoToViewsRef(item, root);
+      }
+    }
+  }
+
+  // --
+  // protected functions
+  // ------------------
+
+  protected addViewInfoToViewsRef(item: any, root: Root | null) {
+    const viewInfo: CreatedView = {
+      id: item[this.datasetIdPropName],
+      dataContext: item,
+      root
+    };
+    const idPropName = this.gridOptions.datasetIdPropertyName || 'id';
+    addToArrayWhenNotExists(this._views, viewInfo, idPropName);
+  }
+
+  protected disposeViewComponent(expandedView: CreatedView): CreatedView | void {
+    if (expandedView) {
+      if (expandedView?.root) {
+        const container = this.gridContainerElement.getElementsByClassName(`${ROW_DETAIL_CONTAINER_PREFIX}${this._views[0].id}`);
+        if (container?.length) {
+          expandedView.root.unmount();
+          container[0].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.addViewInfoToViewsRef(args.item, null);
+    } else {
+      // collapsing, so dispose of the View
+      const foundViewIdx = this._views.findIndex((view: CreatedView) => view.id === args.item[this.datasetIdPropName]);
+      if (foundViewIdx >= 0 && this.disposeViewComponent(this._views[foundViewIdx])) {
+        this._views.splice(foundViewIdx, 1);
+      }
+    }
+  }
+
+  /** When Row comes back to Viewport Range, we need to redraw the View */
+  protected async handleOnRowBackToViewportRange(_e: SlickEventData<OnRowBackToViewportRangeArgs>, args: {
+    item: any;
+    rowId: string | number;
+    rowIndex: number;
+    expandedRows: (string | number)[];
+    rowIdsOutOfViewport: (string | number)[];
+    grid: SlickGrid;
+  }) {
+    if (args?.item) {
+      await this.redrawAllViewComponents();
+    }
+  }
+
+  /**
+   * 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) {
+    if (this.onAsyncResponse) {
+      this.onAsyncResponse.notify({ item, itemDetail: 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 ' +
+          '(a Promise or an HttpClient call returning an Observable) returns an item object that has an "${this.datasetIdPropName}" property');
+      }
+
+      // notify the plugin with the new item details
+      this.notifyTemplate(awaitedItemDetail || {});
+    }
+  }
+}

package/src/slickgrid-react/global-grid-options.ts

@@ -1,5 +1,5 @@
 import { type Column, DelimiterType, EventNamingStyle, FileType, Filters, OperatorType, type TreeDataOption } from '@slickgrid-universal/common';
-import type { GridOption } from './models/index';
+import type { GridOption, RowDetailView } from './models/index';
 
 /**
  * Default Options that can be passed to the Slickgrid-React
@@ -227,6 +227,15 @@ export const GlobalGridOptions: Partial<GridOption> = {
     pageSize: 25,
     totalItems: 0
   },
+  rowDetailView: {
+    collapseAllOnSort: true,
+    cssClass: 'detail-view-toggle',
+    panelRows: 1,
+    keyPrefix: '__',
+    useRowClick: false,
+    useSimpleViewportCalc: true,
+    saveDetailViewOnScroll: false,
+  } as RowDetailView,
   headerRowHeight: 35,
   rowHeight: 35,
   topPanelHeight: 30,

package/src/slickgrid-react/index.ts

@@ -2,18 +2,19 @@ import 'regenerator-runtime/runtime.js';
 export * from '@slickgrid-universal/common';
 
 import { SlickgridReact } from './components/slickgrid-react';
+import { SlickRowDetailView } from './extensions/slickRowDetailView';
 import type { SlickgridEventAggregator } from './components/slickgridEventAggregator';
 import type { SlickgridConfig } from './slickgrid-config';
 
 import type {
   SlickgridReactInstance,
   SlickgridReactComponentOutput,
+  RowDetailView,
   GridOption,
 } from './models/index';
 
 // expose all public classes
 export {
-  ReactUtilService,
   TranslaterService,
   disposeAllSubscriptions
 } from './services/index';
@@ -23,6 +24,8 @@ export {
   type SlickgridReactInstance,
   type SlickgridReactComponentOutput,
   type GridOption,
+  type RowDetailView,
   SlickgridReact,
-  SlickgridConfig
+  SlickgridConfig,
+  SlickRowDetailView,
 };

package/src/slickgrid-react/models/gridOption.interface.ts

@@ -1,7 +1,12 @@
 import type { GridOption as UniversalGridOption } from '@slickgrid-universal/common';
 import type * as i18next from 'i18next';
 
+import type { RowDetailView } from './rowDetailView.interface';
+
 export interface GridOption extends UniversalGridOption {
   /** I18N translation service instance */
   i18n?: i18next.i18n;
+
+  /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
+  rowDetailView?: RowDetailView;
 }

package/src/slickgrid-react/models/index.ts

@@ -1,3 +1,6 @@
-export * from './slickgridReactInstance.interface';
-export * from './reactComponentOutput.interface';
-export * from './gridOption.interface';
+export type * from './gridOption.interface';
+export type * from './reactComponentOutput.interface';
+export type * from './rowDetailView.interface';
+export type * from './slickgridReactInstance.interface';
+export type * from './viewModelBindableData.interface';
+export type * from './viewModelBindableInputData.interface';

package/src/slickgrid-react/models/rowDetailView.interface.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
+   */
+  parent?: 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/slickgrid-react/models/slickgridReactInstance.interface.ts

@@ -5,7 +5,7 @@ import type {
   GridEventService,
   GridService,
   GridStateService,
-  GroupingAndColspanService,
+  HeaderGroupingService,
   PaginationService,
   ResizerService,
   SlickDataView,
@@ -53,8 +53,11 @@ export interface SlickgridReactInstance {
   /** Grid State Service */
   gridStateService: GridStateService;
 
+  /** @deprecated @use `headerGroupingService` */
+  groupingService: HeaderGroupingService;
+
   /** Grouping (and colspan) Service */
-  groupingService: GroupingAndColspanService;
+  headerGroupingService: HeaderGroupingService;
 
   /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
   paginationService?: PaginationService;

package/src/slickgrid-react/models/viewModelBindableData.interface.ts

@@ -0,0 +1,10 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableData {
+  template: string;
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

package/src/slickgrid-react/models/viewModelBindableInputData.interface.ts

@@ -0,0 +1,9 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableInputData {
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

package/src/slickgrid-react/services/index.ts

@@ -1,4 +1,3 @@
-export * from './reactUtil.service';
 export * from './container.service';
 export * from './translater.service';
 export * from './utilities';

package/src/slickgrid-react/services/reactUtils.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRef } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+export function loadReactComponentDynamically<T = any>(customComponent: any, targetElm: HTMLElement, props?: any, root?: Root | null): Promise<{ component: T, root: Root }> {
+  return new Promise(resolve => {
+    const compRef = createRef();
+    root ??= createRoot(targetElm);
+    root.render(React.createElement(customComponent, { ...props, ref: compRef }));
+
+    queueMicrotask(() => {
+      resolve({ component: compRef.current as T, root: root as Root });
+    });
+  });
+}

package/dist/cjs/services/reactUtil.service.js

@@ -1,30 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactUtilService = void 0;
-const react_1 = __importDefault(require("react"));
-const react_dom_1 = __importDefault(require("react-dom"));
-class ReactUtilService {
-    createReactComponentAppendToDom(component, targetElement, clearTargetContent = false, props = undefined, children = []) {
-        const componentElement = react_1.default.createElement(component, props, children);
-        let componentInstance;
-        // Append DOM element to the HTML element specified
-        if (targetElement) {
-            if (clearTargetContent && targetElement.innerHTML) {
-                targetElement.innerHTML = '';
-            }
-            // @ts-ignore
-            componentInstance = react_dom_1.default.render(componentElement, targetElement);
-        }
-        else {
-            // @ts-ignore
-            componentInstance = react_dom_1.default.render(componentElement, document.body);
-        }
-        const domElement = react_dom_1.default.findDOMNode(componentInstance);
-        return { componentInstance, componentElement, domElement };
-    }
-}
-exports.ReactUtilService = ReactUtilService;
-//# sourceMappingURL=reactUtil.service.js.map

package/dist/cjs/services/reactUtil.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.js","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,0DAAiC;AAGjC,MAAa,gBAAgB;IAC3B,+BAA+B,CAAC,SAAc,EAAE,aAAqC,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAa,SAAS,EAAE,WAAwB,EAAE;QACnK,MAAM,gBAAgB,GAAG,eAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,iBAAsB,CAAC;QAE3B,mDAAmD;QACnD,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,kBAAkB,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;gBAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,aAAa;YACb,iBAAiB,GAAG,mBAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,aAAa;YACb,iBAAiB,GAAG,mBAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,UAAU,GAAG,mBAAQ,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE3D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC7D,CAAC;CACF;AArBD,4CAqBC"}

package/dist/esm/services/reactUtil.service.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-export class ReactUtilService {
-    createReactComponentAppendToDom(component, targetElement, clearTargetContent = false, props = undefined, children = []) {
-        const componentElement = React.createElement(component, props, children);
-        let componentInstance;
-        // Append DOM element to the HTML element specified
-        if (targetElement) {
-            if (clearTargetContent && targetElement.innerHTML) {
-                targetElement.innerHTML = '';
-            }
-            // @ts-ignore
-            componentInstance = ReactDOM.render(componentElement, targetElement);
-        }
-        else {
-            // @ts-ignore
-            componentInstance = ReactDOM.render(componentElement, document.body);
-        }
-        const domElement = ReactDOM.findDOMNode(componentInstance);
-        return { componentInstance, componentElement, domElement };
-    }
-}
-//# sourceMappingURL=reactUtil.service.js.map

package/dist/esm/services/reactUtil.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.js","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,QAAQ,MAAM,WAAW,CAAC;AAGjC,MAAM,OAAO,gBAAgB;IAC3B,+BAA+B,CAAC,SAAc,EAAE,aAAqC,EAAE,kBAAkB,GAAG,KAAK,EAAE,QAAa,SAAS,EAAE,WAAwB,EAAE;QACnK,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACzE,IAAI,iBAAsB,CAAC;QAE3B,mDAAmD;QACnD,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,kBAAkB,IAAI,aAAa,CAAC,SAAS,EAAE,CAAC;gBAClD,aAAa,CAAC,SAAS,GAAG,EAAE,CAAC;YAC/B,CAAC;YACD,aAAa;YACb,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,aAAa;YACb,iBAAiB,GAAG,QAAQ,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACvE,CAAC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE3D,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC;IAC7D,CAAC;CACF"}

package/dist/types/services/reactUtil.service.d.ts

@@ -1,6 +0,0 @@
-import { type ReactNode } from 'react';
-import type { SlickgridReactComponentOutput } from '../models/reactComponentOutput.interface';
-export declare class ReactUtilService {
-    createReactComponentAppendToDom(component: any, targetElement?: HTMLElement | Element, clearTargetContent?: boolean, props?: any, children?: ReactNode[]): SlickgridReactComponentOutput;
-}
-//# sourceMappingURL=reactUtil.service.d.ts.map

package/dist/types/services/reactUtil.service.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reactUtil.service.d.ts","sourceRoot":"","sources":["../../../src/slickgrid-react/services/reactUtil.service.ts"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,0CAA0C,CAAC;AAE9F,qBAAa,gBAAgB;IAC3B,+BAA+B,CAAC,SAAS,EAAE,GAAG,EAAE,aAAa,CAAC,EAAE,WAAW,GAAG,OAAO,EAAE,kBAAkB,UAAQ,EAAE,KAAK,GAAE,GAAe,EAAE,QAAQ,GAAE,SAAS,EAAO,GAAG,6BAA6B;CAoBtM"}

package/src/slickgrid-react/services/reactUtil.service.ts

@@ -1,26 +0,0 @@
-import React, { type ReactNode } from 'react';
-import ReactDOM from 'react-dom';
-import type { SlickgridReactComponentOutput } from '../models/reactComponentOutput.interface';
-
-export class ReactUtilService {
-  createReactComponentAppendToDom(component: any, targetElement?: HTMLElement | Element, clearTargetContent = false, props: any = undefined, children: ReactNode[] = []): SlickgridReactComponentOutput {
-    const componentElement = React.createElement(component, props, children);
-    let componentInstance: any;
-
-    // Append DOM element to the HTML element specified
-    if (targetElement) {
-      if (clearTargetContent && targetElement.innerHTML) {
-        targetElement.innerHTML = '';
-      }
-      // @ts-ignore
-      componentInstance = ReactDOM.render(componentElement, targetElement);
-    } else {
-      // @ts-ignore
-      componentInstance = ReactDOM.render(componentElement, document.body);
-    }
-
-    const domElement = ReactDOM.findDOMNode(componentInstance);
-
-    return { componentInstance, componentElement, domElement };
-  }
-}