@tamagui/popover 1.43.1 → 1.43.3

package/src/Popover.tsx

@@ -1,5 +1,3 @@
-// adapted from radix-ui popover
-
 import '@tamagui/polyfill-dev'
 
 import { Adapt, useAdaptParent } from '@tamagui/adapt'
@@ -45,10 +43,13 @@ import { Sheet, SheetController } from '@tamagui/sheet'
 import { YStack, YStackProps } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import * as React from 'react'
+import { Freeze } from 'react-freeze'
 import { Platform, ScrollView, ScrollViewProps } from 'react-native'
 
 import { useFloatingContext } from './useFloatingContext'
 
+// adapted from radix-ui popover
+
 export type PopoverProps = PopperProps & {
   open?: boolean
   defaultOpen?: boolean
@@ -148,6 +149,18 @@ export interface PopoverContentTypeProps
 export const PopoverContent = PopperContentFrame.extractable(
   React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
     function PopoverContent(props: PopoverContentTypeProps, forwardedRef) {
+      return (
+        <PopoverContentPortal zIndex={props.zIndex}>
+          <PopoverContentInner {...props} ref={forwardedRef} />
+        </PopoverContentPortal>
+      )
+    }
+  )
+)
+
+const PopoverContentInner = React.memo(
+  React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
+    (props, forwardedRef) => {
       const {
         allowPinchZoom,
         trapFocus,
@@ -159,6 +172,7 @@ export const PopoverContent = PopperContentFrame.extractable(
       const contentRef = React.useRef<any>(null)
       const composedRefs = useComposedRefs(forwardedRef, contentRef)
       const isRightClickOutsideRef = React.useRef(false)
+      const themeName = useThemeName()
 
       // aria-hide everything except the content (better supported equivalent to setting aria-modal)
       React.useEffect(() => {
@@ -167,49 +181,42 @@ export const PopoverContent = PopperContentFrame.extractable(
         if (content) return hideOthers(content)
       }, [context.open])
 
-      const themeName = useThemeName()
       return (
-        <PopoverContentPortal zIndex={zIndex}>
-          <Stack pointerEvents={context.open ? 'auto' : 'none'}>
-            <Theme name={themeName}>
-              <PopoverContentImpl
-                {...contentImplProps}
-                disableRemoveScroll={disableRemoveScroll}
-                ref={composedRefs}
-                // we make sure we're not trapping once it's been closed
-                // (closed !== unmounted when animating out)
-                trapFocus={trapFocus ?? context.open}
-                disableOutsidePointerEvents
-                onCloseAutoFocus={composeEventHandlers(
-                  props.onCloseAutoFocus,
-                  (event) => {
-                    event.preventDefault()
-                    if (!isRightClickOutsideRef.current)
-                      context.triggerRef.current?.focus()
-                  }
-                )}
-                onPointerDownOutside={composeEventHandlers(
-                  props.onPointerDownOutside,
-                  (event) => {
-                    const originalEvent = event.detail.originalEvent
-                    const ctrlLeftClick =
-                      originalEvent.button === 0 && originalEvent.ctrlKey === true
-                    const isRightClick = originalEvent.button === 2 || ctrlLeftClick
-                    isRightClickOutsideRef.current = isRightClick
-                  },
-                  { checkDefaultPrevented: false }
-                )}
-                // When focus is trapped, a `focusout` event may still happen.
-                // We make sure we don't trigger our `onDismiss` in such case.
-                onFocusOutside={composeEventHandlers(
-                  props.onFocusOutside,
-                  (event) => event.preventDefault(),
-                  { checkDefaultPrevented: false }
-                )}
-              />
-            </Theme>
-          </Stack>
-        </PopoverContentPortal>
+        <Stack pointerEvents={context.open ? 'auto' : 'none'}>
+          <Theme name={themeName}>
+            <PopoverContentImpl
+              {...contentImplProps}
+              disableRemoveScroll={disableRemoveScroll}
+              ref={composedRefs}
+              // we make sure we're not trapping once it's been closed
+              // (closed !== unmounted when animating out)
+              trapFocus={trapFocus ?? context.open}
+              disableOutsidePointerEvents
+              onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
+                event.preventDefault()
+                if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()
+              })}
+              onPointerDownOutside={composeEventHandlers(
+                props.onPointerDownOutside,
+                (event) => {
+                  const originalEvent = event.detail.originalEvent
+                  const ctrlLeftClick =
+                    originalEvent.button === 0 && originalEvent.ctrlKey === true
+                  const isRightClick = originalEvent.button === 2 || ctrlLeftClick
+                  isRightClickOutsideRef.current = isRightClick
+                },
+                { checkDefaultPrevented: false }
+              )}
+              // When focus is trapped, a `focusout` event may still happen.
+              // We make sure we don't trigger our `onDismiss` in such case.
+              onFocusOutside={composeEventHandlers(
+                props.onFocusOutside,
+                (event) => event.preventDefault(),
+                { checkDefaultPrevented: false }
+              )}
+            />
+          </Theme>
+        </Stack>
       )
     }
   )
