@tamagui/popover 1.30.7 → 1.30.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/popover",
-  "version": "1.30.7",
+  "version": "1.30.9",
   "sideEffects": [
     "*.css"
   ],
@@ -32,30 +32,29 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.2",
-    "@tamagui/adapt": "1.30.7",
-    "@tamagui/animate-presence": "1.30.7",
-    "@tamagui/aria-hidden": "1.30.7",
-    "@tamagui/compose-refs": "1.30.7",
-    "@tamagui/core": "1.30.7",
-    "@tamagui/create-context": "1.30.7",
-    "@tamagui/dismissable": "1.30.7",
-    "@tamagui/floating": "1.30.7",
-    "@tamagui/focus-scope": "1.30.7",
-    "@tamagui/polyfill-dev": "1.30.7",
-    "@tamagui/popper": "1.30.7",
-    "@tamagui/portal": "1.30.7",
-    "@tamagui/remove-scroll": "1.30.7",
-    "@tamagui/scroll-view": "1.30.7",
-    "@tamagui/sheet": "1.30.7",
-    "@tamagui/stacks": "1.30.7",
-    "@tamagui/use-controllable-state": "1.30.7"
+    "@tamagui/adapt": "1.30.9",
+    "@tamagui/animate-presence": "1.30.9",
+    "@tamagui/aria-hidden": "1.30.9",
+    "@tamagui/compose-refs": "1.30.9",
+    "@tamagui/core": "1.30.9",
+    "@tamagui/dismissable": "1.30.9",
+    "@tamagui/floating": "1.30.9",
+    "@tamagui/focus-scope": "1.30.9",
+    "@tamagui/polyfill-dev": "1.30.9",
+    "@tamagui/popper": "1.30.9",
+    "@tamagui/portal": "1.30.9",
+    "@tamagui/remove-scroll": "1.30.9",
+    "@tamagui/scroll-view": "1.30.9",
+    "@tamagui/sheet": "1.30.9",
+    "@tamagui/stacks": "1.30.9",
+    "@tamagui/use-controllable-state": "1.30.9"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.30.7",
+    "@tamagui/build": "1.30.9",
     "react": "^18.2.0",
     "react-native": "^0.71.7"
   },

package/src/Popover.tsx

