@patternfly/react-core 6.5.0-prerelease.3 → 6.5.0-prerelease.30

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

@@ -5,7 +5,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-14"
+    data-ouia-component-id="OUIA-Generated-Tabs-19"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -122,7 +122,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-13"
+    data-ouia-component-id="OUIA-Generated-Tabs-18"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -281,7 +281,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     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-24"
+    data-ouia-component-id="OUIA-Generated-Tabs-29"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -398,7 +398,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     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-11"
+    data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -605,7 +605,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-15"
+    data-ouia-component-id="OUIA-Generated-Tabs-20"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -722,7 +722,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-6"
+    data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -881,7 +881,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-16"
+    data-ouia-component-id="OUIA-Generated-Tabs-21"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -967,7 +967,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-17"
+      data-ouia-component-id="OUIA-Generated-Tabs-22"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1110,7 +1110,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-18"
+    data-ouia-component-id="OUIA-Generated-Tabs-23"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1228,7 +1228,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     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-25"
+    data-ouia-component-id="OUIA-Generated-Tabs-30"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1345,7 +1345,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-19"
+    data-ouia-component-id="OUIA-Generated-Tabs-24"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1472,7 +1472,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-9"
+    data-ouia-component-id="OUIA-Generated-Tabs-14"
     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;"
@@ -1630,7 +1630,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-10"
+    data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

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

