@tamagui/popover 1.75.9 → 1.76.0

package/src/Popover.tsx

@@ -43,7 +43,6 @@ 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 } from 'react-native'
 
 import { useFloatingContext } from './useFloatingContext'
@@ -55,6 +54,16 @@ export type PopoverProps = PopperProps & {
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
   keepChildrenMounted?: boolean
+
+  /**
+   * Enable staying open while mouseover
+   */
+  hoverable?: boolean
+
+  /**
+   * Disable focusing behavior on open
+   */
+  disableFocus?: boolean
 }
 
 type ScopedPopoverProps<P> = ScopedProps<P, 'Popover'>
@@ -409,54 +418,30 @@ const PopoverContentImpl = React.forwardRef<
         setIsFullyHidden(true)
       }}
     >
-      <FreezeToLastContents
-        // freeze if fully hidden but fallback to last contents
-        // if keepChildrenMounted then mount it on the first
-        freeze={freeze}
+      <PopperContent
+        __scopePopper={__scopePopover || POPOVER_SCOPE}
+        key={context.contentId}
+        data-state={getState(open)}
+        id={context.contentId}
+        ref={forwardedRef}
+        {...contentProps}
       >
-        <PopperContent
-          __scopePopper={__scopePopover || POPOVER_SCOPE}
-          key={context.contentId}
-          data-state={getState(open)}
-          id={context.contentId}
-          ref={forwardedRef}
-          {...contentProps}
+        <RemoveScroll
+          enabled={disableRemoveScroll ? false : open}
+          allowPinchZoom
+          // causes lots of bugs on touch web on site
+          removeScrollBar={false}
+          style={{
+            display: 'contents',
+          }}
         >
-          <RemoveScroll
-            enabled={disableRemoveScroll ? false : open}
-            allowPinchZoom
-            // causes lots of bugs on touch web on site
-            removeScrollBar={false}
-            style={{
-              display: 'contents',
-            }}
-          >
-            <FocusScope
-              loop
-              enabled={disableFocusScope ? false : open}
-              trapped={trapFocus}
-              onMountAutoFocus={onOpenAutoFocus}
-              onUnmountAutoFocus={onCloseAutoFocus}
-            >
-              {contents}
-            </FocusScope>
-          </RemoveScroll>
-        </PopperContent>
-      </FreezeToLastContents>
+          {contents}
+        </RemoveScroll>
+      </PopperContent>
     </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
  * -----------------------------------------------------------------------------------------------*/
@@ -515,6 +500,8 @@ export const Popover = withStaticProperties(
       onOpenChange,
       __scopePopover,
       keepChildrenMounted,
+      hoverable,
+      disableFocus,
       ...restProps
     } = props
 
@@ -534,9 +521,15 @@ export const Popover = withStaticProperties(
       onChange: onOpenChange,
     })
 
-    const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)
+    const sheetActive = useSheetBreakpointActive(sheetBreakpoint)
 
-    const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any
+    const floatingContext = useFloatingContext({
+      open,
+      setOpen,
+      disable: sheetActive,
+      hoverable,
+      disableFocus: disableFocus,
+    }) as any
 
     const popoverContext = {
       id,
@@ -544,10 +537,10 @@ export const Popover = withStaticProperties(
       contentId: React.useId(),
       triggerRef,
       open,
-      breakpointActive,
+      breakpointActive: sheetActive,
       onOpenChange: setOpen,
       onOpenToggle: useEvent(() => {
-        if (open && breakpointActive) {
+        if (open && sheetActive) {
           return
         }
         setOpen(!open)

package/src/useFloatingContext.tsx

@@ -1,10 +1,24 @@
 import type { UseFloatingOptions } from '@floating-ui/react'
-import { useDismiss, useFloating, useInteractions, useRole } from '@floating-ui/react'
+import {
+  safePolygon,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react'
 import { useCallback } from 'react'
 
 // Custom floating context to override the Popper on web
-export const useFloatingContext = ({ open, setOpen, breakpointActive }) =>
-  useCallback(
+export const useFloatingContext = ({
+  open,
+  setOpen,
+  disable,
+  disableFocus,
+  hoverable,
+}) => {
+  return useCallback(
     (props: UseFloatingOptions) => {
       const floating = useFloating({
         ...props,
@@ -12,13 +26,24 @@ export const useFloatingContext = ({ open, setOpen, breakpointActive }) =>
         onOpenChange: setOpen,
       }) as any
       const { getReferenceProps, getFloatingProps } = useInteractions([
-        // useFocus(floating.context, {
-        //   enabled: !breakpointActive,
-        //   keyboardOnly: true,
-        // }),
+        hoverable
+          ? useHover(floating.context, {
+              enabled: !disable && hoverable,
+              handleClose: safePolygon({
+                requireIntent: true,
+                blockPointerEvents: true,
+              }),
+            })
+          : useHover(floating.context, {
+              enabled: false,
+            }),
+        useFocus(floating.context, {
+          enabled: !disable && !disableFocus,
+          keyboardOnly: true,
+        }),
         useRole(floating.context, { role: 'dialog' }),
         useDismiss(floating.context, {
-          enabled: !breakpointActive,
+          enabled: !disable,
         }),
       ])
       return {
@@ -28,5 +53,6 @@ export const useFloatingContext = ({ open, setOpen, breakpointActive }) =>
         getFloatingProps,
       }
     },
-    [open, setOpen, breakpointActive]
+    [open, setOpen, disable, disableFocus, hoverable]
   )
+}

package/types/Popover.d.ts

@@ -12,6 +12,14 @@ export type PopoverProps = PopperProps & {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     keepChildrenMounted?: boolean;
+    /**
+     * Enable staying open while mouseover
+     */
+    hoverable?: boolean;
+    /**
+     * Disable focusing behavior on open
+     */
+    disableFocus?: boolean;
 };
 type ScopedPopoverProps<P> = ScopedProps<P, 'Popover'>;
 type PopoverContextValue = {

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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"}

package/types/useFloatingContext.d.ts

@@ -1,7 +1,9 @@
 import type { UseFloatingOptions } from '@floating-ui/react';
-export declare const useFloatingContext: ({ open, setOpen, breakpointActive }: {
+export declare const useFloatingContext: ({ open, setOpen, disable, disableFocus, hoverable, }: {
     open: any;
     setOpen: any;
-    breakpointActive: any;
+    disable: any;
+    disableFocus: any;
+    hoverable: any;
 }) => (props: UseFloatingOptions) => any;
 //# sourceMappingURL=useFloatingContext.d.ts.map

package/types/useFloatingContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingContext.d.ts","sourceRoot":"","sources":["../src/useFloatingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAK5D,eAAO,MAAM,kBAAkB;;;;cAEnB,kBAAkB,QAwB3B,CAAA"}
+{"version":3,"file":"useFloatingContext.d.ts","sourceRoot":"","sources":["../src/useFloatingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AAa5D,eAAO,MAAM,kBAAkB;;;;;;cAQnB,kBAAkB,QAoC7B,CAAA"}