@@ -13,6 +13,7 @@ import {
   TamaguiElement,
   Theme,
   composeEventHandlers,
+  createStyledContext,
   isWeb,
   useEvent,
   useGet,
@@ -20,8 +21,6 @@ import {
   useThemeName,
   withStaticProperties,
 } from '@tamagui/core'
-import type { Scope } from '@tamagui/create-context'
-import { createContextScope } from '@tamagui/create-context'
 import { DismissableProps } from '@tamagui/dismissable'
 import { FloatingOverrideContext } from '@tamagui/floating'
 import { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'
@@ -33,9 +32,8 @@ import {
   PopperContent,
   PopperContentFrame,
   PopperContentProps,
+  PopperContext,
   PopperProps,
-  PopperProvider,
-  createPopperScope,
   usePopperContext,
 } from '@tamagui/popper'
 import { Portal, PortalHost, PortalItem } from '@tamagui/portal'
@@ -44,14 +42,10 @@ 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 { Platform, ScrollView, ScrollViewProps, View } from 'react-native'
+import { Platform, ScrollView, ScrollViewProps } from 'react-native'
 
 import { useFloatingContext } from './useFloatingContext'
 
-const POPOVER_NAME = 'Popover'
-
-type ScopedProps<P> = P & { __scopePopover?: Scope }
-
 export type PopoverProps = PopperProps & {
   open?: boolean
   defaultOpen?: boolean
@@ -59,6 +53,7 @@ export type PopoverProps = PopperProps & {
 }
 
 type PopoverContextValue = {
+  id: string
   triggerRef: React.RefObject<any>
   contentId?: string
   open: boolean
@@ -69,37 +64,22 @@ type PopoverContextValue = {
   onCustomAnchorRemove(): void
   size?: SizeTokens
   sheetBreakpoint: any
-  scopeKey: string
-  popperScope: any
   breakpointActive?: boolean
 }
 
-const [createPopoverContext, createPopoverScopeInternal] = createContextScope(
-  POPOVER_NAME,
-  [createPopperScope]
-)
-export const usePopoverScope = createPopperScope()
-export const createPopoverScope = createPopoverScopeInternal
-
-const [PopoverProviderInternal, usePopoverInternalContext] =
-  createPopoverContext<PopoverContextValue>(POPOVER_NAME)
+export const PopoverContext = createStyledContext<PopoverContextValue>({} as any)
 
-export const __PopoverProviderInternal = PopoverProviderInternal
+export const usePopoverContext = () => React.useContext(PopoverContext)
 
 /* -------------------------------------------------------------------------------------------------
  * PopoverAnchor
  * -----------------------------------------------------------------------------------------------*/
 
-const ANCHOR_NAME = 'PopoverAnchor'
-
-type PopoverAnchorElement = HTMLElement | View
 export type PopoverAnchorProps = YStackProps
 
-export const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
-  (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {
-    const { __scopePopover, ...anchorProps } = props
-    const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)
-    const popperScope = usePopoverScope(__scopePopover)
+export const PopoverAnchor = React.forwardRef<TamaguiElement, PopoverAnchorProps>(
+  function PopoverAnchor(props: PopoverAnchorProps, forwardedRef) {
+    const context = usePopoverContext()
     const { onCustomAnchorAdd, onCustomAnchorRemove } = context
 
     React.useEffect(() => {
@@ -107,60 +87,46 @@ export const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAncho
       return () => onCustomAnchorRemove()
     }, [onCustomAnchorAdd, onCustomAnchorRemove])
 
-    return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />
+    return <PopperAnchor {...props} ref={forwardedRef} />
   }
 )
 
-PopoverAnchor.displayName = ANCHOR_NAME
-
 /* -------------------------------------------------------------------------------------------------
  * PopoverTrigger
  * -----------------------------------------------------------------------------------------------*/
 
-const TRIGGER_NAME = 'PopoverTrigger'
-
-type PopoverTriggerElement = HTMLElement | View
 export type PopoverTriggerProps = YStackProps
 
-export const PopoverTrigger = React.forwardRef<
-  PopoverTriggerElement,
-  PopoverTriggerProps
->((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {
-  const { __scopePopover, ...triggerProps } = props
-  const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)
-  const popperScope = usePopoverScope(__scopePopover)
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)
-
-  const trigger = (
-    <YStack
-      aria-haspopup="dialog"
-      aria-expanded={context.open}
-      // TODO not matching
-      // aria-controls={context.contentId}
-      data-state={getState(context.open)}
-      {...triggerProps}
-      ref={composedTriggerRef}
-      onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}
-    />
-  )
+export const PopoverTrigger = React.forwardRef<TamaguiElement, PopoverTriggerProps>(
+  function PopoverTrigger(props: PopoverTriggerProps, forwardedRef) {
+    const context = usePopoverContext()
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)
 
-  return context.hasCustomAnchor ? (
-    trigger
-  ) : (
-    <PopperAnchor asChild {...popperScope}>
-      {trigger}
-    </PopperAnchor>
-  )
-})
+    const trigger = (
+      <YStack
+        aria-haspopup="dialog"
+        aria-expanded={context.open}
+        // TODO not matching
+        // aria-controls={context.contentId}
+        data-state={getState(context.open)}
+        {...props}
+        ref={composedTriggerRef}
+        onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}
+      />
+    )
 
-PopoverTrigger.displayName = TRIGGER_NAME
+    return context.hasCustomAnchor ? (
+      trigger
+    ) : (
+      <PopperAnchor asChild>{trigger}</PopperAnchor>
+    )
+  }
+)
 
 /* -------------------------------------------------------------------------------------------------
  * PopoverContent
  * -----------------------------------------------------------------------------------------------*/
 
-const CONTENT_NAME = 'PopoverContent'
-
 export type PopoverContentProps = PopoverContentTypeProps
 
 type PopoverContentTypeElement = PopoverContentImplElement
@@ -175,7 +141,7 @@ export interface PopoverContentTypeProps
 
 export const PopoverContent = PopperContentFrame.extractable(
   React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
-    function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {
+    function PopoverContent(props: PopoverContentTypeProps, forwardedRef) {
       const {
         allowPinchZoom,
         trapFocus,
@@ -183,7 +149,7 @@ export const PopoverContent = PopperContentFrame.extractable(
         zIndex,
         ...contentImplProps
       } = props
-      const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)
+      const context = usePopoverContext()
       const contentRef = React.useRef<any>(null)
       const composedRefs = useComposedRefs(forwardedRef, contentRef)
       const isRightClickOutsideRef = React.useRef(false)
@@ -234,25 +200,26 @@ export const PopoverContent = PopperContentFrame.extractable(
   )
 )
 
-function PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {
+function PopoverRepropagateContext(props: { children: any }) {
+  const context = usePopoverContext()
+  const popperContext = usePopperContext()
+
+  return (
+    <PopperContext.Provider {...popperContext}>
+      <PopoverContext.Provider {...context}>{props.children}</PopoverContext.Provider>
+    </PopperContext.Provider>
+  )
+}
+
+function PopoverContentPortal(props: PopoverContentTypeProps) {
   const themeName = useThemeName()
-  const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)
+  const context = usePopoverContext()
 
   // on android we have to re-pass context
   let contents = props.children
 
   if (Platform.OS === 'android') {
-    // ok conditional hooks by platform
-    const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)
-
-    contents = (
-      <PopperProvider {...popperContext} scope={context.popperScope}>
-        <PopoverProviderInternal scope={props.__scopePopover} {...context}>
-          {/* does this need to be props.__scopePopper? */}
-          {props.children}
-        </PopoverProviderInternal>
-      </PopperProvider>
-    )
+    contents = <PopoverRepropagateContext>{props.children}</PopoverRepropagateContext>
   }
 
   const zIndex = props.zIndex ?? 150_000
@@ -304,9 +271,8 @@ export interface PopoverContentImplProps
 const PopoverContentImpl = React.forwardRef<
   PopoverContentImplElement,
   PopoverContentImplProps
->((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {
+>((props: PopoverContentImplProps, forwardedRef) => {
   const {
-    __scopePopover,
     trapFocus,
     onOpenAutoFocus,
     onCloseAutoFocus,
@@ -319,12 +285,12 @@ const PopoverContentImpl = React.forwardRef<
     disableRemoveScroll,
     ...contentProps
   } = props
-  const popperScope = usePopoverScope(__scopePopover)
-  const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)
+  const context = usePopoverContext()
   const [isFullyHidden, setIsFullyHidden] = React.useState(!context.open)
 
   if (context.breakpointActive) {
     // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists
+    // TODO this should be disabled through context
     const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
       if (React.isValidElement(child)) {
         if (child.type === PopoverScrollView) {
@@ -336,7 +302,7 @@ const PopoverContentImpl = React.forwardRef<
 
     // doesn't show as popover yet on native, must use as sheet
     return (
-      <PortalItem hostName={`${context.scopeKey}PopoverContents`}>
+      <PortalItem hostName={`${context.id}PopoverContents`}>
         {childrenWithoutScrollView}
       </PortalItem>
     )
@@ -375,7 +341,6 @@ const PopoverContentImpl = React.forwardRef<
           id={context.contentId}
           pointerEvents="auto"
           ref={forwardedRef}
-          {...popperScope}
           {...contentProps}
         >
           <RemoveScroll
@@ -410,19 +375,16 @@ const PopoverContentImpl = React.forwardRef<
  * PopoverClose
  * -----------------------------------------------------------------------------------------------*/
 
-const CLOSE_NAME = 'PopoverClose'
-
-type PopoverCloseElement = HTMLElement | View
 export type PopoverCloseProps = YStackProps
 
-export const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(
-  (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {
-    const { __scopePopover, ...closeProps } = props
-    const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)
+export const PopoverClose = React.forwardRef<TamaguiElement, PopoverCloseProps>(
+  function PopoverClose(props: PopoverCloseProps, forwardedRef) {
+    const context = usePopoverContext()
     return (
       <YStack
-        {...closeProps}
+        {...props}
         ref={forwardedRef}
+        componentName="PopoverClose"
         onPress={composeEventHandlers(props.onPress as any, () =>
           context.onOpenChange(false)
         )}
@@ -431,26 +393,18 @@ export const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverClosePr
   }
 )
 
-PopoverClose.displayName = CLOSE_NAME
-
 /* -------------------------------------------------------------------------------------------------
  * PopoverArrow
  * -----------------------------------------------------------------------------------------------*/
 
-const ARROW_NAME = 'PopoverArrow'
-
 export type PopoverArrowProps = PopperArrowProps
 
-export const PopoverArrow = PopperArrow.styleable<ScopedProps<PopperArrowProps>>(
-  (props, forwardedRef) => {
-    const { __scopePopover, ...arrowProps } = props
-    const popperScope = usePopoverScope(__scopePopover)
-    return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />
+export const PopoverArrow = React.forwardRef<TamaguiElement, PopoverArrowProps>(
+  function PopoverArrow(props: PopoverArrowProps, forwardedRef) {
+    return <PopperArrow componentName="PopoverArrow" {...props} ref={forwardedRef} />
   }
 )
 
-PopoverArrow.displayName = ARROW_NAME
-
 /* -------------------------------------------------------------------------------------------------
  * PopoverScrollView
  * -----------------------------------------------------------------------------------------------*/
@@ -464,19 +418,10 @@ const PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props,
  * -----------------------------------------------------------------------------------------------*/
 
 export const Popover = withStaticProperties(
-  function Popover(props: ScopedProps<PopoverProps>) {
-    const {
-      __scopePopover,
-      children,
-      open: openProp,
-      defaultOpen,
-      onOpenChange,
-      ...restProps
-    } = props
-
-    const internalId = React.useId()
-    const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId
+  function Popover(props: PopoverProps) {
+    const { children, open: openProp, defaultOpen, onOpenChange, ...restProps } = props
 
+    const id = React.useId()
     const { when, AdaptProvider } = useAdaptParent({
       Contents: React.useCallback(() => {
         return <PortalHost name={`${id}PopoverContents`} />
@@ -484,7 +429,6 @@ export const Popover = withStaticProperties(
     })
 
     const sheetBreakpoint = when
-    const popperScope = usePopoverScope(__scopePopover)
     const triggerRef = React.useRef<TamaguiElement>(null)
     const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)
     const [open, setOpen] = useControllableState({
@@ -499,9 +443,7 @@ export const Popover = withStaticProperties(
     const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any
 
     const popoverContext = {
-      scope: __scopePopover,
-      scopeKey: id,
-      popperScope: popperScope.__scopePopper,
+      id,
       sheetBreakpoint,
       contentId: React.useId(),
       triggerRef,
@@ -527,12 +469,12 @@ export const Popover = withStaticProperties(
     // }
 
     const contents = (
-      <Popper {...popperScope} stayInFrame {...restProps}>
-        <PopoverProviderInternal {...popoverContext}>
-          <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>
+      <Popper stayInFrame {...restProps}>
+        <PopoverContext.Provider {...popoverContext}>
+          <PopoverSheetController onOpenChange={setOpen}>
             {children}
           </PopoverSheetController>
-        </PopoverProviderInternal>
+        </PopoverContext.Provider>
       </Popper>
     )
 
@@ -566,19 +508,15 @@ function getState(open: boolean) {
   return open ? 'open' : 'closed'
 }
 
-const PopoverSheetController = (
-  props: ScopedProps<{
-    children: React.ReactNode
-    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
-  }>
-) => {
-  const context = usePopoverInternalContext(
-    'PopoverSheetController',
-    props.__scopePopover
-  )
+const PopoverSheetController = (props: {
+  children: React.ReactNode
+  onOpenChange: React.Dispatch<React.SetStateAction<boolean>>
+}) => {
+  const context = usePopoverContext()
   const showSheet = useShowPopoverSheet(context)
   const breakpointActive = context.breakpointActive
   const getShowSheet = useGet(showSheet)
+
   return (
     <SheetController
       onOpenChange={(val) => {