@@ -189,6 +189,14 @@ Subtabs can also link to nav elements.
 
 ```
 
+### Tabs used for site navigation
+
+Site navigation tabs
+
+```ts file="./TabsSiteNav.tsx"
+
+```
+
 ### With separate content
 
 If a `<TabContent>` component is defined outside of a `<Tabs>` component, use the `tabContentRef` and `tabContentId` properties. The `hidden` property is used on `TabContent` to set the initial visible content.

package/src/components/Tabs/examples/TabsSiteNav.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+
+export const TabsSiteNav: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  // Toggle currently active tab
+  const handleTabClick = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    tabIndex: string | number
+  ) => {
+    setActiveTabKey(tabIndex);
+  };
+  return (
+    <Tabs
+      activeKey={activeTabKey}
+      onSelect={handleTabClick}
+      isNav={true}
+      aria-label="Site navigation with nav styling example"
+    >
+      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users" aria-label="Nav element content users">
+        Users
+      </Tab>
+      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+        Containers
+      </Tab>
+      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href="#database">
+        Database
+      </Tab>
+      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href="#disabled">
+        Disabled
+      </Tab>
+      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href="#aria-disabled">
+        ARIA Disabled
+      </Tab>
+      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href="#network">
+        Network
+      </Tab>
+    </Tabs>
+  );
+};

package/src/components/Toolbar/Toolbar.tsx

@@ -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';
@@ -143,6 +145,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       isStatic,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +170,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,

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/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}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -46,6 +46,10 @@ export interface TreeViewListItemProps {
    * children.
    */
   isSelectable?: boolean;
+  /** Flag indicating if the tree view item is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the tree view item toggle is disabled. */
+  isToggleDisabled?: boolean;
   /** Data structure of tree view item. */
   itemData?: TreeViewDataItem;
   /** Internal content of a tree view item. */
@@ -81,6 +85,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   title,
   id,
   isExpanded,
+  isDisabled = false,
+  isToggleDisabled = false,
   defaultExpanded = false,
   children = null,
   onSelect,
@@ -125,12 +131,13 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   }
 
   const ToggleComponent = hasCheckbox || isSelectable ? 'button' : 'span';
+  const hasDisabledToggleClass = isToggleDisabled || (Component === 'button' && isDisabled);
 
   const renderToggle = (randomId: string) => (
     <ToggleComponent
-      className={css(styles.treeViewNodeToggle)}
+      className={css(styles.treeViewNodeToggle, hasDisabledToggleClass && styles.modifiers.disabled)}
       onClick={(evt: React.MouseEvent) => {
-        if (isSelectable || hasCheckbox) {
+        if (!isToggleDisabled && (isSelectable || hasCheckbox)) {
           if (internalIsExpanded) {
             onCollapse && onCollapse(evt, itemData, parentItem);
           } else {
@@ -138,12 +145,12 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
           }
           setIsExpanded(!internalIsExpanded);
         }
-        if (isSelectable) {
+        if (!isToggleDisabled && isSelectable) {
           evt.stopPropagation();
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
-      {...(ToggleComponent === 'button' && { type: 'button' })}
+      {...(ToggleComponent === 'button' && { disabled: isToggleDisabled, type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
@@ -162,6 +169,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         ref={(elem) => {
           elem && (elem.indeterminate = checkProps.checked === null);
         }}
+        disabled={isDisabled || checkProps.disabled}
         {...checkProps}
         checked={isCheckboxChecked}
         id={randomId}
@@ -180,7 +188,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button" disabled={isDisabled}>
             {name}
           </button>
         ) : (
@@ -220,6 +228,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       })
   );
 
+  const isFullyDisabled =
+    (Component === 'button' && isDisabled) || (Component !== 'button' && isDisabled && isToggleDisabled);
+
   return (
     <li
       id={id}
@@ -229,16 +240,21 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
       {...(hasCheckbox && { 'aria-checked': isCheckboxChecked })}
       {...(!hasCheckbox && { 'aria-selected': isSelected })}
+      {...(isFullyDisabled && { 'aria-disabled': true })}
     >
       <div className={css(styles.treeViewContent)}>
         <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
           {(randomId) => (
             <Component
-              className={css(styles.treeViewNode, isSelected && styles.modifiers.current)}
+              className={css(
+                styles.treeViewNode,
+                isSelected && styles.modifiers.current,
+                isDisabled && styles.modifiers.disabled
+              )}
               onClick={(evt: React.MouseEvent) => {
                 if (!hasCheckbox) {
-                  onSelect && onSelect(evt, itemData, parentItem);
-                  if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
+                  !isDisabled && onSelect && onSelect(evt, itemData, parentItem);
+                  if (!isDisabled && !isSelectable && children && evt.isDefaultPrevented() !== true) {
                     if (internalIsExpanded) {
                       onCollapse && onCollapse(evt, itemData, parentItem);
                     } else {
@@ -250,7 +266,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
               }}
               {...(hasCheckbox && { htmlFor: randomId })}
               {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
-              {...(Component === 'button' && { type: 'button' })}
+              {...(Component === 'button' && { type: 'button', disabled: isDisabled })}
             >
               <span className={css(styles.treeViewNodeContainer)}>
                 {children && renderToggle(randomId)}
@@ -297,6 +313,8 @@ export const TreeViewListItem = memo(TreeViewListItemBase, (prevProps, nextProps
     prevProps.id !== nextProps.id ||
     prevProps.isExpanded !== nextProps.isExpanded ||
     prevProps.defaultExpanded !== nextProps.defaultExpanded ||
+    prevProps.isDisabled !== nextProps.isDisabled ||
+    prevProps.isToggleDisabled !== nextProps.isToggleDisabled ||
     prevProps.onSelect !== nextProps.onSelect ||
     prevProps.onCheck !== nextProps.onCheck ||
     prevProps.onExpand !== nextProps.onExpand ||

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

@@ -415,6 +415,249 @@ test(`Does not render ${styles.treeViewNode} element with ${styles.modifiers.cur
   expect(treeViewNode).not.toHaveClass(styles.modifiers.current);
 });
 
