@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

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}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -1,10 +1,10 @@
 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';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
@@ -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,
@@ -107,6 +113,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const randomId = useSSRSafeId(isSelectable ? 'selectable-id' : 'checkbox-id');
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
@@ -125,12 +132,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,16 +146,16 @@ 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)}>
-        <AngleRightIcon />
+        <RhMicronsCaretDownIcon />
       </span>
     </ToggleComponent>
   );
@@ -162,6 +170,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 +189,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 +229,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       })
   );
 
+  const isFullyDisabled =
+    (Component === 'button' && isDisabled) || (Component !== 'button' && isDisabled && isToggleDisabled);
+
   return (
     <li
       id={id}
@@ -229,39 +241,40 @@ 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)}
-              onClick={(evt: React.MouseEvent) => {
-                if (!hasCheckbox) {
-                  onSelect && onSelect(evt, itemData, parentItem);
-                  if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
-                    if (internalIsExpanded) {
-                      onCollapse && onCollapse(evt, itemData, parentItem);
-                    } else {
-                      onExpand && onExpand(evt, itemData, parentItem);
-                    }
-                    setIsExpanded(!internalIsExpanded);
-                  }
-                }
-              }}
-              {...(hasCheckbox && { htmlFor: randomId })}
-              {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
-              {...(Component === 'button' && { type: 'button' })}
-            >
-              <span className={css(styles.treeViewNodeContainer)}>
-                {children && renderToggle(randomId)}
-                {hasCheckbox && renderCheck(randomId)}
-                {icon && iconRendered}
-                {renderNodeContent()}
-                {badgeRendered}
-              </span>
-            </Component>
+        <Component
+          className={css(
+            styles.treeViewNode,
+            isSelected && styles.modifiers.current,
+            isDisabled && styles.modifiers.disabled
           )}
-        </GenerateId>
+          onClick={(evt: React.MouseEvent) => {
+            if (!hasCheckbox) {
+              !isDisabled && onSelect && onSelect(evt, itemData, parentItem);
+              if (!isDisabled && !isSelectable && children && evt.isDefaultPrevented() !== true) {
+                if (internalIsExpanded) {
+                  onCollapse && onCollapse(evt, itemData, parentItem);
+                } else {
+                  onExpand && onExpand(evt, itemData, parentItem);
+                }
+                setIsExpanded(!internalIsExpanded);
+              }
+            }
+          }}
+          {...(hasCheckbox && { htmlFor: randomId })}
+          {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+          {...(Component === 'button' && { type: 'button', disabled: isDisabled })}
+        >
+          <span className={css(styles.treeViewNodeContainer)}>
+            {children && renderToggle(randomId)}
+            {hasCheckbox && renderCheck(randomId)}
+            {icon && iconRendered}
+            {renderNodeContent()}
+            {badgeRendered}
+          </span>
+        </Component>
         {action && <div className={css(styles.treeViewAction)}>{action}</div>}
       </div>
       {(internalIsExpanded || hasAnimations) && clonedChildren}
@@ -297,6 +310,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

@@ -359,8 +359,8 @@ test(`Renders ${styles.treeViewNode} element with for and id attributes when has
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id\d+/));
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id\d+/));
+  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id/));
 });
 
 test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable and children are passed`, () => {
@@ -372,7 +372,7 @@ test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id\d+/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id/));
 });
 
 test(`Does not render ${styles.treeViewNode} element with additional classes by default`, () => {
@@ -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/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -32,11 +32,11 @@ exports[`Matches snapshot with children 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 256 512"
+                viewBox="0 0 20 20"
                 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"
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                 />
               </svg>
             </span>