Add DialogContainer

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

@@ -0,0 +1,93 @@
+import {DialogContainerContext} from './DialogContainerContext';
+import React, {Fragment, ReactElement, useContext, useEffect, useRef, useState} from 'react';
+import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
+import {SpectrumDialogClose, SpectrumDialogProps} from '@react-types/dialog';
+import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {Modal, Popover, Tray} from '@react-spectrum/overlays';
+import {DOMRefValue} from '@react-types/shared';
+import {useOverlayPosition, useOverlayTrigger} from '@react-aria/overlays';
+import {PressResponder} from '@react-aria/interactions';
+import {DialogContext} from './context';
+import {DialogTriggerBase} from './DialogTrigger';
+import {Dialog} from './Dialog';
+
+
+export function DialogContainer(props): ReactElement {
+  let {
+    children,
+    type = 'modal',
+    mobileType = type === 'popover' ? 'modal' : type,
+    isDismissable
+  } = props;
+  // NOTE: content needs to be saved as function in order to save in useState (since it's a function as child)
+  let [overlays, setOverlays] = useState([]);
+  let [overlayProps, setOverlayProps] = useState(props);
+
+  // On small devices, show a modal or tray instead of a popover.
+  // TODO: DNA variable?
+  let isMobile = useMediaQuery('(max-width: 700px)');
+  if (isMobile) {
+    // handle cases where desktop popovers need a close button for the mobile modal view
+    if (type !== 'modal' && mobileType === 'modal') {
+      isDismissable = true;
+    }
+
+    type = mobileType;
+  }
+
+  let state = useOverlayTriggerState(overlayProps);
+
+  let addContent = content => {
+    let newOverlayContent = [...overlays];
+    newOverlayContent.unshift(content);
+    setOverlays(newOverlayContent);
+  };
+
+  let overlayContent = overlays.length ? overlays[0] : null;
+  let context = {
+    type,
+    onClose: state.close,
+    isDismissable
+  };
+  let onClose = () => {
+    let newOverlays = [...overlays];
+    newOverlays.shift();
+    setOverlays(newOverlays);
+    state.close();
+  };
+
+  let renderOverlay = () => {
+    switch (type) {
+      case 'fullscreen':
+      case 'fullscreenTakeover':
+        return (
+          <Modal isOpen={state.isOpen} isDismissable={false} onClose={onClose} type={type}>
+            {typeof overlayContent === 'function' ? overlayContent(onClose) : overlayContent}
+          </Modal>
+        );
+      case 'modal':
+        return (
+          <Modal isOpen={state.isOpen} isDismissable={isDismissable} onClose={onClose}>
+            {typeof overlayContent === 'function' ? overlayContent(onClose) : overlayContent}
+          </Modal>
+        );
+      case 'tray':
+        return (
+          <Tray isOpen={state.isOpen} onClose={onClose}>
+            {typeof overlayContent === 'function' ? overlayContent(onClose) : overlayContent}
+          </Tray>
+        );
+    }
+  };
+
+  return (
+    <>
+      <DialogContainerContext.Provider value={{isDismissable, state, overlayContent, addContent, setOverlayProps, type}}>
+        {children}
+      </DialogContainerContext.Provider>
+      <DialogContext.Provider value={context}>
+        {renderOverlay()}
+      </DialogContext.Provider>
+    </>
+  );
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const DialogContainerContext = React.createContext(null);

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

@@ -10,12 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {DialogContext} from './context';
+import {DialogContainer} from './DialogContainer';
+import {DialogContainerContext} from './DialogContainerContext';
+import {DialogContext, DialogContextValue} from './context';
 import {DOMRefValue} from '@react-types/shared';
 import {Modal, Popover, Tray} from '@react-spectrum/overlays';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {PressResponder} from '@react-aria/interactions';
-import React, {Fragment, ReactElement, useRef} from 'react';
+import React, {Fragment, ReactElement, useContext, useEffect, useRef} from 'react';
 import {SpectrumDialogClose, SpectrumDialogProps, SpectrumDialogTriggerProps} from '@react-types/dialog';
 import {unwrapDOMRef, useMediaQuery} from '@react-spectrum/utils';
 import {useOverlayPosition, useOverlayTrigger} from '@react-aria/overlays';
@@ -26,9 +28,8 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
     type = 'modal',
     mobileType = type === 'popover' ? 'modal' : type,
     hideArrow,
-    targetRef,
-    isDismissable,
     isKeyboardDismissDisabled,
+    targetRef,
     ...positionProps
   } = props;
   if (!Array.isArray(children) || children.length > 2) {
@@ -41,15 +42,11 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
   // TODO: DNA variable?
   let isMobile = useMediaQuery('(max-width: 700px)');
   if (isMobile) {
-    // handle cases where desktop popovers need a close button for the mobile modal view
-    if (type !== 'modal' && mobileType === 'modal') {
-      isDismissable = true;
-    }
-
     type = mobileType;
   }
 
   let state = useOverlayTriggerState(props);
+  let dialogContainerContext = useContext(DialogContainerContext);
 
   if (type === 'popover') {
     return (
@@ -64,37 +61,30 @@ function DialogTrigger(props: SpectrumDialogTriggerProps) {
     );
   }
 
-  let renderOverlay = () => {
-    switch (type) {
-      case 'fullscreen':
-      case 'fullscreenTakeover':
-        return (
-          <Modal isOpen={state.isOpen} isDismissable={false} onClose={state.close} type={type} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
-            {typeof content === 'function' ? content(state.close) : content}
-          </Modal>
-        );
-      case 'modal':
-        return (
-          <Modal isOpen={state.isOpen} isDismissable={isDismissable} onClose={state.close} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
-            {typeof content === 'function' ? content(state.close) : content}
-          </Modal>
-        );
-      case 'tray':
-        return (
-          <Tray isOpen={state.isOpen} onClose={state.close} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
-            {typeof content === 'function' ? content(state.close) : content}
-          </Tray>
-        );
-    }
-  };
+  const triggerBase = <DialogTriggerBase content={content}>{trigger}</DialogTriggerBase>;
 
+  // if container exists and not being used (showing an overlay), pass trigger base, otherwise
+  // create container for overlay to attach to
+  return dialogContainerContext ? triggerBase : (
+    <DialogContainer content={content} {...props}>
+      {triggerBase}
+    </DialogContainer>
+  );
+}
+
+export function DialogTriggerBase(props) {
+  let {children, content} = props;
+  let {state, triggerProps, type, addContent} = useContext(DialogContainerContext);
   return (
-    <DialogTriggerBase
-      type={type}
-      state={state}
-      isDismissable={isDismissable}
-      trigger={trigger}
-      overlay={renderOverlay()} />
+    <PressResponder
+      {...triggerProps}
+      onPress={() => {
+        addContent(state.isOpen ? null : content);
+        state.toggle();
+      }}
+      isPressed={state.isOpen && type !== 'modal' && type !== 'fullscreen' && type !== 'fullscreenTakeover'}>
+      {children}
+    </PressResponder>
   );
 }
 
@@ -113,15 +103,6 @@ DialogTrigger.getCollectionNode = function* (props: SpectrumDialogTriggerProps)
   };
 };
 
