@patternfly/react-core 6.3.0-prerelease.9 → 6.3.0

package/src/components/Tabs/Tabs.tsx

@@ -5,20 +5,27 @@ import { PickOptional } from '../../helpers/typeUtils';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-import { getUniqueId, isElementInView, formatBreakpointMods, getLanguageDirection } from '../../helpers/util';
+import {
+  getUniqueId,
+  isElementInView,
+  formatBreakpointMods,
+  getLanguageDirection,
+  getInlineStartProperty
+} from '../../helpers/util';
 import { TabContent } from './TabContent';
 import { TabProps } from './Tab';
 import { TabsContextProvider } from './TabsContext';
-import { OverflowTab } from './OverflowTab';
+import { OverflowTab, HorizontalOverflowPopperProps } from './OverflowTab';
 import { Button } from '../Button';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId, canUseDOM } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import linkAccentLength from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_length';
+import linkAccentStart from '@patternfly/react-tokens/dist/esm/c_tabs_link_accent_start';
 
 export enum TabsComponent {
   div = 'div',
   nav = 'nav'
 }
-
 export interface HorizontalOverflowObject {
   /** Flag which shows the count of overflowing tabs when enabled */
   showTabCount?: boolean;
@@ -26,6 +33,8 @@ export interface HorizontalOverflowObject {
   defaultTitleText?: string;
   /** The aria label applied to the button which toggles the tab overflow menu */
   toggleAriaLabel?: string;
+  /** Additional props to spread to the popper menu. */
+  popperProps?: HorizontalOverflowPopperProps;
 }
 
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
@@ -54,6 +63,8 @@ export interface TabsProps
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;
+  /** Flag indicating that the add button is disabled when onAdd is passed in */
+  isAddButtonDisabled?: boolean;
   /** Enables the filled tab list layout */
   isFilled?: boolean;
   /** Enables subtab tab styling */
@@ -139,6 +150,9 @@ interface TabsState {
   uncontrolledIsExpandedLocal: boolean;
   ouiaStateId: string;
   overflowingTabCount: number;
+  isInitializingAccent: boolean;
+  currentLinkAccentLength: string;
+  currentLinkAccentStart: string;
 }
 
 class Tabs extends Component<TabsProps, TabsState> {
@@ -158,7 +172,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       uncontrolledActiveKey: this.props.defaultActiveKey,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
       ouiaStateId: getDefaultOUIAId(Tabs.displayName),
-      overflowingTabCount: 0
+      overflowingTabCount: 0,
+      isInitializingAccent: true,
+      currentLinkAccentLength: linkAccentLength.value,
+      currentLinkAccentStart: linkAccentStart.value
     };
 
     if (this.props.isVertical && this.props.expandable !== undefined) {
@@ -328,21 +345,49 @@ class Tabs extends Component<TabsProps, TabsState> {
     }
   };
 
+  setAccentStyles = (shouldInitializeStyle?: boolean) => {
+    const currentItem = this.tabList.current.querySelector('li.pf-m-current') as HTMLElement;
+    if (!currentItem) {
+      return;
+    }
+
+    const { isVertical } = this.props;
+    const { offsetWidth, offsetHeight, offsetTop } = currentItem;
+    const lengthValue = isVertical ? offsetHeight : offsetWidth;
+    const startValue = isVertical ? offsetTop : getInlineStartProperty(currentItem, this.tabList.current);
+    this.setState({
+      currentLinkAccentLength: `${lengthValue}px`,
+      currentLinkAccentStart: `${startValue}px`,
+      ...(shouldInitializeStyle && { isInitializingAccent: true })
+    });
+
+    setTimeout(() => {
+      this.setState({ isInitializingAccent: false });
+    }, 0);
+  };
+
+  handleResize = () => {
+    this.handleScrollButtons();
+    this.setAccentStyles();
+  };
+
   componentDidMount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.addEventListener('resize', this.handleScrollButtons, false);
+        window.addEventListener('resize', this.handleResize, false);
       }
       this.direction = getLanguageDirection(this.tabList.current);
       // call the handle resize function to check if scroll buttons should be shown
       this.handleScrollButtons();
     }
