@react-spectrum/overlays 4.1.0 → 5.0.0

package/dist/types.d.ts

@@ -23,13 +23,13 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
     state: OverlayTriggerState;
 }
 export let Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
-interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
     children: ReactNode;
     state: OverlayTriggerState;
     type?: 'modal' | 'fullscreen' | 'fullscreenTakeover';
 }
 export let Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>>;
-interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
     children: ReactNode;
     state: OverlayTriggerState;
     isFixedHeight?: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;AAoBA;;;;;;;;;;;GAWG;AAEH,+BAA+B,KAAK,KAAA,OAWnC;ACmBD,OAAA,IAAI,uIAAoC,CAAC;AExCzC,sBAAuB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,EAAE,UAAU;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AA+JD,OAAA,IAAI,uIAA8B,CAAC;AClKnC,oBAAqB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,YAAY;IAC1E,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAA;CACrD;AA8ED,OAAA,IAAI,mIAA0B,CAAC;AClF/B,mBAAoB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,YAAY;IACzE,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAoFD,OAAA,IAAI,iIAAwB,CAAC","sources":["packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Modal.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Tray.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;AAoBA;;;;;;;;;;;GAWG;AAEH,+BAA+B,KAAK,KAAA,OAWnC;ACoBD,OAAA,IAAI,uIAAoC,CAAC;AEzCzC,sBAAuB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,WAAW,CAAC,EAAE,UAAU;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAA;CAC3B;AAmKD,OAAA,IAAI,uIAA8B,CAAC;ACtKnC,oBAAqB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC3F,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAA;CACrD;AAgFD,OAAA,IAAI,mIAA0B,CAAC;ACpF/B,mBAAoB,SAAQ,qBAAqB,EAAE,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAC;IAC1F,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAwFD,OAAA,IAAI,iIAAwB,CAAC","sources":["packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/OpenTransition.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Overlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Underlay.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Popover.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Modal.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/Tray.tsx","packages/@react-spectrum/overlays/src/packages/@react-spectrum/overlays/src/index.ts","packages/@react-spectrum/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {Overlay} from './Overlay';\nexport {Popover} from './Popover';\nexport {Modal} from './Modal';\nexport {Tray} from './Tray';\nexport {OpenTransition} from './OpenTransition';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/overlays",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,12 +36,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/overlays": "^3.12.1",
-    "@react-aria/utils": "^3.14.2",
-    "@react-spectrum/utils": "^3.8.1",
-    "@react-stately/overlays": "^3.4.4",
-    "@react-types/overlays": "^3.6.5",
-    "@react-types/shared": "^3.16.0",
+    "@react-aria/overlays": "^3.13.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-spectrum/utils": "^3.9.0",
+    "@react-stately/overlays": "^3.5.0",
+    "@react-types/overlays": "^3.7.0",
+    "@react-types/shared": "^3.17.0",
     "@swc/helpers": "^0.4.14",
     "react-transition-group": "^4.4.5"
   },
@@ -51,5 +56,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }

package/src/Modal.tsx

@@ -18,27 +18,29 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
-interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
   children: ReactNode,
   state: OverlayTriggerState,
   type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
 }
 
 interface ModalWrapperProps extends ModalProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <ModalWrapper {...props} ref={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </ModalWrapper>
     </Overlay>
@@ -51,10 +53,9 @@ let typeMap = {
 };
 
 let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {
-  let {type, children, state, isOpen} = props;
+  let {type, children, state, isOpen, wrapperRef} = props;
   let typeVariant = typeMap[type];
   let {styleProps} = useStyleProps(props);
-
   let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
 
   let wrapperClassName = classNames(
@@ -87,8 +88,9 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
     '--spectrum-visual-viewport-height': viewport.height + 'px'
   };
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
-    <>
+    <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />
       <div className={wrapperClassName} style={style}>
         <div
@@ -100,7 +102,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 });
 

package/src/Overlay.tsx

@@ -18,7 +18,7 @@ import React, {useCallback, useState} from 'react';
 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;
+  let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;
   let [exited, setExited] = useState(!isOpen);
 
   let handleEntered = useCallback(() => {
@@ -53,7 +53,8 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
           onExited={handleExited}
           onEnter={onEnter}
           onEntering={onEntering}
-          onEntered={handleEntered}>
+          onEntered={handleEntered}
+          nodeRef={nodeRef}>
           {children}
         </OpenTransition>
       </Provider>

package/src/Popover.tsx

@@ -16,7 +16,7 @@ import {DOMRef, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject, useRef, useState} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
 import {Underlay} from './Underlay';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -28,7 +28,8 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
 }
 
 interface PopoverWrapperProps extends PopoverProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 /**
@@ -52,10 +53,11 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <PopoverWrapper ref={domRef} {...props}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>
         {children}
       </PopoverWrapper>
     </Overlay>
@@ -68,7 +70,8 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     isOpen,
     hideArrow,
     isNonModal,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
@@ -78,8 +81,9 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     maxHeight: null
   }, state);
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
-    <>
+    <div ref={wrapperRef}>
       {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }
       <div
         {...styleProps}
@@ -115,7 +119,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
         )}
         <DismissButton onDismiss={state.close} />
       </div>
-    </>
+    </div>
   );
 });
 

package/src/Tray.tsx

@@ -17,28 +17,30 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';
 import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
-interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
   children: ReactNode,
   state: OverlayTriggerState,
   isFixedHeight?: boolean
 }
 
 interface TrayWrapperProps extends TrayProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <TrayWrapper {...props} ref={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </TrayWrapper>
     </Overlay>
@@ -50,7 +52,8 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     children,
     isOpen,
     isFixedHeight,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
@@ -91,8 +94,9 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     styleProps.className
   );
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
-    <>
+    <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />
       <div className={wrapperClassName} style={wrapperStyle}>
         <div
@@ -106,7 +110,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
           <DismissButton onDismiss={state.close} />
         </div>
       </div>
-    </>
+    </div>
   );
 });