@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/src/components/DataList/examples/DataListPlain.tsx

@@ -0,0 +1,32 @@
+import { DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell } from '@patternfly/react-core';
+
+export const DataListPlain: React.FunctionComponent = () => (
+  <DataList aria-label="Plain data list example" isPlain>
+    <DataListItem aria-labelledby="plain-item1">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="primary content">
+              <span id="plain-item1">Primary content</span>
+            </DataListCell>,
+            <DataListCell key="secondary content">Secondary content</DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+    <DataListItem aria-labelledby="plain-item2">
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell isFilled={false} key="secondary content fill">
+              <span id="plain-item2">Secondary content (pf-m-no-fill)</span>
+            </DataListCell>,
+            <DataListCell isFilled={false} alignRight key="secondary content align">
+              Secondary content (pf-m-align-right pf-m-no-fill)
+            </DataListCell>
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  </DataList>
+);

package/src/components/DatePicker/DatePicker.tsx

@@ -24,7 +24,8 @@ export interface DatePickerRequiredObject {
 /** The main date picker component. */
 
 export interface DatePickerProps
-  extends CalendarFormat,
+  extends
+    CalendarFormat,
     Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'> {
   /** The container to append the menu to. Defaults to 'inline'.
    * If your menu is being cut off you can append it to an element higher up the DOM tree.

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
             <input
               aria-invalid="false"
               aria-label="Date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               placeholder="YYYY-MM-DD"
@@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-7"
+            data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -51,12 +51,24 @@ exports[`With popover opened 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 448 512"
                 width="1em"
               >
-                <path
-                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                />
+                <svg
+                  class="pf-v6-icon-default"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                  />
+                </svg>
+                <svg
+                  class="pf-v6-icon-rh-ui"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                  />
+                </svg>
               </svg>
             </span>
           </button>
@@ -64,7 +76,7 @@ exports[`With popover opened 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="popover-unique_id_mock-body"
+      aria-describedby="popover-pf-:ro:-body"
       aria-label=""
       aria-modal="true"
       class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
@@ -82,7 +94,7 @@ exports[`With popover opened 1`] = `
       >
         <div
           class="pf-v6-c-popover__body"
-          id="popover-unique_id_mock-body"
+          id="popover-pf-:ro:-body"
         >
           <div
             class="pf-v6-c-calendar-month"
@@ -96,7 +108,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Previous month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -110,12 +122,24 @@ exports[`With popover opened 1`] = `
                       fill="currentColor"
                       height="1em"
                       role="img"
-                      viewBox="0 0 256 512"
                       width="1em"
                     >
-                      <path
-                        d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                      />
+                      <svg
+                        class="pf-v6-icon-default"
+                        viewBox="0 0 256 512"
+                      >
+                        <path
+                          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                        />
+                      </svg>
+                      <svg
+                        class="pf-v6-icon-rh-ui"
+                        viewBox="0 0 32 32"
+                      >
+                        <path
+                          d="M21 30a.997.997 0 0 1-.707-.293L7.647 17.061a1.501 1.501 0 0 1 0-2.121L20.293 2.293a.999.999 0 1 1 1.414 1.414L9.414 16l12.293 12.293A.999.999 0 0 1 21 30Z"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </button>
@@ -131,14 +155,14 @@ exports[`With popover opened 1`] = `
                   >
                     <span
                       hidden=""
-                      id="unique_id_mock"
+                      id="hidden-month-span:rs:"
                     >
                       Month
                     </span>
                     <button
                       aria-expanded="false"
                       class="pf-v6-c-menu-toggle"
-                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                      data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
                       data-ouia-component-type="PF6/MenuToggle"
                       data-ouia-safe="true"
                       style="width: 140px;"
@@ -161,12 +185,24 @@ exports[`With popover opened 1`] = `
                             fill="currentColor"
                             height="1em"
                             role="img"
-                            viewBox="0 0 320 512"
                             width="1em"
                           >
-                            <path
-                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                            />
+                            <svg
+                              class="pf-v6-icon-default"
+                              viewBox="0 0 320 512"
+                            >
+                              <path
+                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                              />
+                            </svg>
+                            <svg
+                              class="pf-v6-icon-rh-ui"
+                              viewBox="0 0 32 32"
+                            >
+                              <path
+                                d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+                              />
+                            </svg>
                           </svg>
                         </span>
                       </span>
@@ -185,7 +221,7 @@ exports[`With popover opened 1`] = `
                       <input
                         aria-invalid="false"
                         aria-label="Select year"
-                        data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
                         data-ouia-component-type="PF6/TextInput"
                         data-ouia-safe="true"
                         type="number"
@@ -201,7 +237,7 @@ exports[`With popover opened 1`] = `
                 <button
                   aria-label="Next month"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -215,12 +251,24 @@ exports[`With popover opened 1`] = `
                       fill="currentColor"
                       height="1em"
                       role="img"
-                      viewBox="0 0 256 512"
                       width="1em"
                     >
-                      <path
-                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                      />
+                      <svg
+                        class="pf-v6-icon-default"
+                        viewBox="0 0 256 512"
+                      >
+                        <path
+                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                        />
+                      </svg>
+                      <svg
+                        class="pf-v6-icon-rh-ui"
+                        viewBox="0 0 32 32"
+                      >
+                        <path
+                          d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </button>
@@ -812,7 +860,7 @@ exports[`disabled date picker 1`] = `
             <input
               aria-invalid="false"
               aria-label="disabled date picker"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               disabled=""
@@ -829,7 +877,7 @@ exports[`disabled date picker 1`] = `
             aria-haspopup="dialog"
             aria-label="Toggle date picker"
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""
@@ -844,12 +892,24 @@ exports[`disabled date picker 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 448 512"
                 width="1em"
               >
-                <path
-                  d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
-                />
+                <svg
+                  class="pf-v6-icon-default"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+                  />
+                </svg>
+                <svg
+                  class="pf-v6-icon-rh-ui"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M28.5 5H23V3a1 1 0 1 0-2 0v2H11V3a1 1 0 1 0-2 0v2H3.507c-.827 0-1.5.673-1.5 1.5v7c0 .01.003.019.003.029v8.423c0 .017-.01.031-.01.048 0 .279.115.53.299.712l.004.005 6.99 6.99c.092.092.201.165.323.216l.005.002c.121.05.25.076.38.076h18.5c.827 0 1.5-.673 1.5-1.5V6.5c0-.827-.673-1.5-1.5-1.5ZM9 7v2a1 1 0 1 0 2 0V7h10v2a1 1 0 1 0 2 0V7h5v6H4.01V7H9Zm0 19.586L5.414 23H9v3.586ZM11 28v-5.5c0-.827-.673-1.5-1.5-1.5H4.01v-6H28v13H11Z"
+                  />
+                </svg>
               </svg>
             </span>
           </button>

package/src/components/DescriptionList/DescriptionList.tsx

@@ -2,13 +2,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DescriptionList/description-list';
 import { formatBreakpointMods } from '../../helpers';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/c_description_list_GridTemplateColumns_min';
-// import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
+import cssTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list__term_width';
 import cssHorizontalTermWidth from '@patternfly/react-tokens/dist/esm/c_description_list_m_horizontal__term_width';
 
-const cssTermWidth = {
-  name: `--${styles.descriptionList}_term-width`
-};
-
 export interface BreakpointModifiers {
   default?: string;
   md?: string;

package/src/components/DescriptionList/__tests__/DescriptionList.test.tsx

@@ -133,7 +133,7 @@ test(`Renders style when isHorizontal and horizontalTermWidthModifier is set`, (
   expect(screen.getByLabelText('list')).toHaveStyle(listStyles);
 });
 
-test.skip(`Renders style when termWidth is set`, () => {
+test(`Renders style when termWidth is set`, () => {
   render(<DescriptionList aria-label="list" isHorizontal termWidth="30px" />);
   const listStyles = {};
   listStyles[`--${styles.descriptionList}__term--width`] = '30px';

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
 import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
@@ -35,6 +35,8 @@ export interface DrawerPanelContentProps extends Omit<React.HTMLProps<HTMLDivEle
   hasNoBorder?: boolean;
   /** Flag indicating that the drawer panel should be resizable. */
   isResizable?: boolean;
+  /** @beta Flag indicating that the drawer panel should disable glass styles. This prop is intended to work with isPill drawers. */
+  hasNoGlass?: boolean;
   /** Callback for resize end. */
   onResize?: (event: MouseEvent | TouchEvent | React.KeyboardEvent, width: number, id: string) => void;
   /** The minimum size of a drawer. */
@@ -68,6 +70,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   children,
   hasNoBorder = false,
   isResizable = false,
+  hasNoGlass = false,
   onResize,
   minSize,
   defaultSize,
@@ -80,6 +83,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   style,
   ...props
 }: DrawerPanelContentProps) => {
+  const panelId = useSSRSafeId('pf-drawer-panel-');
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = useState(0);
@@ -87,6 +91,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;
@@ -105,6 +110,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
+      setShouldCollapseSpace(false);
     }
   }, [isStatic, isExpanded]);
 
