@patternfly/react-core 6.6.1-prerelease.3 → 6.6.1-prerelease.5

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.6.1-prerelease.2","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.6.1-prerelease.4","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.6.1-prerelease.2","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.6.1-prerelease.4","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.6.1-prerelease.2","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.6.1-prerelease.4","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.3",
+  "version": "6.6.1-prerelease.5",
   "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.6.1-prerelease.0",
-    "@patternfly/react-styles": "^6.6.1-prerelease.0",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.0",
+    "@patternfly/react-icons": "^6.6.1-prerelease.1",
+    "@patternfly/react-styles": "^6.6.1-prerelease.1",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.1",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.20",
+    "@patternfly/patternfly": "6.6.0-prerelease.39",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "f20f0738c88cf45f51cdae7239b92ee6aaa26510"
+  "gitHead": "a01cd6377b953ae8f01eb2dc632311a2373dfeac"
 }

package/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

@@ -23,9 +23,7 @@ exports[`Matches snapshot with icon 1`] = `
 
 exports[`Matches snapshot without icon 1`] = `
 <DocumentFragment>
-  <li
-    class=""
-  >
+  <li>
     <span>
       List item content
     </span>

package/src/components/Modal/Modal.tsx

@@ -69,6 +69,7 @@ interface ModalState {
 class Modal extends Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
+  static openModalStacks: Map<HTMLElement, string[]> = new Map();
   boxId = '';
   backdropId = '';
 
@@ -106,16 +107,46 @@ class Modal extends Component<ModalProps, ModalState> {
     return appendTo || document.body;
   };
 
+  static getStackForTarget(target: HTMLElement): string[] {
+    if (!Modal.openModalStacks.has(target)) {
+      Modal.openModalStacks.set(target, []);
+    }
+    return Modal.openModalStacks.get(target)!;
+  }
+
   toggleSiblingsFromScreenReaders = (hide: boolean) => {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    const bodyChildren = target.children;
-    for (const child of Array.from(bodyChildren)) {
-      const isPopperElement = child.hasAttribute('data-popper-placement');
-      if (child.id !== this.backdropId && !isPopperElement) {
-        hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
+
+    if (hide) {
+      const stack = Modal.getStackForTarget(target);
+      if (stack.indexOf(this.backdropId) === -1) {
+        stack.push(this.backdropId);
+      }
+    } else {
+      const stack = Modal.openModalStacks.get(target);
+      if (!stack) {
+        return;
+      }
+      const idx = stack.indexOf(this.backdropId);
+      if (idx !== -1) {
+        stack.splice(idx, 1);
+      }
+      if (stack.length === 0) {
+        Modal.openModalStacks.delete(target);
       }
     }
+
+    const stack = Modal.openModalStacks.get(target);
+    const activeBackdropId = stack?.length ? stack[stack.length - 1] : null;
+
+    for (const child of Array.from(target.children)) {
+      if (child.hasAttribute('data-popper-placement')) {
+        continue;
+      }
+      const shouldHide = activeBackdropId && child.id !== activeBackdropId;
+      shouldHide ? child.setAttribute('aria-hidden', 'true') : child.removeAttribute('aria-hidden');
+    }
   };
 
   isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
@@ -140,8 +171,10 @@ class Modal extends Component<ModalProps, ModalState> {
       this.toggleSiblingsFromScreenReaders(true);
     } else {
       if (prevProps.isOpen !== this.props.isOpen) {
-        target.classList.remove(css(styles.backdropOpen));
         this.toggleSiblingsFromScreenReaders(false);
+        if (!Modal.openModalStacks.has(target)) {
+          target.classList.remove(css(styles.backdropOpen));
+        }
       }
     }
   }
@@ -150,8 +183,10 @@ class Modal extends Component<ModalProps, ModalState> {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
-    target.classList.remove(css(styles.backdropOpen));
     this.toggleSiblingsFromScreenReaders(false);
+    if (!Modal.openModalStacks.has(target)) {
+      target.classList.remove(css(styles.backdropOpen));
+    }
   }
 
   render() {

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

@@ -64,7 +64,28 @@ const ModalWithAdjacentModal = () => {
   );
 };
 
+const MultipleOpenModals = () => {
+  const [isFirstOpen, setIsFirstOpen] = useState(true);
+  const [isSecondOpen, setIsSecondOpen] = useState(false);
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <Modal isOpen={isFirstOpen} appendTo={target} onClose={() => setIsFirstOpen(false)} aria-label="First modal">
+        <button onClick={() => setIsSecondOpen(true)}>Open second modal</button>
+      </Modal>
+      <Modal isOpen={isSecondOpen} appendTo={target} onClose={() => setIsSecondOpen(false)} aria-label="Second modal">
+        Second modal content
+      </Modal>
+    </>
+  );
+};
+
 describe('Modal', () => {
+  beforeEach(() => {
+    Modal.openModalStacks = new Map();
+  });
+
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
     expect(document.createElement).toHaveBeenCalledWith('div');
@@ -181,4 +202,135 @@ describe('Modal', () => {
       'pf-v6-l-bullseye'
     );
   });
+
+  test('backdropOpen class remains when closing one of multiple open modals', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    expect(target).toHaveClass(css(styles.backdropOpen));
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+
+    expect(target).toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('backdropOpen class is removed when all modals are closed', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+
+    expect(target).not.toHaveClass(css(styles.backdropOpen));
+  });
+
+  test('only the most recent modal does not have aria-hidden when multiple modals are open', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    const firstBackdrop = screen.getByLabelText('First modal').closest('[class*="backdrop"]');
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const secondBackdrop = screen.getByLabelText('Second modal').closest('[class*="backdrop"]');
+
+    expect(firstBackdrop).toHaveAttribute('aria-hidden', 'true');
+    expect(secondBackdrop).not.toHaveAttribute('aria-hidden');
+  });
+
+  test('closing the active modal reveals the previous modal', async () => {
+    const user = userEvent.setup();
+
+    render(<MultipleOpenModals />, { container: document.body.appendChild(target) });
+
+    await user.click(screen.getByRole('button', { name: 'Open second modal' }));
+
+    const firstBackdrop = screen
+      .getByLabelText('First modal', { selector: '[role="dialog"]' })
+      .closest('[class*="backdrop"]');
+
+    expect(firstBackdrop).toHaveAttribute('aria-hidden', 'true');
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[closeButtons.length - 1]);
+
+    expect(firstBackdrop).not.toHaveAttribute('aria-hidden');
+  });
+
+  test('modals with different appendTo targets have independent stacks', async () => {
+    const user = userEvent.setup();
+    const targetA = document.createElement('div');
+    const targetB = document.createElement('div');
+    document.body.appendChild(targetA);
+    document.body.appendChild(targetB);
+
+    const siblingA = document.createElement('aside');
+    siblingA.textContent = 'Sibling A';
+    targetA.appendChild(siblingA);
+
+    const siblingB = document.createElement('aside');
+    siblingB.textContent = 'Sibling B';
+    targetB.appendChild(siblingB);
+
+    const DistinctTargetModals = () => {
+      const [isAOpen, setIsAOpen] = useState(true);
+      const [isBOpen, setIsBOpen] = useState(true);
+
+      return (
+        <>
+          <Modal isOpen={isAOpen} appendTo={targetA} onClose={() => setIsAOpen(false)} aria-label="Modal A">
+            Modal A content
+          </Modal>
+          <Modal isOpen={isBOpen} appendTo={targetB} onClose={() => setIsBOpen(false)} aria-label="Modal B">
+            Modal B content
+          </Modal>
+        </>
+      );
+    };
+
+    render(<DistinctTargetModals />);
+
+    expect(siblingA).toHaveAttribute('aria-hidden', 'true');
+    expect(siblingB).toHaveAttribute('aria-hidden', 'true');
+    expect(targetA).toHaveClass(css(styles.backdropOpen));
+    expect(targetB).toHaveClass(css(styles.backdropOpen));
+
+    const closeButtons = screen.getAllByRole('button', { name: 'Close', hidden: true });
+    await user.click(closeButtons[1]);
+
+    expect(targetB).not.toHaveClass(css(styles.backdropOpen));
+    expect(siblingB).not.toHaveAttribute('aria-hidden');
+
+    expect(targetA).toHaveClass(css(styles.backdropOpen));
+    expect(siblingA).toHaveAttribute('aria-hidden', 'true');
+
+    document.body.removeChild(targetA);
+    document.body.removeChild(targetB);
+  });
+
+  test('unmounting a never-opened modal with a custom target does not leak a stack entry', () => {
+    const customTarget = document.createElement('div');
+    document.body.appendChild(customTarget);
+
+    const { unmount } = render(
+      <Modal isOpen={false} appendTo={customTarget} onClose={() => {}}>
+        Never opened
+      </Modal>
+    );
+
+    unmount();
+
+    expect(Modal.openModalStacks.has(customTarget)).toBe(false);
+
+    document.body.removeChild(customTarget);
+  });
 });

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

