@patternfly/react-core 6.3.0-prerelease.21 → 6.3.0-prerelease.23

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.3.0-prerelease.22","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.3.0-prerelease.22","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.20","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.3.0-prerelease.22","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.3.0-prerelease.21",
+  "version": "6.3.0-prerelease.23",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.3.0-prerelease.6",
-    "@patternfly/react-styles": "^6.3.0-prerelease.6",
-    "@patternfly/react-tokens": "^6.3.0-prerelease.6",
+    "@patternfly/react-icons": "^6.3.0-prerelease.7",
+    "@patternfly/react-styles": "^6.3.0-prerelease.7",
+    "@patternfly/react-tokens": "^6.3.0-prerelease.7",
     "focus-trap": "7.6.4",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.29",
+    "@patternfly/patternfly": "6.3.0-prerelease.33",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "c40f2f81ebe65b6bd785bc38da66330532ac7a30"
+  "gitHead": "96fdb620440615b569e4a95c570e46dc24bfa079"
 }

package/src/components/Button/hamburgerIcon.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 // Because this is such a specific icon that requires being wrapped in a pf-v[current version]-c-button element,
 // we don't want to export this to consumers nor include it in the react-icons package as a custom icon.
 export const hamburgerIcon = (
-  <svg viewBox="0 0 10 10" className="pf-v6-c-button--hamburger-icon pf-v6-svg" width="1em" height="1em">
+  <svg viewBox="0 0 10 10" className={css(styles.buttonHamburgerIcon, 'pf-v6-svg')} width="1em" height="1em">
     <path className={css(styles.buttonHamburgerIconTop)} d="M1,1 L9,1"></path>
     <path className={css(styles.buttonHamburgerIconMiddle)} d="M1,5 L9,5"></path>
     <path className={css(styles.buttonHamburgerIconArrow)} d="M1,5 L1,5 L1,5"></path>

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -32,7 +32,7 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
   toggleId?: string;
   /** Display size variant. Set to "lg" for disclosure styling. */
   displaySize?: 'default' | 'lg';
-  /** Indicates the expandable section has a detached toggle. */
+  /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
   isDetached?: boolean;
   /** Flag to indicate if the content is expanded. */
   isExpanded?: boolean;
@@ -64,6 +64,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * variant, the expandable content will be truncated after 3 lines by default.
    */
   variant?: 'default' | 'truncate';
+  /** Sets the direction of the expandable animation when isDetached is true. If this prop is not passed,
+   * animation will not occur.
+   */
+  direction?: 'up' | 'down';
 }
 
 interface ExpandableSectionState {
@@ -72,6 +76,11 @@ interface ExpandableSectionState {
   previousWidth: number;
 }
 
+const directionClassMap = {
+  up: styles.modifiers.expandTop,
+  down: styles.modifiers.expandBottom
+};
+
 const setLineClamp = (lines: number, element: HTMLDivElement) => {
   if (!element || lines < 1) {
     return;
@@ -198,6 +207,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       variant,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       truncateMaxLines,
+      direction,
       ...props
     } = this.props;
 
@@ -258,6 +268,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
+          isDetached && direction && directionClassMap[direction],
+          isDetached && direction && 'pf-m-detached',
           variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
           className
         )}

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -28,6 +28,8 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   isExpanded?: boolean;
   /** Callback function to toggle the expandable content. */
   onToggle?: (isExpanded: boolean) => void;
+  /** Flag indicating that the expandable section and expandable toggle are detached from one another. */
+  isDetached?: boolean;
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -39,6 +41,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   toggleId,
   direction = 'down',
   hasTruncatedContent = false,
+  isDetached,
   ...props
 }: ExpandableSectionToggleProps) => (
   <div
@@ -46,6 +49,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
       styles.expandableSection,
       isExpanded && styles.modifiers.expanded,
       hasTruncatedContent && styles.modifiers.truncate,
+      isDetached && 'pf-m-detached',
       className
     )}
     {...props}
@@ -63,7 +67,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
             <span
               className={css(
                 styles.expandableSectionToggleIcon,
-                isExpanded && direction === 'up' && styles.modifiers.expandTop
+                isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
               )}
             >
               <AngleRightIcon />

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

