@patternfly/react-core 5.4.8 → 5.4.10

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":"5.4.7","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":"5.4.9","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":"5.4.7","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":"5.4.9","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":"5.4.7","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":"5.4.9","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.4.8",
+  "version": "5.4.10",
   "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",
@@ -49,7 +49,7 @@
     "@patternfly/react-icons": "^5.4.2",
     "@patternfly/react-styles": "^5.4.1",
     "@patternfly/react-tokens": "^5.4.1",
-    "focus-trap": "7.6.0",
+    "focus-trap": "7.6.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.7.0"
   },
@@ -62,5 +62,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5d59bea17733b6c2f89a10a28883fb44caf84295"
+  "gitHead": "0f3ece1d04a0f27f48f6369ab81eddf93c078846"
 }

package/src/components/Modal/Modal.tsx

@@ -92,7 +92,6 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  container: HTMLElement;
   ouiaStateId: string;
 }
 
@@ -102,6 +101,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   boxId = '';
   labelId = '';
   descriptorId = '';
+  backdropId = '';
 
   static defaultProps: PickOptional<ModalProps> = {
     className: '',
@@ -128,12 +128,13 @@ class Modal extends React.Component<ModalProps, ModalState> {
     const boxIdNum = Modal.currentId++;
     const labelIdNum = boxIdNum + 1;
     const descriptorIdNum = boxIdNum + 2;
+    const backdropIdNum = boxIdNum + 3;
     this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
     this.labelId = `pf-modal-part-${labelIdNum}`;
     this.descriptorId = `pf-modal-part-${descriptorIdNum}`;
+    this.backdropId = `pf-modal-part-${backdropIdNum}`;
 
     this.state = {
-      container: undefined,
       ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
     };
   }
@@ -157,7 +158,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     const target: HTMLElement = this.getElement(appendTo);
     const bodyChildren = target.children;
     for (const child of Array.from(bodyChildren)) {
-      if (child !== this.state.container) {
+      if (child.id !== this.backdropId) {
         hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
       }
     }
@@ -175,15 +176,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
       header
     } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    const container = document.createElement('div');
-    this.setState({ container });
-    target.appendChild(container);
     target.addEventListener('keydown', this.handleEscKeyClick, false);
 
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
     }
 
     if (!title && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
@@ -199,24 +196,24 @@ class Modal extends React.Component<ModalProps, ModalState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: ModalProps) {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
       this.toggleSiblingsFromScreenReaders(true);
     } else {
-      target.classList.remove(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(false);
+      if (prevProps.isOpen !== this.props.isOpen) {
+        target.classList.remove(css(styles.backdropOpen));
+        this.toggleSiblingsFromScreenReaders(false);
+      }
     }
   }
 
   componentWillUnmount() {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
+
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
     target.classList.remove(css(styles.backdropOpen));
     this.toggleSiblingsFromScreenReaders(false);
@@ -224,7 +221,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       appendTo,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onEscapePress,
@@ -242,9 +238,8 @@ class Modal extends React.Component<ModalProps, ModalState> {
       elementToFocus,
       ...props
     } = this.props;
-    const { container } = this.state;
 
-    if (!canUseDOM || !container) {
+    if (!canUseDOM || !this.getElement(appendTo)) {
       return null;
     }
 
@@ -254,6 +249,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         boxId={this.boxId}
         labelId={this.labelId}
         descriptorId={this.descriptorId}
+        backdropId={this.backdropId}
         title={title}
         titleIconVariant={titleIconVariant}
         titleLabel={titleLabel}
@@ -267,7 +263,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         position={position}
         elementToFocus={elementToFocus}
       />,
-      container
+      this.getElement(appendTo)
     ) as React.ReactElement;
   }
 }

package/src/components/Modal/ModalContent.tsx

