chore: remove unstable from column menus (#8248)

Author: snowystinger

packages/@react-aria/test-utils/src/table.ts

@@ -25,6 +25,12 @@ interface TableToggleSortOpts {
    */
   interactionType?: UserOpts['interactionType']
 }
+interface TableColumnHeaderActionOpts extends TableToggleSortOpts {
+  /**
+   * The index of the column header action to trigger.
+   */
+  action: number
+}
 interface TableRowActionOpts extends GridRowActionOpts {}
 
 export class TableTester {
@@ -184,6 +190,92 @@ export class TableTester {
     }
   }
 
+  /**
+   * Triggers an action for the specified table column menu. Defaults to using the interaction type set on the table tester.
+   */
+  async triggerColumnHeaderAction(opts: TableColumnHeaderActionOpts): Promise<void> {
+    let {
+      column,
+      interactionType = this._interactionType,
+      action
+    } = opts;
+
+    let columnheader;
+    if (typeof column === 'number') {
+      columnheader = this.columns[column];
+    } else if (typeof column === 'string') {
+      columnheader = within(this.rowGroups[0]).getByText(column);
+      while (columnheader && !/columnheader/.test(columnheader.getAttribute('role'))) {
+        columnheader = columnheader.parentElement;
+      }
+    } else {
+      columnheader = column;
+    }
+
+    let menuButton = within(columnheader).queryByRole('button');
+    if (menuButton) {
+      // TODO: Focus management is all kinda of messed up if I just use .focus and Space to open the sort menu. Seems like
+      // the focused key doesn't get properly set to the desired column header. Have to do this strange flow where I focus the
+      // column header except if the active element is already the menu button within the column header
+      if (interactionType === 'keyboard' && document.activeElement !== menuButton) {
+        await pressElement(this.user, columnheader, interactionType);
+      } else {
+        await pressElement(this.user, menuButton, interactionType);
+      }
+
+      await waitFor(() => {
+        if (menuButton.getAttribute('aria-controls') == null) {
+          throw new Error('No aria-controls found on table column dropdown menu trigger element.');
+        } else {
+          return true;
+        }
+      });
+
+      let menuId = menuButton.getAttribute('aria-controls');
+      await waitFor(() => {
+        if (!menuId || document.getElementById(menuId) == null) {
+          throw new Error(`Table column header menu with id of ${menuId} not found in document.`);
+        } else {
+          return true;
+        }
+      });
+
+      if (menuId) {
+        let menu = document.getElementById(menuId);
+        if (menu) {
+          await pressElement(this.user, within(menu).getAllByRole('menuitem')[action], interactionType);
+
+          await waitFor(() => {
+            if (document.contains(menu)) {
+              throw new Error('Expected table column menu listbox to not be in the document after selecting an option');
+            } else {
+              return true;
+            }
+          });
+        }
+      }
+
+      // Handle cases where the table may transition in response to the row selection/deselection
+      if (!this._advanceTimer) {
+        throw new Error('No advanceTimers provided for table transition.');
+      }
+
+      await act(async () => {
+        await this._advanceTimer?.(200);
+      });
+
+      await waitFor(() => {
+        if (document.activeElement !== menuButton) {
+          throw new Error(`Expected the document.activeElement to be the table column menu button but got ${document.activeElement}`);
+        } else {
+          return true;
+        }
+      });
+    } else {
+      throw new Error('No menu button found on table column header.');
+    }
+  }
+
   /**
    * Triggers the action for the specified table row. Defaults to using the interaction type set on the table tester.
    */

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

@@ -520,7 +520,7 @@ export interface ColumnProps extends RACColumnProps {
   /** The content to render as the column header. */
   children: ReactNode,
   /** Menu fragment to be rendered inside the column header's menu. */
-  UNSTABLE_menuItems?: ReactNode
+  menuItems?: ReactNode
 }
 
 /**
@@ -530,7 +530,7 @@ export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef
   let {isQuiet} = useContext(InternalTableContext);
   let {allowsResizing, children, align = 'start'} = props;
   let domRef = useDOMRef(ref);
-  let isMenu = allowsResizing || !!props.UNSTABLE_menuItems;
+  let isMenu = allowsResizing || !!props.menuItems;
 
 
   return (
@@ -543,7 +543,7 @@ export const Column = forwardRef(function Column(props: ColumnProps, ref: DOMRef
           {isFocusVisible && <CellFocusRing />}
           {isMenu ?
             (
-              <ColumnWithMenu isColumnResizable={allowsResizing} menuItems={props.UNSTABLE_menuItems} allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} align={align}>
+              <ColumnWithMenu isColumnResizable={allowsResizing} menuItems={props.menuItems} allowsSorting={allowsSorting} sortDirection={sortDirection} sort={sort} startResize={startResize} align={align}>
                 {children}
               </ColumnWithMenu>
             ) : (

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

@@ -194,7 +194,7 @@ const DynamicTableWithCustomMenus = (args: any) => (
           width={150}
           minWidth={150}
           isRowHeader={column.isRowHeader}
-          UNSTABLE_menuItems={
+          menuItems={
             <>
               <MenuSection>
                 <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem>
@@ -247,7 +247,7 @@ const DynamicSortableTableWithCustomMenus = (args: any) => {
             width={150}
             minWidth={150}
             isRowHeader={column.isRowHeader}
-            UNSTABLE_menuItems={
+            menuItems={
               <>
                 <MenuSection>
                   <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem>

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

@@ -0,0 +1,111 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+jest.mock('@react-aria/live-announcer');
+jest.mock('@react-aria/utils/src/scrollIntoView');
+import {act, render} from '@react-spectrum/test-utils-internal';
+import {
+  Cell,
+  Column,
+  MenuItem,
+  MenuSection,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+  Text
+} from '../src';
+import Filter from '../s2wf-icons/S2_Icon_Filter_20_N.svg';
+import React from 'react';
+import {User} from '@react-aria/test-utils';
+
+// @ts-ignore
+window.getComputedStyle = (el) => el.style;
+
+describe('TableView', () => {
+  let offsetWidth, offsetHeight;
+  let testUtilUser = new User({advanceTimer: jest.advanceTimersByTime});
+  beforeAll(function () {
+    offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 400);
+    offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 200);
+    jest.useFakeTimers();
+  });
+
+  afterAll(function () {
+    offsetWidth.mockReset();
+    offsetHeight.mockReset();
+  });
+
+  afterEach(() => {
+    act(() => {jest.runAllTimers();});
+  });
+
+  let columns = [
+    {name: 'Foo', id: 'foo', isRowHeader: true},
+    {name: 'Bar', id: 'bar'},
+    {name: 'Baz', id: 'baz'},
+    {name: 'Yah', id: 'yah'}
+  ];
+
+  let items = [
+    {id: 1, foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1', yah: 'Yah long long long 1'},
+    {id: 2, foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2', yah: 'Yah long long long 2'},
+    {id: 3, foo: 'Foo 3', bar: 'Bar 3', baz: 'Baz 3', yah: 'Yah long long long 3'},
+    {id: 4, foo: 'Foo 4', bar: 'Bar 4', baz: 'Baz 4', yah: 'Yah long long long 4'},
+    {id: 5, foo: 'Foo 5', bar: 'Bar 5', baz: 'Baz 5', yah: 'Yah long long long 5'},
+    {id: 6, foo: 'Foo 6', bar: 'Bar 6', baz: 'Baz 6', yah: 'Yah long long long 6'},
+    {id: 7, foo: 'Foo 7', bar: 'Bar 7', baz: 'Baz 7', yah: 'Yah long long long 7'},
+    {id: 8, foo: 'Foo 8', bar: 'Bar 8', baz: 'Baz 8', yah: 'Yah long long long 8'},
+    {id: 9, foo: 'Foo 9', bar: 'Bar 9', baz: 'Baz 9', yah: 'Yah long long long 9'},
+    {id: 10, foo: 'Foo 10', bar: 'Bar 10', baz: 'Baz 10', yah: 'Yah long long long 10'}
+  ];
+
+  it('should render custom menus', async () => {
+    let onAction = jest.fn();
+    let {getByRole} = render(
+      <TableView aria-label="Dynamic table">
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column
+              width={150}
+              minWidth={150}
+              isRowHeader={column.isRowHeader}
+              menuItems={
+                <>
+                  <MenuSection>
+                    <MenuItem onAction={onAction}><Filter /><Text slot="label">Filter</Text></MenuItem>
+                  </MenuSection>
+                  <MenuSection>
+                    <MenuItem><Text slot="label">Hide column</Text></MenuItem>
+                    <MenuItem><Text slot="label">Manage columns</Text></MenuItem>
+                  </MenuSection>
+                </>
+              }>{column.name}</Column>
+          )}
+        </TableHeader>
+        <TableBody items={items}>
+          {item => (
+            <Row id={item.id} columns={columns}>
+              {(column) => {
+                return <Cell>{item[column.id]}</Cell>;
+              }}
+            </Row>
+          )}
+        </TableBody>
+      </TableView>
+    );
+
+    let tableTester = testUtilUser.createTester('Table', {root: getByRole('grid')});
+    await tableTester.triggerColumnHeaderAction({column: 1, action: 0, interactionType: 'keyboard'});
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+});