Add close through a child function to dialogs

packages/@react-aria/overlays/src/useOverlay.ts

@@ -16,7 +16,9 @@ import {useInteractOutside} from '@react-aria/interactions';
 interface OverlayProps {
   ref: RefObject<HTMLElement | null>,
   onClose?: () => void,
-  isOpen?: boolean
+  isOpen?: boolean,
+  // Whether to close overlay if underlay is clicked
+  isDismissable?: boolean
 }
 
 interface OverlayAria {
@@ -26,7 +28,7 @@ interface OverlayAria {
 const visibleOverlays: RefObject<HTMLElement>[] = [];
 
 export function useOverlay(props: OverlayProps): OverlayAria {
-  let {ref, onClose, isOpen} = props;
+  let {ref, onClose, isOpen, isDismissable = false} = props;
 
   // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
   useEffect(() => {
@@ -58,7 +60,7 @@ export function useOverlay(props: OverlayProps): OverlayAria {
   };
 
   // Handle clicking outside the overlay to close it
-  useInteractOutside({ref, onInteractOutside: onHide});
+  useInteractOutside({ref, onInteractOutside: isDismissable ? onHide : null});
 
   return {
     overlayProps: {

packages/@react-aria/overlays/test/useOverlay.test.js

@@ -34,13 +34,20 @@ describe('useOverlay', function () {
     expect(document.activeElement).toBe(input);
   });
 
-  it('should hide the overlay when clicking outside', function () {
+  it('should hide the overlay when clicking outside if isDismissble is true', function () {
     let onClose = jest.fn();
-    render(<Example isOpen onClose={onClose} />);
+    render(<Example isOpen onClose={onClose} isDismissable />);
     fireEvent.mouseUp(document.body);
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('should not hide the overlay when clicking outside if isDismissable is false', function () {
+    let onClose = jest.fn();
+    render(<Example isOpen onClose={onClose} isDismissable={false} />);
+    fireEvent.mouseUp(document.body);
+    expect(onClose).toHaveBeenCalledTimes(0);
+  });
+
   it('should hide the overlay when pressing the escape key', function () {
     let onClose = jest.fn();
     let res = render(<Example isOpen onClose={onClose} />);
@@ -49,11 +56,19 @@ describe('useOverlay', function () {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it('should still hide the overlay when pressing the escape key if isDismissable is false', function () {
+    let onClose = jest.fn();
+    let res = render(<Example isOpen onClose={onClose} isDismissable={false} />);
+    let el = res.getByTestId('test');
+    fireEvent.keyDown(el, {key: 'Escape'});
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   it('should only hide the top-most overlay', function () {
     let onCloseFirst = jest.fn();
     let onCloseSecond = jest.fn();
-    render(<Example isOpen onClose={onCloseFirst} />);
-    let second = render(<Example isOpen onClose={onCloseSecond} />);
+    render(<Example isOpen onClose={onCloseFirst} isDismissable />);
+    let second = render(<Example isOpen onClose={onCloseSecond} isDismissable />);
 
     fireEvent.mouseUp(document.body);
     expect(onCloseSecond).toHaveBeenCalledTimes(1);

packages/@react-spectrum/dialog/src/AlertDialog.tsx

@@ -12,17 +12,23 @@
 
 import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button} from '@react-spectrum/button';
+import {chain} from '@react-aria/utils';
 import {classNames, useStyleProps} from '@react-spectrum/utils';
 import {Content, Footer, Header} from '@react-spectrum/view';
 import {Dialog} from './Dialog';
+import {DialogContext, DialogContextValue} from './context';
 import {Divider} from '@react-spectrum/divider';
 import {Heading} from '@react-spectrum/typography';
-import React from 'react';
+import React, {useContext} from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 import {SpectrumButtonProps} from '@react-types/button';
 import styles from '@adobe/spectrum-css-temp/components/dialog/vars.css';
 
 export function AlertDialog(props: SpectrumAlertDialogProps) {
+  let {
+    onClose = () => {}
+  } = useContext(DialogContext) || {} as DialogContextValue;
+
   let {
     variant,
     children,
@@ -32,8 +38,8 @@ export function AlertDialog(props: SpectrumAlertDialogProps) {
     autoFocusButton,
     title,
     isConfirmDisabled,
-    onCancel,
-    onConfirm,
+    onCancel = () => {},
+    onConfirm = () => {},
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
@@ -53,9 +59,9 @@ export function AlertDialog(props: SpectrumAlertDialogProps) {
       <Divider size="M" />
       <Content>{children}</Content>
       <Footer>
-        {secondaryLabel && <Button variant="secondary" onPress={() => onConfirm('secondary')} autoFocus={autoFocusButton === 'secondary'}>{secondaryLabel}</Button>}
-        {cancelLabel && <Button variant="secondary" onPress={onCancel} autoFocus={autoFocusButton === 'cancel'}>{cancelLabel}</Button>}
-        <Button variant={confirmVariant} onPress={() => onConfirm('primary')} isDisabled={isConfirmDisabled} autoFocus={autoFocusButton === 'primary'}>{primaryLabel}</Button>
+        {secondaryLabel && <Button variant="secondary" onPress={() => chain(onClose(), onConfirm('secondary'))} autoFocus={autoFocusButton === 'secondary'}>{secondaryLabel}</Button>}
+        {cancelLabel && <Button variant="secondary" onPress={() => chain(onClose(), onCancel())} autoFocus={autoFocusButton === 'cancel'}>{cancelLabel}</Button>}
+        <Button variant={confirmVariant} onPress={() => chain(onClose(), onConfirm('primary'))} isDisabled={isConfirmDisabled} autoFocus={autoFocusButton === 'primary'}>{primaryLabel}</Button>
       </Footer>
     </Dialog>
   );

packages/@react-spectrum/dialog/src/Dialog.tsx

@@ -29,16 +29,16 @@ export function Dialog(props: SpectrumDialogProps) {
   } = useContext(DialogContext) || {} as DialogContextValue;
   let {
     children,
-    isDismissable,
-    onDismiss,
+    isDismissable = contextProps.isDismissable,
+    onDismiss = contextProps.onClose,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
   let allProps: SpectrumBaseDialogProps = mergeProps(
     mergeProps(
       mergeProps(
         filterDOMProps(otherProps),
-        contextProps
+        filterDOMProps(contextProps)
       ),
       styleProps
     ),
@@ -56,7 +56,7 @@ export function Dialog(props: SpectrumDialogProps) {
     return (
       <ModalDialog {...allProps} size={size}>
         {children}
-        {isDismissable && <ActionButton slot="closeButton" isQuiet icon={<CrossLarge size="L" />} onPress={onDismiss} />}
+        {isDismissable && <ActionButton slot="closeButton" isQuiet icon={<CrossLarge size="L" />} aria-label="dismiss" onPress={onDismiss} />}
       </ModalDialog>
     );
   }

packages/@react-spectrum/dialog/src/DialogTrigger.tsx

@@ -14,8 +14,8 @@ import {DialogContext} from './context';
 import {DOMRefValue} from '@react-types/shared';
 import {Modal, Overlay, Popover, Tray} from '@react-spectrum/overlays';
 import {PressResponder} from '@react-aria/interactions';
-import React, {Fragment, useRef} from 'react';
-import {SpectrumDialogTriggerProps} from '@react-types/dialog';
+import React, {Fragment, ReactElement, useRef} from 'react';
+import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
 import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
 import {useControlledState} from '@react-stately/utils';
 import {useOverlayPosition, useOverlayTrigger} from '@react-aria/overlays';
@@ -27,9 +27,14 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) {
     mobileType = type === 'popover' ? 'modal' : type,
     hideArrow,
     targetRef,
+    isDismissable,
     ...positionProps
   } = props;
-  let [trigger, content] = React.Children.toArray(children);
+  if (!Array.isArray(children) || children.length > 2) {
+    throw new Error('DialogTrigger must have exactly 2 children');
+  }
+  // if a function is passed as the second child, it won't appear in toArray
+  let [trigger, content] = children as [ReactElement, SpectrumDialogClose];
 
   // On small devices, show a modal or tray instead of a popover.
   // TODO: DNA variable?
@@ -66,20 +71,20 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) {
       case 'fullscreen':
       case 'fullscreenTakeover':
         return (
-          <Modal isOpen={isOpen} onClose={onClose} type={type}>
-            {content}
+          <Modal isOpen={isOpen} isDismissable={false} onClose={onClose} type={type}>
+            {typeof content === 'function' ? content(onClose) : content}
           </Modal>
         );
       case 'modal':
         return (
-          <Modal isOpen={isOpen} onClose={onClose}>
-            {content}
+          <Modal isOpen={isOpen} isDismissable={isDismissable} onClose={onClose}>
+            {typeof content === 'function' ? content(onClose) : content}
           </Modal>
         );
       case 'tray':
         return (
           <Tray isOpen={isOpen} onClose={onClose}>
-            {content}
+            {typeof content === 'function' ? content(onClose) : content}
           </Tray>
         );
     }
@@ -91,6 +96,7 @@ export function DialogTrigger(props: SpectrumDialogTriggerProps) {
       isOpen={isOpen}
       onPress={onPress}
       onClose={onClose}
+      isDismissable={isDismissable}
       trigger={trigger}
       overlay={renderOverlay()} />
   );
@@ -111,7 +117,7 @@ function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content,
     shouldFlip: props.shouldFlip,
     isOpen
   });
-  
+
   let {triggerAriaProps, overlayAriaProps} = useOverlayTrigger({
     ref: triggerRef,
     type: 'dialog',
@@ -145,10 +151,23 @@ function PopoverTrigger({isOpen, onPress, onClose, targetRef, trigger, content,
   );
 }
 
-function DialogTriggerBase({type, isOpen, onPress, onClose, dialogProps = {}, triggerProps = {}, overlay, trigger}) {
+interface SpectrumDialogTriggerBase {
+  type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover',
+  isOpen?: boolean,
+  onPress?: any,
+  onClose?: () => void,
+  isDismissable?: boolean
+  dialogProps?: SpectrumDialogProps | {},
+  triggerProps?: any,
+  overlay: ReactElement,
+  trigger: ReactElement
+}
+
+function DialogTriggerBase({type, isOpen, onPress, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger}: SpectrumDialogTriggerBase) {
   let context = {
     type,
     onClose,
+    isDismissable,
     ...dialogProps
   };
 

packages/@react-spectrum/dialog/src/context.ts

@@ -13,7 +13,8 @@
 import React, {HTMLAttributes} from 'react';
 
 export interface DialogContextValue extends HTMLAttributes<HTMLElement> {
-  type: 'modal' | 'popover' | 'tray',
+  type: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover',
+  isDismissable?: boolean,
   onClose?: () => void
 }