@@ -1017,7 +1017,6 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"

package/src/components/Page/Page.tsx

@@ -28,7 +28,10 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * will handle toggling the visibility of the text in individual isDocked components.
    */
   isDockTextExpanded?: boolean;
-  /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
+  /** The horizontal masthead content (e.g. <Masthead /> or <PageHeader />). PageHeader is an alternative to Masthead
+   * and should only be used to wrap custom header content. When using the docked variant, this content will only render at
+   * mobile viewports.
+   */
   masthead?: React.ReactNode;
   /** @beta Content to render in the vertical dock when variant of docked is used. At mobile viewports, this content will be replaced with the content passed to masthead. */
   dockContent?: React.ReactNode;

package/src/components/Page/PageHeader.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageHeaderProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the page header. This should be custom header content, rather than the PatternFly Masthead. */
+  children?: React.ReactNode;
+  /** Additional classes added to the page header */
+  className?: string;
+  /** Sets the base component to render. Defaults to header */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
+  className,
+  children,
+  component = 'header',
+  ...props
+}: PageHeaderProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageHeader, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageHeader.displayName = 'PageHeader';

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

@@ -9,6 +9,7 @@ import { Nav, NavList, NavItem } from '../../Nav';
 import { SkipToContent } from '../../SkipToContent';
 import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
