@patternfly/react-core 6.5.0-prerelease.6 → 6.5.0-prerelease.61

package/src/components/Toolbar/Toolbar.tsx

@@ -1,11 +1,11 @@
 import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
 import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
-import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { getOUIAProps, OUIAProps } from '../../helpers';
+import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarColorVariant {
@@ -40,6 +40,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isStatic?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar has a vertical orientation */
+  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -69,7 +71,6 @@ export interface ToolbarState {
   filterInfo: FilterInfo;
   /** Used to keep track of window width so we can collapse expanded content when window is resizing */
   windowWidth: number;
-  ouiaStateId: string;
 }
 
 interface FilterInfo {
@@ -84,8 +85,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
-    windowWidth: canUseDOM ? window.innerWidth : 1200,
-    ouiaStateId: getDefaultOUIAId(Toolbar.displayName)
+    windowWidth: 1200
   };
 
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
@@ -106,6 +106,9 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   componentDidMount() {
+    if (canUseDOM) {
+      this.setState({ windowWidth: window.innerWidth });
+    }
     if (this.isToggleManaged() && canUseDOM) {
       window.addEventListener('resize', this.closeExpandableContent);
     }
@@ -129,7 +132,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   getNumberOfFilters = () =>
     Object.values(this.state.filterInfo).reduce((acc: any, cur: any) => acc + cur, 0) as number;
 
-  renderToolbar = (randomId: string) => {
+  renderToolbar = (randomId: string, generatedOuiaId?: string) => {
     const {
       hasNoPadding,
       clearAllFilters,
@@ -143,6 +146,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       isStatic,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +171,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,
@@ -174,7 +179,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               className
             )}
             id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
             {...props}
           >
             <ToolbarContext.Provider
@@ -211,10 +216,10 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
   };
 
   render() {
-    return this.props.id ? (
-      this.renderToolbar(this.props.id)
-    ) : (
-      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
+    return (
+      <SSRSafeIds prefix="pf-random-id-" ouiaComponentType="Toolbar">
+        {(generatedId, generatedOuiaId) => this.renderToolbar(this.props.id || generatedId, generatedOuiaId)}
+      </SSRSafeIds>
     );
   }
 }

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -130,26 +130,29 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     ) : null;
 
     if (!_isExpanded && this.state.isMounted) {
+      const collapsedLabelPortalTarget = labelGroupContentRef?.current?.firstElementChild ?? null;
       return (
         <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-          {labelGroupContentRef?.current?.firstElementChild !== null &&
-            ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
+          {collapsedLabelPortalTarget !== null && ReactDOM.createPortal(labelGroup, collapsedLabelPortalTarget)}
         </Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
-        {({ labelContainerRef }) => (
-          <Fragment>
-            {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
-            {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
-            {expandableLabelContainerRef &&
-              expandableLabelContainerRef.current &&
-              ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
-          </Fragment>
-        )}
+        {({ labelContainerRef }) => {
+          const labelContainer = labelContainerRef?.current ?? null;
+          return (
+            <Fragment>
+              {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
+              {labelContainer !== null && ReactDOM.createPortal(labelGroup, labelContainer)}
+              {expandableLabelContainerRef &&
+                expandableLabelContainerRef.current &&
+                ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
+            </Fragment>
+          );
+        }}
       </ToolbarContentContext.Consumer>
     );
   }

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,7 +1,6 @@
 import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { canUseDOM } from '../../helpers/util';
 
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -32,7 +31,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps, { viewportWidth: number }> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -40,6 +39,23 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     numberOfFiltersText: (numberOfFilters: number) => `${numberOfFilters} filters applied`
   };
 
+  state = {
+    viewportWidth: 1200
+  };
+
+  handleResize = () => {
+    this.setState({ viewportWidth: window.innerWidth });
+  };
+
+  componentDidMount() {
+    this.handleResize();
+    window.addEventListener('resize', this.handleResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
   render() {
     const {
       className,
@@ -62,9 +78,8 @@ class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps>
     let collapseListedFilters = false;
     if (collapseListedFiltersBreakpoint === 'all') {
       collapseListedFilters = true;
-    } else if (canUseDOM) {
-      collapseListedFilters =
-        (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
+    } else if (collapseListedFiltersBreakpoint) {
+      collapseListedFilters = this.state.viewportWidth < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -6,7 +6,7 @@ import { ToolbarGroupProps } from './ToolbarGroup';
 import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
-import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
@@ -157,7 +157,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
-    const viewportSize = canUseDOM ? window.innerWidth : 1200;
+    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
     return viewportSize < lgBreakpointValue;
   };

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

@@ -54,7 +54,7 @@ describe('Toolbar', () => {
         </ToolbarContent>
       </Toolbar>
     );
-    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+    expect(screen.getByTestId('toolbar')).not.toHaveClass(styles.modifiers.noPadding);
   });
 
   it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
@@ -205,4 +205,37 @@ describe('Toolbar', () => {
       });
     });
   });
+
+  it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
+    render(
+      <Toolbar data-testid="Toolbar-test-is-not-vertical">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
+  });
+
+  it('Renders with class ${styles.modifiers.vertical} when isVertical is true', () => {
+    const items = (
+      <Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarFilter.test.tsx

@@ -0,0 +1,54 @@
+import { createRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { ToolbarContext } from '../ToolbarUtils';
+import { ToolbarFilter } from '../ToolbarFilter';
+
+describe('ToolbarFilter', () => {
+  it('renders when ToolbarFilter is not under Toolbar or ToolbarContent (default context)', () => {
+    const deleteLabel = jest.fn();
+    const deleteLabelGroup = jest.fn();
+
+    expect(() =>
+      render(
+        <ToolbarFilter
+          labels={['one']}
+          deleteLabel={deleteLabel}
+          deleteLabelGroup={deleteLabelGroup}
+          categoryName="Status"
+        >
+          filter content
+        </ToolbarFilter>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+
+  it('does not throw when labelGroupContentRef.current is still null while collapsed (listed filters)', () => {
+    const labelGroupContentRef = createRef<HTMLDivElement>();
+    expect(labelGroupContentRef.current).toBeNull();
+
+    expect(() =>
+      render(
+        <ToolbarContext.Provider
+          value={{
+            isExpanded: false,
+            toggleIsExpanded: () => {},
+            labelGroupContentRef,
+            updateNumberFilters: () => {},
+            numberOfFilters: 0,
+            clearAllFilters: () => {}
+          }}
+        >
+          <ToolbarFilter labels={['one']} deleteLabel={jest.fn()} deleteLabelGroup={jest.fn()} categoryName="Status">
+            filter content
+          </ToolbarFilter>
+        </ToolbarContext.Provider>
+      )
+    ).not.toThrow();
+
+    expect(screen.getByText('filter content')).toBeInTheDocument();
+  });
+});

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

@@ -4,7 +4,7 @@ exports[`Toolbar should render inset 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-inset-none pf-m-inset-sm-on-md pf-m-inset-2xl-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Toolbar-1"
+    data-ouia-component-id="OUIA-Generated-Toolbar-:r1:"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar"
@@ -51,7 +51,7 @@ exports[`Toolbar should render with custom label content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-toolbar pf-m-toggle-group-container"
-    data-ouia-component-id="OUIA-Generated-Toolbar-4"
+    data-ouia-component-id="OUIA-Generated-Toolbar-:r7:"
     data-ouia-component-type="PF6/Toolbar"
     data-ouia-safe="true"
     id="toolbar-with-filter"
@@ -72,7 +72,7 @@ exports[`Toolbar should render with custom label content 1`] = `
               aria-haspopup="false"
               aria-label="Show Filters"
               class="pf-v6-c-button pf-m-plain"
-              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-id="OUIA-Generated-Button-plain-:r8:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
@@ -144,7 +144,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close New"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-:rb:"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -158,11 +158,11 @@ exports[`Toolbar should render with custom label content 1`] = `
                             fill="currentColor"
                             height="1em"
                             role="img"
-                            viewBox="0 0 352 512"
+                            viewBox="0 0 20 20"
                             width="1em"
                           >
                             <path
-                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                              d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                             />
                           </svg>
                         </span>
@@ -191,7 +191,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                       <button
                         aria-label="Close Pending"
                         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
-                        data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                        data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
                         data-ouia-component-type="PF6/Button"
                         data-ouia-safe="true"
                         type="button"
@@ -205,11 +205,11 @@ exports[`Toolbar should render with custom label content 1`] = `
                             fill="currentColor"
                             height="1em"
                             role="img"
-                            viewBox="0 0 352 512"
+                            viewBox="0 0 20 20"
                             width="1em"
                           >
                             <path
-                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                              d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                             />
                           </svg>
                         </span>
@@ -226,7 +226,7 @@ exports[`Toolbar should render with custom label content 1`] = `
                 aria-label="Close label group"
                 aria-labelledby="remove_group_generated-id generated-id"
                 class="pf-v6-c-button pf-m-plain pf-m-small"
-                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-id="OUIA-Generated-Button-plain-:rd:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 id="remove_group_generated-id"
@@ -241,11 +241,11 @@ exports[`Toolbar should render with custom label content 1`] = `
                     fill="currentColor"
                     height="1em"
                     role="img"
-                    viewBox="0 0 352 512"
+                    viewBox="0 0 20 20"
                     width="1em"
                   >
                     <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
                     />
                   </svg>
                 </span>
@@ -267,7 +267,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -284,7 +284,7 @@ exports[`Toolbar should render with custom label content 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-link pf-m-inline"
-            data-ouia-component-id="OUIA-Generated-Button-link-2"
+            data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/Tooltip/Tooltip.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { TooltipContent } from './TooltipContent';
 import { TooltipArrow } from './TooltipArrow';
 import { KeyTypes } from '../../helpers/constants';
+import { useSSRSafeId } from '../../helpers';
 import tooltipMaxWidth from '@patternfly/react-tokens/dist/esm/c_tooltip_MaxWidth';
 import { Popper } from '../../helpers/Popper/Popper';
 
@@ -136,9 +137,6 @@ export interface TooltipProps extends Omit<React.HTMLProps<HTMLDivElement>, 'con
   animationDuration?: number;
 }
 
-// id for associating trigger with the content aria-describedby or aria-labelledby
-let pfTooltipIdCounter = 1;
-
 export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   content: bodyContent,
   position = 'top',
@@ -157,7 +155,7 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   aria = 'describedby',
   // For every initial starting position, there are 3 escape positions
   flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'],
-  id = `pf-tooltip-${pfTooltipIdCounter++}`,
+  id: idProp,
   children,
   animationDuration = 300,
   triggerRef,
@@ -165,6 +163,8 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
   onTooltipHidden = () => {},
   ...rest
 }: TooltipProps) => {
+  const generatedId = useSSRSafeId('pf-tooltip-');
+  const id = idProp ?? generatedId;
   // could make this a prop in the future (true | false | 'toggle')
   const hideOnClick = true;
   const triggerOnMouseenter = trigger.includes('mouseenter');
@@ -210,7 +210,10 @@ export const Tooltip: React.FunctionComponent<TooltipProps> = ({
     if (!existingAria) {
       return;
     }
-    const newAria = existingAria.replace(new RegExp(`\\b${id}\\b`, 'g'), '').trim();
+    const newAria = existingAria
+      .split(/\s+/)
+      .filter((token) => token !== id)
+      .join(' ');
     if (newAria) {
       element.setAttribute(attributeName, newAria);
     } else {

package/src/components/TreeView/TreeView.tsx

@@ -35,6 +35,10 @@ export interface TreeViewDataItem {
   name: React.ReactNode;
   /** Title of a tree view item. Only used in compact presentations. */
   title?: React.ReactNode;
+  /** Flag indicating if the tree view item is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the tree view item toggle is disabled. */
+  isToggleDisabled?: boolean;
 }
 
 /** The main tree view component. */
@@ -158,6 +162,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
           id={item.id}
           isExpanded={allExpanded}
           isSelectable={hasSelectableNodes}
+          isDisabled={item.isDisabled}
+          isToggleDisabled={item.isToggleDisabled}
           defaultExpanded={item.defaultExpanded !== undefined ? item.defaultExpanded : defaultAllExpanded}
           onSelect={onSelect}
           onCheck={onCheck}