chore: Revert 9875 and move disabledBehavior example in TableView docs (adobe#9914)

* Revert "feat: default expand action for tableview and treeview (adobe#9875)"

This reverts commit bef549d.

* remove disabled expandable row from docs example

* move disabledBehavior example

Author: LFDanLu

packages/@react-spectrum/s2/stories/TableView.stories.tsx

@@ -49,8 +49,9 @@ import User from '../s2wf-icons/S2_Icon_User_20_N.svg';
 import {useTreeData} from 'react-stately/useTreeData';
 
 let onActionFunc = action('onAction');
-let noOnAction = undefined;
+let noOnAction = null;
 const onActionOptions = {onActionFunc, noOnAction};
+
 const events = ['onResizeStart', 'onResize', 'onResizeEnd', 'onSelectionChange', 'onSortChange'];
 
 const meta: Meta<typeof TableView> = {
@@ -62,7 +63,7 @@ const meta: Meta<typeof TableView> = {
   tags: ['autodocs'],
   args: {...getActionArgs(events)},
   argTypes: {
-    ...categorizeArgTypes('Events', ['onAction', 'onLoadMore', ...events]),
+    ...categorizeArgTypes('Events', ['onAction', 'onLoadMore', 'onResizeStart', 'onResize', 'onResizeEnd', 'onSelectionChange', 'onSortChange']),
     children: {table: {disable: true}},
     onAction: {
       options: Object.keys(onActionOptions), // An array of serializable values
@@ -1783,7 +1784,7 @@ export const TableWithNestedRows: StoryObj<typeof TableView> = {
             <Cell>5/22/1980</Cell>
           </Row>
         </Row>
-        <Row id="apps" isDisabled>
+        <Row id="apps">
           <Cell>Applications</Cell>
           <Cell>Folder</Cell>
           <Cell>4/7/2025</Cell>

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

@@ -45,9 +45,9 @@ import {useAsyncList} from 'react-stately/useAsyncList';
 import {useListData} from 'react-stately/useListData';
 
 let onActionFunc = action('onAction');
-let noOnAction = undefined;
+let noOnAction = null;
 const onActionOptions = {onActionFunc, noOnAction};
-const events = ['onSelectionChange'];
+const events = ['onSelectionChange', 'onAction'];
 
 const meta: Meta<typeof TreeView> = {
   component: TreeView,
@@ -57,7 +57,7 @@ const meta: Meta<typeof TreeView> = {
   tags: ['autodocs'],
   args: {...getActionArgs(events)},
   argTypes: {
-    ...categorizeArgTypes('Events', ['onAction', ...events]),
+    ...categorizeArgTypes('Events', events),
     children: {table: {disable: true}},
     onAction: {
       options: Object.keys(onActionOptions), // An array of serializable values
@@ -81,7 +81,7 @@ const TreeExampleStatic = (args: TreeViewProps<any>): ReactElement => (
   <div style={{width: '300px', resize: 'both', height: '320px', overflow: 'auto'}}>
     <TreeView
       {...args}
-      disabledKeys={['projects']}
+      disabledKeys={['projects-1']}
       aria-label="test static tree"
       onExpandedChange={action('onExpandedChange')}
       onSelectionChange={action('onSelectionChange')}>

packages/dev/s2-docs/pages/s2/TableView.mdx

@@ -14,14 +14,13 @@ export const description = 'Displays data in rows and columns, with row selectio
 
 <PageDescription>{docs.exports.TableView.description}</PageDescription>
 
-```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet', 'disabledBehavior']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name', disabledBehavior: 'selection'}} type="s2"
+```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'overflowMode', 'density', 'isQuiet']} initialProps={{'aria-label': 'Files', selectionMode: 'multiple', 'treeColumn': 'name'}} type="s2"
 "use client";
 import {TableView, TableHeader, Column, TableBody, Row, Cell} from '@react-spectrum/s2/TableView';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
 <TableView
   /* PROPS */
-  disabledKeys={['pacman', 'apps']}
   styles={style({width: 'full'})}>
   <TableHeader>
     <Column id="name" isRowHeader>Name</Column>
@@ -644,7 +643,7 @@ export default function EditableTable(props) {
 
 Use `selectionMode` to enable single or multiple selection, and `selectedKeys` (matching each row's `id`) to control the selected rows. Return an [ActionBar](ActionBar) from `renderActionBar` to handle bulk actions, and use `onAction` for row navigation. Disable rows with `isDisabled`. See the [selection guide](selection) for details.
 
-```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'disallowEmptySelection']} initialProps={{selectionMode: 'multiple'}} wide type="s2"
+```tsx render docs={docs.exports.TableView} links={docs.links} props={['selectionMode', 'disallowEmptySelection', 'disabledBehavior']} initialProps={{selectionMode: 'multiple', disabledBehavior: 'selection'}} wide type="s2"
 "use client";
 import {TableView, TableHeader, Column, TableBody, Row, Cell, type Selection} from '@react-spectrum/s2/TableView';
 import {ActionBar, ActionButton} from '@react-spectrum/s2/ActionBar';
@@ -975,4 +974,4 @@ function subscribe(fn) {
 
 ### EditableCell
 
-<PropTable component={docs.exports.EditableCell} links={docs.links} showDescription />
+<PropTable component={docs.exports.EditableCell} links={docs.links} showDescription />

packages/react-aria-components/src/Table.tsx

@@ -1377,7 +1377,6 @@ export const Row = /*#__PURE__*/ createBranchComponent(
       isFocusVisible: isFocusVisibleWithin,
       focusProps: focusWithinProps
     } = useFocusRing({within: true});
-
     let {hoverProps, isHovered} = useHover({
       isDisabled: !states.allowsSelection && !states.hasAction,
       onHoverStart: props.onHoverStart,

packages/react-aria-components/test/Tree.test.tsx

@@ -751,36 +751,6 @@ describe('Tree', () => {
       expect(onSelectionChange).toHaveBeenCalledTimes(0);
     });
 
-    it('multi select should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
-      let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'multiple', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
-      let row = getAllByRole('row')[1];
-      await user.hover(row);
-      expect(row).toHaveAttribute('data-hovered', 'true');
-
-      await user.click(row);
-      expect(row).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('single select should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
-      let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'single', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
-      let row = getAllByRole('row')[1];
-      await user.hover(row);
-      expect(row).toHaveAttribute('data-hovered', 'true');
-
-      await user.click(row);
-      expect(row).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('no selection should expand the row if anywhere on the row is clicked and there is no onAction provided', async () => {
-      let {getAllByRole} = render(<StaticTree treeProps={{defaultExpandedKeys: new Set([]), selectionMode: 'none', disabledBehavior: 'selection', disabledKeys: ['projects']}} />);
-      let row = getAllByRole('row')[1];
-      await user.hover(row);
-      expect(row).toHaveAttribute('data-hovered', 'true');
-
-      await user.click(row);
-      expect(row).toHaveAttribute('aria-expanded', 'true');
-    });
-
     it('should prevent Esc from clearing selection if escapeKeyBehavior is "none"', async () => {
       let {getAllByRole} = render(<StaticTree treeProps={{selectionMode: 'multiple', escapeKeyBehavior: 'none'}}  />);
 

…ct-aria-components/test/Treeble.test.tsx …act-aria-components/test/Treeble.test.jspackages/react-aria-components/test/Treeble.test.tsx renamed to packages/react-aria-components/test/Treeble.test.js packages/react-aria-components/test/Treeble.test.tsx renamed to packages/react-aria-components/test/Treeble.test.js

@@ -98,15 +98,8 @@ function Example(props) {
   );
 }
 
-interface ReorderableTreebleItem {
-  id: string,
-  title: string,
-  type: string,
-  date: string,
-  children?: ReorderableTreebleItem[]
-}
 function ReorderableTreeble(props) {
-  let tree = useTreeData<ReorderableTreebleItem>({
+  let tree = useTreeData({
     initialItems: [
       {id: '1', title: 'Documents', type: 'Directory', date: '10/20/2025', children: [
         {id: '2', title: 'Project', type: 'Directory', date: '8/2/2025', children: [
@@ -121,7 +114,7 @@ function ReorderableTreeble(props) {
     ]
   });
 
-  let {dragAndDropHooks} = useDragAndDrop<{value: ReorderableTreebleItem}>({
+  let {dragAndDropHooks} = useDragAndDrop({
     getItems: (keys, items) => items.map(item => ({'text/plain': item.value.title})),
     onMove(e) {
       if (e.target.dropPosition === 'before') {
@@ -246,7 +239,7 @@ describe('Treeble', () => {
     expect(tester.rowHeaders[3]).toHaveTextContent('Job Posting');
   });
 
-  it.each(['mouse', 'touch', 'keyboard'] as const)('should expand a row with %s', async (interactionType) => {
+  it.each(['mouse', 'touch', 'keyboard'])('should expand a row with %s', async (interactionType) => {
     let tree = render(<Example />);
     let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});
 
@@ -536,39 +529,6 @@ describe('Treeble', () => {
     expect(onSelectionChange).toHaveBeenLastCalledWith(new Set(['games', 'mario', 'tetris']));
   });
 
-  it('supports expansion on disabled items with no action in disabledBehavior="selection" multiple selection', async () => {
-    let tree = render(<Example disabledKeys={['apps']} selectionMode="multiple" disabledBehavior="selection" />);
-    let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});
-
-    await user.hover(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');
-
-    await user.click(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('supports expansion on disabled items with no action in disabledBehavior="selection" single selection', async () => {
-    let tree = render(<Example disabledKeys={['apps']} selectionMode="single" disabledBehavior="selection" />);
-    let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});
-
-    await user.hover(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');
-
-    await user.click(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('supports expansion on disabled items with no action in disabledBehavior="selection" no selection', async () => {
-    let tree = render(<Example disabledKeys={['apps']} selectionMode="none" disabledBehavior="selection" />);
-    let tester = utils.createTester('Table', {root: tree.getByTestId('treeble')});
-
-    await user.hover(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('data-hovered', 'true');
-
-    await user.click(tester.rows[1]);
-    expect(tester.rows[1]).toHaveAttribute('aria-expanded', 'true');
-  });
-
   it('should support drag and drop', async () => {
     let tree = render(<ReorderableTreeble />);
     let tester = utils.createTester('Table', {root: tree.getByRole('treegrid')});

packages/react-aria/src/grid/useGridRow.ts

@@ -12,7 +12,7 @@
 
 import {chain} from '../utils/chain';
 
-import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 import {IGridCollection as GridCollection, GridNode} from 'react-stately/private/grid/GridCollection';
 import {gridMap} from './utils';
 import {GridState} from 'react-stately/private/grid/useGridState';
@@ -55,34 +55,6 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
 
   let {actions, shouldSelectOnPressUp: gridShouldSelectOnPressUp} = gridMap.get(state)!;
   let onRowAction = actions.onRowAction ? () => actions.onRowAction?.(node.key) : onAction;
-
-  // Mirror useGridListItem: when no row action is provided, expandable tree-table rows use toggle as the
-  // primary action if selection is off or the row is selection-disabled (disabledKeys / selection behavior).
-  if (
-    node != null &&
-    'treeColumn' in state &&
-    state.treeColumn != null &&
-    // I'd prefer if this was up in useTableRow, but onAction is a deprecated prop
-    // and maybe we'll move the expandable rows down into useGridRow eventually
-    'toggleKey' in state &&
-    typeof state.toggleKey === 'function' &&
-    actions.onRowAction == null &&
-    onAction == null
-  ) {
-    // adds the toggleKey type so it's not unknown below
-    let tableState = state as typeof state & {toggleKey: (key: Key) => void};
-    let children = tableState.collection.getChildren?.(node.key);
-    let hasChildRows = [...(children ?? [])].length > 1;
-    let hasLink = state.selectionManager.isLink(node.key);
-    if (
-      !hasLink &&
-      hasChildRows &&
-      ((state.disabledKeys.has(node.key) || node.props?.isDisabled) || 
-        state.selectionManager.selectionMode === 'none')) {
-      onRowAction = () => tableState.toggleKey(node.key);
-    }
-  }
-
   let {itemProps, ...states} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,

packages/react-aria/src/gridlist/useGridListItem.ts

@@ -102,12 +102,7 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     let children = state.collection.getChildren?.(node.key);
     hasChildRows = hasChildRows || [...(children ?? [])].length > 1;
 
-    if (
-      onAction == null &&
-      !hasLink && 
-      hasChildRows &&
-      ((state.disabledKeys.has(node.key) || node.props?.isDisabled) ||
-        state.selectionManager.selectionMode === 'none')) {
+    if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) {
       onAction = () => state.toggleKey(node.key);
     }