Make RAC overlay open props override DialogTrigger state (#4684)

Co-authored-by: Devon Govett <[email protected]>

Author: devongovett

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

@@ -93,8 +93,8 @@ export {_Modal as Modal};
 
 function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   let ctx = useContext(ModalContext);
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  let state = ctx?.state ?? useOverlayTriggerState(props);
+  let localState = useOverlayTriggerState(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !ctx?.state ? localState : ctx.state;
 
   let objectRef = useObjectRef(ref);
   let modalRef = useRef<HTMLDivElement>(null);

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

@@ -56,9 +56,8 @@ export const PopoverContext = createContext<ContextValue<PopoverContextValue, HT
 function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, PopoverContext);
   let ctx = props as PopoverContextValue;
-  // React components cannot be reparented so if there's context there should always be context.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  let state = ctx?.state ?? useOverlayTriggerState(props);
+  let localState = useOverlayTriggerState(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !ctx?.state ? localState : ctx.state;
   let isExiting = useExitAnimation(ref, state.isOpen);
 
   if (state && !state.isOpen && !isExiting) {

packages/react-aria-components/test/Dialog.test.js

@@ -186,4 +186,39 @@ describe('Dialog', () => {
 
     expect(dialog).not.toBeInTheDocument();
   });
+
+  it('should support Modal being used standalone', async () => {
+    let onOpenChange = jest.fn();
+    let {getByRole} = render(
+      <Modal isDismissable isOpen onOpenChange={onOpenChange}>
+        <Dialog>A modal</Dialog>
+      </Modal>
+    );
+
+    let dialog = getByRole('dialog');
+    expect(dialog).toHaveTextContent('A modal');
+
+    userEvent.click(document.body);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it('isOpen and defaultOpen should override state from context', async () => {
+    let onOpenChange = jest.fn();
+    let {getByRole} = render(<>
+      <DialogTrigger>
+        <Button />
+        <Modal isDismissable isOpen onOpenChange={onOpenChange}>
+          <Dialog>A modal</Dialog>
+        </Modal>
+      </DialogTrigger>
+    </>);
+
+    let dialog = getByRole('dialog');
+    expect(dialog).toHaveTextContent('A modal');
+
+    userEvent.click(document.body);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
 });

packages/react-aria-components/test/Popover.test.js

@@ -99,4 +99,23 @@ describe('Popover', () => {
     expect(onOpenChange).toHaveBeenCalledTimes(1);
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
+
+  it('isOpen and defaultOpen should override state from context', async () => {
+    let onOpenChange = jest.fn();
+    let {getByRole} = render(<>
+      <DialogTrigger>
+        <Button />
+        <Popover isOpen onOpenChange={onOpenChange}>
+          <Dialog>A popover</Dialog>
+        </Popover>
+      </DialogTrigger>
+    </>);
+
+    let dialog = getByRole('dialog');
+    expect(dialog).toHaveTextContent('A popover');
+
+    userEvent.click(document.body);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
 });