feat(react,vue): add RowDetail portal/teleport host context propagation

demos/react/src/examples/slickgrid/Example19.tsx

@@ -1,5 +1,5 @@
 import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
-import { ReactRowDetailView } from '@slickgrid-universal/react-row-detail-plugin';
+import { ReactRowDetailView, RowDetailPortalHost } from '@slickgrid-universal/react-row-detail-plugin';
 import React, { useEffect, useRef, useState } from 'react';
 import { Editors, Filters, Formatters, SlickgridReact, type Column, type GridOption, type SlickgridReactInstance } from 'slickgrid-react';
 import { ExampleDetailPreload } from './Example-detail-preload.js';
@@ -21,6 +21,7 @@ const Example19: React.FC = () => {
 
   const serverWaitDelayRef = useRef(serverWaitDelay);
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
+  const [rowDetailPlugin, setRowDetailPlugin] = useState<ReactRowDetailView | null>(null);
 
   useEffect(() => {
     defineGrid();
@@ -165,6 +166,7 @@ const Example19: React.FC = () => {
       datasetIdPropertyName: 'rowId',
       preRegisterExternalExtensions: (pubSubService) => {
         const rowDetail = new ReactRowDetailView(pubSubService as EventPubSubService);
+        setRowDetailPlugin(rowDetail);
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
@@ -377,6 +379,7 @@ const Example19: React.FC = () => {
           dataset={dataset}
           onReactGridCreated={($event) => (reactGridRef.current = $event.detail)}
         />
+        {rowDetailPlugin ? <RowDetailPortalHost plugin={rowDetailPlugin} /> : null}
       </div>
     </div>
   );

demos/react/src/examples/slickgrid/Example45-detail-view.tsx

@@ -67,8 +67,12 @@ const Example45DetailView: React.FC<RowDetailViewProps<Distributor, typeof Examp
     let gridState: GridState | undefined;
     if (props.model.isUsingInnerGridStatePresets) {
       const gridStateStr = sessionStorage.getItem(`gridstate_${innerGridClass}`);
-      if (gridStateStr) {
-        gridState = JSON.parse(gridStateStr);
+      if (gridStateStr && gridStateStr !== 'undefined') {
+        try {
+          gridState = JSON.parse(gridStateStr);
+        } catch {
+          // ignore malformed JSON
+        }
       }
     }
 
@@ -91,7 +95,9 @@ const Example45DetailView: React.FC<RowDetailViewProps<Distributor, typeof Examp
   function handleBeforeGridDestroy() {
     if (props.model.isUsingInnerGridStatePresets) {
       const gridState = reactGridRef.current?.gridStateService.getCurrentGridState();
-      sessionStorage.setItem(`gridstate_${innerGridClass}`, JSON.stringify(gridState));
+      if (gridState) {
+        sessionStorage.setItem(`gridstate_${innerGridClass}`, JSON.stringify(gridState));
+      }
     }
   }
 

demos/react/src/examples/slickgrid/Example45.tsx

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
-import { ReactRowDetailView } from '@slickgrid-universal/react-row-detail-plugin';
+import { ReactRowDetailView, RowDetailPortalHost } from '@slickgrid-universal/react-row-detail-plugin';
 import React, { useEffect, useRef, useState } from 'react';
 import { SlickgridReact, type Column, type GridOption, type SlickgridReactInstance } from 'slickgrid-react';
 import Example45DetailView, { type Distributor, type OrderData } from './Example45-detail-view.js';
@@ -24,6 +24,7 @@ const Example45: React.FC = () => {
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
   const isUsingAutoHeightRef = useRef(isUsingAutoHeight);
   const isUsingInnerGridStatePresetsRef = useRef(isUsingInnerGridStatePresets);
+  const [rowDetailPlugin, setRowDetailPlugin] = useState<ReactRowDetailView | null>(null);
 
   useEffect(() => {
     defineGrid();
@@ -159,6 +160,7 @@ const Example45: React.FC = () => {
       darkMode,
       preRegisterExternalExtensions: (pubSubService) => {
         const rowDetail = new ReactRowDetailView(pubSubService as EventPubSubService);
+        setRowDetailPlugin(rowDetail);
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
@@ -211,7 +213,6 @@ const Example45: React.FC = () => {
     setIsUsingAutoHeight(newIsUsingAutoHeight);
     reactGridRef.current?.slickGrid?.setOptions({ autoResize: { ...gridOptions?.autoResize, autoHeight: newIsUsingAutoHeight } });
     reactGridRef.current?.resizerService.resizeGrid();
-    console.log('auto-height', reactGridRef.current?.slickGrid.getOptions());
     return true;
   }
 
@@ -376,6 +377,7 @@ const Example45: React.FC = () => {
           dataset={dataset}
           onReactGridCreated={($event) => (reactGridRef.current = $event.detail)}
         />
+        {rowDetailPlugin ? <RowDetailPortalHost plugin={rowDetailPlugin} /> : null}
       </div>
     </div>
   );

demos/react/src/examples/slickgrid/Example47.tsx

@@ -1,5 +1,5 @@
 import { type EventPubSubService } from '@slickgrid-universal/event-pub-sub';
-import { ReactRowDetailView } from '@slickgrid-universal/react-row-detail-plugin';
+import { ReactRowDetailView, RowDetailPortalHost } from '@slickgrid-universal/react-row-detail-plugin';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Aggregators,
@@ -44,6 +44,7 @@ const Example47: React.FC = () => {
 
   const serverWaitDelayRef = useRef(serverWaitDelay);
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
+  const [rowDetailPlugin, setRowDetailPlugin] = useState<ReactRowDetailView | null>(null);
 
   useEffect(() => {
     defineGrid();
@@ -201,6 +202,7 @@ const Example47: React.FC = () => {
       darkMode,
       preRegisterExternalExtensions: (pubSubService) => {
         const rowDetail = new ReactRowDetailView(pubSubService as EventPubSubService);
+        setRowDetailPlugin(rowDetail);
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
@@ -465,6 +467,7 @@ const Example47: React.FC = () => {
           dataset={dataset}
           onReactGridCreated={($event) => reactGridReady($event.detail)}
         />
+        {rowDetailPlugin ? <RowDetailPortalHost plugin={rowDetailPlugin} /> : null}
       </div>
     </div>
   );

demos/vue/src/components/Example19.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { VueRowDetailView } from '@slickgrid-universal/vue-row-detail-plugin';
+import { RowDetailTeleportHost, VueRowDetailView } from '@slickgrid-universal/vue-row-detail-plugin';
 import { Editors, Filters, Formatters, SlickgridVue, type Column, type GridOption, type SlickgridVueInstance } from 'slickgrid-vue';
 import { computed, onBeforeMount, onUnmounted, ref, type Ref } from 'vue';
 import Example19Detail from './Example19Detail.vue';
 import ExampleDetailPreload from './ExampleDetailPreload.vue';
 
-const FAKE_SERVER_DELAY = 250;
+const FAKE_SERVER_DELAY = 40;
 const NB_ITEMS = 500;
 const gridOptions = ref<GridOption>();
 const detailViewRowCount = ref(9);
@@ -16,9 +16,10 @@ const showSubTitle = ref(true);
 const flashAlertType = ref('alert-info');
 const message = ref('');
 const serverWaitDelay = ref(FAKE_SERVER_DELAY); // server simulation with default of 250ms but 50ms for Cypress tests
-let vueGrid!: SlickgridVueInstance;
+const vueGrid = ref<SlickgridVueInstance | undefined>(undefined);
 
-const rowDetailInstance = computed(() => vueGrid?.extensionService.getExtensionInstanceByName('rowDetailView'));
+const rowDetailInstance = computed(() => vueGrid.value?.extensionService.getExtensionInstanceByName('rowDetailView'));
+const rowDetailPlugin = ref<any | undefined>(undefined);
 
 onBeforeMount(() => {
   defineGrid();
@@ -208,19 +209,24 @@ function getData(count: number) {
 }
 
 function changeDetailViewRowCount() {
-  const options = rowDetailInstance.value.getOptions();
+  const instance = rowDetailInstance.value;
+  if (!instance) return;
+  const options = instance.getOptions ? instance.getOptions() : undefined;
   if (options && options.panelRows) {
     options.panelRows = detailViewRowCount.value; // change number of rows dynamically
-    rowDetailInstance.value.setOptions(options);
+    instance.setOptions(options);
   }
 }
 
 function changeEditableGrid() {
-  // rowDetailInstance.value.setOptions({ useRowClick: false });
-  rowDetailInstance.value.collapseAll();
-  (rowDetailInstance.value as any).addonOptions.useRowClick = false;
+  const instance = rowDetailInstance.value;
+  if (instance) {
+    // rowDetailInstance.value.setOptions({ useRowClick: false });
+    instance.collapseAll();
+    (instance as any).addonOptions.useRowClick = false;
+  }
   gridOptions.value!.autoCommitEdit = !gridOptions.value!.autoCommitEdit;
-  vueGrid?.slickGrid.setOptions({
+  vueGrid.value?.slickGrid?.setOptions({
     editable: true,
     autoEdit: true,
     enableCellNavigation: true,
@@ -229,7 +235,7 @@ function changeEditableGrid() {
 }
 
 function closeAllRowDetail() {
-  rowDetailInstance.value.collapseAll();
+  rowDetailInstance.value?.collapseAll?.();
 }
 
 function showFlashMessage(msg: string, alertType = 'info') {
@@ -271,7 +277,7 @@ function simulateServerAsyncCall(item: any) {
 function toggleDarkMode() {
   isDarkMode.value = !isDarkMode.value;
   toggleBodyBackground();
-  vueGrid.slickGrid?.setOptions({ darkMode: isDarkMode.value });
+  vueGrid.value?.slickGrid?.setOptions({ darkMode: isDarkMode.value });
   closeAllRowDetail();
 }
 
@@ -293,11 +299,13 @@ function toggleSubTitle() {
   showSubTitle.value = !showSubTitle.value;
   const action = showSubTitle.value ? 'remove' : 'add';
   document.querySelector('.subtitle')?.classList[action]('hidden');
-  queueMicrotask(() => vueGrid.resizerService.resizeGrid());
+  queueMicrotask(() => vueGrid.value?.resizerService.resizeGrid());
 }
 
 function vueGridReady(grid: SlickgridVueInstance) {
-  vueGrid = grid;
+  vueGrid.value = grid;
+  rowDetailPlugin.value = grid?.extensionService.getExtensionInstanceByName('rowDetailView');
+  console.log('Row Detail Plugin instance on Grid Ready:', rowDetailPlugin.value);
 }
 
 defineExpose({
@@ -389,5 +397,6 @@ defineExpose({
       @onVueGridCreated="vueGridReady($event.detail)"
     >
     </slickgrid-vue>
+    <RowDetailTeleportHost :plugin="rowDetailPlugin" v-if="rowDetailPlugin" />
   </div>
 </template>

demos/vue/src/components/Example19Detail.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { format } from '@formkit/tempo';
 import type { RowDetailViewProps } from 'slickgrid-vue';
+import { onMounted } from 'vue';
 
 interface Item {
   assignee: string;
@@ -16,6 +17,10 @@ interface Item {
 
 const props = defineProps<RowDetailViewProps<Item>>();
 
+onMounted(() => {
+  console.log('Example19Detail mounted for rowId:', props.model?.rowId);
+});
+
 function alertAssignee(name: string) {
   if (typeof name === 'string') {
     alert(`Assignee on this task is: ${name.toUpperCase()}`);
@@ -58,10 +63,10 @@ function callParentMethod(model: Item) {
 
     <div class="row">
       <div class="col-3 detail-label">
-        <label>Start:</label> <span>{{ model.start ? format(props.model.start, 'YYYY-MM-DD') : '' }}</span>
+        <label>Start:</label> <span>{{ model.start ? format(model.start, 'YYYY-MM-DD') : '' }}</span>
       </div>
       <div class="col-3 detail-label">
-        <label>Finish:</label> <span>{{ model.finish ? format(props.model.finish, 'YYYY-MM-DD') : '' }}</span>
+        <label>Finish:</label> <span>{{ model.finish ? format(model.finish, 'YYYY-MM-DD') : '' }}</span>
       </div>
       <div class="col-3 detail-label"><label>Effort Driven:</label> <i :class="model.effortDriven ? 'mdi mdi-check' : ''"></i></div>
     </div>

demos/vue/src/components/Example45.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { faker } from '@faker-js/faker';
-import { VueRowDetailView } from '@slickgrid-universal/vue-row-detail-plugin';
+import { RowDetailTeleportHost, VueRowDetailView } from '@slickgrid-universal/vue-row-detail-plugin';
 import { SlickgridVue, type Column, type GridOption, type SlickgridVueInstance } from 'slickgrid-vue';
 import { computed, onBeforeMount, onUnmounted, ref, type Ref } from 'vue';
 import Example45Detail, { type Distributor, type OrderData } from './Example45Detail.vue';
@@ -17,9 +17,9 @@ const isUsingAutoHeight = ref(false);
 const isUsingInnerGridStatePresets = ref(false);
 const showSubTitle = ref(true);
 const serverWaitDelay = ref(FAKE_SERVER_DELAY); // server simulation with default of 250ms but 50ms for Cypress tests
-let vueGrid!: SlickgridVueInstance;
-
-const rowDetailInstance = computed(() => vueGrid?.extensionService.getExtensionInstanceByName('rowDetailView') as VueRowDetailView);
+const vueGrid = ref<SlickgridVueInstance | undefined>(undefined);
+const rowDetailInstance = computed(() => vueGrid.value?.extensionService.getExtensionInstanceByName('rowDetailView') as VueRowDetailView);
+const rowDetailPlugin = ref<any | undefined>(undefined);
 
 onBeforeMount(() => {
   defineGrid();
@@ -133,17 +133,19 @@ function getData(count: number) {
 }
 
 function changeDetailViewRowCount() {
-  const options = rowDetailInstance.value.getOptions();
-  if (options?.panelRows) {
+  const instance = rowDetailInstance.value;
+  if (!instance) return;
+  const options = instance.getOptions ? instance.getOptions() : undefined;
+  if (options && options.panelRows) {
     options.panelRows = detailViewRowCount.value; // change number of rows dynamically
-    rowDetailInstance.value.setOptions(options);
+    instance.setOptions(options);
   }
 }
 
 function changeUsingResizerAutoHeight() {
   isUsingAutoHeight.value = !isUsingAutoHeight.value;
-  vueGrid.slickGrid?.setOptions({ autoResize: { ...gridOptions.value!.autoResize, autoHeight: isUsingAutoHeight.value } });
-  vueGrid.resizerService.resizeGrid();
+  vueGrid.value?.slickGrid?.setOptions({ autoResize: { ...gridOptions.value!.autoResize, autoHeight: isUsingAutoHeight.value } });
+  vueGrid.value?.resizerService.resizeGrid();
   return true;
 }
 
@@ -154,11 +156,11 @@ function changeUsingInnerGridStatePresets() {
 }
 
 function closeAllRowDetail() {
-  rowDetailInstance.value.collapseAll();
+  rowDetailInstance.value?.collapseAll?.();
 }
 
 function redrawAllRowDetail() {
-  rowDetailInstance.value.redrawAllViewComponents();
+  rowDetailInstance.value?.redrawAllViewComponents?.();
 }
 
 /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
@@ -225,11 +227,12 @@ function toggleBodyBackground() {
 
 function toggleSubTitle() {
   showSubTitle.value = !showSubTitle.value;
-  queueMicrotask(() => vueGrid.resizerService.resizeGrid());
+  queueMicrotask(() => vueGrid.value?.resizerService.resizeGrid());
 }
 
 function vueGridReady(grid: SlickgridVueInstance) {
-  vueGrid = grid;
+  vueGrid.value = grid;
+  rowDetailPlugin.value = grid?.extensionService.getExtensionInstanceByName('rowDetailView');
 }
 </script>
 
@@ -341,5 +344,6 @@ function vueGridReady(grid: SlickgridVueInstance) {
       @onVueGridCreated="vueGridReady($event.detail)"
     >
     </slickgrid-vue>
+    <RowDetailTeleportHost :plugin="rowDetailPlugin" v-if="rowDetailPlugin" />
   </div>
 </template>

demos/vue/src/components/Example45Detail.vue

@@ -49,12 +49,20 @@ onBeforeUnmount(() => {
 onMounted(() => {
   innerDataset.value = [...props.model.orderData];
   showGrid.value = true;
+  console.log('Example45Detail mounted for id:', props.model.id);
+  // mark the container so tests can detect the detail has mounted
+  const container = document.querySelector(`.container_${props.model.id}`) as HTMLElement | null;
+  if (container) {
+    container.dataset.detailMounted = '1';
+  }
 });
 
 function handleBeforeGridDestroy() {
   if (props.model.isUsingInnerGridStatePresets) {
     const gridState = vueGrid.gridStateService.getCurrentGridState();
-    sessionStorage.setItem(`gridstate_${innerGridClass.value}`, JSON.stringify(gridState));
+    if (gridState) {
+      sessionStorage.setItem(`gridstate_${innerGridClass.value}`, JSON.stringify(gridState));
+    }
   }
 }
 
@@ -63,8 +71,12 @@ function defineGrid() {
   let gridState: GridState | undefined;
   if (props.model.isUsingInnerGridStatePresets) {
     const gridStateStr = sessionStorage.getItem(`gridstate_${innerGridClass.value}`);
-    if (gridStateStr) {
-      gridState = JSON.parse(gridStateStr);
+    if (gridStateStr && gridStateStr !== 'undefined') {
+      try {
+        gridState = JSON.parse(gridStateStr);
+      } catch {
+        // ignore malformed JSON
+      }
     }
   }