Make ActionGroup honor disabledKeys when collapsed (#2463)

Co-authored-by: Daniel Lu <[email protected]>

Author: solimant

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -456,6 +456,7 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
       </SlotProvider>
       <Menu
         items={items}
+        disabledKeys={state.disabledKeys}
         selectionMode={state.selectionManager.selectionMode}
         selectedKeys={state.selectionManager.selectedKeys}
         disallowEmptySelection={state.selectionManager.disallowEmptySelection}

packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx

@@ -313,6 +313,17 @@ storiesOf('ActionGroup', module)
       </div>
     )
   )
+  .add(
+    'overflowMode: collapse, disabledKeys',
+    () => (
+      <div style={{padding: '10px', resize: 'horizontal', overflow: 'auto', width: 250, backgroundColor: 'var(--spectrum-global-color-gray-50)'}}>
+        {renderCollapsible({disabledKeys: ['edit', 'duplicate']})}
+        {renderCollapsible({density: 'compact', disabledKeys: ['edit', 'duplicate']})}
+        {renderCollapsible({density: 'compact', disabledKeys: ['edit', 'duplicate'], isJustified: true})}
+        {renderCollapsible({disabledKeys: ['edit', 'duplicate'], isQuiet: true})}
+      </div>
+    )
+  )
   .add(
     'buttonLabelBehavior: hide',
     () => (

packages/@react-spectrum/actiongroup/test/ActionGroup.test.js

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {act, fireEvent, render, within} from '@testing-library/react';
+import {act, fireEvent, render, screen, within} from '@testing-library/react';
 import {ActionGroup} from '../';
 import {Button} from '@react-spectrum/button';
 import {Dialog, DialogTrigger} from '@react-spectrum/dialog';
@@ -892,6 +892,54 @@ describe('ActionGroup', function () {
       expect(buttons[1]).toHaveAttribute('aria-haspopup', 'true');
       expect(buttons[1]).toBeDisabled();
     });
+
+    it('menu items should be disabled for items listed in disabledKeys', function () {
+      const handleOnAction = jest.fn();
+
+      render(
+        <Provider theme={theme}>
+          <ActionGroup overflowMode="collapse" onAction={handleOnAction} disabledKeys={['two', 'four']}>
+            <Item key="one">One</Item>
+            <Item key="two">Two</Item>
+            <Item key="three">Three</Item>
+            <Item key="four">Four</Item>
+          </ActionGroup>
+        </Provider>
+      );
+
+      const actionGroup = screen.getByRole('toolbar');
+      expect(within(actionGroup).getAllByRole('button')).toHaveLength(2);
+      expect(within(actionGroup).getByRole('button', {name: 'One'})).toBeVisible();
+
+      const moreButton = within(actionGroup).getByRole('button', {name: '…'});
+      expect(moreButton).toBeVisible();
+
+      triggerPress(moreButton);
+
+      const menu = screen.getByRole('menu');
+      expect(within(menu).getAllByRole('menuitem')).toHaveLength(3);
+
+      const itemTwo = within(menu).getByRole('menuitem', {name: 'Two'});
+      expect(itemTwo).toBeVisible();
+      expect(itemTwo).toHaveAttribute('aria-disabled', 'true');
+
+      const itemThree = within(menu).getByRole('menuitem', {name: 'Three'});
+      expect(itemThree).toBeVisible();
+      expect(itemThree).toHaveAttribute('aria-disabled', 'false');
+
+      const itemFour = within(menu).getByRole('menuitem', {name: 'Four'});
+      expect(itemFour).toBeVisible();
+      expect(itemFour).toHaveAttribute('aria-disabled', 'true');
+
+      triggerPress(itemTwo);
+      expect(handleOnAction).not.toHaveBeenCalled();
+
+      triggerPress(itemFour);
+      expect(handleOnAction).not.toHaveBeenCalled();
+
+      triggerPress(itemThree);
+      expect(handleOnAction).toHaveBeenCalled();
+    });
   });
 
   describe('buttonLabelBehavior', function () {