chore: focus return demo - ⚠️ DO NOT MERGE! ⚠️

docs/migration.md

@@ -119,6 +119,9 @@ consider additional positioning prop support on a case-by-case basis.
   - The `v8` version of `@zendeskgarden/react-dropdowns` is no longer maintained and is
     renamed to `@zendeskgarden/react-dropdowns.legacy` in `v9`
 - `Menu`: value `auto` is no longer valid for the `fallbackPlacements` prop.
+- `Menu`: new `restoreFocus` prop (default: `true`) returns focus to trigger
+  after menu interaction. To keep the dropdown open on selection,
+  set `restoreFocus={false}` and manage focus manually.
 - Removed `label` prop from `OptGroup`. Use `legend` instead.
 
 #### @zendeskgarden/react-forms

packages/dropdowns/demo/stories/MenuStory.tsx

@@ -12,6 +12,7 @@ import CartIcon from '@zendeskgarden/svg-icons/src/16/shopping-cart-stroke.svg';
 import { Grid } from '@zendeskgarden/react-grid';
 import { IMenuProps, Item, ItemGroup, Separator, Menu } from '@zendeskgarden/react-dropdowns';
 import { IItem, Items } from './types';
+import { Modal } from '@zendeskgarden/react-modals';
 
 const MenuItem = ({ icon, meta, ...item }: IItem) => {
   return (
@@ -27,12 +28,19 @@ interface IArgs extends IMenuProps {
 }
 
 export const MenuStory: StoryFn<IArgs> = ({ items, ...args }) => {
+  const [openModal, setOpenModal] = React.useState(false);
+
   return (
     <Grid>
       <Grid.Row justifyContent="center" style={{ height: 800 }}>
         <Grid.Col alignSelf="center" textAlign="center">
           <div style={{ display: 'inline-block', position: 'relative', width: 200 }}>
-            <Menu {...args}>
+            <Menu
+              {...args}
+              onChange={changes => {
+                changes.value && setOpenModal(true);
+              }}
+            >
               {items.map(item => {
                 if ('items' in item) {
                   return (
@@ -59,6 +67,13 @@ export const MenuStory: StoryFn<IArgs> = ({ items, ...args }) => {
             </Menu>
           </div>
         </Grid.Col>
+        {openModal && (
+          <Modal onClose={() => setOpenModal(false)}>
+            <Modal.Body>
+              <p>Modal content</p>
+            </Modal.Body>
+          </Modal>
+        )}
       </Grid.Row>
     </Grid>
   );

packages/dropdowns/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-combobox": "^2.0.0",
-    "@zendeskgarden/container-menu": "^0.4.0",
+    "@zendeskgarden/container-menu": "0.5.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.0.0-next.26",
     "@zendeskgarden/react-forms": "^9.0.0-next.26",

packages/dropdowns/src/elements/menu/Menu.spec.tsx

@@ -132,9 +132,9 @@ describe('Menu', () => {
     expect(item).toBeVisible();
   });
 
-  it('applies `defaultFocusedValue`', async () => {
-    const { getByTestId } = render(
-      <TestMenu defaultExpanded defaultFocusedValue="Cactus">
+  it('applies `defaultFocusedValue` after a keyboard event opens the menu', async () => {
+    const { getByTestId, getByRole } = render(
+      <TestMenu defaultFocusedValue="Cactus">
         <Item value="Flower" data-test-id="item-01">
           Flower
           <Item.Meta>Smooth</Item.Meta>
@@ -148,8 +148,22 @@ describe('Menu', () => {
     );
 
     await floating();
+    const trigger = getByRole('button');
+
+    // open menu with onClick
+    await user.click(trigger);
     const item = getByTestId('item-02');
+    // focus remains on trigger with mouseEvents
+    expect(trigger).toHaveFocus();
 
+    // close menu
+    await user.click(trigger);
+    expect(item).not.toBeVisible();
+
+    // open menu with keyboard
+    trigger.focus();
+    await user.keyboard(' ');
+    // focus is on the focused item associated with `defaultFocusedValue`
     expect(item).toHaveFocus();
   });
 
@@ -603,14 +617,15 @@ describe('Menu', () => {
     });
 
     it('calls onChange as expected', async () => {
-      const { getByTestId } = render(
+      const { getByRole, getByTestId } = render(
         <TestMenu isExpanded focusedValue="Cactus" onChange={handleChange}>
           <Item value="Flower" data-test-id="flower" />
           <Item value="Cactus" />
         </TestMenu>
       );
 
       await floating();
+      const trigger = getByRole('button');
       const item1 = getByTestId('flower');
 
       await act(async () => {
@@ -620,6 +635,7 @@ describe('Menu', () => {
       const changeTypes = handleChange.mock.calls.map(([change]) => change.type);
 
       expect(changeTypes).toMatchObject(['menuItem:mouseMove', 'menuItem:click']);
+      expect(trigger).toHaveFocus();
     });
 
     it('handles `focusedValue` and `isExpanded` as expected', async () => {