@react-spectrum/overlays 3.8.0 → 4.0.0

package/src/Modal.tsx

@@ -10,41 +10,35 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaModalOverlayProps, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {mergeProps, useViewportSize} from '@react-aria/utils';
-import {ModalProps} from '@react-types/overlays';
+import {DOMRef, StyleProps} from '@react-types/shared';
 import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';
 import {Overlay} from './Overlay';
+import {OverlayProps} from '@react-types/overlays';
+import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, HTMLAttributes, ReactNode, RefObject} from 'react';
+import React, {forwardRef, ReactNode, RefObject} from 'react';
 import {Underlay} from './Underlay';
-import {useModal, useOverlay, usePreventScroll} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
-interface ModalWrapperProps extends HTMLAttributes<HTMLElement> {
+interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
   children: ReactNode,
-  isOpen?: boolean,
-  onClose?: () => void,
-  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover',
-  overlayProps: HTMLAttributes<HTMLElement>
+  state: OverlayTriggerState,
+  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
+}
+
+interface ModalWrapperProps extends ModalProps {
+  isOpen?: boolean
 }
 
 function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
-  let {children, onClose, type, ...otherProps} = props;
+  let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
-  let {styleProps} = useStyleProps(props);
-
-  let {overlayProps, underlayProps} = useOverlay(props, domRef);
 
   return (
-    <Overlay {...otherProps}>
-      <Underlay {...underlayProps} />
-      <ModalWrapper
-        {...styleProps}
-        onClose={onClose}
-        type={type}
-        ref={domRef}
-        overlayProps={overlayProps}>
+    <Overlay {...otherProps} isOpen={state.isOpen}>
+      <ModalWrapper {...props} ref={domRef}>
         {children}
       </ModalWrapper>
     </Overlay>
@@ -57,12 +51,11 @@ let typeMap = {
 };
 
 let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {children, isOpen, type, overlayProps, ...otherProps} = props;
+  let {type, children, state, isOpen} = props;
   let typeVariant = typeMap[type];
+  let {styleProps} = useStyleProps(props);
 
-  usePreventScroll();
-  let {modalProps} = useModal();
+  let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
 
   let wrapperClassName = classNames(
     modalStyles,
@@ -86,7 +79,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
       'react-spectrum-Modal'
     ),
     {[`spectrum-Modal--${typeVariant}`]: typeVariant},
-    otherProps.className
+    styleProps.className
   );
 
   let viewport = useViewportSize();
@@ -95,15 +88,19 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
   };
 
   return (
-    <div className={wrapperClassName} style={style}>
-      <div
-        {...mergeProps(otherProps, overlayProps, modalProps)}
-        ref={ref}
-        className={modalClassName}
-        data-testid="modal">
-        {children}
+    <>
+      <Underlay {...underlayProps} isOpen={isOpen} />
+      <div className={wrapperClassName} style={style}>
+        <div
+          {...styleProps}
+          {...modalProps}
+          ref={ref}
+          className={modalClassName}
+          data-testid="modal">
+          {children}
+        </div>
       </div>
-    </div>
+    </>
   );
 });
 

package/src/Overlay.tsx

@@ -15,7 +15,7 @@ import {OpenTransition} from './OpenTransition';
 import {OverlayProps} from '@react-types/overlays';
 import {Provider} from '@react-spectrum/provider';
 import React, {useCallback, useState} from 'react';
-import ReactDOM from 'react-dom';
+import {Overlay as ReactAriaOverlay} from '@react-aria/overlays';
 
 function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited} = props;
@@ -42,23 +42,23 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
     return null;
   }
 
-  let contents = (
-    <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>
-      <OpenTransition
-        in={isOpen}
-        appear
-        onExit={onExit}
-        onExiting={onExiting}
-        onExited={handleExited}
-        onEnter={onEnter}
-        onEntering={onEntering}
-        onEntered={handleEntered}>
-        {children}
-      </OpenTransition>
-    </Provider>
+  return (
+    <ReactAriaOverlay portalContainer={container}>
+      <Provider ref={ref} UNSAFE_style={{background: 'transparent', isolation: 'isolate'}} isDisabled={false}>
+        <OpenTransition
+          in={isOpen}
+          appear
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={handleExited}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={handleEntered}>
+          {children}
+        </OpenTransition>
+      </Provider>
+    </ReactAriaOverlay>
   );
-
-  return ReactDOM.createPortal(contents, container || document.body);
 }
 
 let _Overlay = React.forwardRef(Overlay);

