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

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

@@ -19,7 +19,7 @@ exports[`Drawer expands from bottom 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r8:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -36,7 +36,7 @@ exports[`Drawer expands from bottom 1`] = `
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r9:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -50,12 +50,24 @@ exports[`Drawer expands from bottom 1`] = `
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 352 512"
                     width="1em"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
+                    <svg
+                      class="pf-v6-icon-default"
+                      viewBox="0 0 352 512"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                    <svg
+                      class="pf-v6-icon-rh-ui"
+                      viewBox="0 0 32 32"
+                    >
+                      <path
+                        d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </button>
@@ -128,7 +140,7 @@ exports[`Drawer has resizable callback and id 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -142,12 +154,24 @@ exports[`Drawer has resizable callback and id 1`] = `
                       fill="currentColor"
                       height="1em"
                       role="img"
-                      viewBox="0 0 352 512"
                       width="1em"
                     >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
+                      <svg
+                        class="pf-v6-icon-default"
+                        viewBox="0 0 352 512"
+                      >
+                        <path
+                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        />
+                      </svg>
+                      <svg
+                        class="pf-v6-icon-rh-ui"
+                        viewBox="0 0 32 32"
+                      >
+                        <path
+                          d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </button>
@@ -185,11 +209,11 @@ exports[`Drawer has resizable css and color variants 1`] = `
       </div>
       <div
         class="pf-v6-c-drawer__panel pf-m-resizable pf-m-secondary"
-        id="generated-id"
+        id="pf-drawer-panel-:ra:"
         style="--pf-v6-c-drawer__panel--md--FlexBasis: 300px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px; --pf-v6-c-drawer__panel--md--FlexBasis--max: 400px;"
       >
         <div
-          aria-controls="generated-id"
+          aria-controls="pf-drawer-panel-:ra:"
           aria-label="Resize"
           aria-orientation="vertical"
           aria-valuemax="100"
@@ -222,7 +246,7 @@ exports[`Drawer has resizable css and color variants 1`] = `
                 <button
                   aria-label="Close drawer panel"
                   class="pf-v6-c-button pf-m-plain"
-                  data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                  data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   type="button"
@@ -236,12 +260,24 @@ exports[`Drawer has resizable css and color variants 1`] = `
                       fill="currentColor"
                       height="1em"
                       role="img"
-                      viewBox="0 0 352 512"
                       width="1em"
                     >
-                      <path
-                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                      />
+                      <svg
+                        class="pf-v6-icon-default"
+                        viewBox="0 0 352 512"
+                      >
+                        <path
+                          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        />
+                      </svg>
+                      <svg
+                        class="pf-v6-icon-rh-ui"
+                        viewBox="0 0 32 32"
+                      >
+                        <path
+                          d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                        />
+                      </svg>
                     </svg>
                   </span>
                 </button>
@@ -280,7 +316,8 @@ exports[`Drawer isExpanded = false and isInline = false and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="generated-id"
+        id="pf-drawer-panel-:r2:"
+        inert=""
       />
     </div>
   </div>
@@ -307,7 +344,8 @@ exports[`Drawer isExpanded = false and isInline = true and isStatic = false 1`]
       <div
         class="pf-v6-c-drawer__panel"
         hidden=""
-        id="generated-id"
+        id="pf-drawer-panel-:r5:"
+        inert=""
       />
     </div>
   </div>
@@ -333,7 +371,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r0:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -350,7 +388,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
               <button
                 aria-label="Close drawer panel"
                 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-:r1:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -364,12 +402,24 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 352 512"
                     width="1em"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
+                    <svg
+                      class="pf-v6-icon-default"
+                      viewBox="0 0 352 512"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                    <svg
+                      class="pf-v6-icon-rh-ui"
+                      viewBox="0 0 32 32"
+                    >
+                      <path
+                        d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </button>
@@ -406,7 +456,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r6:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -423,7 +473,7 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
               <button
                 aria-label="Close drawer panel"
                 class="pf-v6-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:r7:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -437,12 +487,24 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 352 512"
                     width="1em"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
+                    <svg
+                      class="pf-v6-icon-default"
+                      viewBox="0 0 352 512"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                    <svg
+                      class="pf-v6-icon-rh-ui"
+                      viewBox="0 0 32 32"
+                    >
+                      <path
+                        d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </button>
@@ -479,7 +541,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
       </div>
       <div
         class="pf-v6-c-drawer__panel"
-        id="generated-id"
+        id="pf-drawer-panel-:r3:"
       >
         <div
           class="pf-v6-c-drawer__head"
@@ -496,7 +558,7 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
               <button
                 aria-label="Close drawer panel"
                 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-:r4:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -510,12 +572,24 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 352 512"
                     width="1em"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
+                    <svg
+                      class="pf-v6-icon-default"
+                      viewBox="0 0 352 512"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                    <svg
+                      class="pf-v6-icon-rh-ui"
+                      viewBox="0 0 32 32"
+                    >
+                      <path
+                        d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                      />
+                    </svg>
                   </svg>
                 </span>
               </button>

package/src/components/Drawer/examples/Drawer.md

@@ -135,7 +135,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 ### With focus trap
 
-When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
+When a [focus trap](/accessibility/develop#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
 
 To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
 

package/src/components/Drawer/examples/DrawerAdditionalSectionAboveContent.tsx

@@ -13,7 +13,7 @@ import {
 
 export const DrawerAdditionalSectionAboveContent: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasic.tsx

@@ -14,7 +14,7 @@ import {
 
 export const DrawerBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBasicPill.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerBreakpoint.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBreakpoint: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerInlinePanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerInlinePanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedContentPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedContentPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerModifiedPanelPadding.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerModifiedPanelPadding: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPanelStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerPanelStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerPillInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerBasicPill: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtEnd.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtEnd: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableAtStart.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableAtStart: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnBottom.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnBottom: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerResizableOnInline.tsx

@@ -12,7 +12,7 @@ import {
 
 export const DrawerResizableOnInline: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Drawer/examples/DrawerStatic.tsx

@@ -13,7 +13,7 @@ import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/
 
 export const DrawerStatic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const drawerRef = useRef<HTMLDivElement>(undefined);
+  const drawerRef = useRef<HTMLSpanElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/components/Dropdown/Dropdown.tsx

@@ -48,6 +48,12 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** When applied, wraps dropdown in a container with a data-ouia-component-id.*/
+  containerOuiaId?: number | string;
+  /** Set the value of data-ouia-safe for the container when containerOuiaId is applied. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  containerOuiaSafe?: boolean;
+  /** Sets the base component to render for the container. Defaults to <span> */
+  containerComponent?: React.ReactNode;
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
@@ -86,11 +92,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   shouldFocusFirstItemOnOpen = false,
   shouldPreventScrollOnItemFocus = true,
   focusTimeoutDelay = 0,
+  containerOuiaId,
+  containerOuiaSafe = true,
+  containerComponent = 'span',
   ...props
 }: DropdownProps) => {
   const localMenuRef = useRef<HTMLDivElement>(undefined);
   const localToggleRef = useRef<HTMLButtonElement>(undefined);
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
+  const ContainerComponent = containerComponent as any;
+  const containerOuiaProps = useOUIAProps('Dropdown container', containerOuiaId, containerOuiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement | null>) || localMenuRef;
   const toggleRef =
@@ -185,7 +196,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       </MenuContent>
     </Menu>
   );
-  return (
+
+  const popper = (
     <Popper
       trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
@@ -196,6 +208,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       {...popperProps}
     />
   );
+
+  return containerOuiaId ? <ContainerComponent {...containerOuiaProps}>{popper}</ContainerComponent> : popper;
 };
 
 export const Dropdown = forwardRef((props: DropdownProps, ref: React.Ref<any>) => (

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

@@ -201,6 +201,32 @@ test('onOpenChange is called when passed and user presses esc key', async () =>
   expect(onOpenChange).toBeCalledTimes(1);
 });
 
+test('applies containerOuiaId to parent element', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-id', 'test-dropdown');
+  expect(dropdownParent).toHaveAttribute('data-ouia-component-type', 'PF6/Dropdown container');
+  expect(dropdownParent?.tagName).toBe('SPAN');
+});
+
+test('Renders with custom container element when containerComponent is passed', () => {
+  render(
+    <Dropdown containerOuiaId="test-dropdown" containerComponent="div" toggle={(toggleRef) => toggle(toggleRef)}>
+      {dropdownChildren}
+    </Dropdown>
+  );
+
+  const dropdownToggle = screen.getByRole('button', { name: 'Dropdown' });
+  const dropdownParent = dropdownToggle?.parentNode?.parentNode;
+  expect(dropdownParent?.tagName).toBe('DIV');
+});
+
 test('match snapshot', () => {
   const { asFragment } = render(
     <Dropdown

package/src/components/Dropdown/examples/Dropdown.md

@@ -16,7 +16,7 @@ propComponents:
   ]
 ---
 
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
@@ -63,3 +63,15 @@ To provide users with more context about a `<DropdownItem>`, pass a short messag
 ```ts file="./DropdownWithDescriptions.tsx"
 
 ```
+
+### Split toggle with checkbox
+
+To combine a checkbox or other control with a dropdown menu, use a split button.
+
+A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.
+
+If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu. 
+
+```ts file="./DropdownWithSplit.tsx"
+
+```