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

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'TabAction', 'PopperOptions']
 ouia: true
 ---
 
@@ -22,16 +22,16 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 A `<Tabs>` component contains multiple `<Tab>` components that may be used to navigate between sets of content within a page.
 
-You can adjust a tab in the following ways: 
+You can adjust a tab in the following ways:
 
 - To label a tab with text, pass a `<TabTitleText>` component into the `title` property of a `<Tab>`.
-- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies. 
+- To disable a tab, use the `isDisabled` property. Tabs using `isDisabled` are not perceivable or operable by users navigating via assistive technologies.
 - To disable a tab, but keep it perceivable to assistive technology users, use the `isAriaDisabled` property. If a disabled tab has a tooltip, use this property instead of `isDisabled`.
-- To add a tooltip to an aria-disabled tab, use the `tooltip` property. 
+- To add a tooltip to an aria-disabled tab, use the `tooltip` property.
 
-Tabs can be styled as 'default' or 'boxed': 
+Tabs can be styled as 'default' or 'boxed':
 
-- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab. 
+- Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.
 - Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `isBox` property to true.
 
 ```ts file="./TabsDefault.tsx"
@@ -39,7 +39,7 @@ Tabs can be styled as 'default' or 'boxed':
 
 ### Boxed secondary tabs
 
-To change the background color of boxed tabs or the tab content, use the `variant` property. 
+To change the background color of boxed tabs or the tab content, use the `variant` property.
 
 Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.
 
@@ -50,14 +50,14 @@ Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the f
 
 Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.
 
-To style tabs vertically, use the `isVertical` property. 
+To style tabs vertically, use the `isVertical` property.
 
 ```ts file="./TabsVertical.tsx"
 ```
 
 ### Vertical expandable tabs
 
-Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs. 
+Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.
 
 Expandable tabs can be enabled at different breakpoints. The following example passes `expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}` into the `<Tabs>` component.
 
@@ -75,14 +75,14 @@ To flag the default expanded state for uncontrolled tabs, use the `defaultIsExpa
 
 ### Default overflow tabs
 
-By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows. 
+By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.
 
 ```ts file="./TabsDefaultOverflow.tsx"
 ```
 
 ### Horizontal overflow tabs
 
-Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content. 
+Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.
 
 To enable horizontal overflow, use the `isOverflowHorizontal` property.
 
@@ -102,7 +102,7 @@ The tooltip should also have the `id` property passed in. The value of `id` shou
 
 ### Uncontrolled tabs
 
-To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example. 
+To allow the `<Tabs>` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.
 
 
 ```ts file="./TabsUncontrolled.tsx"
@@ -124,7 +124,7 @@ To adjust the left padding of tabs, use the `usePageInsets` property. This prope
 
 ### With icons and text
 
-You can render different content in the `title` property of a tab to add icons and text. 
+You can render different content in the `title` property of a tab to add icons and text.
 
 To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the icon of your choice into the `title`. To use an icon alongside styled text, keep the text in the `<TabTitleText>` component.
 
@@ -133,53 +133,53 @@ To add an icon to a tab, pass a `<TabTitleIcon>` component that contains the ico
 
 ### Subtabs
 
-Use subtabs within other components, like modals. Subtabs have less visually prominent styling. 
+Use subtabs within other components, like modals. Subtabs have less visually prominent styling.
 
-To apply subtab styling to tabs, use the `isSubtab` property. 
+To apply subtab styling to tabs, use the `isSubtab` property.
 
 ```ts file="./TabsSubtabs.tsx"
 ```
 
 ### Filled tabs with icons
 
-To allow tabs to fill the available width of the page section, use the `isFilled` property. 
+To allow tabs to fill the available width of the page section, use the `isFilled` property.
 
 ```ts file="./TabsFilledWithIcons.tsx"
 ```
 
 ### Tabs linked to nav elements
 
-To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property. 
+To let tabs link to nav elements, pass `{TabsComponent.nav}` into the `component` property.
 
-Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`. 
+Nav tabs should use the `href` property to link the tab to the URL of another page or page section. A tab with an `href` will render as an `<a>` instead of a `<button>`.
 
 ```ts file="./TabsNav.tsx"
 ```
 
 ### Subtabs linked to nav elements
 
-Subtabs can also link to nav elements. 
+Subtabs can also link to nav elements.
 
 ```ts file="./TabsNavSubtab.tsx"
 ```
 
 ### With separate content
 
-If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties 
+If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties
 
 ```ts file="./TabsSeparateContent.tsx"
 ```
 
 ### With tab content with body and padding
 
-To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property. 
+To add a content body to a `<TabContent>` component, pass a `<TabContentBody>`. To add padding to the body section, use the `hasPadding` property.
 
 ```ts file="./TabsContentWithBodyPadding.tsx"
 ```
 
 ### Children mounting on click
 