@@ -230,9 +237,22 @@ function PopoverRepropagateContext(props: {
 }
 
 function PopoverContentPortal(props: PopoverContentTypeProps) {
+  const zIndex = props.zIndex ?? 150_000
+
+  // Portal the contents and add a transparent bg overlay to handle dismiss on native
+  return (
+    <Portal zIndex={zIndex}>
+      {React.useMemo(() => {
+        return <PopoverContentPortalContents {...props} />
+      }, [props])}
+    </Portal>
+  )
+}
+
+const PopoverContentPortalContents = (props: PopoverContentTypeProps) => {
   const themeName = useThemeName()
-  const context = usePopoverContext()
   const popperContext = usePopperContext()
+  const context = usePopoverContext()
 
   // on android we have to re-pass context
   let contents = props.children
@@ -245,21 +265,16 @@ function PopoverContentPortal(props: PopoverContentTypeProps) {
     )
   }
 
-  const zIndex = props.zIndex ?? 150_000
-
-  // Portal the contents and add a transparent bg overlay to handle dismiss on native
   return (
-    <Portal zIndex={zIndex}>
-      <Theme forceClassName name={themeName}>
-        {!!context.open && !context.breakpointActive && (
-          <YStack
-            fullscreen
-            onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}
-          />
-        )}
-        <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>
-      </Theme>
-    </Portal>
+    <Theme forceClassName name={themeName}>
+      {!!context.open && !context.breakpointActive && (
+        <YStack
+          fullscreen
+          onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}
+        />
+      )}
+      {contents}
+    </Theme>
   )
 }
 
@@ -309,14 +324,22 @@ const PopoverContentImpl = React.forwardRef<
     ...contentProps
   } = props
   const context = usePopoverContext()
+  const { open, keepChildrenMounted } = context
   const popperContext = usePopperContext()
   const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open)
+  const [hasShownOnce, setHasShownOnce] = React.useState(false)
+
+  React.useEffect(() => {
+    if (!open) {
+      setHasShownOnce(true)
+    }
+  }, [open])
 
