Merge pull request #805 from gluestack/release/@gluestack-ui/overlay-…

…components Release/@gluestack UI/overlay components
gluestack · Jul 26, 2023 · acfd3fd · acfd3fd
2 parents 35ab5b2 + 997b0d6
commit acfd3fd
Show file tree

Hide file tree

Showing 15 changed files with 194 additions and 7 deletions.
diff --git a/.changeset/cool-humans-reflect.md b/.changeset/cool-humans-reflect.md
@@ -0,0 +1,10 @@
+---
+'@gluestack-ui/alert-dialog': patch
+'@gluestack-ui/actionsheet': patch
+'@gluestack-ui/popover': patch
+'@gluestack-ui/tooltip': patch
+'@gluestack-ui/modal': patch
+'@gluestack-ui/menu': patch
+---
+
+Added experimentalOverlay flag for internal usecase
diff --git a/packages/actionsheet/package.json b/packages/actionsheet/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.2.12",
+  "version": "0.2.13-alpha.0",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/actionsheet/src/Actionsheet.tsx b/packages/actionsheet/src/Actionsheet.tsx
@@ -22,6 +22,8 @@ export function Actionsheet<T>(StyledActionsheet: React.ComponentType<T>) {
         initialFocusRef,
         finalFocusRef,
         unmountOnExit = true,
+        // @ts-ignore
+        _experimentalOverlay = true,
         ...props
       }: T & IActionsheetProps,
       ref?: any
@@ -73,6 +75,20 @@ export function Actionsheet<T>(StyledActionsheet: React.ComponentType<T>) {
         finalFocusRef,
       ]);
 
+      if (!_experimentalOverlay) {
+        return (
+          <ActionsheetContext.Provider value={contextValue}>
+            <StyledActionsheet
+              ref={ref}
+              style={[StyleSheet.absoluteFill]}
+              {...(props as T)}
+            >
+              {children}
+            </StyledActionsheet>
+          </ActionsheetContext.Provider>
+        );
+      }
+
       return (
         <Overlay
           isOpen={visible}

diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.1.11",
+  "version": "0.1.12-alpha.0",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/alert-dialog/src/AlertDialog.tsx b/packages/alert-dialog/src/AlertDialog.tsx
@@ -23,6 +23,8 @@ export const AlertDialog = <T,>(StyledAlertDialog: React.ComponentType<T>) =>
         isKeyboardDismissable = true,
         animationPreset = 'fade',
         unmountOnExit = true,
+        // @ts-ignore
+        _experimentalOverlay = true,
         ...props
       }: T & IAlertDialogProps,
       ref?: any
@@ -72,6 +74,17 @@ export const AlertDialog = <T,>(StyledAlertDialog: React.ComponentType<T>) =>
         visible,
       ]);
 
