@patternfly/react-core 6.3.0-prerelease.20 → 6.3.0-prerelease.22

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -8,7 +8,7 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -70,38 +70,22 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 </Fragment>
 ```
 
-### With icons
+### Settings toggle
+
+To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
+```ts file="./MenuToggleSettings.tsx"
+
+```
+
+### Custom icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+```ts file="./MenuToggleCustomIcon.tsx"
 
-<Fragment>
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="primary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-    isDisabled
-  >
-    Icon
-  </MenuToggle>
-</Fragment>;
 ```
 
 ### With avatar and text
@@ -202,13 +186,13 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split toggle with checkbox and toggle text 
+### Split toggle with checkbox and toggle text
 
 To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 

package/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx

@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const MenuToggleCustomIcon: React.FC = () => (
+  <Fragment>
+    <MenuToggle icon={<PlusIcon />} variant="primary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+      Icon
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -0,0 +1,8 @@
+import { Fragment } from 'react/jsx-runtime';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSettings: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+  </Fragment>
+);

package/src/components/Page/PageToggleButton.tsx

@@ -10,6 +10,10 @@ export interface PageToggleButtonProps extends ButtonProps {
   onSidebarToggle?: () => void;
   /** Button id */
   id?: string;
+  /** Adds an accessible name to the toggle button. */
+  'aria-label'?: string;
+  /** Flag indicating whether the hamburger button variation with animations should be used. */
+  isHamburgerButton?: boolean;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
@@ -17,6 +21,8 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
   isSidebarOpen = true,
   onSidebarToggle = () => undefined as any,
   id = 'nav-toggle',
+  'aria-label': ariaLabel = 'Side navigation toggle',
+  isHamburgerButton,
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -32,12 +38,13 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
         <Button
           id={id}
           onClick={sidebarToggle}
-          aria-label="Side navigation toggle"
+          aria-label={ariaLabel}
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
+          isHamburger={isHamburgerButton}
           {...props}
         >
-          {children}
+          {!isHamburgerButton && children}
         </Button>
       );
     }}

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,7 +17,6 @@ import {
   Card,
   CardBody
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
@@ -40,14 +39,12 @@ export const PageCenteredSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="centered-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageGroupSection.tsx

@@ -22,7 +22,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -44,14 +43,12 @@ export const PageGroupSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="group-section-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-padding-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-variations-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="multiple-sidebar-body-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -14,7 +14,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageUncontrolledNav: React.FunctionComponent = () => {
   const headerToolbar = (
@@ -29,9 +28,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="uncontrolled-nav-toggle" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageVerticalNav: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="vertical-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="fill-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

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 }));
 

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

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

package/src/components/TreeView/examples/TreeViewCompact.tsx

@@ -54,5 +54,5 @@ export const TreeViewCompact: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView aria-label="Tree View compact example" data={options} variant="compact" />;
+  return <TreeView hasAnimations aria-label="Tree View compact example" data={options} variant="compact" />;
 };

package/src/components/TreeView/examples/TreeViewCompactNoBackground.tsx

@@ -54,5 +54,12 @@ export const TreeViewCompactNoBackground: React.FunctionComponent = () => {
       ]
     }
   ];
-  return <TreeView aria-label="Tree View compact no background example" data={options} variant="compactNoBackground" />;
+  return (
+    <TreeView
+      hasAnimations
+      aria-label="Tree View compact no background example"
+      data={options}
+      variant="compactNoBackground"
+    />
+  );
 };

package/src/components/TreeView/examples/TreeViewGuides.tsx

@@ -60,5 +60,5 @@ export const GuidesTreeView: React.FunctionComponent = () => {
       children: [{ name: 'Application 5', id: 'example8-App5' }]
     }
   ];
-  return <TreeView aria-label="Tree View guides example" data={options} hasGuides={true} />;
+  return <TreeView hasAnimations aria-label="Tree View guides example" data={options} hasGuides={true} />;
 };

package/src/components/TreeView/examples/TreeViewMultiselectable.tsx

@@ -76,6 +76,7 @@ export const TreeViewMultiselectable: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View multiselectable example"
       isMultiSelectable
       data={options}

package/src/components/TreeView/examples/TreeViewSelectionExpansion.tsx

@@ -73,6 +73,7 @@ export const TreeViewSelectableNodes: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View separate selection and expansion example"
       hasSelectableNodes
       data={options}

package/src/components/TreeView/examples/TreeViewSingleSelectable.tsx

@@ -82,6 +82,7 @@ export const TreeViewSingleSelectable: React.FunctionComponent = () => {
         {!allExpanded && 'Expand all'}
       </Button>
       <TreeView
+        hasAnimations
         aria-label="Tree View single selectable example"
         data={options}
         activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -129,6 +129,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
   ];
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with actions example"
       data={options}
       activeItems={activeItems}

package/src/components/TreeView/examples/TreeViewWithBadges.tsx

@@ -77,6 +77,7 @@ export const TreeViewBadges: React.FunctionComponent = () => {
 
   return (
     <TreeView
+      hasAnimations
       aria-label="Tree View with badges example"
       data={options}
       activeItems={activeItems}