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

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.1.1-prerelease.0","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.1.1-prerelease.10","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.1.1-prerelease.0","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.1.1-prerelease.10","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.1.1-prerelease.0","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.1.1-prerelease.10","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.1",
+  "version": "5.1.1-prerelease.11",
   "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",
@@ -45,15 +45,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.1.1-prerelease.1",
-    "@patternfly/react-styles": "^5.1.1-prerelease.1",
-    "@patternfly/react-tokens": "^5.1.1-prerelease.1",
+    "@patternfly/react-icons": "^5.1.1-prerelease.5",
+    "@patternfly/react-styles": "^5.1.1-prerelease.5",
+    "@patternfly/react-tokens": "^5.1.1-prerelease.5",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.8",
+    "@patternfly/patternfly": "5.1.0-prerelease.24",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1e1305e5f7450e087ff8d1690d2be28b00dac0a1"
+  "gitHead": "10e4992a19129f0123d894612b9160e498553d73"
 }

package/src/components/Alert/__tests__/AlertGroup.test.tsx

@@ -7,77 +7,81 @@ import { Alert } from '../../Alert';
 import { AlertGroup } from '../../Alert';
 import { AlertActionCloseButton } from '../../../components/Alert/AlertActionCloseButton';
 
-describe('AlertGroup', () => {
-  test('Alert Group renders without children', () => {
-    const { asFragment } = render(<AlertGroup />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Alert Group works with n children', () => {
-    const { asFragment } = render(
-      <AlertGroup>
-        <Alert variant="success" title="alert title" />
-        <Alert variant="warning" title="another alert title" />
-      </AlertGroup>
-    );
-    expect(asFragment()).toBeTruthy();
-  });
-
-  test('Alert group overflow shows up', async () => {
-    const overflowMessage = 'View 2 more alerts';
-    const onOverflowClick = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
-        <Alert variant="danger" title="alert title" />
-      </AlertGroup>
-    );
-
-    expect(screen.getAllByRole('listitem')).toHaveLength(2);
-
-    const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
-    expect(overflowButton).toBeInTheDocument();
-
-    await user.click(overflowButton);
-    expect(onOverflowClick).toHaveBeenCalled();
-  });
-
-  test('Standard Alert Group is not a toast alert group', () => {
-    render(
-      <AlertGroup>
-        <Alert variant="danger" title="alert title" />
-      </AlertGroup>
-    );
-
-    expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
-  });
-
-  test('Toast Alert Group contains expected modifier class', () => {
-    render(
-      <AlertGroup isToast aria-label="group label">
-        <Alert variant="warning" title="alert title" />
-      </AlertGroup>
-    );
-
-    expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
-  });
-
-  test('alertgroup closes when alerts are closed', async () => {
-    const onClose = jest.fn();
-    const user = userEvent.setup();
-
-    render(
-      <AlertGroup isToast appendTo={document.body}>
-        <Alert
-          isLiveRegion
-          title={'Test Alert'}
-          actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
-        />
-      </AlertGroup>
-    );
-
-    await user.click(screen.getByLabelText('Close'));
-    expect(onClose).toHaveBeenCalled();
-  });
+test('Alert Group renders without children', () => {
+  render(
+    <div data-testid="container">
+      <AlertGroup data-testid="alertgroup" />
+    </div>
+  );
+
+  expect(screen.getByTestId('container').firstChild).toBeVisible();
+  expect(screen.getByTestId('alertgroup').children.length).toBe(0);
+});
+
+test('Alert Group works with n children', () => {
+  const { asFragment } = render(
+    <AlertGroup data-testid="container">
+      <Alert variant="success" title="alert title" />
+      <Alert variant="warning" title="another alert title" />
+    </AlertGroup>
+  );
+  expect(screen.getByTestId('container').children.length).toBe(2);
+});
+
+test('Alert group overflow shows up', async () => {
+  const overflowMessage = 'View 2 more alerts';
+  const onOverflowClick = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertGroup overflowMessage={overflowMessage} onOverflowClick={onOverflowClick}>
+      <Alert variant="danger" title="alert title" />
+    </AlertGroup>
+  );
+
+  expect(screen.getAllByRole('listitem')).toHaveLength(2);
+
+  const overflowButton = screen.getByRole('button', { name: 'View 2 more alerts' });
+  expect(overflowButton).toBeInTheDocument();
+
+  await user.click(overflowButton);
+  expect(onOverflowClick).toHaveBeenCalled();
+});
+
+test('Standard Alert Group is not a toast alert group', () => {
+  render(
+    <AlertGroup>
+      <Alert variant="danger" title="alert title" />
+    </AlertGroup>
+  );
+
+  expect(screen.getByText('alert title').parentElement).not.toHaveClass('pf-m-toast');
+});
+
+test('Toast Alert Group contains expected modifier class', () => {
+  render(
+    <AlertGroup isToast aria-label="group label">
+      <Alert variant="warning" title="alert title" />
+    </AlertGroup>
+  );
+
+  expect(screen.getByLabelText('group label')).toHaveClass('pf-m-toast');
+});
+
+test('alertgroup closes when alerts are closed', async () => {
+  const onClose = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <AlertGroup isToast appendTo={document.body}>
+      <Alert
+        isLiveRegion
+        title={'Test Alert'}
+        actionClose={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+      />
+    </AlertGroup>
+  );
+
+  await user.click(screen.getByLabelText('Close'));
+  expect(onClose).toHaveBeenCalled();
 });

package/src/components/BackToTop/BackToTop.tsx

@@ -82,7 +82,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="right">
+      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
         {title}
       </Button>
     </div>

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

@@ -135,7 +135,7 @@ test('Passes correct variant to button child component', () => {
 test('Passes correct iconPosition to button child component', () => {
   render(<BackToTop />);
 
-  expect(screen.getByText('iconPosition: right')).toBeVisible();
+  expect(screen.getByText('iconPosition: end')).toBeVisible();
 });
 
 test('Passes correct icon to button child component', () => {

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

@@ -20,7 +20,7 @@ exports[`Matches the snapshot 1`] = `
       isInline: undefined
     </p>
     <p>
-      iconPosition: right
+      iconPosition: end
     </p>
     <div
       data-testid="icon"

package/src/components/Button/Button.tsx

@@ -70,8 +70,8 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   type?: 'button' | 'submit' | 'reset';
   /** Adds button variant styles */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control';
-  /** Sets position of the link icon */
-  iconPosition?: 'left' | 'right';
+  /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */
+  iconPosition?: 'start' | 'end' | 'left' | 'right';
   /** Adds accessible text to the button. */
   'aria-label'?: string;
   /** Icon for the button. Usable by all variants except for plain. */
@@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isInline = false,
   type = ButtonType.button,
   variant = ButtonVariant.primary,
-  iconPosition = 'left',
+  iconPosition = 'start',
   'aria-label': ariaLabel = null,
   icon = null,
   ouiaId,
@@ -183,11 +183,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         </span>
       )}
       {variant === ButtonVariant.plain && children === null && icon ? icon : null}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
         <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
       )}
       {children}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
       {countOptions && (

package/src/components/Button/examples/ButtonVariations.tsx

@@ -30,7 +30,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
     <Button variant="link" icon={<PlusCircleIcon />}>
       Link
     </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
       Link
     </Button>{' '}
     <Button variant="link" isInline>

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -4,6 +4,22 @@ import { css } from '@patternfly/react-styles';
 import { DrawerColorVariant, DrawerContext } from './Drawer';
 import { formatBreakpointMods } from '../../helpers/util';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
+
+export interface DrawerPanelFocusTrapObject {
+  /** Enables a focus trap on the drawer panel content. This will also automatically
+   * handle focus management when the panel expands and when it collapses. Do not pass
+   * this prop if the isStatic prop on the drawer component is true.
+   */
+  enabled?: boolean;
+  /** The element to focus when the drawer panel content expands. By default the
+   * first focusable element will receive focus. If there are no focusable elements, the
+   * panel itself will receive focus.
+   */
+  elementToFocusOnExpand?: HTMLElement | SVGElement | string;
+  /** One or more id's to use for the drawer panel content's accessible label. */
+  'aria-labelledby'?: string;
+}
 
 export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the drawer. */
@@ -37,6 +53,8 @@ export interface DrawerPanelContentProps extends React.HTMLProps<HTMLDivElement>
   };
   /** Color variant of the background of the drawer panel */
   colorVariant?: DrawerColorVariant | 'light-200' | 'no-background' | 'default';
+  /** Adds and customizes a focus trap on the drawer panel content. */
+  focusTrap?: DrawerPanelFocusTrapObject;
 }
 let isResizing: boolean = null;
 let newSize: number = 0;
@@ -55,6 +73,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   resizeAriaLabel = 'Resize',
   widths,
   colorVariant = DrawerColorVariant.default,
+  focusTrap,
   ...props
 }: DrawerPanelContentProps) => {
   const panel = React.useRef<HTMLDivElement>();
@@ -64,6 +83,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     React.useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = React.useState(!hidden);
+  const [isFocusTrapActive, setIsFocusTrapActive] = React.useState(false);
+  const previouslyFocusedElement = React.useRef(null);
   let currWidth: number = 0;
   let panelRect: DOMRect;
   let right: number;
@@ -71,6 +92,13 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   let bottom: number;
   let setInitialVals: boolean = true;
 
+  if (isStatic && focusTrap?.enabled) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `DrawerPanelContent: The focusTrap.enabled prop cannot be true if the Drawer's isStatic prop is true. This will cause a permanent focus trap.`
+    );
+  }
+
   React.useEffect(() => {
     if (!isStatic && isExpanded) {
       setIsExpandedInternal(isExpanded);
@@ -246,64 +274,101 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   if (maxSize) {
     boundaryCssVars['--pf-v5-c-drawer__panel--md--FlexBasis--max'] = maxSize;
   }
+
+  const isValidFocusTrap = focusTrap?.enabled && !isStatic;
+  const Component = isValidFocusTrap ? FocusTrap : 'div';
+
   return (
     <GenerateId prefix="pf-drawer-panel-">
-      {(panelId) => (
-        <div
-          id={id || panelId}
-          className={css(
-            styles.drawerPanel,
-            isResizable && styles.modifiers.resizable,
-            hasNoBorder && styles.modifiers.noBorder,
-            formatBreakpointMods(widths, styles),
-            colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
-            colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
-            className
-          )}
-          ref={panel}
-          onTransitionEnd={(ev) => {
-            if ((ev.target as HTMLElement) === panel.current) {
-              if (!hidden && ev.nativeEvent.propertyName === 'transform') {
-                onExpand(ev);
+      {(panelId) => {
+        const focusTrapProps = {
+          tabIndex: -1,
+          'aria-modal': true,
+          role: 'dialog',
+          active: isFocusTrapActive,
+          'aria-labelledby': focusTrap?.['aria-labelledby'] || id || panelId,
+          focusTrapOptions: {
+            fallbackFocus: () => panel.current,
+            onActivate: () => {
+              if (previouslyFocusedElement.current !== document.activeElement) {
+                previouslyFocusedElement.current = document.activeElement;
+              }
+            },
+            onDeactivate: () => {
+              previouslyFocusedElement.current &&
+                previouslyFocusedElement.current.focus &&
+                previouslyFocusedElement.current.focus();
+            },
+            clickOutsideDeactivates: true,
+            returnFocusOnDeactivate: false,
+            // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
+            // We want to prevent this in case false is ever passed in.
+            initialFocus: focusTrap?.elementToFocusOnExpand || undefined,
+            escapeDeactivates: false
+          }
+        };
+
+        return (
+          <Component
+            {...(isValidFocusTrap && focusTrapProps)}
+            id={id || panelId}
+            className={css(
+              styles.drawerPanel,
+              isResizable && styles.modifiers.resizable,
+              hasNoBorder && styles.modifiers.noBorder,
+              formatBreakpointMods(widths, styles),
+              colorVariant === DrawerColorVariant.light200 && styles.modifiers.light_200,
+              colorVariant === DrawerColorVariant.noBackground && styles.modifiers.noBackground,
+              className
+            )}
+            onTransitionEnd={(ev) => {
+              if ((ev.target as HTMLElement) === panel.current) {
+                if (!hidden && ev.nativeEvent.propertyName === 'transform') {
+                  onExpand(ev);
+                }
+                setIsExpandedInternal(!hidden);
+                if (isValidFocusTrap && ev.nativeEvent.propertyName === 'transform') {
+                  setIsFocusTrapActive((prevIsFocusTrapActive) => !prevIsFocusTrapActive);
+                }
               }
-              setIsExpandedInternal(!hidden);
-            }
-          }}
-          hidden={hidden}
-          {...((defaultSize || minSize || maxSize) && {
-            style: boundaryCssVars as React.CSSProperties
-          })}
-          {...props}
-        >
-          {isExpandedInternal && (
-            <React.Fragment>
-              {isResizable && (
-                <React.Fragment>
-                  <div
-                    className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
-                    role="separator"
-                    tabIndex={0}
-                    aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
-                    aria-label={resizeAriaLabel}
-                    aria-valuenow={separatorValue}
-                    aria-valuemin={0}
-                    aria-valuemax={100}
-                    aria-controls={id || panelId}
-                    onMouseDown={handleMousedown}
-                    onKeyDown={handleKeys}
-                    onTouchStart={handleTouchStart}
-                    ref={splitterRef}
-                  >
-                    <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
-                  </div>
-                  <div className={css(styles.drawerPanelMain)}>{children}</div>
-                </React.Fragment>
-              )}
-              {!isResizable && children}
-            </React.Fragment>
-          )}
-        </div>
-      )}
+            }}
+            hidden={hidden}
+            {...((defaultSize || minSize || maxSize) && {
+              style: boundaryCssVars as React.CSSProperties
+            })}
+            {...props}
+            ref={panel}
+          >
+            {isExpandedInternal && (
+              <React.Fragment>
+                {isResizable && (
+                  <React.Fragment>
+                    <div
+                      className={css(styles.drawerSplitter, position !== 'bottom' && styles.modifiers.vertical)}
+                      role="separator"
+                      tabIndex={0}
+                      aria-orientation={position === 'bottom' ? 'horizontal' : 'vertical'}
+                      aria-label={resizeAriaLabel}
+                      aria-valuenow={separatorValue}
+                      aria-valuemin={0}
+                      aria-valuemax={100}
+                      aria-controls={id || panelId}
+                      onMouseDown={handleMousedown}
+                      onKeyDown={handleKeys}
+                      onTouchStart={handleTouchStart}
+                      ref={splitterRef}
+                    >
+                      <div className={css(styles.drawerSplitterHandle)} aria-hidden></div>
+                    </div>
+                    <div className={css(styles.drawerPanelMain)}>{children}</div>
+                  </React.Fragment>
+                )}
+                {!isResizable && children}
+              </React.Fragment>
+            )}
+          </Component>
+        );
+      }}
     </GenerateId>
   );
 };

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DrawerPanelContent } from '../DrawerPanelContent';
+import { Drawer } from '../Drawer';
+
+test('Does not render with aria-labelledby by default', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).not.toHaveAccessibleName();
+});
+
+test('Renders with aria-labelledby when focusTrap.enabled is true', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent focusTrap={{ enabled: true }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveAccessibleName('Drawer panel content');
+});
+
+test('Renders with aria-labelledby when id is passed in', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent id="drawer-panel-content" focusTrap={{ enabled: true }}>
+        Drawer panel content
+      </DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveAccessibleName('Drawer panel content');
+});
+
+test('Renders with custom aria-labelledby', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent focusTrap={{ enabled: true, 'aria-labelledby': 'drawer-panel-title' }}>
+        <span id="drawer-panel-title">Title</span>
+        <span>Drawer panel content</span>
+      </DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content').parentElement).toHaveAccessibleName('Title');
+});
+
+test('Does not render with aria-modal="true" by default', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).not.toHaveAttribute('aria-modal');
+});
+
+test('Renders with aria-modal="true" when focusTrap.enabled is true', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent focusTrap={{ enabled: true }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByText('Drawer panel content')).toHaveAttribute('aria-modal', 'true');
+});
+
+test('Does not render with role="dialog" by default', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+});
+
+test('Renders with role="dialog" when focusTrap.enabled is true', () => {
+  render(
+    <Drawer isExpanded>
+      <DrawerPanelContent focusTrap={{ enabled: true }}>Drawer panel content</DrawerPanelContent>
+    </Drawer>
+  );
+
+  expect(screen.getByRole('dialog')).toBeInTheDocument();
+});