Merge pull request #5592 from GeekyAnts/fix/overlay-mount-default

Fix/overlay mount default
GeekyAnts · Dec 6, 2022 · e0c543a · e0c543a
2 parents f6bd0e5 + 3d67c48
commit e0c543a
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.25",
+  "version": "3.4.26-alpha.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",
@@ -184,7 +184,7 @@
     "@react-native-aria/focus": "^0.2.6",
     "@react-native-aria/interactions": "^0.2.2",
     "@react-native-aria/listbox": "^0.2.4-alpha.3",
-    "@react-native-aria/overlays": "0.3.3-rc.0",
+    "@react-native-aria/overlays": "^0.3.3",
     "@react-native-aria/radio": "^0.2.4",
     "@react-native-aria/slider": "^0.2.5-alpha.1",
     "@react-native-aria/tabs": "^0.2.7",

diff --git a/src/components/composites/AlertDialog/AlertDialog.tsx b/src/components/composites/AlertDialog/AlertDialog.tsx
@@ -37,6 +37,7 @@ const AlertDialog = (
     _backdropFade,
     _fade,
     _slide,
+    _overlay,
     useRNModal,
     ...restThemeProps
   } = usePropsResolution('AlertDialog', rest);
@@ -65,14 +66,15 @@ const AlertDialog = (
   if (useHasResponsiveProps(rest)) {
     return null;
   }
+
   return (
     <Overlay
       isOpen={visible}
       onRequestClose={handleClose}
       isKeyboardDismissable={isKeyboardDismissable}
       useRNModalOnAndroid
       useRNModal={useRNModal}
-      unmountOnExit
+      {..._overlay}
     >
       <AlertDialogContext.Provider
         value={{

diff --git a/src/components/composites/Menu/Menu.tsx b/src/components/composites/Menu/Menu.tsx
@@ -77,6 +77,7 @@ const Menu = (
   if (useHasResponsiveProps(resolvedProps)) {
     return null;
   }
+
   return (
     <>
       {updatedTrigger()}
@@ -86,7 +87,6 @@ const Menu = (
         useRNModalOnAndroid
         useRNModal={useRNModal}
         {..._overlay}
-        unmountOnExit
       >
         <PresenceTransition visible={isOpen} {..._presenceTransition}>
           <Popper

diff --git a/src/components/composites/Modal/Modal.tsx b/src/components/composites/Modal/Modal.tsx
@@ -77,7 +77,7 @@ const Modal = (
   if (useHasResponsiveProps(rest)) {
     return null;
   }
-  // console.log('visible here', visible);
+
   return (
     <Overlay
       isOpen={visible}

diff --git a/src/components/composites/Popover/Popover.tsx b/src/components/composites/Popover/Popover.tsx
@@ -14,6 +14,7 @@ import { Overlay } from '../../primitives/Overlay';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import uniqueId from 'lodash.uniqueid';
 import { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';
+import { usePropsResolution } from '../../../hooks/useThemeProps';
 
 const Popover = (
   {
@@ -32,6 +33,8 @@ const Popover = (
   }: IPopoverProps,
   ref: any
 ) => {
+  const { _overlay } = usePropsResolution('Popover', props);
+
   const triggerRef = React.useRef(null);
   const mergedRef = mergeRefs([triggerRef]);
   const [isOpen, setIsOpen] = useControllableState({
@@ -92,7 +95,7 @@ const Popover = (
         onRequestClose={handleClose}
         useRNModalOnAndroid
         useRNModal={useRNModal}
-        unmountOnExit
+        {..._overlay}
       >
         <PresenceTransition
           initial={{ opacity: 0 }}

diff --git a/src/components/composites/Popover/types.ts b/src/components/composites/Popover/types.ts
@@ -107,6 +107,10 @@ export interface InterfacePopoverProps {
    * Props applied on backdrop.
    */
   _backdrop?: any;
+  /**
+   * Props applied on overlay.
+   */
+  _overlay?: any;
 }
 
 export type IPopoverContentImpl = {

diff --git a/src/core/NativeBaseProvider.tsx b/src/core/NativeBaseProvider.tsx
@@ -91,7 +91,7 @@ const NativeBaseProvider = (props: NativeBaseProviderProps) => {
             colorModeManager={colorModeManager}
             options={theme.config}
           >
-            <OverlayProvider>
+            <OverlayProvider isSSR>
               <ToastProvider>
                 <InitializeToastRef />
                 <SSRProvider>{children}</SSRProvider>

diff --git a/src/theme/components/alert-dialog.ts b/src/theme/components/alert-dialog.ts
@@ -48,6 +48,9 @@ export const AlertDialog = {
     _backdropFade: { exitDuration: 150, entryDuration: 200 },
     _fade: { exitDuration: 100, entryDuration: 200 },
     _slide: { duration: 200, overlay: false },
+    _overlay: {
+      unmountOnExit: true,
+    },
   },
   sizes,
   defaultProps: {

diff --git a/src/theme/components/menu.ts b/src/theme/components/menu.ts
@@ -18,7 +18,9 @@ const baseStyle = {
     exit: { opacity: 0, transition: { duration: 150 } },
     style: StyleSheet.absoluteFill,
   },
-  _overlay: {},
+  _overlay: {
+    unmountOnExit: true,
+  },
   _backdrop: {
     bg: 'transparent',
   },

diff --git a/src/theme/components/popover.ts b/src/theme/components/popover.ts
@@ -1,3 +1,11 @@
+export const Popover = {
+  baseStyle: () => ({
+    _overlay: {
+      unmountOnExit: true,
+    },
+  }),
+};
+
 export const PopoverCloseButton = {
   baseStyle: () => ({
     position: 'absolute',

diff --git a/yarn.lock b/yarn.lock
@@ -2352,10 +2352,10 @@
     "@react-types/listbox" "^3.1.1"
     "@react-types/shared" "^3.4.0"
 
-"@react-native-aria/overlays@0.3.3-rc.0":
-  version "0.3.3-rc.0"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.3-rc.0.tgz#9041ddd6f151e6edb50c971d29920c458aa41459"
-  integrity sha512-RgaIYIHMltt0RdMrVwfXLAVxc22TIUY1Yx07HbQRMdt4LcSmU8pyp5CEtJ/MQCXceuqocnXfsUxyHOSnfhmfpA==
+"@react-native-aria/overlays@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/overlays/-/overlays-0.3.3.tgz#52c45a43cd4620cd20c3dda8fc7560a807949373"
+  integrity sha512-uXMLBhWwTP55BdWTlmfLf9mCk8mzVxN8lu/P2mKU0FfuJuwvT1RIc4DbU3V93B5fpgsOPPmLuMX82FZL/qiybQ==
   dependencies:
     "@react-aria/interactions" "^3.3.2"
     "@react-aria/overlays" "^3.7.0"