chore: update disabledBehavior style for S2 TreeView (adobe#9472)

* chore: update disabledBehavior style in S2 TreeView

* add chromatic story

* fix isDisabled case

* add tests

* fix tests

Author: yihuiliao

packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx

@@ -37,7 +37,6 @@ function TreeExample(props: TreeViewProps<any>): ReactElement {
         disabledKeys={['projects-1']}
         aria-label="test static tree"
         expandedKeys={['projects']}>
-
         <TreeViewItem id="Photos" textValue="Photos">
           <TreeViewItemContent>
             <Text>Photos</Text>
@@ -152,6 +151,15 @@ export const TreeSelection: StoryObj<typeof TreeExample> = {
   }
 };
 
+export const TreeDisableSelection: StoryObj<typeof TreeExample> = {
+  ...TreeStatic,
+  args: {
+    selectionMode: 'multiple',
+    defaultSelectedKeys: ['projects-2', 'projects-3'],
+    disabledBehavior: 'selection'
+  }
+};
+
 interface TreeViewItemType {
   id: string,
   name: string,

packages/@react-spectrum/s2/src/TreeView.tsx

@@ -217,7 +217,11 @@ const treeCheckbox = style({
   gridArea: 'checkbox',
   marginStart: 12,
   marginEnd: 0,
-  paddingEnd: 0
+  paddingEnd: 0,
+  visibility: {
+    default: 'visible',
+    isDisabled: 'hidden'
+  }
 });
 
 const treeIcon = style({
@@ -302,7 +306,7 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
           <div className={treeCellGrid({isDisabled, isNextSelected, isSelected, isFirst, isNextFocused})}>
             {selectionMode !== 'none' && selectionBehavior === 'toggle' && (
               // TODO: add transition?
-              <div className={treeCheckbox}>
+              <div className={treeCheckbox({isDisabled: isDisabled || !state.selectionManager.canSelectItem(id) || state.disabledKeys.has(id)})}>
                 <Checkbox slot="selection" />
               </div>
             )}
@@ -319,8 +323,8 @@ export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode
                   render: centerBaseline({slot: 'icon', styles: treeIcon}),
                   styles: style({size: fontRelative(20), flexShrink: 0})
                 }],
-                [ActionButtonGroupContext, {styles: treeActions}],
-                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true}]
+                [ActionButtonGroupContext, {styles: treeActions, isDisabled}],
+                [ActionMenuContext, {styles: treeActionMenu, isQuiet: true, isDisabled}]
               ]}>
               {typeof children === 'string' ? <Text>{children}</Text> : children}
             </Provider>