@@ -327,99 +333,99 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const isValidFocusTrap = focusTrap?.enabled && !isStatic;
   const Component = isValidFocusTrap ? FocusTrap : 'div';
 
+  const focusTrapProps = {
+    tabIndex: -1,
+    'aria-modal': true,
+    role: 'dialog',
+    active: isFocusTrapActive,
+    'aria-labelledby': focusTrap?.['aria-labelledby'] || id || panelId,
+    focusTrapOptions: {
+      fallbackFocus: () => panel.current,
+      onActivate: () => {
+        if (previouslyFocusedElement.current !== document.activeElement) {
+          previouslyFocusedElement.current = document.activeElement;
+        }
+      },
+      onDeactivate: () => {
+        previouslyFocusedElement.current &&
+          previouslyFocusedElement.current.focus &&
+          previouslyFocusedElement.current.focus();
+      },
+      clickOutsideDeactivates: true,
+      returnFocusOnDeactivate: false,
+      // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+      // We want to prevent this in case false is ever passed in.
+      initialFocus: focusTrap?.elementToFocusOnExpand || undefined,
+      escapeDeactivates: false
+    }
+  };
+
   return (
-    <GenerateId prefix="pf-drawer-panel-">
-      {(panelId) => {
-        const focusTrapProps = {
-          tabIndex: -1,
-          'aria-modal': true,
-          role: 'dialog',
-          active: isFocusTrapActive,
-          'aria-labelledby': focusTrap?.['aria-labelledby'] || id || panelId,
-          focusTrapOptions: {
-            fallbackFocus: () => panel.current,
-            onActivate: () => {
-              if (previouslyFocusedElement.current !== document.activeElement) {
-                previouslyFocusedElement.current = document.activeElement;
-              }
-            },
-            onDeactivate: () => {
-              previouslyFocusedElement.current &&
-                previouslyFocusedElement.current.focus &&
-                previouslyFocusedElement.current.focus();
-            },
-            clickOutsideDeactivates: true,
-            returnFocusOnDeactivate: false,
-            // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
-            // We want to prevent this in case false is ever passed in.
-            initialFocus: focusTrap?.elementToFocusOnExpand || undefined,
-            escapeDeactivates: false
+    <Component
+      {...(isValidFocusTrap && focusTrapProps)}
+      id={id || panelId}
+      className={css(
+        styles.drawerPanel,
+        isResizable && styles.modifiers.resizable,
+        hasNoGlass && 'pf-m-no-glass',
+        hasNoBorder && styles.modifiers.noBorder,
+        formatBreakpointMods(widths, styles),
+        colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+        colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
+        className
+      )}
+      onTransitionEnd={(ev) => {
+        if ((ev.target as HTMLElement) === panel.current) {
+          if (!hidden && ev.nativeEvent.propertyName === 'transform') {
+            onExpand(ev);
           }
-        };
-
-        return (
-          <Component
-            {...(isValidFocusTrap && focusTrapProps)}
-            id={id || panelId}
-            className={css(
-              styles.drawerPanel,
-              isResizable && styles.modifiers.resizable,
-              hasNoBorder && styles.modifiers.noBorder,
-              formatBreakpointMods(widths, styles),
-              colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-              colorVariant === DrawerColorVariant.secondary && styles.modifiers.secondary,
-              className
-            )}
-            onTransitionEnd={(ev) => {
-              if ((ev.target as HTMLElement) === panel.current) {
-                if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-                  onExpand(ev);
-                }
-                setIsExpandedInternal(!hidden);
-                if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
-                  setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
-                }
-              }
-            }}
-            hidden={hidden}
-            style={{
-              ...((defaultSize || minSize || maxSize) && boundaryCssVars),
-              ...style
-            }}
-            {...props}
-            ref={panel}
-          >
-            {isExpandedInternal && (
-              <Fragment>
-                {isResizable && (
-                  <Fragment>
-                    <div
-                      className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
-                      role="separator"
-                      tabIndex={0}
-                      aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
-                      aria-label={resizeAriaLabel}
-                      aria-valuenow={separatorValue}
-                      aria-valuemin={0}
-                      aria-valuemax={100}
-                      aria-controls={id || panelId}
-                      onMouseDown={handleMousedown}
-                      onKeyDown={handleKeys}
-                      onTouchStart={handleTouchStart}
-                      ref={splitterRef}
-                    >
-                      <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
-                    </div>
-                    <div className={css(styles.drawerPanelMain)}>{children}</div>
-                  </Fragment>
-                )}
-                {!isResizable && children}
-              </Fragment>
-            )}
-          </Component>
-        );
+          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}
+      style={{
+        ...((defaultSize || minSize || maxSize) && boundaryCssVars),
+        ...style
       }}
-    </GenerateId>
+      {...(shouldCollapseSpace && { inert: '' })}
+      {...props}
+      ref={panel}
+    >
+      {isExpandedInternal && (
+        <Fragment>
+          {isResizable && (
+            <Fragment>
+              <div
+                className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
+                role="separator"
+                tabIndex={0}
+                aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
+                aria-label={resizeAriaLabel}
+                aria-valuenow={separatorValue}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-controls={id || panelId}
+                onMouseDown={handleMousedown}
+                onKeyDown={handleKeys}
+                onTouchStart={handleTouchStart}
+                ref={splitterRef}
+              >
+                <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
+              </div>
+              <div className={css(styles.drawerPanelMain)}>{children}</div>
+            </Fragment>
+          )}
+          {!isResizable && children}
+        </Fragment>
+      )}
+    </Component>
   );
 };
 DrawerPanelContent.displayName = 'DrawerPanelContent';

package/src/components/Drawer/__tests__/DrawerPanelContent.test.tsx

@@ -122,6 +122,26 @@ test('Renders with role="dialog" when focusTrap.enabled is true', () => {
   expect(screen.getByRole('dialog')).toBeInTheDocument();
 });
 
+test('Does not render with inert when drawer is expanded', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).not.toHaveAttribute('inert');
+});
+
+test('Renders with inert when drawer is collapsed', () => {
+  render(
+    <Drawer>
+      <DrawerPanelContent data-testid="drawer-content">Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer-content')).toHaveAttribute('inert');
+});
+
 test('Applies style prop as expected', () => {
   render(
     <Drawer isExpanded>
@@ -158,3 +178,13 @@ test('Style prop overrides boundaryCssVars', () => {
     '--pf-v6-c-drawer__panel--md--FlexBasis--max': '500px'
   });
 });
+
+test(`Renders with class 'pf-m-no-glass' when hasNoGlass is true`, () => {
+  render(
+    <Drawer isExpanded isPill>
+      <DrawerPanelContent hasNoGlass>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveClass('pf-m-no-glass');
+});

package/src/components/Drawer/__tests__/Generated/__snapshots__/DrawerPanelContent.test.tsx.snap

@@ -5,7 +5,8 @@ exports[`DrawerPanelContent should match snapshot (auto-generated) 1`] = `
   <div
     class="pf-v6-c-drawer__panel ''"
     hidden=""
-    id="generated-id"
+    id="pf-drawer-panel-:r0:"
+    inert=""
   />
 </DocumentFragment>
 `;