fix(row-detail): auto-select overlay for transformed rows

demos/aurelia/src/examples/slickgrid/example19.ts

@@ -135,7 +135,6 @@ export class Example19 {
       datasetIdPropertyName: 'rowId', // optionally use a different "id"
       externalResources: [AureliaRowDetailView],
       rowDetailView: {
-        renderMode: 'overlay',
         // optionally change the column index position of the icon (defaults to 0)
         // columnIndexPosition: 1,
 

demos/aurelia/src/examples/slickgrid/example45.ts

@@ -105,7 +105,6 @@ export class Example45 {
       rowHeight: 33,
       externalResources: [AureliaRowDetailView],
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item) => this.simulateServerAsyncCall(item),
         loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
         useRowClick: false,

demos/react-fluent/src/examples/slickgrid/Example04.tsx

@@ -169,7 +169,6 @@ const Example04: React.FC = () => {
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item) => simulateServerAsyncCall(item),
         loadOnce: true,
         singleRowExpand: false,

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

@@ -168,7 +168,6 @@ const Example19: React.FC = () => {
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item) => simulateServerAsyncCall(item),
         loadOnce: true,
         singleRowExpand: false,

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

@@ -163,7 +163,6 @@ const Example45: React.FC = () => {
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item) => simulateServerAsyncCall(item),
         loadOnce: false,
         useRowClick: false,

demos/vanilla/src/examples/example20.ts

@@ -176,7 +176,6 @@ export default class Example20 {
       rowHeight: 33,
       // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line
       rowDetailView: {
-        renderMode: 'overlay',
         columnIndexPosition: 1,
         preTemplate: this.loadingTemplate.bind(this),
         postTemplate: this.loadView.bind(this),

demos/vanilla/src/examples/example21.ts

@@ -140,7 +140,6 @@ export default class Example21 {
       // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line
       rowHeight: 33,
       rowDetailView: {
-        renderMode: 'overlay',
         loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
         preTemplate: () => this.loadingTemplate(),
         postTemplate: (itemDetail) => createDomElement('div', { className: `container_${itemDetail.id}` }),

demos/vanilla/src/examples/example36.ts

@@ -198,7 +198,6 @@ export default class Example36 {
       rowHeight: 33,
       // rowTopOffsetRenderType: 'top', // no longer necessary with v10.10.0 and above; otherwise, uncomment this line
       rowDetailView: {
-        renderMode: 'overlay',
         columnIndexPosition: 1,
         preTemplate: this.loadingTemplate.bind(this),
         postTemplate: this.loadView.bind(this),

demos/vue/src/components/Example19.vue

@@ -121,7 +121,6 @@ function defineGrid() {
     datasetIdPropertyName: 'rowId', // optionally use a different "id"
     externalResources: [VueRowDetailView],
     rowDetailView: {
-      renderMode: 'overlay',
       // optionally change the column index position of the icon (defaults to 0)
       // columnIndexPosition: 1,
 

demos/vue/src/components/Example45.vue

@@ -98,7 +98,6 @@ function defineGrid() {
     rowHeight: 33,
     externalResources: [VueRowDetailView],
     rowDetailView: {
-      renderMode: 'overlay',
       process: (item: any) => simulateServerAsyncCall(item),
       loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
       useRowClick: false,

docs/grid-functionalities/row-detail.md

@@ -26,22 +26,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo
 
 ### Transform-compatible rendering
 
-Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`.
+Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required.
 
 ```ts
 const gridOptions: GridOption = {
   enableRowDetailView: true,
   rowTopOffsetRenderType: 'transform',
   rowDetailView: {
-    renderMode: 'overlay',
     // ... other Row Detail options
   }
 };
 ```
 
-`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
+`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
 
-**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API.
+**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API.
 
 ### Keeping Row Detail Components Alive During Scrolling
 
@@ -127,7 +126,6 @@ export default class Example21 {
         return [{ name: 'rowDetailView', instance: this.rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         // We can load the "process" asynchronously via Fetch, Promise, ...
         process: (item) => http.get(`api/item/${item.id}`),
 
@@ -294,7 +292,6 @@ export class Example {
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         // We can load the "process" asynchronously via Fetch, Promise, ...
         process: (item) => http.get(`api/item/${item.id}`),
 

frameworks/angular-slickgrid/docs/grid-functionalities/row-detail.md

@@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo
 
 ### Transform-compatible rendering
 
-Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`.
+Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required.
 
 ```ts
 const gridOptions: GridOption = {
   enableRowDetailView: true,
   rowTopOffsetRenderType: 'transform',
   rowDetailView: {
-    renderMode: 'overlay',
     // ... other Row Detail options
   }
 };
 ```
 
-`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
+`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
 
-**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API.
+**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API.
 
 ### Keeping Row Detail Components Alive During Scrolling
 
@@ -125,7 +124,6 @@ export class GridRowDetailComponent implements OnInit, OnDestroy {
       },
       externalResources: [AngularRowDetailView], // for v10 and above
       rowDetailView: {
-        renderMode: 'overlay',
         // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
         process: (item) => this.http.get(`api/item/${item.id}`),
 

frameworks/angular-slickgrid/src/demos/examples/example19.component.ts

@@ -144,7 +144,6 @@ export class Example19Component implements OnDestroy, OnInit {
       datasetIdPropertyName: 'rowId', // optionally use a different "id"
       externalResources: [AngularRowDetailView],
       rowDetailView: {
-        renderMode: 'overlay',
         // optionally change the column index position of the icon (defaults to 0)
         // columnIndexPosition: 1,
 

frameworks/angular-slickgrid/src/demos/examples/example45.component.ts

@@ -115,7 +115,6 @@ export class Example45Component implements OnDestroy, OnInit {
       rowHeight: 33,
       externalResources: [AngularRowDetailView],
       rowDetailView: {
-        renderMode: 'overlay',
         process: (item: any) => this.simulateServerAsyncCall(item),
         loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
         useRowClick: false,

frameworks/aurelia-slickgrid/docs/grid-functionalities/row-detail.md

@@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo
 
 ### Transform-compatible rendering
 
-Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`.
+Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required.
 
 ```ts
 const gridOptions: GridOption = {
   enableRowDetailView: true,
   rowTopOffsetRenderType: 'transform',
   rowDetailView: {
-    renderMode: 'overlay',
     // ... other Row Detail options
   }
 };
 ```
 
-`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
+`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
 
-**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API.
+**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API.
 
 ### Keeping Row Detail Components Alive During Scrolling
 
@@ -123,7 +122,6 @@ export class GridExample {
       },
       externalResources: [AureliaRowDetailView], // for v10 and above
       rowDetailView: {
-        renderMode: 'overlay',
         // We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise)
         process: (item) => this.http.get(`api/item/${item.id}`),
 

frameworks/slickgrid-react/docs/grid-functionalities/row-detail.md

@@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo
 
 ### Transform-compatible rendering
 
-Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`.
+Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required.
 
 ```ts
 const gridOptions: GridOption = {
   enableRowDetailView: true,
   rowTopOffsetRenderType: 'transform',
   rowDetailView: {
-    renderMode: 'overlay',
     // ... other Row Detail options
   }
 };
 ```
 
-`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
+`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
 
-**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API.
+**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API.
 
 ### Keeping Row Detail Components Alive During Scrolling
 
@@ -127,7 +126,6 @@ const Example: React.FC = () => {
         return [{ name: 'rowDetailView', instance: rowDetail }];
       },
       rowDetailView: {
-        renderMode: 'overlay',
         // We can load the "process" asynchronously via Fetch, Promise, ...
         process: (item) => http.get(`api/item/${item.id}`),
 

frameworks/slickgrid-vue/docs/grid-functionalities/row-detail.md

@@ -25,22 +25,21 @@ A Row Detail allows you to open a detail panel which can contain extra and/or mo
 
 ### Transform-compatible rendering
 
-Row Detail panels use the `overlay` render mode in the examples. The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows when `rowTopOffsetRenderType` is `transform`.
+Row Detail automatically uses the `overlay` render mode when `rowTopOffsetRenderType` is `transform` (the default). The panel is mounted in a sibling layer of the grid canvas instead of inside the transformed row, so it remains above neighbouring rows. No additional Row Detail option is required.
 
 ```ts
 const gridOptions: GridOption = {
   enableRowDetailView: true,
   rowTopOffsetRenderType: 'transform',
   rowDetailView: {
-    renderMode: 'overlay',
     // ... other Row Detail options
   }
 };
 ```
 
-`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. It will be removed in the next major release. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
+`renderMode: 'inline'` remains available temporarily for existing applications and is deprecated. Explicitly selecting it makes SlickGrid use `rowTopOffsetRenderType: 'top'` for compatibility. Overlay rendering preserves the existing Row Detail classes and framework component lifecycle, but custom CSS or tests that rely on `.slick-cell + .dynamic-cell-detail` should be changed to target `.dynamic-cell-detail` directly.
 
-**v11 transition:** `renderMode: 'overlay'` is the permanent rendering approach, but the option is currently a v10 opt-in. In v11, overlay rendering is planned to become the default and only Row Detail renderer, so `renderMode: 'overlay'` will no longer be necessary and the option may be removed. Keep the option while using v10 and remove it when upgrading to v11 if it is removed from the API.
+**v11 transition:** Overlay rendering is the permanent rendering approach. In v11, it is planned to become the only Row Detail renderer, so `renderMode` may be removed from the API.
 
 ### Keeping Row Detail Components Alive During Scrolling
 
@@ -108,7 +107,6 @@ function defineGrid() {
     },
     externalResources: [VueRowDetailView], // for v10 and above
     rowDetailView: {
-      renderMode: 'overlay',
       // We can load the "process" asynchronously via Fetch, Promise, ...
       process: (item) => http.get(`api/item/${item.id}`),
 

package.json

@@ -48,7 +48,7 @@
     "fallow": "pnpx fallow",
     "fallow:dead-code": "pnpx fallow dead-code --production",
     "fallow:dupes": "pnpx fallow dupes",
-    "fallow:health": "pnpx fallow health --coverage test/vitest-coverage",
+    "fallow:health": "pnpx fallow health --coverage ./test/vitest-coverage/coverage-final.json",
     "fallow:fix:check": "pnpx fallow fix --dry-run --production",
     "fallow:fix": "pnpx fallow fix --production",
     "lint": "oxlint .",