@patternfly/react-core 6.1.0-prerelease.1 → 6.1.0-prerelease.11

package/src/deprecated/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,23 @@ 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 +220,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 +237,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 +248,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 +262,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         position={position}
         elementToFocus={elementToFocus}
       />,
-      container
+      this.getElement(appendTo)
     ) as React.ReactElement;
   }
 }

package/src/deprecated/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/deprecated/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,6 +40,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} />);
@@ -154,6 +181,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/helpers/KeyboardHandler.tsx

@@ -176,6 +176,33 @@ export const setTabIndex = (options: HTMLElement[]) => {
   }
 };
 
+/**
+ * This function is used in Dropdown, Select and MenuContainer as a default toggle keydown behavior. When the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key.
+ *
+ * @param event Event triggered by the keyboard
+ * @param menuRef Menu reference
+ */
+export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement>) => {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return;
+  }
+
+  event.preventDefault();
+
+  const listItems = Array.from(menuRef.current?.querySelectorAll('li'));
+  const focusableElements = listItems
+    .map((li) => li.querySelector('button:not(:disabled),input:not(:disabled),a:not([aria-disabled="true"])'))
+    .filter((el) => el !== null);
+
+  let focusableElement: Element;
+  if (event.key === 'ArrowDown') {
+    focusableElement = focusableElements[0];
+  } else {
+    focusableElement = focusableElements[focusableElements.length - 1];
+  }
+  focusableElement && (focusableElement as HTMLElement).focus();
+};
+
 class KeyboardHandler extends React.Component<KeyboardHandlerProps> {
   static displayName = 'KeyboardHandler';
   static defaultProps: KeyboardHandlerProps = {

package/src/layouts/Split/Split.tsx

@@ -5,13 +5,13 @@ import { css } from '@patternfly/react-styles';
 export interface SplitProps extends React.HTMLProps<HTMLDivElement> {
   /** Adds space between children. */
   hasGutter?: boolean;
-  /** Allows children to wrap */
+  /** Allows children to wrap. */
   isWrappable?: boolean;
-  /** content rendered inside the Split layout */
+  /** content rendered inside the split layout. */
   children?: React.ReactNode;
-  /** additional classes added to the Split layout */
+  /** Additional classes added to the split layout. */
   className?: string;
-  /** Sets the base component to render. defaults to div */
+  /** Sets the base component to render. Defaults to div. */
   component?: React.ReactNode;
 }
 

package/src/layouts/Split/SplitItem.tsx

@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Split/split';
 import { css } from '@patternfly/react-styles';
 
 export interface SplitItemProps extends React.HTMLProps<HTMLDivElement> {
-  /** Flag indicating if this Split Layout item should fill the available horizontal space. */
+  /** Flag indicating if this split layout item should fill the available horizontal space. */
   isFilled?: boolean;
-  /** content rendered inside the Split Layout Item */
+  /** Content rendered inside the split layout item. */
   children?: React.ReactNode;
-  /** additional classes added to the Split Layout Item */
+  /** Additional classes added to the split layout item. */
   className?: string;
+  /** Sets the base component to render. Defaults to div. */
+  component?: React.ReactNode;
 }
 
 export const SplitItem: React.FunctionComponent<SplitItemProps> = ({
   isFilled = false,
   className = '',
   children = null,
+  component = 'div',
   ...props
-}: SplitItemProps) => (
-  <div {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
-    {children}
-  </div>
-);
+}: SplitItemProps) => {
+  const Component = component as any;
+  return (
+    <Component {...props} className={css(styles.splitItem, isFilled && styles.modifiers.fill, className)}>
+      {children}
+    </Component>
+  );
+};
 SplitItem.displayName = 'SplitItem';

package/src/layouts/Split/__tests__/Split.test.tsx

@@ -51,3 +51,21 @@ test('Wrappable', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('component on Split', () => {
+  const { asFragment } = render(
+    <Split component="span">
+      <SplitItem>Basic content</SplitItem>
+    </Split>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('component on SplitItem', () => {
+  const { asFragment } = render(
+    <Split>
+      <SplitItem component="span">Basic content</SplitItem>
+    </Split>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -93,6 +93,34 @@ exports[`Wrappable 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component on Split 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-l-split"
+  >
+    <div
+      class="pf-v6-l-split__item"
+    >
+      Basic content
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component on SplitItem 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-l-split"
+  >
+    <span
+      class="pf-v6-l-split__item"
+    >
+      Basic content
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`isFilled 1`] = `
 <DocumentFragment>
   <div

package/src/layouts/Stack/Stack.tsx

@@ -5,11 +5,11 @@ import { css } from '@patternfly/react-styles';
 export interface StackProps extends React.HTMLProps<HTMLDivElement> {
   /** Adds space between children. */
   hasGutter?: boolean;
-  /** content rendered inside the Stack layout */
+  /** Content rendered inside the stack layout. */
   children?: React.ReactNode;
-  /** additional classes added to the Stack layout */
+  /** Additional classes added to the stack layout. */
   className?: string;
-  /** Sets the base component to render. defaults to div */
+  /** Sets the base component to render. Defaults to div. */
   component?: React.ReactNode;
 }
 

package/src/layouts/Stack/StackItem.tsx

@@ -3,22 +3,28 @@ import styles from '@patternfly/react-styles/css/layouts/Stack/stack';
 import { css } from '@patternfly/react-styles';
 
 export interface StackItemProps extends React.HTMLProps<HTMLDivElement> {
-  /** Flag indicating if this Stack Layout item should fill the available vertical space. */
+  /** Flag indicating if this stack layout item should fill the available vertical space. */
   isFilled?: boolean;
-  /** additional classes added to the Stack Layout Item */
+  /** Additional classes added to the stack layout item. */
   children?: React.ReactNode;
-  /** content rendered inside the Stack Layout Item */
+  /** Content rendered inside the stack layout item. */
   className?: string;
+  /** Sets the base component to render. Defaults to div. */
+  component?: React.ReactNode;
 }
 
 export const StackItem: React.FunctionComponent<StackItemProps> = ({
   isFilled = false,
   className = '',
   children = null,
+  component = 'div',
   ...props
-}: StackItemProps) => (
-  <div {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
-    {children}
-  </div>
-);
+}: StackItemProps) => {
+  const Component = component as any;
+  return (
+    <Component {...props} className={css(styles.stackItem, isFilled && styles.modifiers.fill, className)}>
+      {children}
+    </Component>
+  );
+};
 StackItem.displayName = 'StackItem';

package/src/layouts/Stack/__tests__/Stack.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { Stack } from '../Stack';
 import { StackItem } from '../StackItem';
 
-test('isMain set to true', () => {
+test('isFilled set to true', () => {
   const { asFragment } = render(
     <Stack>
       <StackItem isFilled>Filled content</StackItem>
@@ -12,7 +12,7 @@ test('isMain set to true', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('isMain defaults to false', () => {
+test('isFilled defaults to false', () => {
   const { asFragment } = render(
     <Stack>
       <StackItem>Basic content</StackItem>
@@ -29,3 +29,21 @@ test('gutter', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('component on Stack', () => {
+  const { asFragment } = render(
+    <Stack component="span">
+      <StackItem>Basic content</StackItem>
+    </Stack>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('component on StackItem', () => {
+  const { asFragment } = render(
+    <Stack>
+      <StackItem component="span">Basic content</StackItem>
+    </Stack>
+  );
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`component on Stack 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-l-stack"
+  >
+    <div
+      class="pf-v6-l-stack__item"
+    >
+      Basic content
+    </div>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`component on StackItem 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-l-stack"
+  >
+    <span
+      class="pf-v6-l-stack__item"
+    >
+      Basic content
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`gutter 1`] = `
 <DocumentFragment>
   <div
@@ -14,7 +42,7 @@ exports[`gutter 1`] = `
 </DocumentFragment>
 `;
 
-exports[`isMain defaults to false 1`] = `
+exports[`isFilled defaults to false 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-l-stack"
@@ -28,7 +56,7 @@ exports[`isMain defaults to false 1`] = `
 </DocumentFragment>
 `;
 
-exports[`isMain set to true 1`] = `
+exports[`isFilled set to true 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-l-stack"