+
+    this.setAccentStyles(true);
   }
 
   componentWillUnmount() {
     if (!this.props.isVertical) {
       if (canUseDOM) {
-        window.removeEventListener('resize', this.handleScrollButtons, false);
+        window.removeEventListener('resize', this.handleResize, false);
       }
     }
     clearTimeout(this.scrollTimeout);
@@ -350,8 +395,18 @@ class Tabs extends Component<TabsProps, TabsState> {
   }
 
   componentDidUpdate(prevProps: TabsProps, prevState: TabsState) {
-    const { activeKey, mountOnEnter, isOverflowHorizontal, children } = this.props;
-    const { shownKeys, overflowingTabCount, enableScrollButtons } = this.state;
+    this.direction = getLanguageDirection(this.tabList.current);
+    const { activeKey, mountOnEnter, isOverflowHorizontal, children, defaultActiveKey } = this.props;
+    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey } = this.state;
+    const isOnCloseUpdate = !!prevProps.onClose !== !!this.props.onClose;
+    if (
+      (defaultActiveKey !== undefined && prevState.uncontrolledActiveKey !== uncontrolledActiveKey) ||
+      (defaultActiveKey === undefined && prevProps.activeKey !== activeKey) ||
+      isOnCloseUpdate
+    ) {
+      this.setAccentStyles(isOnCloseUpdate);
+    }
+
     if (prevProps.activeKey !== activeKey && mountOnEnter && shownKeys.indexOf(activeKey) < 0) {
       this.setState({
         shownKeys: shownKeys.concat(activeKey)
@@ -364,6 +419,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       Children.toArray(prevProps.children).length !== Children.toArray(children).length
     ) {
       this.handleScrollButtons();
+      this.setAccentStyles(true);
     }
 
     const currentOverflowingTabCount = this.countOverflowingElements(this.tabList.current);
@@ -374,14 +430,14 @@ class Tabs extends Component<TabsProps, TabsState> {
     if (!prevState.enableScrollButtons && enableScrollButtons) {
       this.setState({ renderScrollButtons: true });
       setTimeout(() => {
+        // Remove any existing listener before adding a new one to prevent accumulation
+        this.leftScrollButtonRef.current?.removeEventListener('transitionend', this.hideScrollButtons);
         this.leftScrollButtonRef.current?.addEventListener('transitionend', this.hideScrollButtons);
         this.setState({ showScrollButtons: true });
       }, 100);
     } else if (prevState.enableScrollButtons && !enableScrollButtons) {
       this.setState({ showScrollButtons: false });
     }
-
-    this.direction = getLanguageDirection(this.tabList.current);
   }
 
   static getDerivedStateFromProps(nextProps: TabsProps, prevState: TabsState) {
@@ -412,6 +468,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       activeKey,
       defaultActiveKey,
       id,
+      isAddButtonDisabled,
       isFilled,
       isSubtab,
       isVertical,
@@ -450,7 +507,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       shownKeys,
       uncontrolledActiveKey,
       uncontrolledIsExpandedLocal,
-      overflowingTabCount
+      overflowingTabCount,
+      isInitializingAccent,
+      currentLinkAccentLength,
+      currentLinkAccentStart
     } = this.state;
     const filteredChildren = Children.toArray(children)
       .filter((child): child is TabElement => isValidElement(child))
@@ -485,6 +545,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           unmountOnExit,
           localActiveKey,
           uniqueId,
+          setAccentStyles: this.setAccentStyles,
           handleTabClick: (...args) => this.handleTabClick(...args),
           handleTabClose: onClose
         }}
@@ -493,6 +554,7 @@ class Tabs extends Component<TabsProps, TabsState> {
           aria-label={ariaLabel}
           className={css(
             styles.tabs,
+            styles.modifiers.animateCurrent,
             isFilled && styles.modifiers.fill,
             isSubtab && styles.modifiers.subtab,
             isVertical && styles.modifiers.vertical,
@@ -505,10 +567,12 @@ class Tabs extends Component<TabsProps, TabsState> {
             formatBreakpointMods(inset, styles),
             variantStyle[variant],
             hasOverflowTab && styles.modifiers.overflow,
+            isInitializingAccent && styles.modifiers.initializingAccent,
             className
           )}
           {...getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
           id={id && id}
+          style={{ [linkAccentLength.name]: currentLinkAccentLength, [linkAccentStart.name]: currentLinkAccentStart }}
           {...props}
         >
           {expandable && isVertical && (
@@ -572,6 +636,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                 aria-label={addButtonAriaLabel || 'Add tab'}
                 onClick={onAdd}
                 icon={<PlusIcon />}
+                isDisabled={isAddButtonDisabled}
               />
             </span>
           )}

package/src/components/Tabs/TabsContext.ts

@@ -6,6 +6,7 @@ export interface TabsContextProps {
   unmountOnExit: boolean;
   localActiveKey: string | number;
   uniqueId: string;
+  setAccentStyles?: (shouldInitializeStyles?: boolean) => void;
   handleTabClick: (
     event: React.MouseEvent<HTMLElement, MouseEvent>,
     eventKey: number | string,
@@ -24,6 +25,7 @@ export const TabsContext = createContext<TabsContextProps>({
   unmountOnExit: false,
   localActiveKey: '',
   uniqueId: '',
+  setAccentStyles: () => null,
   handleTabClick: () => null,
   handleTabClose: undefined
 });

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

@@ -1,5 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { Tabs } from '../Tabs';
+import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { Tab } from '../Tab';
 import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
@@ -8,6 +9,47 @@ import { TabContentBody } from '../TabContentBody';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
+test(`Renders with classes ${styles.tabs} and ${styles.modifiers.animateCurrent} by default`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(`${styles.tabs} ${styles.modifiers.animateCurrent}`);
+});
+
+test(`Renders with class ${styles.modifiers.initializingAccent} when component initially mounts`, () => {
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  expect(screen.getByRole('region')).toHaveClass(styles.modifiers.initializingAccent);
+});
+
+test(`Does not render with class ${styles.modifiers.initializingAccent} when component is finished mounting`, () => {
+  jest.useFakeTimers();
+  render(
+    <Tabs role="region">
+      <Tab title="Test title" eventKey={0}>
+        Tab Content
+      </Tab>
+    </Tabs>
+  );
+
+  act(() => {
+    jest.advanceTimersByTime(500);
+  });
+  expect(screen.getByRole('region')).not.toHaveClass(styles.modifiers.initializingAccent);
+  jest.useRealTimers();
+});
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">
@@ -450,3 +492,25 @@ test('should not render scroll buttons when isVertical is true', () => {
   expect(screen.queryByLabelText('Scroll left')).not.toBeInTheDocument();
   expect(screen.queryByLabelText('Scroll right')).not.toBeInTheDocument();
 });
+
+test('should render a disabled add button', () => {
+  render(
+    <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label" isAddButtonDisabled={true}>
+      <div>Tab content</div>
+    </Tabs>
+  );
+
+  const addButton = screen.getByLabelText('add-label');
+  expect(addButton).toBeDisabled();
+});
+
+test('should render an enabled add button', () => {
+  render(
+    <Tabs onAdd={jest.fn()} addButtonAriaLabel="add-label" isAddButtonDisabled={false}>
+      <div>Tab content</div>
+    </Tabs>
+  );
+
+  const addButton = screen.getByLabelText('add-label');
+  expect(addButton).not.toBeDisabled();
+});

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

@@ -4,11 +4,12 @@ exports[`should render accessible tabs 1`] = `
 <DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-12"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -120,11 +121,12 @@ exports[`should render accessible tabs 1`] = `
 exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box"
-    data-ouia-component-id="OUIA-Generated-Tabs-8"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -278,11 +280,12 @@ exports[`should render box tabs 1`] = `
 exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-box pf-m-secondary"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -394,11 +397,12 @@ exports[`should render box tabs of secondary variant 1`] = `
 exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical pf-m-expandable"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <div
       class="pf-v6-c-tabs__toggle"
@@ -600,11 +604,12 @@ exports[`should render expandable vertical tabs 1`] = `
 exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-fill"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -716,11 +721,12 @@ exports[`should render filled tabs 1`] = `
 exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-1"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-4"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -874,11 +880,12 @@ exports[`should render simple tabs 1`] = `
 exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-11"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -959,11 +966,12 @@ exports[`should render subtabs 1`] = `
     tabindex="0"
   >
     <div
-      class="pf-v6-c-tabs pf-m-subtab"
-      data-ouia-component-id="OUIA-Generated-Tabs-12"
+      class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
+      data-ouia-component-id="OUIA-Generated-Tabs-15"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
+      style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
     >
       <ul
         class="pf-v6-c-tabs__list"
@@ -1101,11 +1109,12 @@ exports[`should render subtabs 1`] = `
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1218,11 +1227,12 @@ exports[`should render tabs with eventKey Strings 1`] = `
 exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-no-border-bottom"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1334,11 +1344,12 @@ exports[`should render tabs with no bottom border 1`] = `
 exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-17"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1460,10 +1471,11 @@ exports[`should render tabs with separate content 1`] = `
 exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs"
-    data-ouia-component-id="OUIA-Generated-Tabs-4"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-7"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"
@@ -1617,11 +1629,12 @@ exports[`should render uncontrolled tabs 1`] = `
 exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-tabs pf-m-vertical"
-    data-ouia-component-id="OUIA-Generated-Tabs-5"
+    class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
+    data-ouia-component-id="OUIA-Generated-Tabs-8"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
+    style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
       class="pf-v6-c-tabs__list"

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', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'HorizontalOverflowObject', 'HorizontalOverflowPopperProps', 'TabAction']
 ouia: true
 ---
 

package/src/components/Timestamp/examples/TimestampBasicFormats.tsx

@@ -1,7 +1,7 @@
 import { Timestamp, TimestampFormat } from '@patternfly/react-core';
 
 export const TimestampBasicFormats: React.FunctionComponent = () => {
-  const currentDate = new Date();
+  const currentDate = new Date('2025-04-21T23:35:25');
 
   return (
     <>

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -1,7 +1,7 @@
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampDefaultTooltip: React.FunctionComponent = () => {
-  const currentDate = new Date();
+  const currentDate = new Date('2025-04-21T14:30:00');
 
   return (
     <>

package/src/components/TreeView/TreeView.tsx

@@ -103,6 +103,11 @@ export interface TreeViewProps {
   useMemo?: boolean;
   /** Variant presentation styles for the tree view. */
   variant?: 'default' | 'compact' | 'compactNoBackground';
+  /** Flag indicating whether a tree view has animations. This will always render
+   * nested tree view items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
@@ -130,6 +135,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   useMemo,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
+  hasAnimations,
   ...props
 }: TreeViewProps) => {
   const treeViewList = (
@@ -139,11 +145,13 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       isMultiSelectable={isMultiSelectable}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
+      {...props}
     >
       {data.map((item) => (
         <TreeViewListItem
           key={item.id?.toString() || item.name?.toString()}
           name={item.name}
+          hasAnimations={hasAnimations}
           title={item.title}
           id={item.id}
           isExpanded={allExpanded}
@@ -172,6 +180,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
               <TreeView
                 data={item.children}
                 isNested
+                hasAnimations={hasAnimations}
                 parentItem={item}
                 hasCheckboxes={hasCheckboxes}
                 hasBadges={hasBadges}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -1,4 +1,4 @@
-import { memo, useState, useEffect } from 'react';
+import { memo, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -68,6 +68,11 @@ export interface TreeViewListItemProps {
    * every node in the selected item's path.
    */
   useMemo?: boolean;
+  /** Flag indicating whether a tree view has animations. This will always render
+   * nested tree view items rather than dynamically rendering them. This prop will be removed in
+   * the next breaking change release in favor of defaulting to always-rendered items.
+   */
+  hasAnimations?: boolean;
 }
 
 const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
@@ -97,6 +102,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   expandedIcon,
   action,
   compareItems,
+  hasAnimations,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
@@ -186,9 +192,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <>
       {hasBadge && children && (
         <span className={css(styles.treeViewNodeCount)}>
-          <Badge {...badgeProps}>
-            {customBadgeContent ? customBadgeContent : (children as React.ReactElement<any>).props.data.length}
-          </Badge>
+          <Badge {...badgeProps}>{customBadgeContent ?? (children as React.ReactElement<any>).props.data.length}</Badge>
         </span>
       )}
       {hasBadge && !children && customBadgeContent !== undefined && (
@@ -205,6 +209,15 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     activeItems.length > 0 &&
     activeItems.some((item) => compareItems && item && compareItems(item, itemData));
 
+  const clonedChildren = Children.map(
+    children,
+    (child) =>
+      isValidElement(child) &&
+      cloneElement(child as React.ReactElement<any>, {
+        inert: internalIsExpanded ? undefined : ''
+      })
+  );
+
   return (
     <li
       id={id}
@@ -249,7 +262,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         </GenerateId>
         {action && <div className={css(styles.treeViewAction)}>{action}</div>}
       </div>
-      {internalIsExpanded && children}
+      {(internalIsExpanded || hasAnimations) && clonedChildren}
     </li>
   );
 };

package/src/components/TreeView/TreeViewRoot.tsx

@@ -72,7 +72,7 @@ class TreeViewRoot extends Component<TreeViewRootProps> {
     const activeElement = document.activeElement;
     const key = event.key;
     const treeItems = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode)).filter(
-      (el) => !el.classList.contains('pf-m-disabled')
+      (el) => !el.classList.contains('pf-m-disabled') && !el.closest(`.${styles.treeViewList}[inert]`)
     );
 
     if (key === KeyTypes.Space) {
@@ -138,7 +138,9 @@ class TreeViewRoot extends Component<TreeViewRootProps> {
       event.preventDefault();
     }
 
-    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode));
+    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName(styles.treeViewNode)).filter(
+      (el) => !el.closest(`.${styles.treeViewList}[inert]`)
+    );
 
     handleArrows(
       event,