fix: Row Detail should also work with fixed grid height or w/o autoHeight

package.json

@@ -81,12 +81,12 @@
     "/src/slickgrid-react"
   ],
   "dependencies": {
-    "@slickgrid-universal/common": "~5.13.0",
-    "@slickgrid-universal/custom-footer-component": "~5.13.0",
-    "@slickgrid-universal/empty-warning-component": "~5.13.0",
+    "@slickgrid-universal/common": "~5.13.1",
+    "@slickgrid-universal/custom-footer-component": "~5.13.1",
+    "@slickgrid-universal/empty-warning-component": "~5.13.1",
     "@slickgrid-universal/event-pub-sub": "~5.13.0",
-    "@slickgrid-universal/pagination-component": "~5.13.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.13.0",
+    "@slickgrid-universal/pagination-component": "~5.13.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.13.1",
     "dequal": "^2.0.3",
     "i18next": "^23.16.8",
     "sortablejs": "^1.15.6"
@@ -96,18 +96,18 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "^2.3.0",
-    "@faker-js/faker": "^9.5.1",
+    "@faker-js/faker": "^9.6.0",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
-    "@slickgrid-universal/composite-editor-component": "~5.13.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.0",
-    "@slickgrid-universal/excel-export": "~5.13.0",
-    "@slickgrid-universal/graphql": "~5.13.0",
-    "@slickgrid-universal/odata": "~5.13.0",
-    "@slickgrid-universal/rxjs-observable": "~5.13.0",
-    "@slickgrid-universal/text-export": "~5.13.0",
+    "@slickgrid-universal/composite-editor-component": "~5.13.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.13.1",
+    "@slickgrid-universal/excel-export": "~5.13.1",
+    "@slickgrid-universal/graphql": "~5.13.1",
+    "@slickgrid-universal/odata": "~5.13.1",
+    "@slickgrid-universal/rxjs-observable": "~5.13.1",
+    "@slickgrid-universal/text-export": "~5.13.1",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/i18next-xhr-backend": "^1.4.2",
     "@types/node": "^22.13.10",

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

@@ -99,7 +99,7 @@ const Example45DetailView: React.FC<RowDetailViewProps<Distributor, typeof Examp
   return (
     <div className={`container-fluid ${innerGridClass}`} style={{ marginTop: '10px' }}>
       <h4>{props.model.companyName} - Order Details (id: {props.model.id})</h4>
-      <div className="container-fluid">
+      <div className="container-fluid innergrid">
         {showGrid && (
           <SlickgridReact
             gridId={`innergrid-${props.model.id}`}

src/examples/slickgrid/Example45.tsx

@@ -22,11 +22,13 @@ const Example45: React.FC = () => {
   const [dataset] = useState<Distributor[]>(getData(NB_ITEMS));
   const [detailViewRowCount, setDetailViewRowCount] = useState<number>(9);
   const [serverWaitDelay, setServerWaitDelay] = useState<number>(FAKE_SERVER_DELAY);
+  const [isUsingAutoHeight, setIsUsingAutoHeight] = useState<boolean>(false);
   const [isUsingInnerGridStatePresets, setIsUsingInnerGridStatePresets] = useState<boolean>(false);
   const [darkMode, setDarkMode] = useState<boolean>(false);
 
   const serverWaitDelayRef = useRef(serverWaitDelay);
   const reactGridRef = useRef<SlickgridReactInstance | null>(null);
+  const isUsingAutoHeightRef = useRef(isUsingAutoHeight);
   const isUsingInnerGridStatePresetsRef = useRef(isUsingInnerGridStatePresets);
 
   useEffect(() => {
@@ -40,6 +42,7 @@ const Example45: React.FC = () => {
   }, []);
 
   useEffect(() => {
+    isUsingAutoHeightRef.current = isUsingAutoHeight;
     isUsingInnerGridStatePresetsRef.current = isUsingInnerGridStatePresets;
   }, [isUsingInnerGridStatePresets]);
 
@@ -152,6 +155,7 @@ const Example45: React.FC = () => {
     return {
       autoResize: {
         container: '#demo-container',
+        autoHeight: isUsingAutoHeightRef.current, // works with/without autoHeight
         rightPadding: 10
       },
       enableFiltering: true,
@@ -207,6 +211,15 @@ const Example45: React.FC = () => {
     return true;
   }
 
+  function changeUsingResizerAutoHeight() {
+    const newIsUsingAutoHeight = !isUsingAutoHeight;
+    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;
+  }
+
   function closeAllRowDetail() {
     rowDetailInstance().collapseAll();
   }
@@ -287,6 +300,20 @@ const Example45: React.FC = () => {
                   Use Inner Grid State/Presets
                 </span>
               </label>
+              <label className="checkbox-inline control-label ms-2" htmlFor="useResizeAutoHeight">
+                <input
+                  type="checkbox"
+                  id="useResizeAutoHeight"
+                  data-test="use-auto-height"
+                  className="me-1"
+                  checked={isUsingAutoHeight}
+                  onChange={() => changeUsingResizerAutoHeight()} />
+                <span
+                  title="should we use Grid State/Presets to keep the inner grid state whenever Row Details are out and back to viewport and re-rendered"
+                >
+                  Use <code>autoResize.autoHeight</code>
+                </span>
+              </label>
             </span>
           </div>
         </div>

src/examples/slickgrid/example45-detail-view.scss

@@ -1,10 +1,3 @@
-.detail-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-}
-
-label {
-  font-weight: 600;
+.innergrid {
+  --slick-header-menu-display: inline-block;
 }