@patternfly/react-core 5.1.1-prerelease.2 → 5.1.1-prerelease.20

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { Button } from '../Button';
 
 export interface ClipboardCopyToggleProps
@@ -31,7 +32,9 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-expanded={isExpanded}
     {...props}
   >
-    {isExpanded ? <AngleDownIcon aria-hidden="true" /> : <AngleRightIcon aria-hidden="true" />}
+    <div className={css(styles.clipboardCopyToggleIcon)}>
+      <AngleRightIcon aria-hidden="true" />
+    </div>
   </Button>
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyExpanded.test.tsx.snap

@@ -7,7 +7,9 @@ exports[`expanded code content render 1`] = `
     contenteditable="true"
     id="id-1"
   >
-    <pre>
+    <pre
+      dir="ltr"
+    >
       {
     "name": "@patternfly/react-core",
     "version": "1.33.2"

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -15,19 +15,23 @@ exports[`ClipboardCopyToggle toggle button render 1`] = `
     id="my-id"
     type="button"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 256 512"
-      width="1em"
+    <div
+      class="pf-v5-c-clipboard-copy__toggle-icon"
     >
-      <path
-        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-      />
-    </svg>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+        />
+      </svg>
+    </div>
   </button>
 </DocumentFragment>
 `;

package/src/components/Drawer/Drawer.tsx

@@ -11,7 +11,7 @@ export enum DrawerColorVariant {
 export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content rendered in the left hand panel */
+  /** Content rendered in the drawer panel */
   children?: React.ReactNode;
   /** Indicates if the drawer is expanded */
   isExpanded?: boolean;
@@ -19,8 +19,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement> {
   isInline?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
-  /** Position of the drawer panel */
-  position?: 'left' | 'right' | 'bottom';
+  /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
+  position?: 'start' | 'end' | 'bottom' | 'left' | 'right';
   /** Callback when drawer panel is expanded after waiting 250ms for animation to complete. */
   onExpand?: (event: KeyboardEvent | React.MouseEvent | React.TransitionEvent) => void;
 }
@@ -39,7 +39,7 @@ export const DrawerContext = React.createContext<Partial<DrawerContextProps>>({
   isExpanded: false,
   isStatic: false,
   onExpand: () => {},
-  position: 'right',
+  position: 'end',
   drawerRef: null,
   drawerContentRef: null,
   isInline: false
@@ -51,7 +51,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isStatic = false,
-  position = 'right',
+  position = 'end',
   onExpand = () => {},
   ...props
 }: DrawerProps) => {
@@ -66,7 +66,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isStatic && styles.modifiers.static,
-          position === 'left' && styles.modifiers.panelLeft,
+          (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,
           className
         )}

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,13 +83,22 @@ 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;
-  let left: number;
+  let end: number;
+  let start: number;
   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);
@@ -80,23 +108,52 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
 
-    if (isInline && position === 'right') {
-      splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (isInline && position === 'left') {
-      splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
-      drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
-    } else if (position === 'right') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-    } else if (position === 'left') {
-      splitterPos =
-        splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+    if (isInline && (position === 'end' || position === 'right')) {
+      if (isRTL) {
+        splitterPos = panel.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (isInline && (position === 'start' || position === 'left')) {
+      if (isRTL) {
+        splitterPos = splitterRef.current.getBoundingClientRect().left - panel.current.getBoundingClientRect().right;
+        drawerSize = drawerRef.current.getBoundingClientRect().left - drawerRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
+        drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'end' || position === 'right') {
+      if (isRTL) {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
+    } else if (position === 'start' || position === 'left') {
+      if (isRTL) {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().left -
+          drawerContentRef.current.getBoundingClientRect().right;
+      } else {
+        splitterPos =
+          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+        drawerSize =
+          drawerContentRef.current.getBoundingClientRect().right -
+          drawerContentRef.current.getBoundingClientRect().left;
+      }
     } else if (position === 'bottom') {
       splitterPos =
         drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
@@ -138,6 +195,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   };
 
   const handleControlMove = (e: MouseEvent | TouchEvent, controlPosition: number) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     e.stopPropagation();
     if (!isResizing) {
       return;
@@ -145,17 +204,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
 
     if (setInitialVals) {
       panelRect = panel.current.getBoundingClientRect();
-      right = panelRect.right;
-      left = panelRect.left;
+      if (isRTL) {
+        start = panelRect.right;
+        end = panelRect.left;
+      } else {
+        end = panelRect.right;
+        start = panelRect.left;
+      }
       bottom = panelRect.bottom;
       setInitialVals = false;
     }
     const mousePos = controlPosition;
     let newSize = 0;
-    if (position === 'right') {
-      newSize = right - mousePos;
-    } else if (position === 'left') {
-      newSize = mousePos - left;
+    if (position === 'end' || position === 'right') {
+      newSize = isRTL ? mousePos - end : end - mousePos;
+    } else if (position === 'start' || position === 'left') {
+      newSize = isRTL ? start - mousePos : mousePos - start;
     } else {
       newSize = bottom - mousePos;
     }
@@ -197,6 +261,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const callbackMouseUp = React.useCallback(handleMouseup, []);
 
   const handleKeys = (e: React.KeyboardEvent) => {
+    const isRTL = window.getComputedStyle(panel.current).getPropertyValue('direction') === 'rtl';
+
     const key = e.key;
     if (
       key !== 'Escape' &&
@@ -220,9 +286,17 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     newSize = position === 'bottom' ? panelRect.height : panelRect.width;
     let delta = 0;
     if (key === 'ArrowRight') {
-      delta = position === 'left' ? increment : -increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      }
     } else if (key === 'ArrowLeft') {
-      delta = position === 'left' ? -increment : increment;
+      if (isRTL) {
+        delta = position === 'left' || position === 'start' ? increment : -increment;
+      } else {
+        delta = position === 'left' || position === 'start' ? -increment : increment;
+      }
     } else if (key === 'ArrowUp') {
       delta = increment;
     } else if (key === 'ArrowDown') {
@@ -246,64 +320,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();
+});