-To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property. 
+To mount tab children (add to the DOM) when a tab is clicked, use the `mountOnEnter` property.
 
 Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.
 
@@ -197,30 +197,30 @@ To unmount tab children (remove from the DOM) when they are no longer visible, u
 
 You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item  2" invisible.
 
-The tab its content should only be mounted when the tab is visible. 
+The tab its content should only be mounted when the tab is visible.
 
 ```ts file="./TabsToggledSeparateContent.tsx"
 ```
 
 ### Dynamic tabs
 
-To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`. 
+To enable closeable tabs, pass the `onClose` property to the `<Tabs>` component. To enable a button that adds new tabs, pass the `onAdd` property to `<Tabs>`.
 
 ```ts file="./TabsDynamic.tsx"
 ```
 
 ### With help action popover
 
-You may add a help action to a tab to provide users with additional context in a popover. 
+You may add a help action to a tab to provide users with additional context in a popover.
 
-To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property. 
+To render an action beside the tab content, use the `actions` property of a `<Tab>`. Pass a popover and a `<TabsAction>` component into the `actions` property.
 
 ```ts file="./TabsHelp.tsx"
 ```
 
 ### With help and close actions
 
-To add multiple actions to a tab, create a `<TabAction>` component for each action. 
+To add multiple actions to a tab, create a `<TabAction>` component for each action.
 
 The following example passes in both help popover and close actions.
 

package/src/components/Tooltip/Tooltip.tsx

@@ -174,6 +174,75 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   const [visible, setVisible] = useState(false);
   const popperRef = createRef<HTMLDivElement>();
 
+  const getTriggerRefElement = (): HTMLElement | null => {
+    if (typeof triggerRef === 'function') {
+      return triggerRef();
+    } else if (triggerRef && typeof triggerRef === 'object' && 'current' in triggerRef) {
+      return triggerRef.current;
+    } else if (triggerRef instanceof HTMLElement) {
+      return triggerRef;
+    }
+    return null;
+  };
+
+  const getAriaAttributeName = () => (aria !== 'none' ? `aria-${aria}` : null);
+
+  const addAriaToRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria || !existingAria.includes(id)) {
+      const newAria = existingAria ? `${existingAria} ${id}` : id;
+      element.setAttribute(attributeName, newAria);
+    }
+  };
+
+  const removeAriaFromRefElement = (element: HTMLElement): void => {
+    const attributeName = getAriaAttributeName();
+    if (!element || !attributeName) {
+      return;
+    }
+
+    const existingAria = element.getAttribute(attributeName);
+    if (!existingAria) {
+      return;
+    }
+    const newAria = existingAria.replace(new RegExp(`\\b${id}\\b`, 'g'), '').trim();
+    if (newAria) {
+      element.setAttribute(attributeName, newAria);
+    } else {
+      element.removeAttribute(attributeName);
+    }
+  };
+
+  const updateTriggerElementAria = (shouldAddAria: boolean): void => {
+    if (aria === 'none' || !triggerRef || children) {
+      return;
+    }
+
+    const triggerElement = getTriggerRefElement();
+    if (!triggerElement) {
+      return;
+    }
+
+    if (shouldAddAria) {
+      addAriaToRefElement(triggerElement);
+    } else {
+      removeAriaFromRefElement(triggerElement);
+    }
+  };
+
+  useEffect(() => {
+    updateTriggerElementAria(visible);
+
+    return () => {
+      updateTriggerElementAria(false);
+    };
+  }, [visible, aria, triggerRef, children, id]);
+
   const onDocumentKeyDown = (event: KeyboardEvent) => {
     if (!triggerManually) {
       if (event.key === KeyTypes.Escape && visible) {
@@ -258,8 +327,12 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     }
   };
 
-  const addAriaToTrigger = () => {
-    if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
+  const addAriaToChildren = () => {
+    if (!children) {
+      return;
+    }
+
+    if (aria === 'describedby' && children.props && !children.props['aria-describedby']) {
       return cloneElement(children, { 'aria-describedby': id });
     } else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
       return cloneElement(children, { 'aria-labelledby': id });
@@ -269,7 +342,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
 
   return (
     <Popper
-      trigger={aria !== 'none' && visible ? addAriaToTrigger() : children}
+      trigger={aria !== 'none' && visible ? addAriaToChildren() : children}
       triggerRef={triggerRef}
       popper={content}
       popperRef={popperRef}

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

@@ -204,3 +204,129 @@ test('Matches snapshot', async () => {
   const tooltip = await screen.findByRole('tooltip');
   expect(tooltip).toMatchSnapshot();
 });
+
+test('Applies aria-describedby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+});
+
+test('Applies aria-labelledby to triggerRef element when no children are provided', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <button ref={triggerRef}>Trigger</button>
+      <Tooltip id="trigger-ref-test" aria="labelledby" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+});
+
+test('Removes aria-describedby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)}>
+          Trigger
+        </button>
+        <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible={isVisible} content="Test description" />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Test description');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleDescription();
+});
+
+test('Removes aria-labelledby from triggerRef element when tooltip is hidden', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  const TooltipTest = () => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    return (
+      <>
+        <button ref={triggerRef} onClick={() => setIsVisible(!isVisible)} />
+        <Tooltip
+          aria="labelledby"
+          id="trigger-ref-test"
+          triggerRef={triggerRef}
+          isVisible={isVisible}
+          content="Test label"
+        />
+      </>
+    );
+  };
+
+  render(<TooltipTest />);
+
+  // Tooltip should be visible initially
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Test label');
+
+  // Hide tooltip
+  const user = userEvent.setup();
+  await user.click(triggerRef.current);
+
+  // aria-describedby should be removed
+  expect(triggerRef.current).not.toHaveAccessibleName();
+});
+
+test('Preserves existing aria-describedby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing description</div>
+      <button ref={triggerRef} aria-describedby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test description" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleDescription('Existing description Test description');
+});
+
+test('Preserves existing aria-labelledby on triggerRef element', async () => {
+  const triggerRef = createRef<HTMLButtonElement>();
+
+  render(
+    <>
+      <div id="existing-aria">Existing label</div>
+      <button ref={triggerRef} aria-labelledby="existing-aria">
+        Trigger
+      </button>
+      <Tooltip aria="labelledby" id="trigger-ref-test" triggerRef={triggerRef} isVisible content="Test label" />
+    </>
+  );
+
+  await screen.findByRole('tooltip');
+  expect(triggerRef.current).toHaveAccessibleName('Existing label Test label');
+});

package/src/components/TreeView/TreeView.tsx

@@ -1,6 +1,7 @@
 import { TreeViewList } from './TreeViewList';
 import { TreeViewCheckProps, TreeViewListItem } from './TreeViewListItem';
 import { TreeViewRoot } from './TreeViewRoot';
+import { useHasAnimations } from '../../helpers';
 
 /** Properties that make up a tree view data item. These properties should be passed in as an
  * object to one of the various tree view component properties which accept TreeViewDataItem as
@@ -135,9 +136,10 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   useMemo,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   ...props
 }: TreeViewProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const treeViewList = (
     <TreeViewList
       isNested={isNested}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -5,6 +5,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -102,10 +103,11 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   expandedIcon,
   action,
   compareItems,
-  hasAnimations,
+  hasAnimations: hasAnimationsProp,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
     if (isExpanded !== undefined && isExpanded !== null) {

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TreeView } from '../TreeView';
+import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
 
 jest.mock('../TreeViewList', () => ({
   TreeViewList: ({
@@ -293,6 +294,33 @@ test('Passes hasAnimations to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
 });
+
+// Animation context tests
+test('respects AnimationsProvider context when no local hasAnimations prop', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
+
+test('local hasAnimations prop takes precedence over context', () => {
+  render(
+    <AnimationsProvider config={{ hasAnimations: true }}>
+      <TreeView data={[basicData]} hasAnimations={false} />
+    </AnimationsProvider>
+  );
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
+
+test('works without AnimationsProvider (backward compatibility)', () => {
+  render(<TreeView data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: false')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 

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

@@ -105,7 +105,7 @@ exports[`Matches snapshot 1`] = `
               TreeViewListItem useMemo: undefined
             </p>
             <p>
-              TreeViewListItem hasAnimations: undefined
+              TreeViewListItem hasAnimations: false
             </p>
             <button>
               compareItems clicker

package/src/components/Truncate/Truncate.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, forwardRef } from 'react';
+import { Fragment, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
@@ -75,6 +75,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   maxCharsDisplayed,
   omissionContent = '\u2026',
   content,
+  innerRef,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
@@ -83,6 +84,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
+  useImperativeHandle(innerRef, () => textRef.current!);
   const defaultSubParentRef = useRef<any>(null);
   const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
   const observer = useRef(null);

package/src/components/Truncate/examples/TruncateExamples.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v6-global--spacer--md);
-  border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/src/components/Wizard/WizardNavItem.tsx

@@ -116,7 +116,7 @@ export const WizardNavItem = ({
         <span className={css(styles.wizardNavLinkMain)}>
           {isExpandable ? (
             <>
-              <span className={css(styles.wizardNavLinkText)}>{content}</span>
+              <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
                   <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />