@patternfly/react-core 6.5.0-prerelease.21 → 6.5.0-prerelease.25

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.24","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.24","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.24","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.21",
+  "version": "6.5.0-prerelease.25",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.8",
-    "@patternfly/react-styles": "^6.5.0-prerelease.6",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.6",
-    "focus-trap": "7.6.4",
+    "@patternfly/react-icons": "^6.5.0-prerelease.11",
+    "@patternfly/react-styles": "^6.5.0-prerelease.9",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.9",
+    "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.27",
+    "@patternfly/patternfly": "6.5.0-prerelease.33",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "5d9af44db11de73886f034a15546618870aab25c"
+  "gitHead": "e9f9e1fc3f1dfdc3f9474618a303d2f811ea06c5"
 }

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -55,6 +55,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   textAriaLabel?: string;
   /** Aria-label to use on the ClipboardCopyToggle. */
   toggleAriaLabel?: string;
+  /** ID to use on the TextInput. */
+  inputId?: string;
+  /** Name attribute to use on the TextInput. */
+  inputName?: string;
   /** Flag to show if the input is read only. */
   isReadOnly?: boolean;
   /** Flag to determine if clipboard copy is in the expanded state initially */
@@ -91,6 +95,10 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
   /** A function that is triggered on changing the text. */
   onChange?: (event: React.FormEvent, text?: string) => void;
+  /** Callback function when text input is focused */
+  onInputFocus?: (event?: any) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onInputBlur?: (event?: any) => void;
   /** The text which is copied. */
   children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
@@ -177,6 +185,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       /* eslint-disable @typescript-eslint/no-unused-vars */
       isExpanded,
       onChange, // Don't pass to <div>
+      onInputFocus, // Don't pass to <div>
+      onInputBlur, // Don't pass to <div>
       /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
       isCode,
@@ -189,6 +199,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       clickTip,
       textAriaLabel,
       toggleAriaLabel,
+      inputId,
+      inputName,
       variant,
       position,
       className,
@@ -295,8 +307,11 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
                     value={this.state.expanded ? this.state.textWhenExpanded : copyableText}
-                    id={`text-input-${id}`}
+                    id={inputId ?? `text-input-${id}`}
+                    name={inputName}
                     aria-label={textAriaLabel}
+                    onFocus={onInputFocus}
+                    onBlur={onInputBlur}
                     {...(isCode && { dir: 'ltr' })}
                   />
                   <ClipboardCopyButton

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

@@ -309,6 +309,18 @@ test('Passes textAriaLabel to TextInput', () => {
   expect(screen.getByRole('textbox')).toHaveAccessibleName('text label');
 });
 