-/**
- * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
- * open state with the trigger's press state. Additionally, it allows you to customize the type and
- * positioning of the Dialog.
- */
-
-// We don't want getCollectionNode to show up in the type definition
-let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX.Element;
-export {_DialogTrigger as DialogTrigger};
 
 function PopoverTrigger({state, targetRef, trigger, content, hideArrow, isKeyboardDismissDisabled, ...props}) {
   let triggerRef = useRef<HTMLElement>();
@@ -139,66 +120,47 @@ function PopoverTrigger({state, targetRef, trigger, content, hideArrow, isKeyboa
   });
 
   let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, triggerRef);
-
   let triggerPropsWithRef = {
     ...triggerProps,
     ref: targetRef ? undefined : triggerRef
   };
-
-  let overlay = (
-    <Popover
-      isOpen={state.isOpen}
-      UNSAFE_style={popoverProps.style}
-      ref={overlayRef}
-      onClose={state.close}
-      placement={placement}
-      arrowProps={arrowProps}
-      isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-      hideArrow={hideArrow}>
-      {typeof content === 'function' ? content(state.close) : content}
-    </Popover>
-  );
-
-  return (
-    <DialogTriggerBase
-      type="popover"
-      state={state}
-      triggerProps={triggerPropsWithRef}
-      dialogProps={overlayProps}
-      trigger={trigger}
-      overlay={overlay} />
-  );
-}
-
-interface SpectrumDialogTriggerBase {
-  type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover',
-  state: OverlayTriggerState,
-  isDismissable?: boolean,
-  dialogProps?: SpectrumDialogProps | {},
-  triggerProps?: any,
-  overlay: ReactElement,
-  trigger: ReactElement
-}
-
-function DialogTriggerBase({type, state, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger}: SpectrumDialogTriggerBase) {
-  let context = {
-    type,
+  let context : DialogContextValue = {
+    type: 'popover',
     onClose: state.close,
-    isDismissable,
-    ...dialogProps
+    ...overlayProps
   };
 
   return (
     <Fragment>
       <PressResponder
-        {...triggerProps}
+        {...triggerPropsWithRef}
         onPress={state.toggle}
-        isPressed={state.isOpen && type !== 'modal' && type !== 'fullscreen' && type !== 'fullscreenTakeover'}>
+        isPressed={state.isOpen}>
         {trigger}
       </PressResponder>
       <DialogContext.Provider value={context}>
-        {overlay}
+        <Popover
+          isOpen={state.isOpen}
+          UNSAFE_style={popoverProps.style}
+          ref={overlayRef}
+          onClose={state.close}
+          placement={placement}
+          arrowProps={arrowProps}
+          isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+          hideArrow={hideArrow}>
+          {typeof content === 'function' ? content(state.close) : content}
+        </Popover>
       </DialogContext.Provider>
     </Fragment>
   );
 }
+
+/**
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+ * open state with the trigger's press state. Additionally, it allows you to customize the type and
+ * positioning of the Dialog.
+ */
+
+// We don't want getCollectionNode to show up in the type definition
+let _DialogTrigger = DialogTrigger as (props: SpectrumDialogTriggerProps) => JSX.Element;
+export {_DialogTrigger as DialogTrigger};

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

@@ -14,4 +14,5 @@
 
 export * from './AlertDialog';
 export * from './Dialog';
+export * from './DialogContainer';
 export * from './DialogTrigger';

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

@@ -22,6 +22,7 @@ import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
 import {Provider} from '@react-spectrum/provider';
 import React from 'react';
 import {storiesOf} from '@storybook/react';
+import {DialogContainer} from '../src/DialogContainer';
 
 storiesOf('DialogTrigger', module)
   .addParameters({providerSwitcher: {status: 'notice'}})
@@ -305,7 +306,39 @@ storiesOf('DialogTrigger', module)
   .add(
     'alert dialog',
     () => renderAlert({})
-  );
+  )
+  .add('menu trigger', () => {
+    return (
+      <DialogContainer>
+        <MenuTrigger>
+          <Button variant="cta">hello</Button>
+          <Menu>
+            <DialogTrigger>
+              <Item>dialog</Item>
+              <Dialog>
+                asdf
+              </Dialog>
+            </DialogTrigger>
+          </Menu>
+        </MenuTrigger>
+      </DialogContainer>
+    );
+  })
+  .add('dialog from dialog', () => {
+    return (
+      <DialogTrigger>
+        <Button variant="cta">Open dialog</Button>
+        <Dialog>
+          <DialogTrigger>
+            <Button variant="cta">Nested dialog</Button>
+            <Dialog>
+              Stacks on stacks!
+            </Dialog>
+          </DialogTrigger>
+        </Dialog>
+      </DialogTrigger>
+    );
+  });
 
 function render({width = 'auto', ...props}) {
   return (

packages/@react-spectrum/menu/package.json

@@ -41,6 +41,7 @@
     "@react-aria/utils": "^3.1.0",
     "@react-aria/virtualizer": "^3.1.0",
     "@react-spectrum/checkbox": "^3.1.0",
+    "@react-spectrum/dialog": "3.2.0",
     "@react-spectrum/divider": "^3.1.0",
     "@react-spectrum/layout": "^3.1.0",
     "@react-spectrum/overlays": "^3.1.0",

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

@@ -11,6 +11,7 @@
  */
 
 import {classNames, unwrapDOMRef, useDOMRef, useMediaQuery} from '@react-spectrum/utils';
+import {DialogContainer} from '@react-spectrum/dialog';
 import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {FocusScope} from '@react-aria/focus';
@@ -97,14 +98,14 @@ function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>)
   }
 
   return (
-    <Fragment>
+    <DialogContainer>
       <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>
         {menuTrigger}
       </PressResponder>
       <MenuContext.Provider value={menuContext}>
         {overlay}
       </MenuContext.Provider>
-    </Fragment>
+    </DialogContainer>
   );
 }