fix(DrawerPanelContent): collapse space when drawer collapsed

Closes #11938

Have not tested this against OCP but this fixes the core issue where the drawer panel content still takes up width even when closed.

After this PR, the panel content is still "display"ed but now takes up width 0.

We cannot use `display: none` here as that breaks the drawer opening animation

Author: logonoff

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -86,6 +86,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
+  const [shouldCollapseSpace, setShouldCollapseSpace] = useState(hidden);
   const previouslyFocusedElement = useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
@@ -104,6 +105,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
+      setShouldCollapseSpace(false);
     }
   }, [isStatic, isExpanded]);
 
@@ -375,14 +377,21 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
                   onExpand(ev);
                 }
                 setIsExpandedInternal(!hidden);
+                // We also need to collapse the space when the panel is hidden to prevent automation from scrolling to it
+                if (hidden && ev.nativeEvent.propertyName === 'transform') {
+                  setShouldCollapseSpace(true);
+                }
                 if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
                   setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
                 }
               }
             }}
             hidden={hidden}
-            {...((defaultSize || minSize || maxSize) && {
-              style: boundaryCssVars as React.CSSProperties
+            {...((defaultSize || minSize || maxSize || shouldCollapseSpace) && {
+              style: {
+                ...boundaryCssVars,
+                ...(shouldCollapseSpace && { flexBasis: 0 })
+              } as React.CSSProperties
             })}
             {...props}
             ref={panel}

packages/react-core/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
     class="pf-v6-c-drawer__panel ''"
     hidden=""
     id="generated-id"
+    style="flex-basis: 0px;"
   />
 </DocumentFragment>
 `;

packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -281,6 +281,7 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        style="flex-basis: 0px;"
       />
     </div>
   </div>
@@ -308,6 +309,7 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
         class="pf-v6-c-drawer__panel"
         hidden=""
         id="generated-id"
+        style="flex-basis: 0px;"
       />
     </div>
   </div>