@tamagui/popper 1.68.6 → 1.69.1

package/dist/jsx/Popper.native.js

@@ -20,7 +20,7 @@ import { getSpace } from "@tamagui/get-token";
 import { ThemeableStack, YStack } from "@tamagui/stacks";
 import * as React from "react";
 import { Keyboard, useWindowDimensions } from "react-native";
-const PopperContext = createStyledContext({}), usePopperContext = () => React.useContext(PopperContext);
+const PopperContext = createStyledContext({}), { useStyledContext: usePopperContext, Provider: PopperProvider } = PopperContext;
 function Popper(props) {
   const {
     children,
@@ -29,7 +29,8 @@ function Popper(props) {
     placement = "bottom",
     stayInFrame,
     allowFlip,
-    offset
+    offset,
+    __scopePopper
   } = props, [isMounted, setIsMounted] = React.useState(!1);
   useIsomorphicLayoutEffect(() => {
     setIsMounted(!0);
@@ -80,23 +81,26 @@ function Popper(props) {
     arrowStyle: middlewareData.arrow,
     onArrowSize: setArrowSize,
     isMounted,
+    scope: __scopePopper,
     ...floating
   };
-  return <PopperContext.Provider {...popperContext}>{children}</PopperContext.Provider>;
+  return <PopperProvider {...popperContext}>{children}</PopperProvider>;
 }
 const PopperAnchor = YStack.extractable(
-  React.forwardRef(function(props, forwardedRef) {
-    const { virtualRef, ...anchorProps } = props, { anchorRef, getReferenceProps } = usePopperContext(), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
-    if (virtualRef)
-      return null;
-    const stackProps = {
-      ref: composedRefs,
-      ...anchorProps
-    };
-    return <TamaguiView
-      {...getReferenceProps ? getReferenceProps(stackProps) : stackProps}
-    />;
-  })
+  React.forwardRef(
+    function(props, forwardedRef) {
+      const { virtualRef, __scopePopper, ...anchorProps } = props, { anchorRef, getReferenceProps } = usePopperContext(__scopePopper), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
+      if (virtualRef)
+        return null;
+      const stackProps = {
+        ref: composedRefs,
+        ...anchorProps
+      };
+      return <TamaguiView
+        {...getReferenceProps ? getReferenceProps(stackProps) : stackProps}
+      />;
+    }
+  )
 ), PopperContentFrame = styled(ThemeableStack, {
   name: "PopperContent",
   variants: {
@@ -118,29 +122,27 @@ const PopperAnchor = YStack.extractable(
   defaultVariants: {
     unstyled: !1
   }
-}), PopperContent = React.forwardRef(
-  function(props, forwardedRef) {
-    const { strategy, placement, refs, x, y, getFloatingProps, size, isMounted, update } = usePopperContext(), contentRefs = useComposedRefs(refs.setFloating, forwardedRef), contents = React.useMemo(() => <PopperContentFrame
-      key="popper-content-frame"
-      data-placement={placement}
-      data-strategy={strategy}
-      contain="layout"
-      size={size}
-      {...props}
-    />, [placement, strategy, props]);
-    if (useIsomorphicLayoutEffect(() => {
-      isMounted && update();
-    }, [isMounted]), !isMounted)
-      return null;
-    const frameProps = {
-      ref: contentRefs,
-      x: x || 0,
-      y: y || 0,
-      position: strategy
-    };
-    return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
-  }
-), PopperArrowFrame = styled(YStack, {
+}), PopperContent = React.forwardRef(function(props, forwardedRef) {
+  const { __scopePopper, ...rest } = props, { strategy, placement, refs, x, y, getFloatingProps, size, isMounted, update } = usePopperContext(__scopePopper), contentRefs = useComposedRefs(refs.setFloating, forwardedRef), contents = React.useMemo(() => <PopperContentFrame
+    key="popper-content-frame"
+    data-placement={placement}
+    data-strategy={strategy}
+    contain="layout"
+    size={size}
+    {...rest}
+  />, [placement, strategy, props]);
+  if (useIsomorphicLayoutEffect(() => {
+    isMounted && update();
+  }, [isMounted]), !isMounted)
+    return null;
+  const frameProps = {
+    ref: contentRefs,
+    x: x || 0,
+    y: y || 0,
+    position: strategy
+  };
+  return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
+}), PopperArrowFrame = styled(YStack, {
   name: "PopperArrow",
   variants: {
     unstyled: {
@@ -176,48 +178,46 @@ const PopperAnchor = YStack.extractable(
   right: "left",
   bottom: "top",
   left: "right"
-}, PopperArrow = PopperArrowFrame.styleable(
-  function(propsIn, forwardedRef) {
-    var _a, _b;
-    const props = useProps(propsIn), { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(), sizeVal = sizeProp ?? context.size, size = +getVariableValue(
-      getSpace(sizeVal, {
-        shift: -2,
-        bounds: [2]
-      })
-    ), { placement } = context, refs = useComposedRefs(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size, height: size }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
-    if (primaryPlacement) {
-      arrowStyle[isVertical ? "width" : "height"] = size * 2;
-      const oppSide = opposites[primaryPlacement];
-      oppSide && (arrowStyle[oppSide] = -size, innerArrowStyle[oppSide] = size / 2), (oppSide === "top" || oppSide === "bottom") && (arrowStyle.left = 0), (oppSide === "left" || oppSide === "right") && (arrowStyle.top = 0);
-    }
-    return useIsomorphicLayoutEffect(() => {
+}, PopperArrow = PopperArrowFrame.styleable(function(propsIn, forwardedRef) {
+  var _a, _b;
+  const { __scopePopper, ...rest } = propsIn, props = useProps(rest), { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(__scopePopper), sizeVal = sizeProp ?? context.size, size = +getVariableValue(
+    getSpace(sizeVal, {
+      shift: -2,
+      bounds: [2]
+    })
+  ), { placement } = context, refs = useComposedRefs(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size, height: size }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+  if (primaryPlacement) {
+    arrowStyle[isVertical ? "width" : "height"] = size * 2;
+    const oppSide = opposites[primaryPlacement];
+    oppSide && (arrowStyle[oppSide] = -size, innerArrowStyle[oppSide] = size / 2), (oppSide === "top" || oppSide === "bottom") && (arrowStyle.left = 0), (oppSide === "left" || oppSide === "right") && (arrowStyle.top = 0), useIsomorphicLayoutEffect(() => {
       var _a2;
       (_a2 = context.onArrowSize) == null || _a2.call(context, size);
-    }, [size, context.onArrowSize]), <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
-      width={size}
-      height={size}
-      {...arrowProps}
-      {...innerArrowStyle}
-      rotate="45deg"
-      {...primaryPlacement === "bottom" && {
-        borderLeftWidth: borderWidth,
-        borderTopWidth: borderWidth
-      }}
-      {...primaryPlacement === "top" && {
-        borderBottomWidth: borderWidth,
-        borderRightWidth: borderWidth
-      }}
-      {...primaryPlacement === "right" && {
-        borderLeftWidth: borderWidth,
-        borderBottomWidth: borderWidth
-      }}
-      {...primaryPlacement === "left" && {
-        borderTopWidth: borderWidth,
-        borderRightWidth: borderWidth
-      }}
-    /></PopperArrowOuterFrame>;
+    }, [size, context.onArrowSize]);
   }
-);
+  return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
+    width={size}
+    height={size}
+    {...arrowProps}
+    {...innerArrowStyle}
+    rotate="45deg"
+    {...primaryPlacement === "bottom" && {
+      borderLeftWidth: borderWidth,
+      borderTopWidth: borderWidth
+    }}
+    {...primaryPlacement === "top" && {
+      borderBottomWidth: borderWidth,
+      borderRightWidth: borderWidth
+    }}
+    {...primaryPlacement === "right" && {
+      borderLeftWidth: borderWidth,
+      borderBottomWidth: borderWidth
+    }}
+    {...primaryPlacement === "left" && {
+      borderTopWidth: borderWidth,
+      borderRightWidth: borderWidth
+    }}
+  /></PopperArrowOuterFrame>;
+});
 export {
   Popper,
   PopperAnchor,
@@ -225,6 +225,7 @@ export {
   PopperContent,
   PopperContentFrame,
   PopperContext,
+  PopperProvider,
   usePopperContext
 };
 //# sourceMappingURL=Popper.js.map

package/dist/jsx/Popper.native.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../src/Popper.tsx"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["_a"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/popper",
-  "version": "1.68.6",
+  "version": "1.69.1",
   "sideEffects": [
     "*.css"
   ],
@@ -31,19 +31,19 @@
     }
   },
   "dependencies": {
-    "@tamagui/compose-refs": "1.68.6",
-    "@tamagui/core": "1.68.6",
-    "@tamagui/floating": "1.68.6",
-    "@tamagui/get-token": "1.68.6",
-    "@tamagui/stacks": "1.68.6",
-    "@tamagui/use-controllable-state": "1.68.6"
+    "@tamagui/compose-refs": "1.69.1",
+    "@tamagui/core": "1.69.1",
+    "@tamagui/floating": "1.69.1",
+    "@tamagui/get-token": "1.69.1",
+    "@tamagui/stacks": "1.69.1",
+    "@tamagui/use-controllable-state": "1.69.1"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.68.6",
+    "@tamagui/build": "1.69.1",
     "react": "^18.2.0",
     "react-native": "^0.72.1"
   },

package/src/Popper.tsx

@@ -12,6 +12,7 @@ import {
   useIsomorphicLayoutEffect,
   useProps,
 } from '@tamagui/core'
+import type { ScopedProps } from '@tamagui/core'
 import {
   Coords,
   OffsetOptions,
@@ -51,7 +52,8 @@ export type PopperContextValue = UseFloatingReturn & {
 
 export const PopperContext = createStyledContext<PopperContextValue>({} as any)
 
-export const usePopperContext = () => React.useContext(PopperContext)
+export const { useStyledContext: usePopperContext, Provider: PopperProvider } =
+  PopperContext
 
 export type PopperProps = {
   size?: SizeTokens
@@ -63,7 +65,9 @@ export type PopperProps = {
   offset?: OffsetOptions
 }
 
-export function Popper(props: PopperProps) {
+type ScopedPopperProps<P> = ScopedProps<P, 'Popper'>
+
+export function Popper(props: ScopedPopperProps<PopperProps>) {
   const {
     children,
     size,
@@ -72,6 +76,7 @@ export function Popper(props: PopperProps) {
     stayInFrame,
     allowFlip,
     offset,
+    __scopePopper,
   } = props
 
   const [isMounted, setIsMounted] = React.useState(false)
@@ -152,10 +157,11 @@ export function Popper(props: PopperProps) {
     arrowStyle: middlewareData.arrow,
     onArrowSize: setArrowSize,
     isMounted,
+    scope: __scopePopper,
     ...floating,
   }
 
-  return <PopperContext.Provider {...popperContext}>{children}</PopperContext.Provider>
+  return <PopperProvider {...popperContext}>{children}</PopperProvider>
 }
 
 /* -------------------------------------------------------------------------------------------------
@@ -169,27 +175,26 @@ export type PopperAnchorProps = YStackProps & {
 }
 
 export const PopperAnchor = YStack.extractable(
-  React.forwardRef<PopperAnchorRef, PopperAnchorProps>(function PopperAnchor(
-    props: PopperAnchorProps,
-    forwardedRef
-  ) {
-    const { virtualRef, ...anchorProps } = props
-    const { anchorRef, getReferenceProps } = usePopperContext()
-    const ref = React.useRef<PopperAnchorRef>(null)
-    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)
-    if (virtualRef) {
-      return null
-    }
-    const stackProps = {
-      ref: composedRefs,
-      ...anchorProps,
+  React.forwardRef<PopperAnchorRef, ScopedPopperProps<PopperAnchorProps>>(
+    function PopperAnchor(props: ScopedPopperProps<PopperAnchorProps>, forwardedRef) {
+      const { virtualRef, __scopePopper, ...anchorProps } = props
+      const { anchorRef, getReferenceProps } = usePopperContext(__scopePopper)
+      const ref = React.useRef<PopperAnchorRef>(null)
+      const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)
+      if (virtualRef) {
+        return null
+      }
+      const stackProps = {
+        ref: composedRefs,
+        ...anchorProps,
+      }
+      return (
+        <TamaguiView
+          {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)}
+        />
+      )
     }
-    return (
-      <TamaguiView
-        {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)}
-      />
-    )
-  })
+  )
 )
 
 /* -------------------------------------------------------------------------------------------------
@@ -228,51 +233,53 @@ export const PopperContentFrame = styled(ThemeableStack, {
   },
 })
 
-export const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(
-  function PopperContent(props: PopperContentProps, forwardedRef) {
-    const { strategy, placement, refs, x, y, getFloatingProps, size, isMounted, update } =
-      usePopperContext()
-    const contentRefs = useComposedRefs<any>(refs.setFloating, forwardedRef)
+export const PopperContent = React.forwardRef<
+  PopperContentElement,
+  ScopedPopperProps<PopperContentProps>
+>(function PopperContent(props: ScopedPopperProps<PopperContentProps>, forwardedRef) {
+  const { __scopePopper, ...rest } = props
+  const { strategy, placement, refs, x, y, getFloatingProps, size, isMounted, update } =
+    usePopperContext(__scopePopper)
+  const contentRefs = useComposedRefs<any>(refs.setFloating, forwardedRef)
 
-    const contents = React.useMemo(() => {
-      return (
-        <PopperContentFrame
-          key="popper-content-frame"
-          data-placement={placement}
-          data-strategy={strategy}
-          contain="layout"
-          size={size}
-          {...props}
-        />
-      )
-    }, [placement, strategy, props])
-
-    useIsomorphicLayoutEffect(() => {
-      if (isMounted) {
-        update()
-      }
-    }, [isMounted])
+  const contents = React.useMemo(() => {
+    return (
+      <PopperContentFrame
+        key="popper-content-frame"
+        data-placement={placement}
+        data-strategy={strategy}
+        contain="layout"
+        size={size}
+        {...rest}
+      />
+    )
+  }, [placement, strategy, props])
 
-    // all poppers hidden on ssr by default
-    if (!isMounted) {
-      return null
+  useIsomorphicLayoutEffect(() => {
+    if (isMounted) {
+      update()
     }
+  }, [isMounted])
 
-    const frameProps = {
-      ref: contentRefs,
-      x: x || 0,
-      y: y || 0,
-      position: strategy,
-    }
+  // all poppers hidden on ssr by default
+  if (!isMounted) {
+    return null
+  }
 
-    // outer frame because we explicitly dont want animation to apply to this
-    return (
-      <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>
-        {contents}
-      </YStack>
-    )
+  const frameProps = {
+    ref: contentRefs,
+    x: x || 0,
+    y: y || 0,
+    position: strategy,
   }
-)
+
+  // outer frame because we explicitly dont want animation to apply to this
+  return (
+    <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>
+      {contents}
+    </YStack>
+  )
+})
 
 /* -------------------------------------------------------------------------------------------------
  * PopperArrow
@@ -331,84 +338,85 @@ const opposites = {
 
 type Sides = keyof typeof opposites
 
-export const PopperArrow = PopperArrowFrame.styleable<PopperArrowProps>(
-  function PopperArrow(propsIn: PopperArrowProps, forwardedRef) {
-    const props = useProps(propsIn)
-    const { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props
-
-    const context = usePopperContext()
-    const sizeVal = sizeProp ?? context.size
-    const sizeValResolved = getVariableValue(
-      getSpace(sizeVal, {
-        shift: -2,
-        bounds: [2],
-      })
-    )
-    const size = +sizeValResolved
-    const { placement } = context
-    const refs = useComposedRefs(context.arrowRef, forwardedRef)
-
-    // Sometimes floating-ui can return NaN during orientation or screen size changes on native
-    // so we explictly force the x,y position types as a number
-    const x = (context.arrowStyle?.x as number) || 0
-    const y = (context.arrowStyle?.y as number) || 0
-
-    const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides
-
-    const arrowStyle: StackProps = { x, y, width: size, height: size }
-    const innerArrowStyle: StackProps = {}
-    const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'
-
-    if (primaryPlacement) {
-      // allows for extra diagonal size
-      arrowStyle[isVertical ? 'width' : 'height'] = size * 2
-      const oppSide = opposites[primaryPlacement]
-      if (oppSide) {
-        arrowStyle[oppSide] = -size
-        innerArrowStyle[oppSide] = size / 2
-      }
-      if (oppSide === 'top' || oppSide === 'bottom') {
-        arrowStyle.left = 0
-      }
-      if (oppSide === 'left' || oppSide === 'right') {
-        arrowStyle.top = 0
-      }
+export const PopperArrow = PopperArrowFrame.styleable<
+  ScopedPopperProps<PopperArrowProps>
+>(function PopperArrow(propsIn: ScopedPopperProps<PopperArrowProps>, forwardedRef) {
+  const { __scopePopper, ...rest } = propsIn
+  const props = useProps(rest)
+  const { offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props
+
+  const context = usePopperContext(__scopePopper)
+  const sizeVal = sizeProp ?? context.size
+  const sizeValResolved = getVariableValue(
+    getSpace(sizeVal, {
+      shift: -2,
+      bounds: [2],
+    })
+  )
+  const size = +sizeValResolved
+  const { placement } = context
+  const refs = useComposedRefs(context.arrowRef, forwardedRef)
+
+  // Sometimes floating-ui can return NaN during orientation or screen size changes on native
+  // so we explictly force the x,y position types as a number
+  const x = (context.arrowStyle?.x as number) || 0
+  const y = (context.arrowStyle?.y as number) || 0
+
+  const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides
+
+  const arrowStyle: StackProps = { x, y, width: size, height: size }
+  const innerArrowStyle: StackProps = {}
+  const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'
+
+  if (primaryPlacement) {
+    // allows for extra diagonal size
+    arrowStyle[isVertical ? 'width' : 'height'] = size * 2
+    const oppSide = opposites[primaryPlacement]
+    if (oppSide) {
+      arrowStyle[oppSide] = -size
+      innerArrowStyle[oppSide] = size / 2
+    }
+    if (oppSide === 'top' || oppSide === 'bottom') {
+      arrowStyle.left = 0
+    }
+    if (oppSide === 'left' || oppSide === 'right') {
+      arrowStyle.top = 0
     }
 
     // send the Arrow's offset up to Popper
     useIsomorphicLayoutEffect(() => {
       context.onArrowSize?.(size)
     }, [size, context.onArrowSize])
-
-    // outer frame to cut off for ability to have nicer shadows/borders
-    return (
-      <PopperArrowOuterFrame ref={refs} {...arrowStyle}>
-        <PopperArrowFrame
-          width={size}
-          height={size}
-          {...arrowProps}
-          {...innerArrowStyle}
-          rotate="45deg"
-          {...(primaryPlacement === 'bottom' && {
-            borderLeftWidth: borderWidth,
-            borderTopWidth: borderWidth,
-          })}
-          {...(primaryPlacement === 'top' && {
-            borderBottomWidth: borderWidth,
-            borderRightWidth: borderWidth,
-          })}
-          {...(primaryPlacement === 'right' && {
-            borderLeftWidth: borderWidth,
-            borderBottomWidth: borderWidth,
-          })}
-          {...(primaryPlacement === 'left' && {
-            borderTopWidth: borderWidth,
-            borderRightWidth: borderWidth,
-          })}
-        />
-      </PopperArrowOuterFrame>
-    )
   }
-)
+
+  // outer frame to cut off for ability to have nicer shadows/borders
+  return (
+    <PopperArrowOuterFrame ref={refs} {...arrowStyle}>
+      <PopperArrowFrame
+        width={size}
+        height={size}
+        {...arrowProps}
+        {...innerArrowStyle}
+        rotate="45deg"
+        {...(primaryPlacement === 'bottom' && {
+          borderLeftWidth: borderWidth,
+          borderTopWidth: borderWidth,
+        })}
+        {...(primaryPlacement === 'top' && {
+          borderBottomWidth: borderWidth,
+          borderRightWidth: borderWidth,
+        })}
+        {...(primaryPlacement === 'right' && {
+          borderLeftWidth: borderWidth,
+          borderBottomWidth: borderWidth,
+        })}
+        {...(primaryPlacement === 'left' && {
+          borderTopWidth: borderWidth,
+          borderRightWidth: borderWidth,
+        })}
+      />
+    </PopperArrowOuterFrame>
+  )
+})
 
 /* -----------------------------------------------------------------------------------------------*/