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

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactTruncation.tsx

@@ -1,13 +1,25 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 export const ClipboardCopyInlineCompactTruncation: React.FunctionComponent = () => (
   <>
-    <ClipboardCopy truncation hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    <ClipboardCopy
+      copyAriaLabel="Copy inline compact with truncation at end example"
+      truncation
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+    >
       This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to
       true. This is useful for quickly applying truncation without needing to worry about any other properties to set.
     </ClipboardCopy>
     <br />
     <br />
-    <ClipboardCopy truncation={{ position: 'start' }} hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    <ClipboardCopy
+      copyAriaLabel="Copy inline compact with truncation at start example"
+      truncation={{ position: 'start' }}
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+    >
       This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an
       object containing Truncate props. This is useful for finetuning truncation for your particular use-case.
     </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -8,6 +8,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
   const doneRunText: string = 'Running in web terminal';
   return (
     <ClipboardCopy
+      copyAriaLabel="Copy inline compact with additional action example"
       hoverTip="Copy"
       clickTip="Copied"
       variant="inline-compact"

package/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx

@@ -1,7 +1,14 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyJSONObject: React.FunctionComponent = () => (
-  <ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy JSON object example"
+    toggleAriaLabel="Show content for JSON object example"
+    isCode
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     {`{ "menu": {
     "id": "file",
     "value": "File",

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx

@@ -1,7 +1,7 @@
 import { ClipboardCopy } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnly: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">
+  <ClipboardCopy copyAriaLabel="Copy read-only example" isReadOnly hoverTip="Copy" clickTip="Copied">
     This is read-only
   </ClipboardCopy>
 );

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx

@@ -1,7 +1,14 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    toggleAriaLabel="Show content for read-only expanded example"
+    copyAriaLabel="Copy read-only expanded example"
+    isReadOnly
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx

@@ -1,7 +1,15 @@
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
 
 export const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (
-  <ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+  <ClipboardCopy
+    copyAriaLabel="Copy read-only expanded by default example"
+    toggleAriaLabel="Show content for read-only expanded by default example"
+    isReadOnly
+    isExpanded
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
     Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
     expansion.
   </ClipboardCopy>

package/src/components/DataList/DataListItem.tsx

@@ -1,6 +1,7 @@
 import { Children, Component, cloneElement, isValidElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
+import menuStyles from '@patternfly/react-styles/css/components/Menu/menu';
 import { DataListContext } from './DataList';
 import { KeyTypes } from '../../helpers/constants';
 
@@ -65,6 +66,17 @@ class DataListItem extends Component<DataListItemProps> {
 
           const onKeyDown = (event: React.KeyboardEvent) => {
             if ([KeyTypes.Enter, KeyTypes.Space].includes(event.key)) {
+              const target: any = event.target as HTMLElement;
+
+              if (
+                target.closest(`.${menuStyles.menuItem}`) ||
+                target.parentNode.classList.contains(styles.dataListItemAction) ||
+                target.parentNode.classList.contains(styles.dataListItemControl)
+              ) {
+                // check other event handlers are not present.
+                return;
+              }
+
               event.preventDefault();
               updateSelectedDataListItem(event, id);
             }

package/src/components/Dropdown/Dropdown.tsx

@@ -1,27 +1,12 @@
 import { forwardRef, useEffect, useRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper } from '../../helpers/Popper/Popper';
+import { Popper, PopperOptions } from '../../helpers/Popper/Popper';
+import type { DropdownItemProps } from './DropdownItem';
 import { useOUIAProps, OUIAProps, onToggleArrowKeydownDefault } from '../../helpers';
 
-export interface DropdownPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** The container to append the popper to. Defaults to document.body. */
-  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type DropdownPopperProps = PopperOptions;
 
 export interface DropdownToggleProps {
   /**  Dropdown toggle node. */
@@ -45,7 +30,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
   shouldFocusToggleOnSelect?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: DropdownItemProps['value']) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specified in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -66,7 +51,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: DropdownPopperProps;
+  popperProps?: PopperOptions;
   /** Height of the dropdown menu */
   menuHeight?: string;
   /** Maximum height of dropdown menu */

package/src/components/Dropdown/examples/Dropdown.md

@@ -11,8 +11,8 @@ propComponents:
     'DropdownList',
     'MenuToggle',
     'DropdownToggleProps',
-    'DropdownPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ---
 

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,8 +1,8 @@
-import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { GenerateId, PickOptional } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 /** Acts as a container for all other DualListSelector sub-components when using a
  * composable dual list selector.
@@ -24,41 +24,34 @@ export interface DualListSelectorProps {
   hasAnimations?: boolean;
 }
 
-class DualListSelector extends Component<DualListSelectorProps> {
-  static displayName = 'DualListSelector';
-  static defaultProps: PickOptional<DualListSelectorProps> = {
-    children: '',
-    isTree: false,
-    hasAnimations: false
-  };
+export const DualListSelector: React.FunctionComponent<DualListSelectorProps> = ({
+  className,
+  children,
+  id,
+  isTree = false,
+  hasAnimations: hasAnimationsProp,
+  ...props
+}: DualListSelectorProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
-  constructor(props: DualListSelectorProps) {
-    super(props);
-  }
-
-  render() {
-    const { className, children, id, isTree, hasAnimations, ...props } = this.props;
-
-    return (
-      <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
-        <GenerateId>
-          {(randomId) => (
-            <div
-              className={css(
-                styles.dualListSelector,
-                hasAnimations && isTree && styles.modifiers.animateExpand,
-                className
-              )}
-              id={id || randomId}
-              {...props}
-            >
-              {children}
-            </div>
-          )}
-        </GenerateId>
-      </DualListSelectorContext.Provider>
-    );
-  }
-}
-
-export { DualListSelector };
+  return (
+    <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
+      <GenerateId>
+        {(randomId) => (
+          <div
+            className={css(
+              styles.dualListSelector,
+              hasAnimations && isTree && styles.modifiers.animateExpand,
+              className
+            )}
+            id={id || randomId}
+            {...props}
+          >
+            {children}
+          </div>
+        )}
+      </GenerateId>
+    </DualListSelectorContext.Provider>
+  );
+};
+DualListSelector.displayName = 'DualListSelector';

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -6,6 +6,7 @@ import { Badge } from '../Badge';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
+import { useHasAnimations } from '../../helpers';
 
 export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
@@ -58,7 +59,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   badgeProps,
   itemData,
   isDisabled = false,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo,
   ...props
@@ -66,6 +67,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
   const ref = useRef(null);
   const [isExpanded, setIsExpanded] = useState(defaultExpanded || false);
   const { setFocusedOption } = useContext(DualListSelectorListContext);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   useEffect(() => {
     setIsExpanded(defaultExpanded);

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

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 import { DualListSelector } from '../DualListSelector';
 import { DualListSelectorPane } from '../DualListSelectorPane';
 import { SearchInput } from '../../SearchInput';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 // The following tests can be removed as part of https://github.com/patternfly/patternfly-react/issues/11838
 describe('Opt-in animations', () => {
@@ -29,6 +30,33 @@ describe('Opt-in animations', () => {
 
     expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
   });
+
+  // Animation context tests
+  test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('local hasAnimations prop takes precedence over context', () => {
+    render(
+      <AnimationsProvider config={{ hasAnimations: true }}>
+        <DualListSelector isTree hasAnimations={false} data-testid="test-id" />
+      </AnimationsProvider>
+    );
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
+
+  test('works without AnimationsProvider (backward compatibility)', () => {
+    render(<DualListSelector isTree data-testid="test-id" />);
+
+    expect(screen.getByTestId('test-id')).not.toHaveClass(styles.modifiers.animateExpand);
+  });
 });
 
 // Following tests should be moved to a separate DualListSelectorPane test file

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { InternalFormFieldGroup } from './InternalFormFieldGroup';
+import { useHasAnimations } from '../../helpers';
 
 export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -25,10 +26,11 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
   header,
   isExpanded = false,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: FormFieldGroupExpandableProps) => {
   const [localIsExpanded, setIsExpanded] = useState(isExpanded);
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
 
   return (
     <InternalFormFieldGroup

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -2,6 +2,7 @@ import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { GenerateId } from '../../helpers';
+import { useHasAnimations } from '../../helpers';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -33,9 +34,10 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   isExpanded,
   onToggle,
   toggleAriaLabel,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: InternalFormFieldGroupProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
     // eslint-disable-next-line no-console

package/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 test('Does not render children by default', () => {
@@ -53,3 +54,32 @@ test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is tr
 
   expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
 });
+
+// Regression tests for AnimationsProvider context
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <FormFieldGroupExpandable hasAnimations={false} toggleAriaLabel="Toggle label">
+        Child content
+      </FormFieldGroupExpandable>
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
+
+  expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
+});

package/src/components/JumpLinks/JumpLinks.tsx

@@ -7,7 +7,7 @@ import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links_
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -47,6 +47,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   className?: string;
   /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
   shouldReplaceNavHistory?: boolean;
+  /** Custom ID applied to label if alwaysShowLabel is applied, or expandable toggle. This is used for internal logic related to aria-label and aria-labelledby */
+  labelId?: string;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -94,6 +96,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   toggleAriaLabel = 'Toggle jump links',
   className,
   shouldReplaceNavHistory = false,
+  labelId,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -106,6 +109,15 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
 
   let scrollableElement: HTMLElement;
 
+  if (!label && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn('JumpLinks: for accessibility reasons, an aria-label should be specified if no label is provided');
+  }
+  if (!label && !toggleAriaLabel && expandable) {
+    // eslint-disable-next-line no-console
+    console.warn('JumpLinks: for accessibility reasons, a toggleAriaLabel should be specified if no label is provided');
+  }
+
   const getScrollableElement = () => {
     if (scrollableRef) {
       if (scrollableRef instanceof HTMLElement) {
@@ -232,6 +244,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
+  const id = labelId ?? getUniqueId();
+  const hasAriaLabelledBy = expandable || (label && alwaysShowLabel);
+  const computedAriaLabel = hasAriaLabelledBy ? null : ariaLabel;
+  const computedAriaLabelledBy = hasAriaLabelledBy ? id : null;
+
   return (
     <nav
       className={css(
@@ -242,8 +259,9 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
         isExpanded && styles.modifiers.expanded,
         className
       )}
-      aria-label={ariaLabel}
+      aria-label={computedAriaLabel}
       ref={navRef}
+      aria-labelledby={computedAriaLabelledBy}
       {...props}
     >
       <div className={styles.jumpLinksMain}>
@@ -253,21 +271,31 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
               <Button
                 variant="plain"
                 onClick={() => setIsExpanded(!isExpanded)}
-                aria-label={toggleAriaLabel}
+                aria-label={label ? null : toggleAriaLabel}
                 aria-expanded={isExpanded}
                 icon={
                   <span className={styles.jumpLinksToggleIcon}>
                     <AngleRightIcon />
                   </span>
                 }
+                id={id}
               >
                 {label && label}
               </Button>
             </div>
           )}
-          {label && alwaysShowLabel && <div className={css(styles.jumpLinksLabel)}>{label}</div>}
+          {label && alwaysShowLabel && !expandable && (
+            <div className={css(styles.jumpLinksLabel)} id={id}>
+              {label}
+            </div>
+          )}
         </div>
-        <ul className={styles.jumpLinksList} role="list">
+        <ul
+          aria-label={computedAriaLabel}
+          aria-labelledby={computedAriaLabelledBy}
+          className={styles.jumpLinksList}
+          role="list"
+        >
           {cloneChildren(children)}
         </ul>
       </div>