package/src/Popover.tsx

@@ -10,27 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaPopoverProps, DismissButton, usePopover} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {DOMRef, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
+import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import {PlacementAxis, PopoverProps} from '@react-types/overlays';
-import React, {forwardRef, HTMLAttributes, ReactNode, RefObject, useRef, useState} from 'react';
+import React, {forwardRef, ReactNode, RefObject, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
-import {useModal, useOverlay} from '@react-aria/overlays';
+import {Underlay} from './Underlay';
+import {useLayoutEffect} from '@react-aria/utils';
 
-interface PopoverWrapperProps extends HTMLAttributes<HTMLElement> {
+interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, StyleProps {
   children: ReactNode,
-  placement?: PlacementAxis,
-  arrowProps?: HTMLAttributes<HTMLElement>,
   hideArrow?: boolean,
-  isOpen?: boolean,
-  onClose?: () => void,
-  shouldCloseOnBlur?: boolean,
-  isKeyboardDismissDisabled?: boolean,
-  isNonModal?: boolean,
-  isDismissable?: boolean
+  state: OverlayTriggerState
+}
+
+interface PopoverWrapperProps extends PopoverProps {
+  isOpen?: boolean
 }
 
 /**
@@ -50,32 +48,14 @@ let arrowPlacement = {
 function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
-    placement,
-    arrowProps,
-    onClose,
-    shouldCloseOnBlur,
-    hideArrow,
-    isKeyboardDismissDisabled,
-    isNonModal,
-    isDismissable = true,
+    state,
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
-  let {styleProps} = useStyleProps(props);
 
   return (
-    <Overlay {...otherProps}>
-      <PopoverWrapper
-        {...styleProps}
-        ref={domRef}
-        placement={placement}
-        arrowProps={arrowProps}
-        onClose={onClose}
-        shouldCloseOnBlur={shouldCloseOnBlur}
-        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-        hideArrow={hideArrow}
-        isNonModal={isNonModal}
-        isDismissable={isDismissable}>
+    <Overlay {...otherProps} isOpen={state.isOpen}>
+      <PopoverWrapper ref={domRef} {...props}>
         {children}
       </PopoverWrapper>
     </Overlay>
@@ -85,52 +65,57 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
 const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement>) => {
   let {
     children,
-    placement = 'bottom',
-    arrowProps,
     isOpen,
     hideArrow,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    shouldCloseOnBlur,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isKeyboardDismissDisabled,
     isNonModal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isDismissable,
-    ...otherProps
+    state
   } = props;
-  let {overlayProps} = useOverlay({...props, isDismissable: isDismissable && isOpen}, ref);
-  let {modalProps} = useModal({
-    isDisabled: isNonModal
-  });
+  let {styleProps} = useStyleProps(props);
+
+  let {popoverProps, arrowProps, underlayProps, placement} = usePopover({
+    ...props,
+    popoverRef: ref,
+    maxHeight: null
+  }, state);
 
   return (
-    <div
-      {...mergeProps(otherProps, overlayProps, modalProps)}
-      ref={ref}
-      className={
-        classNames(
-          styles,
-          'spectrum-Popover',
-          `spectrum-Popover--${placement}`,
-          {
-            'spectrum-Popover--withTip': !hideArrow,
-            'is-open': isOpen
-          },
+    <>
+      {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }
+      <div
+        {...styleProps}
+        {...popoverProps}
+        style={{
+          ...styleProps.style,
+          ...popoverProps.style
+        }}
+        ref={ref}
+        className={
           classNames(
-            overrideStyles,
+            styles,
             'spectrum-Popover',
-            'react-spectrum-Popover'
-          ),
-          otherProps.className
-        )
-      }
-      role="presentation"
-      data-testid="popover">
-      {children}
-      {hideArrow ? null : (
-        <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />
-      )}
-    </div>
+            `spectrum-Popover--${placement}`,
+            {
+              'spectrum-Popover--withTip': !hideArrow,
+              'is-open': isOpen
+            },
+            classNames(
+              overrideStyles,
+              'spectrum-Popover',
+              'react-spectrum-Popover'
+            ),
+            styleProps.className
+          )
+        }
+        role="presentation"
+        data-testid="popover">
+        {!isNonModal && <DismissButton onDismiss={state.close} />}
+        {children}
+        {hideArrow ? null : (
+          <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />
+        )}
+        <DismissButton onDismiss={state.close} />
+      </div>
+    </>
   );
 });
 

package/src/Tray.tsx

@@ -10,43 +10,35 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaModalOverlayProps, DismissButton, useModalOverlay} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {mergeProps, useViewportSize} from '@react-aria/utils';
+import {DOMRef, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
+import {OverlayProps} from '@react-types/overlays';
+import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, HTMLAttributes, ReactNode, RefObject} from 'react';
-import {TrayProps} from '@react-types/overlays';
+import React, {forwardRef, ReactNode, RefObject} from 'react';
 import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
-import {useModal, useOverlay, usePreventScroll} from '@react-aria/overlays';
+import {useViewportSize} from '@react-aria/utils';
 
-interface TrayWrapperProps extends HTMLAttributes<HTMLElement> {
+interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
   children: ReactNode,
-  isOpen?: boolean,
-  onClose?: () => void,
-  isFixedHeight?: boolean,
-  isNonModal?: boolean,
-  overlayProps: HTMLAttributes<HTMLElement>
+  state: OverlayTriggerState,
+  isFixedHeight?: boolean
+}
+
+interface TrayWrapperProps extends TrayProps {
+  isOpen?: boolean
 }
 
 function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
-  let {children, onClose, isFixedHeight, isNonModal, ...otherProps} = props;
+  let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
-  let {styleProps} = useStyleProps(props);
-
-  let {overlayProps, underlayProps} = useOverlay({...props, isDismissable: true}, domRef);
 
   return (
-    <Overlay {...otherProps}>
-      <Underlay {...underlayProps} />
-      <TrayWrapper
-        {...styleProps}
-        onClose={onClose}
-        ref={domRef}
-        overlayProps={overlayProps}
-        isFixedHeight={isFixedHeight}
-        isNonModal={isNonModal}>
+    <Overlay {...otherProps} isOpen={state.isOpen}>
+      <TrayWrapper {...props} ref={domRef}>
         {children}
       </TrayWrapper>
     </Overlay>
@@ -58,14 +50,14 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     children,
     isOpen,
     isFixedHeight,
-    isNonModal,
-    overlayProps,
-    ...otherProps
+    state
   } = props;
-  usePreventScroll();
-  let {modalProps} = useModal({
-    isDisabled: isNonModal
-  });
+  let {styleProps} = useStyleProps(props);
+
+  let {modalProps, underlayProps} = useModalOverlay({
+    ...props,
+    isDismissable: true
+  }, state, ref);
 
   // We need to measure the window's height in JS rather than using percentages in CSS
   // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
@@ -96,22 +88,25 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
       'spectrum-Tray',
       'react-spectrum-Tray'
     ),
-    otherProps.className
+    styleProps.className
   );
 
-  let domProps = mergeProps(otherProps, overlayProps);
-
   return (
-    <div className={wrapperClassName} style={wrapperStyle}>
-      <div
-        {...domProps}
-        {...modalProps}
-        className={className}
-        ref={ref}
-        data-testid="tray">
-        {children}
+    <>
+      <Underlay {...underlayProps} isOpen={isOpen} />
+      <div className={wrapperClassName} style={wrapperStyle}>
+        <div
+          {...styleProps}
+          {...modalProps}
+          className={className}
+          ref={ref}
+          data-testid="tray">
+          <DismissButton onDismiss={state.close} />
+          {children}
+          <DismissButton onDismiss={state.close} />
+        </div>
       </div>
-    </div>
+    </>
   );
 });
 

package/src/Underlay.tsx

@@ -15,11 +15,12 @@ import React from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
 interface UnderlayProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  isTransparent?: boolean
 }
 
-export function Underlay({isOpen}: UnderlayProps) {
+export function Underlay({isOpen, isTransparent}: UnderlayProps) {
   return (
-    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen})} />
+    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
 }