+import { PageHeader } from '../PageHeader';
 import { Masthead } from '../../Masthead';
 
 import styles from '@patternfly/react-styles/css/components/Page/page';
@@ -487,4 +488,16 @@ describe('Page docked variant', () => {
     const pageDockMain = screen.getByText('Dock content').closest(`.${styles.pageDockMain}`);
     expect(pageDockMain).toBeInTheDocument();
   });
+
+  test('Renders PageHeader when passed to the masthead prop', () => {
+    render(
+      <Page {...props} masthead={<PageHeader>Custom header</PageHeader>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const header = screen.getByText('Custom header');
+    expect(header).toHaveClass(styles.pageHeader);
+    expect(header.parentElement).toHaveClass(styles.page);
+  });
 });

package/src/components/Page/__tests__/PageHeader.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageHeader } from '../PageHeader';
+
+test('Renders children', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageHeader} by default`, () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass(styles.pageHeader, { exact: true });
+});
+
+test('Renders as a div by default', () => {
+  render(<PageHeader>Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('HEADER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageHeader component="div">Header content</PageHeader>);
+  expect(screen.getByText('Header content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageHeader className="custom-class">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageHeader id="custom-id">Header content</PageHeader>);
+  expect(screen.getByText('Header content')).toHaveAttribute('id', 'custom-id');
+});

package/src/components/Page/examples/Page.md

@@ -3,7 +3,16 @@ id: Page
 section: components
 cssPrefix: pf-v6-c-page
 propComponents:
-  ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
+  [
+    'Page',
+    'PageHeader',
+    'PageSidebar',
+    'PageSidebarBody',
+    'PageSection',
+    'PageGroup',
+    'PageBreadcrumb',
+    'PageToggleButton'
+  ]
 ---
 
 import { useState, useLayoutEffect, useRef } from 'react';
@@ -16,7 +25,7 @@ import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_p
 
 A page will typically contain the following components:
 
-- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) component
+- A `<Page>` with a `masthead` prop that often contains a [masthead](/components/masthead) or a `<PageHeader>`
 
 The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
 
@@ -24,6 +33,14 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
+### Page header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts file="./PageHeaderContent.tsx"
+
+```
+
 ### Vertical navigation
 
 To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.

package/src/components/Page/examples/PageHeaderContent.tsx

@@ -0,0 +1,19 @@
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+
+export const PageHeaderContent: React.FunctionComponent = () => {
+  const pageHeader = <PageHeader>Page header</PageHeader>;
+
+  return (
+    <Page masthead={pageHeader}>
+      <PageSection aria-labelledby="header-example-section-1">
+        <h2 id="header-example-section-1">Page header example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="header-example-section-2">
+        <h2 id="header-example-section-2">Page header example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="header-example-section-3">
+        <h2 id="header-example-section-3">Page header example section 3</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/index.ts

@@ -2,6 +2,7 @@ export * from './Page';
 export * from './PageBody';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
+export * from './PageHeader';
 export * from './PageSidebar';
 export * from './PageSidebarBody';
 export * from './PageSection';

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

@@ -2,9 +2,7 @@
 
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >
@@ -145,7 +143,6 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class=""
     data-testid="test-id"
   >
     <div
@@ -282,7 +279,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
     </div>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
@@ -490,9 +486,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
 
 exports[`SearchInput renders search input in strict mode 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >

package/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroupItemElement.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`empty 1`] = `
 <DocumentFragment>
-  <span
-    class=""
-  />
+  <span />
 </DocumentFragment>
 `;
 

package/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap

@@ -8,9 +8,7 @@ exports[`Flex Nested flex 1`] = `
     <div
       class="pf-v6-l-flex"
     >
-      <div
-        class=""
-      >
+      <div>
         Test
       </div>
     </div>
@@ -23,9 +21,7 @@ exports[`Flex Simple flex with single item 1`] = `
   <div
     class="pf-v6-l-flex"
   >
-    <div
-      class=""
-    >
+    <div>
       Test
     </div>
   </div>
@@ -37,9 +33,7 @@ exports[`Flex alternative component 1`] = `
   <ul
     class="pf-v6-l-flex"
   >
-    <li
-      class=""
-    >
+    <li>
       Test
     </li>
   </ul>