+test('Passes inputId to TextInput', () => {
+  render(<ClipboardCopy inputId="custom-input-id">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('id', 'custom-input-id');
+});
+
+test('Passes inputName to TextInput', () => {
+  render(<ClipboardCopy inputName="custom-input-name">{children}</ClipboardCopy>);
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('name', 'custom-input-name');
+});
+
 test('Calls onChange when ClipboardCopy textinput is typed in', async () => {
   const onChangeMock = jest.fn();
   const user = userEvent.setup();
@@ -338,6 +350,66 @@ test('Does not call onChange when ClipboardCopy textinput is not typed in', asyn
   expect(onChangeMock).not.toHaveBeenCalled();
 });
 
+test('Calls onFocus when ClipboardCopy textinput is focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(<ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>);
+
+  await user.click(screen.getByRole('textbox'));
+
+  expect(onFocusMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onFocus when ClipboardCopy textinput is not focused', async () => {
+  const onFocusMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputFocus={onFocusMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onFocusMock).not.toHaveBeenCalled();
+});
+
+test('Calls onBlur when ClipboardCopy textinput loses focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'Copyable input' }));
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).toHaveBeenCalledTimes(1);
+});
+
+test('Does not call onBlur when ClipboardCopy textinput does not lose focus', async () => {
+  const onBlurMock = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ClipboardCopy onInputBlur={onBlurMock}>{children}</ClipboardCopy>
+      <input aria-label="native input" />
+    </>
+  );
+
+  await user.click(screen.getByRole('textbox', { name: 'native input' }));
+
+  expect(onBlurMock).not.toHaveBeenCalled();
+});
+
 test('Calls onCopy when ClipboardCopyButton is clicked', async () => {
   const onCopyMock = jest.fn();
   const user = userEvent.setup();

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

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-36"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-42"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

package/src/components/Compass/Compass.tsx

@@ -6,8 +6,10 @@ import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_com
 import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
 
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
-  /** Additional classes added to the compass. */
+  /** Additional classes added to the Compass. */
   className?: string;
+  /** Content of the docked navigation area of the layout */
+  dock?: React.ReactNode;
   /** Content placed at the top of the layout */
   header?: React.ReactNode;
   /** Flag indicating if the header is expanded */
@@ -30,14 +32,15 @@ export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   drawerContent?: React.ReactNode;
   /** Additional props passed to the drawer */
   drawerProps?: DrawerProps;
-  /** Light theme background image path of the compass */
+  /** Light theme background image path of the Compass  */
   backgroundSrcLight?: string;
-  /** Dark theme background image path of the compass */
+  /** Dark theme background image path of the Compass  */
   backgroundSrcDark?: string;
 }
 
 export const Compass: React.FunctionComponent<CompassProps> = ({
   className,
+  dock,
   header,
   isHeaderExpanded = true,
   sidebarStart,
@@ -64,38 +67,51 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
   }
 
   const compassContent = (
-    <div className={css(styles.compass, className)} {...props} style={{ ...props.style, ...backgroundImageStyles }}>
-      <div
-        className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-        {...(!isHeaderExpanded && { inert: 'true' })}
-      >
-        {header}
-      </div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-        {...(!isSidebarStartExpanded && { inert: 'true' })}
-      >
-        {sidebarStart}
-      </div>
-      <div className={css(styles.compassMain)}>{main}</div>
-      <div
-        className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-        {...(!isSidebarEndExpanded && { inert: 'true' })}
-      >
-        {sidebarEnd}
-      </div>
-      <div
-        className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-        {...(!isFooterExpanded && { inert: 'true' })}
-      >
-        {footer}
-      </div>
+    <div
+      className={css(styles.compass, dock !== undefined && styles.modifiers.dock, className)}
+      {...props}
+      style={{ ...props.style, ...backgroundImageStyles }}
+    >
+      {dock && <div className={css(`${styles.compass}__dock`)}>{dock}</div>}
+      {header && (
+        <div
+          className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
+          {...(!isHeaderExpanded && { inert: 'true' })}
+        >
+          {header}
+        </div>
+      )}
+      {sidebarStart && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
+          {...(!isSidebarStartExpanded && { inert: 'true' })}
+        >
+          {sidebarStart}
+        </div>
+      )}
+      {main && <div className={css(styles.compassMain)}>{main}</div>}
+      {sidebarEnd && (
+        <div
+          className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
+          {...(!isSidebarEndExpanded && { inert: 'true' })}
+        >
+          {sidebarEnd}
+        </div>
+      )}
+      {footer && (
+        <div
+          className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
+          {...(!isFooterExpanded && { inert: 'true' })}
+        >
+          {footer}
+        </div>
+      )}
     </div>
   );
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>
           <DrawerContentBody>{compassContent}</DrawerContentBody>
         </DrawerContent>

package/src/components/Compass/CompassContent.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
 export interface CompassContentProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content of the main compass area. Typically one or more CompassPanel components. */
+  /** Content of the main Compass area. Typically one or more CompassPanel components. */
   children: React.ReactNode;
   /** Additional classes added to the CompassContent */
   className?: string;
@@ -30,7 +30,7 @@ export const CompassContent: React.FunctionComponent<CompassContentProps> = ({
 
   if (hasDrawer) {
     return (
-      <Drawer {...drawerProps}>
+      <Drawer isPill {...drawerProps}>
         <DrawerContent panelContent={drawerContent}>{compassContent}</DrawerContent>
       </Drawer>
     );

package/src/components/Compass/CompassMainHeader.tsx

@@ -5,8 +5,8 @@ import { CompassMainHeaderToolbar } from './CompassMainHeaderToolbar';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-/** The wrapper component for header content in the main compass area. When building out a custom implementation,
- * you should ensure any content within the main header is rendered inside a compass panel and main header content wrappers.
+/** The wrapper component for header content in the main Compass area. When building out a custom implementation,
+ * you should ensure any content within the main header is rendered inside a Compass panel and main header content wrappers.
  */
 
 export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -18,8 +18,8 @@ export interface CompassMainHeaderProps extends Omit<React.HTMLProps<HTMLDivElem
   title?: React.ReactNode;
   /** Styled toolbar. If title or toolbar is provided, the children will be ignored. */
   toolbar?: React.ReactNode;
-  /** Additional props passed to the compass panel that wraps the main header content when using the title or toolbar props. When using the
-   * children prop, you should pass your own compass panel.
+  /** Additional props passed to the Compass panel that wraps the main header content when using the title or toolbar props. When using the
+   * children prop, you should pass your own Compass panel.
    */
   compassPanelProps?: Omit<CompassPanelProps, 'children'>;
 }

package/src/components/Compass/CompassMainHeaderContent.tsx

@@ -1,8 +1,8 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-/** A wrapper component to be passed as custom content for the compass main header. This should also be wrapped
- * in a compass panel component.
+/** A wrapper component to be passed as custom content for the Compass main header. This should also be wrapped
+ * in a Compass panel component.
  */
 
 export interface CompassMainHeaderContentProps extends React.HTMLProps<HTMLDivElement> {

package/src/components/Compass/CompassMainHeaderTitle.tsx

@@ -1,8 +1,8 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-/** A wrapper component for custom title content to be passed into a compass main header. This should also be wrapped
- * by a compass main header content component.
+/** A wrapper component for custom title content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
  */
 
 export interface CompassMainHeaderTitleProps extends React.HTMLProps<HTMLDivElement> {

package/src/components/Compass/CompassMainHeaderToolbar.tsx

@@ -1,8 +1,8 @@
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
 
-/** A wrapper component for custom toolbar content to be passed into a compass main header. This should also be wrapped
- * by a compass main header content component.
+/** A wrapper component for custom toolbar content to be passed into a Compass main header. This should also be wrapped
+ * by a Compass main header content component.
  */
 
 export interface CompassMainHeaderToolbarProps extends React.HTMLProps<HTMLDivElement> {

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

@@ -170,3 +170,13 @@ test('Matches the snapshot with drawer', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test(`Renders with ${styles.modifiers.dock} class when dock is passed`, () => {
+  render(<Compass dock={<div>Dock content</div>} data-testid="compass" />);
+  expect(screen.getByTestId('compass')).toHaveClass(styles.modifiers.dock);
+});
+
+test(`Does not render with ${styles.modifiers.dock} class when dock is not passed`, () => {
+  render(<Compass data-testid="compass" />);
+  expect(screen.getByTestId('compass')).not.toHaveClass(styles.modifiers.dock);
+});

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

@@ -47,7 +47,7 @@ exports[`Matches the snapshot with basic layout 1`] = `
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"

package/src/components/Compass/__tests__/__snapshots__/CompassContent.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot with drawer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-drawer pf-m-expanded"
+    class="pf-v6-c-drawer pf-m-expanded pf-m-pill"
   >
     <div
       class="pf-v6-c-drawer__main"

package/src/components/Compass/examples/Compass.md

@@ -12,11 +12,12 @@ propComponents:
     'CompassHero',
     'CompassMainHeader',
     'CompassPanel',
-    'CompassMessageBar'
+    'CompassMessageBar',
+    'CompassMainFooter'
   ]
 ---
 
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
@@ -28,15 +29,15 @@ import './compass.css';
 
 ### Basic
 
-In a basic compass layout, content can be passed to the following props to populate areas of the page:
+In a basic Compass layout, content can be passed to the following props to populate different areas of the page:
 
-- `header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
-- `sidebarStart`: content rendered in the left side or start side of the page
-- `main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components.
-- `sidebarEnd`: content rendered in the right side or end side of the page
-- `footer`: content rendered in the bottom of the page
+- `header`: Content rendered at the top of the page, typically including a `<CompassHeader>` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile.
+- `sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side).
+- `main`: Content rendered in the center of the page, typically including a `<CompassMainHeader>` or `<CompassHero>`, along with a `<CompassContent>` filled with 1 or more `<CompassPanel>` components.
+- `sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
+- `footer`: Content rendered at the bottom of the page.
 
-The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
+To customize the background image of the `<Compass>` and `<CompassHero>` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `<CompassHero>` component by using the `gradientLight` and `gradientDark` props.
 
 ```ts isBeta file="CompassBasic.tsx"
 
@@ -44,31 +45,31 @@ The background image of the `Compass` and `CompassHero` may be customized by usi
 
 ### With alternate footer
 
-When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page.
+When `footer` is used, its content will fill the width of the screen. By default, when content inside the footer grows, the height and placement of the start and end sidebars will adjust to allow for the change. To modify this behavior and render footer content without interfering with the sidebars, instead place a `<CompassMainFooter>` inside the `main` section. This will render content at the bottom of the page between the 2 sidebars, rather than across the entire bottom of the page.
 
 ```ts file="CompassMainFooterDemo.tsx"
 
 ```
 
-### Demo
+### With docked nav
 
-```ts isFullscreen isBeta file="CompassDemo.tsx"
+```ts file="CompassDockLayout.tsx"
 
 ```
 
 ## Composable structure
 
-When building a more custom implementation using Compass components, there are some intended or expected structures that must be present.
+When building a more custom implementation with Compass components, there are some intended or expected structures that must remain present.
 
 ### CompassMainHeader structure
 
-When using the `children` property in the `<CompassMainHeader>` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow.
+When using the `children` property in the `<CompassMainHeader>` component, there are specific structural patterns that you should follow, as shown this general code structure.
 
 ```noLive
 <CompassMainHeader>
   <CompassPanel>
     <CompassMainHeaderContent>
-      {Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components}
+      {Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
     </CompassMainHeaderContent>
   </CompassPanel>
 </CompassMainHeader>

package/src/components/Compass/examples/CompassDockLayout.tsx

@@ -0,0 +1,25 @@
+import {
+  Compass,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  CompassMainHeaderContent
+} from '@patternfly/react-core';
+import './compass.css';
+
+export const CompassBasic: React.FunctionComponent = () => {
+  const dockContent = <div>Content</div>;
+  const mainContent = (
+    <CompassContent>
+      <CompassMainHeader>
+        <CompassPanel>
+          <CompassMainHeaderContent>
+            <div>Content title</div>
+          </CompassMainHeaderContent>
+        </CompassPanel>
+      </CompassMainHeader>
+      <div>Content</div>
+    </CompassContent>
+  );
+  return <Compass dock={dockContent} main={mainContent} />;
+};

package/src/components/Compass/examples/compass.css

@@ -1,8 +1,8 @@
-#ws-react-p-compass-basic [class*="pf-v6-c-compass"] {
+#ws-react-a-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-p-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-react-a-compass-basic [class*="pf-v6-c-compass"]::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -10,11 +10,23 @@
   pointer-events: none;
 }
 
-#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
+#ws-react-a-compass-with-alternate-footer [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-react-p-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
+#ws-react-a-compass-with-alternate-footer [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+  pointer-events: none;
+}
+
+#ws-react-a-compass-with-docked-nav [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-react-a-compass-with-docked-nav [class*="pf-v6-c-compass"]:not([class*="footer"])::after {
   content: "";
   position: absolute;
   inset: 0;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -90,6 +90,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;
@@ -108,6 +109,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
+      setShouldCollapseSpace(false);
     }
   }, [isStatic, isExpanded]);
 
@@ -380,6 +382,10 @@ 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);
                 }
@@ -390,6 +396,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
               ...((defaultSize || minSize || maxSize) && boundaryCssVars),
               ...style
             }}
+            {...(shouldCollapseSpace && { inert: '' })}
             {...props}
             ref={panel}
           >

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>

package/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"
+    inert=""
   />
 </DocumentFragment>
 `;