@patternfly/react-core 6.6.1-prerelease.2 → 6.6.1-prerelease.4

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.1","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.3","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.1","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.3","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.1","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.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.2",
+  "version": "6.6.1-prerelease.4",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "9e6456bf4b493cf8546212e70feb116a798ba79c"
+  "gitHead": "1fe30b1dc78a10ff784587cf7ce03d96125fbfb7"
 }

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
 import { css } from '@patternfly/react-styles';
-import { Button } from '../Button';
+import { Button, ButtonProps } from '../Button';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,16 +10,30 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   onClose?: () => void;
   /** Accessible label for the drawer close button */
   'aria-label'?: string;
+  /** Additional properties spread to the close button */
+  buttonProps?: Omit<ButtonProps, 'onClick'>;
 }
 
 export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
   'aria-label': ariaLabel = 'Close drawer panel',
+  buttonProps,
   ...props
-}: DrawerCloseButtonProps) => (
-  <div className={css(styles.drawerClose, className)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
-  </div>
-);
+}: DrawerCloseButtonProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { onClick: _onClick, ...restButtonProps } = (buttonProps ?? {}) as ButtonProps;
+
+  return (
+    <div className={css(styles.drawerClose, className)} {...props}>
+      <Button
+        variant="plain"
+        onClick={onClose}
+        aria-label={ariaLabel}
+        icon={<RhMicronsCloseIcon />}
+        {...restButtonProps}
+      />
+    </div>
+  );
+};
 DrawerCloseButton.displayName = 'DrawerCloseButton';

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

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ButtonProps } from '../../Button';
+import { DrawerCloseButton } from '../DrawerCloseButton';
+
+test('Renders with spread buttonProps', () => {
+  render(<DrawerCloseButton buttonProps={{ isDisabled: true }} />);
+  expect(screen.getByRole('button')).toBeDisabled();
+});
+
+test('Calls onClose when clicked', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(<DrawerCloseButton onClose={onClose} buttonProps={{ isDisabled: false }} />);
+  await user.click(screen.getByRole('button'));
+  expect(onClose).toHaveBeenCalledTimes(1);
+});
+
+test('Does not spread onClick from buttonProps but spreads other props', async () => {
+  const onClose = jest.fn();
+  const buttonOnClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <DrawerCloseButton
+      onClose={onClose}
+      buttonProps={{ id: 'drawer-close-button', onClick: buttonOnClick } as ButtonProps}
+    />
+  );
+
+  const button = screen.getByRole('button');
+  expect(button).toHaveAttribute('id', 'drawer-close-button');
+
+  await user.click(button);
+
+  expect(onClose).toHaveBeenCalledTimes(1);
+  expect(buttonOnClick).not.toHaveBeenCalled();
+});

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);
+  });
 });