@@ -1,9 +1,8 @@
-import { Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
-import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
+import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
@@ -22,7 +21,7 @@ test('Renders ExpandableSection expanded', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('ExpandableSection onToggle called', async () => {
+test('Calls onToggle when clicked', async () => {
   const mockfn = jest.fn();
   const user = userEvent.setup();
 
@@ -32,6 +31,21 @@ test('ExpandableSection onToggle called', async () => {
   expect(mockfn.mock.calls).toHaveLength(1);
 });
 
+test('Does not call onToggle when not clicked', async () => {
+  const mockfn = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <>
+      <ExpandableSection onToggle={mockfn}> test </ExpandableSection>
+      <button onClick={() => {}}>Test clicker</button>
+    </>
+  );
+
+  await user.click(screen.getByRole('button', { name: 'Test clicker' }));
+  expect(mockfn).not.toHaveBeenCalled();
+});
+
 test('Renders Uncontrolled ExpandableSection', () => {
   const { asFragment } = render(
     <ExpandableSection {...props} toggleText="Show More">
@@ -42,20 +56,6 @@ test('Renders Uncontrolled ExpandableSection', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Detached ExpandableSection renders successfully', () => {
-  const { asFragment } = render(
-    <Fragment>
-      <ExpandableSection isExpanded isDetached {...props}>
-        test
-      </ExpandableSection>
-      <ExpandableSectionToggle isExpanded direction="up" {...props}>
-        Toggle text
-      </ExpandableSectionToggle>
-    </Fragment>
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
-
 test('Disclosure ExpandableSection', () => {
   const { asFragment } = render(
     <ExpandableSection {...props} displaySize="lg" isWidthLimited>
@@ -75,22 +75,22 @@ test('Renders ExpandableSection indented', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Does not render with pf-m-truncate class when variant is not passed', () => {
+test(`Does not render with ${styles.modifiers.truncate} class when variant is not passed`, () => {
   render(<ExpandableSection>test</ExpandableSection>);
 
-  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+  expect(screen.getByText('test').parentElement).not.toHaveClass(styles.modifiers.truncate);
 });
 
-test('Does not render with pf-m-truncate class when variant is not truncate', () => {
+test(`Does not render with ${styles.modifiers.truncate} class when variant is not truncate`, () => {
   render(<ExpandableSection variant={ExpandableSectionVariant.default}>test</ExpandableSection>);
 
-  expect(screen.getByText('test').parentElement).not.toHaveClass('pf-m-truncate');
+  expect(screen.getByText('test').parentElement).not.toHaveClass(styles.modifiers.truncate);
 });
 
-test('Renders with pf-m-truncate class when variant is truncate', () => {
+test(`Renders with ${styles.modifiers.truncate} class when variant is truncate`, () => {
   render(<ExpandableSection variant={ExpandableSectionVariant.truncate}>test</ExpandableSection>);
 
-  expect(screen.getByText('test').parentElement).toHaveClass('pf-m-truncate');
+  expect(screen.getByText('test').parentElement).toHaveClass(styles.modifiers.truncate);
 });
 
 test('Renders with value passed to contentId', () => {
@@ -129,3 +129,65 @@ test('Renders with ARIA attributes when contentId and toggleId are passed', () =
   expect(wrapper).toContainHTML('aria-labelledby="toggle-id"');
   expect(wrapper).toContainHTML('aria-controls="content-id"');
 });
+
+test(`Does not render with classes ${styles.modifiers.expandTop} nor ${styles.modifiers.expandBottom} by default`, () => {
+  render(<ExpandableSection>Test content</ExpandableSection>);
+
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top');
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom');
+});
+
+test(`Does not render with classes ${styles.modifiers.expandTop} nor ${styles.modifiers.expandBottom} when only isDetached is true`, () => {
+  render(<ExpandableSection isDetached>Test content</ExpandableSection>);
+
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top');
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom');
+});
+
+test(`Does not render with class ${styles.modifiers.expandTop} when direction="up" and isDetached is false`, () => {
+  render(<ExpandableSection direction="up">Test content</ExpandableSection>);
+
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-top');
+});
+
+test(`Does not render with class ${styles.modifiers.expandBottom} when direction="down" and isDetached is false`, () => {
+  render(<ExpandableSection direction="down">Test content</ExpandableSection>);
+
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-expand-bottom');
+});
+
+test(`Renders with class ${styles.modifiers.expandTop} when isDetached is true and direction="up"`, () => {
+  render(
+    <ExpandableSection isDetached direction="up">
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-expand-top');
+});
+
+test(`Renders with class ${styles.modifiers.expandBottom} when isDetached is true and direction="down"`, () => {
+  render(
+    <ExpandableSection isDetached direction="down">
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-expand-bottom');
+});
+
+test('Does not render with class pf-m-detached when isDetached is true and direction is not passed', () => {
+  render(<ExpandableSection isDetached>Test content</ExpandableSection>);
+
+  expect(screen.getByText('Test content').parentElement).not.toHaveClass('pf-m-detached');
+});
+
+test('Renders with class pf-m-detached when isDetached is true and direction is passed', () => {
+  render(
+    <ExpandableSection isDetached direction="up">
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
+});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ExpandableSectionToggle } from '../ExpandableSectionToggle';
+import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+
+test('Renders without children', () => {
+  render(<ExpandableSectionToggle></ExpandableSectionToggle>);
+
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test('Renders with children', () => {
+  render(<ExpandableSectionToggle>Toggle test</ExpandableSectionToggle>);
+
+  expect(screen.getByRole('button')).toHaveTextContent('Toggle test');
+});
+
+test('Does not render with class pf-m-detached by default', () => {
+  render(<ExpandableSectionToggle data-testid="test-id">Toggle test</ExpandableSectionToggle>);
+
+  expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-detached');
+});
+
+test('Renders with class pf-m-detached when isDetached is true', () => {
+  render(
+    <ExpandableSectionToggle data-testid="test-id" isDetached>
+      Toggle test
+    </ExpandableSectionToggle>
+  );
+
+  expect(screen.getByTestId('test-id')).toHaveClass('pf-m-detached');
+});

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

@@ -1,67 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Detached ExpandableSection renders successfully 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v6-c-expandable-section pf-m-expanded"
-  >
-    <div
-      aria-labelledby="toggle-id"
-      class="pf-v6-c-expandable-section__content"
-      id="content-id"
-      role="region"
-    >
-      test
-    </div>
-  </div>
-  <div
-    class="pf-v6-c-expandable-section pf-m-expanded"
-  >
-    <div
-      class="pf-v6-c-expandable-section__toggle"
-    >
-      <button
-        aria-controls="content-id"
-        aria-expanded="true"
-        class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-5"
-        data-ouia-component-type="PF6/Button"
-        data-ouia-safe="true"
-        id="toggle-id"
-        type="button"
-      >
-        <span
-          class="pf-v6-c-button__icon pf-m-start"
-        >
-          <span
-            class="pf-v6-c-expandable-section__toggle-icon pf-m-expand-top"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-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>
-          </span>
-        </span>
-        <span
-          class="pf-v6-c-button__text"
-        >
-          Toggle text
-        </span>
-      </button>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Disclosure ExpandableSection 1`] = `
 <DocumentFragment>
   <div
@@ -285,7 +223,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-4"
+        data-ouia-component-id="OUIA-Generated-Button-link-5"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -32,6 +32,8 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
 
+By default animations will not be enabled for a detached `<ExpandableSection>`. You must manually pass the `direction` property with an appropriate value based on where the expandable content is rendered. If the expandable content is above the expandable toggle, `direction="up"` must be passed like in this example.
+
 ```ts file="ExpandableSectionDetached.tsx"
 
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -13,7 +13,7 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
   return (
     <Stack hasGutter>
       <StackItem>
-        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
+        <ExpandableSection isExpanded={isExpanded} isDetached direction="up" toggleId={toggleId} contentId={contentId}>
           This content is visible only when the component is expanded.
         </ExpandableSection>
       </StackItem>

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) => {
@@ -203,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}
@@ -247,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,

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

@@ -47,7 +47,8 @@ jest.mock('../TreeViewListItem', () => ({
     onCollapse,
     parentItem,
     title,
-    useMemo
+    useMemo,
+    hasAnimations
   }) => (
     <div data-testid="TreeViewListItem-mock">
       <p>{`TreeViewListItem action: ${action}`}</p>
@@ -69,6 +70,7 @@ jest.mock('../TreeViewListItem', () => ({
       <p>{`TreeViewListItem parentItem: ${parentItem?.name}`}</p>
       <p>{`TreeViewListItem title: ${title}`}</p>
       <p>{`TreeViewListItem useMemo: ${useMemo}`}</p>
+      <p>{`TreeViewListItem hasAnimations: ${hasAnimations}`}</p>
       <button onClick={compareItems}>compareItems clicker</button>
       <button onClick={onCheck}>onCheck clicker</button>
       <button onClick={onSelect}>onSelect clicker</button>
@@ -286,6 +288,11 @@ test('Passes useMemo to TreeViewListItem', () => {
 
   expect(screen.getByText('TreeViewListItem useMemo: true')).toBeVisible();
 });
+test('Passes hasAnimations to TreeViewListItem', () => {
+  render(<TreeView data={[basicData]} hasAnimations={true} />);
+
+  expect(screen.getByText('TreeViewListItem hasAnimations: true')).toBeVisible();
+});
 test('Passes data.children to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, children: [{ name: 'Child 1' }] }]} />);
 

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

@@ -1,5 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { TreeViewList } from '../TreeViewList';
+import { TreeViewListItem } from '../TreeViewListItem';
+import { TreeView } from '../TreeView';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 
 test(`Renders with class ${styles.treeView}__list by default`, () => {
@@ -84,6 +86,43 @@ test(`Does not render toolbar content when toolbar prop is not passed`, () => {
   expect(screen.queryByRole('separator')).not.toBeInTheDocument();
 });
 
+test('Renders with inert attribute by default when TreeView is passed hasAnimations', () => {
+  const options = [
+    {
+      name: 'Parent 1',
+      id: 'parent-1',
+      children: [
+        {
+          name: 'Child 1',
+          id: 'child-1'
+        }
+      ]
+    }
+  ];
+  render(<TreeView hasAnimations data={options} />);
+
+  expect(screen.getByRole('group')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with inert attribute when expanded and TreeView is passed hasAnimations', () => {
+  const options = [
+    {
+      name: 'Parent 1',
+      id: 'parent-1',
+      defaultExpanded: true,
+      children: [
+        {
+          name: 'Child 1',
+          id: 'child-1'
+        }
+      ]
+    }
+  ];
+  render(<TreeView hasAnimations data={options} />);
+
+  expect(screen.getByRole('group')).not.toHaveAttribute('inert');
+});
+
 test('Matches snapshot by default', () => {
   const { asFragment } = render(<TreeViewList>Content</TreeViewList>);
 

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

@@ -28,7 +28,7 @@ test(`Does not render children by default`, () => {
 test(`Renders children if defaultExpanded is true`, () => {
   render(
     <TreeViewListItem defaultExpanded={true} {...requiredProps}>
-      Content
+      <div>Content</div>
     </TreeViewListItem>
   );
 
@@ -38,7 +38,7 @@ test(`Renders children if defaultExpanded is true`, () => {
 test(`Renders children if isExpanded is true`, () => {
   render(
     <TreeViewListItem isExpanded={true} {...requiredProps}>
-      Content
+      <div>Content</div>
     </TreeViewListItem>
   );
 
@@ -47,7 +47,11 @@ test(`Renders children if isExpanded is true`, () => {
 
 test(`Renders children when toggle is clicked`, async () => {
   const user = userEvent.setup();
-  render(<TreeViewListItem {...requiredProps}>Content</TreeViewListItem>);
+  render(
+    <TreeViewListItem {...requiredProps}>
+      <div>Content</div>
+    </TreeViewListItem>
+  );
 
   await user.click(screen.getByRole('button', { name: requiredProps.name }));