Adding defaultOpen and onOpenChange to ActionMenu (#2728)

* Adding defaultOpen and onOpenChange to ActionMenu

* adding tests to check isOpen and defaultOpen

* merging onChangeOpen and defaultOpen stories

Author: ktabors

packages/@react-spectrum/menu/src/ActionMenu.tsx

@@ -34,6 +34,8 @@ function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: Fo
   return (
     <MenuTrigger
       isOpen={props.isOpen}
+      defaultOpen={props.defaultOpen}
+      onOpenChange={props.onOpenChange}
       align={props.align}
       direction={props.direction}
       shouldFlip={props.shouldFlip}>

packages/@react-spectrum/menu/stories/ActionMenu.stories.tsx

@@ -133,6 +133,24 @@ Disabled.args = {isDisabled: true};
 export const AutoFocus = Template().bind({});
 AutoFocus.args = {autoFocus: true};
 
+export const DefaultOpen = Template().bind({});
+DefaultOpen.args = {onOpenChange: action('openChange'), defaultOpen: true};
+
+export const ControlledOpen = () => {
+  let [open, setOpen] = React.useState(false);
+
+  return (
+    <ActionMenu
+      isOpen={open}
+      onOpenChange={setOpen}
+      onAction={action('action')}>
+      <Item key="cut">Cut</Item>
+      <Item key="copy">Copy</Item>
+      <Item key="paste">Paste</Item>
+    </ActionMenu>
+  );
+};
+
 export const DirectionAlign = () => <DirectionAlignment />;
 
 export const WithTooltip = () => (

packages/@react-spectrum/menu/test/ActionMenu.test.js

@@ -23,13 +23,15 @@ let CLOSE_TIME = 350;
 
 describe('ActionMenu', function () {
   let onActionSpy = jest.fn();
+  let onOpenChange = jest.fn();
 
   beforeAll(function () {
     jest.useFakeTimers('legacy');
   });
 
   afterEach(() => {
     onActionSpy.mockClear();
+    onOpenChange.mockClear();
     act(() => {
       jest.runAllTimers();
     });
@@ -107,6 +109,59 @@ describe('ActionMenu', function () {
     expect(document.activeElement).toBe(button);
   });
 
+  it('supports a controlled open state ', function () {
+    let tree = render(
+      <Provider theme={theme}>
+        <ActionMenu onOpenChange={onOpenChange} isOpen>
+          <Item>Foo</Item>
+          <Item>Bar</Item>
+          <Item>Baz</Item>
+        </ActionMenu>
+      </Provider>
+    );
+
+    act(() => {jest.runAllTimers();});
+    expect(onOpenChange).toBeCalledTimes(0);
+
+    let menu = tree.getByRole('menu');
+    expect(menu).toBeTruthy();
+
+    let triggerButton = tree.getByLabelText('More actions');
+    triggerPress(triggerButton);
+    act(() => {jest.runAllTimers();});
+
+    menu = tree.getByRole('menu');
+    expect(menu).toBeTruthy();
+    expect(onOpenChange).toBeCalledTimes(1);
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('supports an uncontrolled default open state ', function () {
+    let tree = render(
+      <Provider theme={theme}>
+        <ActionMenu onOpenChange={onOpenChange} defaultOpen>
+          <Item>Foo</Item>
+          <Item>Bar</Item>
+          <Item>Baz</Item>
+        </ActionMenu>
+      </Provider>
+    );
+
+    act(() => {jest.runAllTimers();});
+    expect(onOpenChange).toBeCalledTimes(0);
+
+    let menu = tree.getByRole('menu');
+    expect(menu).toBeTruthy();
+
+    let triggerButton = tree.getByLabelText('More actions');
+    triggerPress(triggerButton);
+    act(() => {jest.runAllTimers();});
+
+    expect(menu).not.toBeInTheDocument();
+    expect(onOpenChange).toBeCalledTimes(1);
+    expect(triggerButton).toHaveAttribute('aria-expanded', 'false');
+  });
+
   describe('with tooltips', function () {
     it('using mouse', function () {
       let tree = render(