@@ -25,6 +25,8 @@ export interface ModalContentProps extends OUIAProps {
   'aria-label'?: string;
   /** Id to use for the modal box label. */
   'aria-labelledby'?: string | null;
+  /** Id of the backdrop. */
+  backdropId?: string;
   /** Accessible label applied to the modal box body. This should be used to communicate
    * important information about the modal box body div element if needed, such as that it
    * is scrollable.
@@ -117,6 +119,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   maxWidth,
   boxId,
   labelId,
+  backdropId,
   descriptorId,
   disableFocusTrap = false,
   hasNoBodyWrapper = false,
@@ -202,7 +205,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   return (
-    <Backdrop>
+    <Backdrop id={backdropId}>
       <FocusTrap
         active={!disableFocusTrap}
         focusTrapOptions={{

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { css } from '../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
@@ -39,12 +40,33 @@ const ModalWithSiblings = () => {
   );
 };
 
-describe('Modal', () => {
-  test('Modal creates a container element once for div', () => {
-    render(<Modal {...props} />);
-    expect(document.createElement).toHaveBeenCalledWith('div');
-  });
+const ModalWithAdjacentModal = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isModalMounted, setIsModalMounted] = React.useState(true);
+  const modalProps = { ...props, isOpen, appendTo: target, onClose: () => setIsOpen(false) };
 
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <article>Section sibling</article>
+      {isModalMounted && (
+        <>
+          <Modal {...modalProps}>
+            <button onClick={() => setIsModalMounted(false)}>Unmount Modal</button>
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            Modal closed for test
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            modal closed for test
+          </Modal>
+        </>
+      )}
+    </>
+  );
+};
+
+describe('Modal', () => {
   test('modal closes with escape', async () => {
     const user = userEvent.setup();
 
@@ -137,10 +159,10 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
   });
 
-  test('modal removes the aria-hidden attribute from its siblings when unmounted', async () => {
+  test('modal siblings have the aria-hidden attribute when it has adjacent modals', async () => {
     const user = userEvent.setup();
 
-    render(<ModalWithSiblings />, { container: document.body.appendChild(target) });
+    render(<ModalWithAdjacentModal />, { container: document.body.appendChild(target) });
 
     const asideSibling = screen.getByRole('complementary', { hidden: true });
     const articleSibling = screen.getByRole('article', { hidden: true });
@@ -154,6 +176,7 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
   test('The modalBoxBody has no aria-label when bodyAriaLabel is not passed', () => {
     const props = {
       isOpen: true

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -134,7 +134,8 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
+          {chipGroupContentRef?.current?.firstElementChild &&
+            ReactDOM.createPortal(chipGroup, chipGroupContentRef.current.firstElementChild)}
         </React.Fragment>
       );
     }

package/src/next/components/Modal/Modal.tsx

@@ -58,7 +58,6 @@ export enum ModalVariant {
 }
 
 interface ModalState {
-  container: HTMLElement;
   ouiaStateId: string;
 }
 
@@ -66,6 +65,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
   static displayName = 'Modal';
   static currentId = 0;
   boxId = '';
+  backdropId = '';
 
   static defaultProps: PickOptional<ModalProps> = {
     isOpen: false,
@@ -78,10 +78,11 @@ class Modal extends React.Component<ModalProps, ModalState> {
   constructor(props: ModalProps) {
     super(props);
     const boxIdNum = Modal.currentId++;
+    const backdropId = boxIdNum + 1;
     this.boxId = props.id || `pf-modal-part-${boxIdNum}`;
+    this.backdropId = `pf-modal-part-${backdropId}`;
 
     this.state = {
-      container: undefined,
       ouiaStateId: getDefaultOUIAId(Modal.displayName, props.variant)
     };
   }
@@ -105,7 +106,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
     const target: HTMLElement = this.getElement(appendTo);
     const bodyChildren = target.children;
     for (const child of Array.from(bodyChildren)) {
-      if (child !== this.state.container) {
+      if (child.id !== this.backdropId) {
         hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
       }
     }
@@ -116,36 +117,31 @@ class Modal extends React.Component<ModalProps, ModalState> {
   componentDidMount() {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    const container = document.createElement('div');
-    this.setState({ container });
-    target.appendChild(container);
     target.addEventListener('keydown', this.handleEscKeyClick, false);
 
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
-    } else {
-      target.classList.remove(css(styles.backdropOpen));
+      this.toggleSiblingsFromScreenReaders(true);
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: ModalProps) {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
     if (this.props.isOpen) {
       target.classList.add(css(styles.backdropOpen));
       this.toggleSiblingsFromScreenReaders(true);
     } else {
-      target.classList.remove(css(styles.backdropOpen));
-      this.toggleSiblingsFromScreenReaders(false);
+      if (prevProps.isOpen !== this.props.isOpen) {
+        target.classList.remove(css(styles.backdropOpen));
+        this.toggleSiblingsFromScreenReaders(false);
+      }
     }
   }
 
   componentWillUnmount() {
     const { appendTo } = this.props;
     const target: HTMLElement = this.getElement(appendTo);
-    if (this.state.container) {
-      target.removeChild(this.state.container);
-    }
     target.removeEventListener('keydown', this.handleEscKeyClick, false);
     target.classList.remove(css(styles.backdropOpen));
     this.toggleSiblingsFromScreenReaders(false);
@@ -153,7 +149,6 @@ class Modal extends React.Component<ModalProps, ModalState> {
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       appendTo,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onEscapePress,
@@ -166,15 +161,15 @@ class Modal extends React.Component<ModalProps, ModalState> {
       elementToFocus,
       ...props
     } = this.props;
-    const { container } = this.state;
 
-    if (!canUseDOM || !container) {
+    if (!canUseDOM || !this.getElement(appendTo)) {
       return null;
     }
 
     return ReactDOM.createPortal(
       <ModalContent
         boxId={this.boxId}
+        backdropId={this.backdropId}
         aria-label={ariaLabel}
         aria-describedby={ariaDescribedby}
         aria-labelledby={ariaLabelledby}
@@ -184,7 +179,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         elementToFocus={elementToFocus}
         {...props}
       />,
-      container
+      this.getElement(appendTo)
     ) as React.ReactElement;
   }
 }

package/src/next/components/Modal/ModalContent.tsx

@@ -16,6 +16,8 @@ export interface ModalContentProps extends OUIAProps {
   'aria-labelledby'?: string;
   /** Id of the modal box container. */
   boxId: string;
+  /** Id of the backdrop. */
+  backdropId?: string;
   /** Content rendered inside the modal. */
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
@@ -60,6 +62,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   width,
   maxWidth,
   boxId,
+  backdropId,
   disableFocusTrap = false,
   ouiaId,
   ouiaSafe = true,
@@ -106,7 +109,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     </ModalBox>
   );
   return (
-    <Backdrop>
+    <Backdrop id={backdropId}>
       <FocusTrap
         active={!disableFocusTrap}
         focusTrapOptions={{

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 import { css } from '../../../../../../react-styles/dist/js';
 import styles from '@patternfly/react-styles/css/components/Backdrop/backdrop';
@@ -38,6 +39,32 @@ const ModalWithSiblings = () => {
   );
 };
 
+const ModalWithAdjacentModal = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const [isModalMounted, setIsModalMounted] = React.useState(true);
+  const modalProps = { ...props, isOpen, appendTo: target, onClose: () => setIsOpen(false) };
+
+  return (
+    <>
+      <aside>Aside sibling</aside>
+      <article>Section sibling</article>
+      {isModalMounted && (
+        <>
+          <Modal {...modalProps}>
+            <button onClick={() => setIsModalMounted(false)}>Unmount Modal</button>
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            Modal closed for test
+          </Modal>
+          <Modal isOpen={false} onClose={() => {}}>
+            modal closed for test
+          </Modal>
+        </>
+      )}
+    </>
+  );
+};
+
 describe('Modal', () => {
   test('Modal creates a container element once for div', () => {
     render(<Modal {...props} />);
@@ -128,4 +155,22 @@ describe('Modal', () => {
     expect(asideSibling).not.toHaveAttribute('aria-hidden');
     expect(articleSibling).not.toHaveAttribute('aria-hidden');
   });
+
+  test('modal siblings have the aria-hidden attribute when it has adjacent modals', async () => {
+    const user = userEvent.setup();
+
+    render(<ModalWithAdjacentModal />, { container: document.body.appendChild(target) });
+
+    const asideSibling = screen.getByRole('complementary', { hidden: true });
+    const articleSibling = screen.getByRole('article', { hidden: true });
+    const unmountButton = screen.getByRole('button', { name: 'Unmount Modal' });
+
+    expect(asideSibling).toHaveAttribute('aria-hidden');
+    expect(articleSibling).toHaveAttribute('aria-hidden');
+
+    await user.click(unmountButton);
+
+    expect(asideSibling).not.toHaveAttribute('aria-hidden');
+    expect(articleSibling).not.toHaveAttribute('aria-hidden');
+  });
 });