+      if (!_experimentalOverlay) {
+        return (
+          <AlertDialogContext.Provider value={contextValue}>
+            <StyledAlertDialog {...(props as T)} ref={ref}>
+              {children}
+              {avoidKeyboard ? avoidKeyboardSpacer : null}
+            </StyledAlertDialog>
+          </AlertDialogContext.Provider>
+        );
+      }
+
       return (
         <Overlay
           isOpen={visible}

diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.2.13",
+  "version": "0.2.14-alpha.2",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/menu/src/Menu.tsx b/packages/menu/src/Menu.tsx
@@ -29,6 +29,7 @@ export const Menu = ({
         shouldFlip = true,
         trigger,
         shouldOverlapWithTrigger,
+        _experimentalOverlay = true,
         ...props
       }: any,
       ref?: any
@@ -71,6 +72,27 @@ export const Menu = ({
         });
       };
 
+      if (!_experimentalOverlay) {
+        return (
+          <MenuContext.Provider value={{ onClose: handleClose, showBackdrop }}>
+            {updatedTrigger()}
+
+            <MenuComponent
+              {...menuProps}
+              {...props}
+              isOpen={state.isOpen}
+              AnimatePresence={AnimatePresence}
+              autoFocus={state.focusStrategy || true}
+              onClose={() => state.close()}
+              StyledMenu={StyledMenu}
+              StyledMenuItem={StyledMenuItem}
+              closeOnSelect={closeOnSelect}
+              ref={ref}
+            />
+          </MenuContext.Provider>
+        );
+      }
+
       return (
         <MenuContext.Provider value={{ onClose: handleClose, showBackdrop }}>
           {updatedTrigger()}

diff --git a/packages/menu/src/MenuPopover/Popover.tsx b/packages/menu/src/MenuPopover/Popover.tsx
@@ -27,6 +27,8 @@ export const Popover = forwardRef(
       shouldFlip,
       focusScope = true,
       StyledBackdrop,
+      // @ts-ignore
+      _experimentalOverlay = true,
       ...props
     }: any,
     ref: any
@@ -82,6 +84,55 @@ export const Popover = forwardRef(
 
     const targetRefTemp = React.useRef(null);
     const targetRef = triggerRef || targetRefTemp;
+
+    if (!_experimentalOverlay) {
+      return (
+        <>
+          {updatedTrigger(targetRef)}
+          <PopoverProvider
+            value={{
+              onClose: handleClose,
+              targetRef,
+              strategy: 'absolute',
+              handleClose: handleClose,
+              initialFocusRef,
+              finalFocusRef,
+              popoverContentId,
+              bodyId,
+              headerId,
+              headerMounted,
+              bodyMounted,
+              setBodyMounted,
+              setHeaderMounted,
+              isOpen,
+              placement,
+              shouldOverlapWithTrigger,
+              crossOffset,
+              offset,
+              shouldFlip,
+            }}
+          >
+            <StyledBackdrop
+              onPress={onClose}
+              focusable={false}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              aria-hidden={true}
+            />
+            <View ref={ref} {...props}>
+              <FocusScopeComponent
+                trapFocus={trapFocus}
+                focusScope={focusScope}
+              >
+                <PopoverContent AnimatePresence={AnimatePresence}>
+                  {children}
+                </PopoverContent>
+              </FocusScopeComponent>
+            </View>
+          </PopoverProvider>
+        </>
+      );
+    }
     return (
       <>
         {updatedTrigger(targetRef)}

diff --git a/packages/menu/src/MenuPopover/Popover.web.tsx b/packages/menu/src/MenuPopover/Popover.web.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { View } from 'react-native';
 import { usePopover, DismissButton, Overlay } from '@react-aria/overlays';
 import { MenuContext } from '../MenuContext';
-export function Popover({ StyledBackdrop, ...props }: any) {
+export function Popover({
+  StyledBackdrop, // @ts-ignore
+  _experimentalOverlay = true,
+  ...props
+}: any) {
   const ref = React.useRef(null);
   const { state, children } = props;
   const { onClose } = React.useContext(MenuContext);
@@ -19,6 +23,16 @@ export function Popover({ StyledBackdrop, ...props }: any) {
     return null;
   }
 
+  if (!_experimentalOverlay) {
+    return (
+      // @ts-ignore
+      <View {...popoverProps} ref={ref}>
+        <DismissButton onDismiss={state.close} />
+        {children}
+        <DismissButton onDismiss={state.close} />
+      </View>
+    );
+  }
   return (
     <Overlay>
       <StyledBackdrop

diff --git a/packages/modal/package.json b/packages/modal/package.json
@@ -15,7 +15,7 @@
     "ios",
     "nextjs"
   ],
-  "version": "0.1.16",
+  "version": "0.1.17-alpha.1",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/modal/src/Modal.tsx b/packages/modal/src/Modal.tsx
@@ -22,6 +22,7 @@ const Modal = (StyledModal: any) =>
         closeOnOverlayClick = true,
         isKeyboardDismissable = true,
         unmountOnExit = true,
+        _experimentalOverlay = true,
         ...props
       }: any,
       ref?: any
@@ -72,6 +73,17 @@ const Modal = (StyledModal: any) =>
         visible,
       ]);
 
+      if (!_experimentalOverlay) {
+        return (
+          <ModalContext.Provider value={contextValue}>
+            <StyledModal {...remainingProps} ref={ref}>
+              {children}
+              {avoidKeyboard ? avoidKeyboardSpacer : null}
+            </StyledModal>
+          </ModalContext.Provider>
+        );
+      }
+
       return (
         <Overlay
           isOpen={visible}

diff --git a/packages/popover/package.json b/packages/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/popover",
-  "version": "0.1.16",
+  "version": "0.1.17-alpha.0",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/popover/src/Popover.tsx b/packages/popover/src/Popover.tsx
@@ -25,6 +25,8 @@ export const Popover = (StyledPopover: any) =>
         offset,
         isKeyboardDismissable = true,
         shouldFlip,
+        // @ts-ignore
+        _experimentalOverlay = true,
         ...props
       }: any,
       ref?: any
@@ -125,6 +127,19 @@ export const Popover = (StyledPopover: any) =>
         shouldFlip,
       ]);
 
+      if (!_experimentalOverlay) {
+        return (
+          <>
+            {updatedTrigger(targetRef)}
+            <PopoverProvider value={contextValue}>
+              <StyledPopover ref={ref} {...props}>
+                {children}
+              </StyledPopover>
+            </PopoverProvider>
+          </>
+        );
+      }
+
       return (
         <>
           {updatedTrigger(targetRef)}

diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-ui/tooltip",
   "description": "A universal headless tooltip component for React Native, Next.js & React",
-  "version": "0.1.12",
+  "version": "0.1.13-alpha.0",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

diff --git a/packages/tooltip/src/Tooltip.tsx b/packages/tooltip/src/Tooltip.tsx
@@ -29,6 +29,8 @@ function Tooltip<StyledTooltipProp>(
         offset = 10,
         shouldOverlapWithTrigger = false,
         shouldFlip = true,
+        // @ts-ignore
+        _experimentalOverlay = true,
         ...props
       }: ITooltipProps,
       ref?: any
@@ -119,6 +121,38 @@ function Tooltip<StyledTooltipProp>(
         callback: () => setIsOpen(false),
       });
 
+      if (!_experimentalOverlay) {
+        return (
+          <>
+            {updatedTrigger(targetRef)}
+            <TooltipProvider
+              value={{
+                placement,
+                targetRef,
+                handleClose: handleClose,
+                isOpen,
+                crossOffset,
+                offset,
+                shouldOverlapWithTrigger,
+                shouldFlip,
+              }}
+            >
+              <StyledTooltip
+                {...(props as StyledTooltipProp)}
+                ref={ref}
+                accessibilityRole={
+                  Platform.OS === 'web' ? 'tooltip' : undefined
+                }
+                focussable={false}
+                nativeID={tooltipID}
+              >
+                {children}
+              </StyledTooltip>
+            </TooltipProvider>
+          </>
+        );
+      }
+
       return (
         <>
           {updatedTrigger(targetRef)}