+// Assisted by Cursor AI
+describe('isDisabled prop', () => {
+  const user = userEvent.setup();
+  const onSelectMock = jest.fn();
+  const onExpandMock = jest.fn();
+  const onCollapseMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test(`Renders button with disabled attribute and ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+    render(<TreeViewListItem isDisabled {...requiredProps} />);
+
+    const button = screen.getByRole('button', { name: requiredProps.name });
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Does not render button with disabled attribute when isDisabled is false', () => {
+    render(<TreeViewListItem isDisabled={false} {...requiredProps} />);
+
+    expect(screen.getByRole('button', { name: requiredProps.name })).not.toBeDisabled();
+  });
+
+  test('Does not call onSelect when isDisabled is true', async () => {
+    render(<TreeViewListItem isDisabled onSelect={onSelectMock} {...requiredProps} />);
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onSelectMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onExpand when isDisabled is true and item is collapsed', async () => {
+    render(
+      <TreeViewListItem isDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isDisabled is true and item is expanded', async () => {
+    render(
+      <TreeViewListItem isDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test(`Renders toggle with ${styles.modifiers.disabled} class when isDisabled is true for default TreeViewListItem`, () => {
+    render(
+      <TreeViewListItem isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled is true for default TreeViewListItem', () => {
+    render(<TreeViewListItem isDisabled {...requiredProps} />);
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled and isToggleDisabled are true and isSelectable is true', () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled and isToggleDisabled are true and hasCheckbox is true', () => {
+    render(
+      <TreeViewListItem hasCheckbox isDisabled isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Does not render treeitem with aria-disabled when isDisabled is true, isToggleDisabled is false, and isSelectable is true', () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).not.toHaveAttribute('aria-disabled');
+  });
+
+  test('Does not render treeitem with aria-disabled when isDisabled is false', () => {
+    render(<TreeViewListItem isDisabled={false} {...requiredProps} />);
+
+    expect(screen.getByRole('treeitem')).not.toHaveAttribute('aria-disabled');
+  });
+});
+
+// Assisted by Cursor AI
+describe('isToggleDisabled prop', () => {
+  const user = userEvent.setup();
+  const onExpandMock = jest.fn();
+  const onCollapseMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test(`Renders toggle button with disabled attribute and ${styles.modifiers.disabled} class when isToggleDisabled is true and hasCheckbox is passed`, () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Renders toggle button with disabled attribute and ${styles.modifiers.disabled} class when isToggleDisabled is true and isSelectable is passed`, () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Does not render toggle span with disabled attribute when isToggleDisabled is true (toggle is span by default)', () => {
+    render(
+      <TreeViewListItem isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle?.tagName).toBe('SPAN');
+    expect(toggle).not.toHaveAttribute('disabled');
+  });
+
+  test('Does not call onExpand when isToggleDisabled is true and hasCheckbox is passed', async () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isToggleDisabled is true and hasCheckbox is passed', async () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onExpand when isToggleDisabled is true and isSelectable is passed', async () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isToggleDisabled is true and isSelectable is passed', async () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test(`Renders toggle span with ${styles.modifiers.disabled} class when isDisabled is true for default TreeViewListItem`, () => {
+    render(
+      <TreeViewListItem isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Does not render toggle with ${styles.modifiers.disabled} class when isDisabled is true and hasCheckbox is true`, () => {
+    render(
+      <TreeViewListItem hasCheckbox isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    expect(toggle).not.toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Does not render toggle with ${styles.modifiers.disabled} class when isDisabled is true and isSelectable is true`, () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).not.toHaveClass(styles.modifiers.disabled);
+  });
+});
+
 describe('Callback props', () => {
   const user = userEvent.setup();
   const compareItemsMock = jest.fn();

package/src/components/Truncate/Truncate.tsx

@@ -4,6 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
 import { getReferenceElement } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { debounce } from '../../helpers/util';
 
 export enum TruncatePosition {
   start = 'start',
@@ -130,12 +131,12 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
       const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
       const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
 
-      const handleResize = () => {
+      const debouncedHandleResize = debounce(() => {
         const parentWidth = getActualWidth(parentElement);
         setIsTruncated(textWidth >= parentWidth);
-      };
+      }, 500);
 
-      const observer = getResizeObserver(parentElement, handleResize);
+      const observer = getResizeObserver(parentElement, debouncedHandleResize);
 
       return () => {
         observer();
@@ -147,7 +148,7 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
     if (shouldRenderByMaxChars) {
       setIsTruncated(content.length > maxCharsDisplayed);
     }
-  }, [shouldRenderByMaxChars]);
+  }, [shouldRenderByMaxChars, content.length, maxCharsDisplayed]);
 
   useEffect(() => {
     setShouldRenderByMaxChars(maxCharsDisplayed > 0);