-  if (context.open && isFullyHidden) {
+  if (open && isFullyHidden) {
     setIsFullyHidden(false)
   }
 
-  if (!context.keepChildrenMounted) {
+  if (!keepChildrenMounted) {
     if (isFullyHidden) {
       return null
     }
@@ -327,7 +350,7 @@ const PopoverContentImpl = React.forwardRef<
     // TODO this should be disabled through context
     const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
       if (React.isValidElement(child)) {
-        if (child.type === PopoverScrollView) {
+        if (child.type === ScrollView) {
           return child.props.children
         }
       }
@@ -360,49 +383,67 @@ const PopoverContentImpl = React.forwardRef<
   //     onDismiss={handleDismiss}
   //   >
 
+  const contents = React.useMemo(() => {
+    return isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children
+  }, [children])
+
+  const freeze = isFullyHidden && (hasShownOnce || !keepChildrenMounted)
+
   return (
     <Animate
       type="presence"
-      present={Boolean(context.open)}
-      keepChildrenMounted={context.keepChildrenMounted}
+      present={Boolean(open)}
+      keepChildrenMounted={keepChildrenMounted}
       onExitComplete={() => {
         setIsFullyHidden(true)
       }}
     >
-      <PopperContent
-        key={context.contentId}
-        data-state={getState(context.open)}
-        id={context.contentId}
-        ref={forwardedRef}
-        {...contentProps}
+      <FreezeToLastContents
+        // freeze if fully hidden but fallback to last contents
+        // if keepChildrenMounted then mount it on the first
+        freeze={freeze}
       >
-        <RemoveScroll
-          enabled={disableRemoveScroll ? false : context.open}
-          allowPinchZoom
-          // causes lots of bugs on touch web on site
-          removeScrollBar={false}
-          style={{
-            display: 'contents',
-          }}
+        <PopperContent
+          key={context.contentId}
+          data-state={getState(open)}
+          id={context.contentId}
+          ref={forwardedRef}
+          {...contentProps}
         >
-          {trapFocus === false ? (
-            children
-          ) : (
+          <RemoveScroll
+            enabled={disableRemoveScroll ? false : open}
+            allowPinchZoom
+            // causes lots of bugs on touch web on site
+            removeScrollBar={false}
+            style={{
+              display: 'contents',
+            }}
+          >
             <FocusScope
               loop
-              trapped={trapFocus ?? context.open}
+              trapped={trapFocus ?? open}
               onMountAutoFocus={onOpenAutoFocus}
               onUnmountAutoFocus={onCloseAutoFocus}
             >
-              {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}
+              {contents}
             </FocusScope>
-          )}
-        </RemoveScroll>
-      </PopperContent>
+          </RemoveScroll>
+        </PopperContent>
+      </FreezeToLastContents>
     </Animate>
   )
 })
 
+const FreezeToLastContents = (props: { freeze: boolean; children: any }) => {
+  const last = React.useRef()
+
+  if (!props.freeze) {
+    last.current = props.children
+  }
+
+  return <Freeze placeholder={last.current} {...props} />
+}
+
 /* -------------------------------------------------------------------------------------------------
  * PopoverClose
  * -----------------------------------------------------------------------------------------------*/
@@ -437,14 +478,6 @@ export const PopoverArrow = React.forwardRef<TamaguiElement, PopoverArrowProps>(
   }
 )
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverScrollView
- * -----------------------------------------------------------------------------------------------*/
-
-const PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {
-  return <ScrollView ref={ref} {...props} />
-})
-
 /* -------------------------------------------------------------------------------------------------
  * Popover
  * -----------------------------------------------------------------------------------------------*/
@@ -537,7 +570,7 @@ export const Popover = withStaticProperties(
     Content: PopoverContent,
     Close: PopoverClose,
     Adapt,
-    ScrollView: PopoverScrollView,
+    ScrollView: ScrollView,
     Sheet: Sheet.Controlled,
   }
 )

package/types/Popover.d.ts

@@ -206,7 +206,7 @@ export declare const Popover: React.FC<PopoverProps> & {
             shouldForwardSpace: boolean;
         };
     };
-    ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollView>>;
+    ScrollView: typeof ScrollView;
     Sheet: React.FunctionComponent<Omit<import("@tamagui/sheet").SheetProps, "open" | "onOpenChange"> & React.RefAttributes<import("react-native").View>> & {
         Frame: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers | "style"> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & {
             style?: import("@tamagui/core").StyleProp<React.CSSProperties | import("react-native").ViewStyle | (React.CSSProperties & import("react-native").ViewStyle)>;

package/types/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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"}