@tamagui/popper 1.14.0 → 1.14.2

package/dist/jsx/Popper.js

@@ -1,2 +1,281 @@
-import{useComposedRefs as g}from"@tamagui/compose-refs";import{getVariableValue as T,isWeb as W,styled as k,useIsomorphicLayoutEffect as z}from"@tamagui/core";import{createContextScope as L}from"@tamagui/create-context";import{arrow as N,autoUpdate as I,flip as D,offset as H,shift as Y,useFloating as U}from"@tamagui/floating";import{stepTokenUpOrDown as $}from"@tamagui/get-size";import{ThemeableStack as B,YStack as R}from"@tamagui/stacks";import*as n from"react";import{Keyboard as E,useWindowDimensions as j}from"react-native";const O="Popper",[K,q]=L(O),Fe=q,[G,C]=K(O);function _e(f){const{__scopePopper:p,children:d,size:P,strategy:u="absolute",placement:c="bottom",stayInFrame:e,allowFlip:a}=f,[r,m]=n.useState(!1);z(()=>{m(!0)},[]);const i=n.useRef(),[t,y]=n.useState(null),[w,h]=n.useState(0),S=n.useRef(),o=U({strategy:u,placement:c,sameScrollView:!1,middleware:[e?Y(typeof e=="boolean"?{}:e):null,a?D(typeof a=="boolean"?{}:a):null,t?N({element:t}):null,w?H(w):null].filter(Boolean)}),{refs:s,middlewareData:A}=o,x=g(S,y);if(z(()=>{o.reference(i.current)},[i]),W)n.useEffect(()=>{if(s.reference.current&&s.floating.current)return I(s.reference.current,s.floating.current,o.update)},[o.update,s.floating,s.reference]);else{const l=j(),[F,v]=n.useState(!1);n.useEffect(()=>{const _=E.addListener("keyboardDidShow",()=>{v(!0)}),M=E.addListener("keyboardDidHide",()=>{v(!1)});return()=>{_.remove(),M.remove()}},[]),z(()=>{o.update()},[l,F])}return<G scope={p}anchorRef={i}size={P}arrowRef={x}arrowStyle={A.arrow}onArrowSize={h}isMounted={r}{...o}>{d}</G>}const J="PopperAnchor",Me=R.extractable(n.forwardRef(function(p,d){const{__scopePopper:P,virtualRef:u,...c}=p,{anchorRef:e,getReferenceProps:a}=C(J,P),r=n.useRef(null),m=g(d,r,e);if(u)return null;const i={ref:m,...c};return<R{...a?a(i):i}/>})),Q="PopperContent",X=k(B,{name:"PopperContent",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",alignItems:"center",radiused:!0}},size:{"...size":(f,{tokens:p})=>({padding:p.space[f],borderRadius:p.radius[f]})}},defaultVariants:{unstyled:!1}}),Te=n.forwardRef(function(p,d){const{__scopePopper:P,...u}=p,{strategy:c,placement:e,floating:a,x:r,y:m,getFloatingProps:i,size:t,isMounted:y}=C(Q,P),w=g(a,d),h=n.useMemo(()=><X key="popper-content-frame"data-placement={e}data-strategy={c}size={u.size||t}{...u}/>,[e,c,p]);if(!y)return null;const S={ref:w,x:r||0,y:m||0,position:c};return<R animateOnly={["transform"]}{...i?i(S):S}>{h}</R>}),Z="PopperArrow",V=k(R,{name:"PopperArrow",variants:{unstyled:{false:{borderColor:"$borderColor",backgroundColor:"$background",position:"relative"}}},defaultVariants:{unstyled:!1}}),Pe=k(R,{name:"PopperArrowOuter",variants:{unstyled:{false:{position:"absolute",zIndex:-1,pointerEvents:"none",overflow:"hidden",alignItems:"center",justifyContent:"center"}}},defaultVariants:{unstyled:!1}}),ue={top:"bottom",right:"left",bottom:"top",left:"right"},We=V.extractable(n.forwardRef(function(p,d){const{__scopePopper:P,offset:u,size:c,borderWidth:e=0,...a}=p,r=C(Z,P),m=c??r.size,t=+T($("space",m,-2,[2])),{placement:y}=r,w=g(r.arrowRef,d),h=r.arrowStyle?.x||0,S=r.arrowStyle?.y||0,o=y?y.split("-")[0]:"top",s={x:h,y:S,width:t,height:t},A={},x=o==="bottom"||o==="top";if(o){s[x?"width":"height"]=t*2;const l=ue[o];l&&(s[l]=-t,A[l]=t/2),(l==="top"||l==="bottom")&&(s.left=0),(l==="left"||l==="right")&&(s.top=0)}return z(()=>{r.onArrowSize?.(t)},[t,r.onArrowSize]),<Pe ref={w}{...s}><V width={t}height={t}{...a}{...A}rotate="45deg"{...o==="bottom"&&{borderBottomWidth:e,borderRightWidth:e}}{...o==="top"&&{borderTopWidth:e,borderLeftWidth:e}}{...o==="right"&&{borderTopWidth:e,borderRightWidth:e}}{...o==="left"&&{borderBottomWidth:e,borderLeftWidth:e}}/></Pe>}));export{_e as Popper,Me as PopperAnchor,We as PopperArrow,Te as PopperContent,X as PopperContentFrame,G as PopperProvider,Fe as createPopperScope,C as usePopperContext};
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getVariableValue,
+  isWeb,
+  styled,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating
+} from "@tamagui/floating";
+import { stepTokenUpOrDown } from "@tamagui/get-size";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { Keyboard, useWindowDimensions } from "react-native";
+const POPPER_NAME = "Popper";
+const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
+const createPopperScope = createScope;
+const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+function Popper(props) {
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip
+  } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const anchorRef = React.useRef();
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const arrowRef = React.useRef();
+  const floating = useFloating({
+    strategy,
+    placement,
+    sameScrollView: false,
+    // this only takes effect on native
+    middleware: [
+      stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
+      allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
+      arrowEl ? arrow({ element: arrowEl }) : null,
+      arrowSize ? offset(arrowSize) : null
+    ].filter(Boolean)
+  });
+  const { refs, middlewareData } = floating;
+  const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
+  useIsomorphicLayoutEffect(() => {
+    floating.reference(anchorRef.current);
+  }, [anchorRef]);
+  if (isWeb) {
+    React.useEffect(() => {
+      if (!(refs.reference.current && refs.floating.current)) {
+        return;
+      }
+      return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
+    }, [floating.update, refs.floating, refs.reference]);
+  } else {
+    const dimensions = useWindowDimensions();
+    const [keyboardOpen, setKeyboardOpen] = React.useState(false);
+    React.useEffect(() => {
+      const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+        setKeyboardOpen(true);
+      });
+      const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+        setKeyboardOpen(false);
+      });
+      return () => {
+        showSubscription.remove();
+        hideSubscription.remove();
+      };
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+      floating.update();
+    }, [dimensions, keyboardOpen]);
+  }
+  return <PopperProvider
+    scope={__scopePopper}
+    anchorRef={anchorRef}
+    size={size}
+    arrowRef={composedArrowRefs}
+    arrowStyle={middlewareData.arrow}
+    onArrowSize={setArrowSize}
+    isMounted={isMounted}
+    {...floating}
+  >{children}</PopperProvider>;
+}
+const ANCHOR_NAME = "PopperAnchor";
+const PopperAnchor = YStack.extractable(
+  React.forwardRef(function PopperAnchor2(props, forwardedRef) {
+    const { __scopePopper, virtualRef, ...anchorProps } = props;
+    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
+    if (virtualRef) {
+      return null;
+    }
+    const stackProps = {
+      ref: composedRefs,
+      ...anchorProps
+    };
+    return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
+  })
+);
+const CONTENT_NAME = "PopperContent";
+const PopperContentFrame = styled(ThemeableStack, {
+  name: "PopperContent",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        backgroundColor: "$background",
+        alignItems: "center",
+        radiused: true
+      }
+    },
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const PopperContent = React.forwardRef(
+  function PopperContent2(props, forwardedRef) {
+    const { __scopePopper, ...contentProps } = props;
+    const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
+    const contentRefs = useComposedRefs(floating, forwardedRef);
+    const contents = React.useMemo(() => {
+      return <PopperContentFrame
+        key="popper-content-frame"
+        data-placement={placement}
+        data-strategy={strategy}
+        size={contentProps.size || size}
+        {...contentProps}
+      />;
+    }, [placement, strategy, props]);
+    if (!isMounted) {
+      return null;
+    }
+    const frameProps = {
+      ref: contentRefs,
+      x: x || 0,
+      y: y || 0,
+      position: strategy
+    };
+    return <YStack
+      animateOnly={["transform"]}
+      {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}
+    >{contents}</YStack>;
+  }
+);
+const ARROW_NAME = "PopperArrow";
+const PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  variants: {
+    unstyled: {
+      false: {
+        borderColor: "$borderColor",
+        backgroundColor: "$background",
+        position: "relative"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const PopperArrowOuterFrame = styled(YStack, {
+  name: "PopperArrowOuter",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        zIndex: -1,
+        pointerEvents: "none",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = PopperArrowFrame.extractable(
+  React.forwardRef(function PopperArrow2(props, forwardedRef) {
+    const {
+      __scopePopper,
+      offset: offset2,
+      size: sizeProp,
+      borderWidth = 0,
+      ...arrowProps
+    } = props;
+    const context = usePopperContext(ARROW_NAME, __scopePopper);
+    const sizeVal = sizeProp ?? context.size;
+    const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
+    const size = +sizeValResolved;
+    const { placement } = context;
+    const refs = useComposedRefs(context.arrowRef, forwardedRef);
+    const x = context.arrowStyle?.x || 0;
+    const y = context.arrowStyle?.y || 0;
+    const primaryPlacement = placement ? placement.split("-")[0] : "top";
+    const arrowStyle = { x, y, width: size, height: size };
+    const innerArrowStyle = {};
+    const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+    if (primaryPlacement) {
+      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;
+      }
+    }
+    useIsomorphicLayoutEffect(() => {
+      context.onArrowSize?.(size);
+    }, [size, context.onArrowSize]);
+    return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
+      width={size}
+      height={size}
+      {...arrowProps}
+      {...innerArrowStyle}
+      rotate="45deg"
+      {...primaryPlacement === "bottom" && {
+        borderBottomWidth: borderWidth,
+        borderRightWidth: borderWidth
+      }}
+      {...primaryPlacement === "top" && {
+        borderTopWidth: borderWidth,
+        borderLeftWidth: borderWidth
+      }}
+      {...primaryPlacement === "right" && {
+        borderTopWidth: borderWidth,
+        borderRightWidth: borderWidth
+      }}
+      {...primaryPlacement === "left" && {
+        borderBottomWidth: borderWidth,
+        borderLeftWidth: borderWidth
+      }}
+    /></PopperArrowOuterFrame>;
+  })
+);
+export {
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  PopperContentFrame,
+  PopperProvider,
+  createPopperScope,
+  usePopperContext
+};
 //# sourceMappingURL=Popper.js.map

package/dist/jsx/Popper.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/Popper.tsx"],
   "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getVariableValue,\n  isWeb,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport {\n  Coords,\n  Placement,\n  Strategy,\n  UseFloatingReturn,\n  arrow,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useFloating,\n} from '@tamagui/floating'\nimport { stepTokenUpOrDown } from '@tamagui/get-size'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Keyboard, View, useWindowDimensions } from 'react-native'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n  isMounted: boolean\n  anchorRef: any\n  size?: SizeTokens\n  placement?: Placement\n  arrowRef: any\n  onArrowSize?: (val: number) => void\n  arrowStyle?: Partial<Coords> & {\n    centerOffset: number\n  }\n}\nexport const [PopperProvider, usePopperContext] =\n  createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps | boolean\n  allowFlip?: FlipProps | boolean\n  strategy?: Strategy\n}\n\nexport function Popper(props: ScopedProps<PopperProps>) {\n  const {\n    __scopePopper,\n    children,\n    size,\n    strategy = 'absolute',\n    placement = 'bottom',\n    stayInFrame,\n    allowFlip,\n  } = props\n\n  const [isMounted, setIsMounted] = React.useState(false)\n  useIsomorphicLayoutEffect(() => {\n    setIsMounted(true)\n  }, [])\n\n  const anchorRef = React.useRef<any>()\n  const [arrowEl, setArrow] = React.useState<any>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    strategy,\n    placement,\n    sameScrollView: false, // this only takes effect on native\n    middleware: [\n      stayInFrame\n        ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame)\n        : (null as any),\n      allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : allowFlip) : (null as any),\n      arrowEl ? arrow({ element: arrowEl }) : (null as any),\n      arrowSize ? offset(arrowSize) : (null as any),\n    ].filter(Boolean),\n  })\n\n  const { refs, middlewareData } = floating\n\n  const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n  useIsomorphicLayoutEffect(() => {\n    floating.reference(anchorRef.current)\n  }, [anchorRef])\n\n  if (isWeb) {\n    React.useEffect(() => {\n      if (!(refs.reference.current && refs.floating.current)) {\n        return\n      }\n      // Only call this when the floating element is rendered\n      return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n    }, [floating.update, refs.floating, refs.reference])\n  } else {\n    // On Native there's no autoupdate so we call update() when necessary\n\n    // Subscribe to window dimensions (orientation, scale, etc...)\n    const dimensions = useWindowDimensions()\n\n    // Subscribe to keyboard state\n    const [keyboardOpen, setKeyboardOpen] = React.useState(false)\n    React.useEffect(() => {\n      const showSubscription = Keyboard.addListener('keyboardDidShow', () => {\n        setKeyboardOpen(true)\n      })\n      const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {\n        setKeyboardOpen(false)\n      })\n\n      return () => {\n        showSubscription.remove()\n        hideSubscription.remove()\n      }\n    }, [])\n\n    useIsomorphicLayoutEffect(() => {\n      floating.update()\n    }, [dimensions, keyboardOpen])\n  }\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={middlewareData.arrow}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n  virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = YStack.extractable(\n  React.forwardRef<PopperAnchorRef, PopperAnchorProps>(function PopperAnchor(\n    props: ScopedProps<PopperAnchorProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, virtualRef, ...anchorProps } = props\n    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n    const ref = React.useRef<PopperAnchorRef>(null)\n    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n    if (virtualRef) {\n      return null\n    }\n    const stackProps = {\n      ref: composedRefs,\n      ...anchorProps,\n    }\n    return (\n      <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n    )\n  })\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nexport const PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n\n  variants: {\n    unstyled: {\n      false: {\n        size: '$true',\n        backgroundColor: '$background',\n        alignItems: 'center',\n        radiused: true,\n      },\n    },\n\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val],\n          borderRadius: tokens.radius[val],\n        }\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nexport const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n  function PopperContent(props: ScopedProps<PopperContentProps>, forwardedRef) {\n    const { __scopePopper, ...contentProps } = props\n    const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n      usePopperContext(CONTENT_NAME, __scopePopper)\n    const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n    const contents = React.useMemo(() => {\n      return (\n        <PopperContentFrame\n          key=\"popper-content-frame\"\n          data-placement={placement}\n          data-strategy={strategy}\n          size={contentProps.size || size}\n          {...contentProps}\n        />\n      )\n    }, [placement, strategy, props])\n\n    // all poppers hidden on ssr by default\n    if (!isMounted) {\n      return null\n    }\n\n    const frameProps = {\n      ref: contentRefs,\n      x: x || 0,\n      y: y || 0,\n      position: strategy,\n    }\n\n    // outer frame because we explicitly dont want animation to apply to this\n    return (\n      <YStack\n        animateOnly={['transform']}\n        {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}\n      >\n        {contents}\n      </YStack>\n    )\n  }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n  offset?: number\n  size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n  name: 'PopperArrow',\n\n  variants: {\n    unstyled: {\n      false: {\n        borderColor: '$borderColor',\n        backgroundColor: '$background',\n        position: 'relative',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n  name: 'PopperArrowOuter',\n\n  variants: {\n    unstyled: {\n      false: {\n        position: 'absolute',\n        zIndex: -1,\n        pointerEvents: 'none',\n        overflow: 'hidden',\n        alignItems: 'center',\n        justifyContent: 'center',\n      },\n    },\n  } as const,\n\n  defaultVariants: {\n    unstyled: false,\n  },\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const {\n      __scopePopper,\n      offset,\n      size: sizeProp,\n      borderWidth = 0,\n      ...arrowProps\n    } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown('space', sizeVal, -2, [2]))\n    const size = +sizeValResolved\n    const { placement } = context\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    // Sometimes floating-ui can return NaN during orientation or screen size changes on native\n    // so we explictly force the x,y position types as a number\n    const x = (context.arrowStyle?.x as number) || 0\n    const y = (context.arrowStyle?.y as number) || 0\n\n    const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides\n\n    const arrowStyle: StackProps = { x, y, width: size, height: size }\n    const innerArrowStyle: StackProps = {}\n    const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n    if (primaryPlacement) {\n      // allows for extra diagonal size\n      arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[oppSide] = -size\n        innerArrowStyle[oppSide] = size / 2\n      }\n      if (oppSide === 'top' || oppSide === 'bottom') {\n        arrowStyle.left = 0\n      }\n      if (oppSide === 'left' || oppSide === 'right') {\n        arrowStyle.top = 0\n      }\n    }\n\n    // send the Arrow's offset up to Popper\n    useIsomorphicLayoutEffect(() => {\n      context.onArrowSize?.(size)\n    }, [size, context.onArrowSize])\n\n    // outer frame to cut off for ability to have nicer shadows/borders\n    return (\n      <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n        <PopperArrowFrame\n          width={size}\n          height={size}\n          {...arrowProps}\n          {...innerArrowStyle}\n          rotate=\"45deg\"\n          {...(primaryPlacement === 'bottom' && {\n            borderBottomWidth: borderWidth,\n            borderRightWidth: borderWidth,\n          })}\n          {...(primaryPlacement === 'top' && {\n            borderTopWidth: borderWidth,\n            borderLeftWidth: borderWidth,\n          })}\n          {...(primaryPlacement === 'right' && {\n            borderTopWidth: borderWidth,\n            borderRightWidth: borderWidth,\n          })}\n          {...(primaryPlacement === 'left' && {\n            borderBottomWidth: borderWidth,\n            borderLeftWidth: borderWidth,\n          })}\n        />\n      </PopperArrowOuterFrame>\n    )\n  })\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
-  "mappings": "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",
-  "names": ["useComposedRefs", "getVariableValue", "isWeb", "styled", "useIsomorphicLayoutEffect", "createContextScope", "arrow", "autoUpdate", "flip", "offset", "shift", "useFloating", "stepTokenUpOrDown", "ThemeableStack", "YStack", "React", "Keyboard", "useWindowDimensions", "POPPER_NAME", "createPopperContext", "createScope", "createPopperScope", "PopperProvider", "usePopperContext", "Popper", "props", "__scopePopper", "children", "size", "strategy", "placement", "stayInFrame", "allowFlip", "isMounted", "setIsMounted", "anchorRef", "arrowEl", "setArrow", "arrowSize", "setArrowSize", "arrowRef", "floating", "refs", "middlewareData", "composedArrowRefs", "dimensions", "keyboardOpen", "setKeyboardOpen", "showSubscription", "hideSubscription", "ANCHOR_NAME", "PopperAnchor", "forwardedRef", "virtualRef", "anchorProps", "getReferenceProps", "ref", "composedRefs", "stackProps", "CONTENT_NAME", "PopperContentFrame", "val", "tokens", "PopperContent", "contentProps", "x", "y", "getFloatingProps", "contentRefs", "contents", "frameProps", "ARROW_NAME", "PopperArrowFrame", "PopperArrowOuterFrame", "opposites", "PopperArrow", "sizeProp", "borderWidth", "arrowProps", "context", "sizeVal", "primaryPlacement", "arrowStyle", "innerArrowStyle", "isVertical", "oppSide"]
+  "mappings": "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",
+  "names": ["PopperAnchor", "PopperContent", "PopperArrow", "offset"]
 }

package/dist/jsx/Popper.mjs

@@ -1,2 +1,281 @@
-import{useComposedRefs as g}from"@tamagui/compose-refs";import{getVariableValue as T,isWeb as W,styled as k,useIsomorphicLayoutEffect as z}from"@tamagui/core";import{createContextScope as L}from"@tamagui/create-context";import{arrow as N,autoUpdate as I,flip as D,offset as H,shift as Y,useFloating as U}from"@tamagui/floating";import{stepTokenUpOrDown as $}from"@tamagui/get-size";import{ThemeableStack as B,YStack as R}from"@tamagui/stacks";import*as n from"react";import{Keyboard as E,useWindowDimensions as j}from"react-native";const O="Popper",[K,q]=L(O),Fe=q,[G,C]=K(O);function _e(f){const{__scopePopper:p,children:d,size:P,strategy:u="absolute",placement:c="bottom",stayInFrame:e,allowFlip:a}=f,[r,m]=n.useState(!1);z(()=>{m(!0)},[]);const i=n.useRef(),[t,y]=n.useState(null),[w,h]=n.useState(0),S=n.useRef(),o=U({strategy:u,placement:c,sameScrollView:!1,middleware:[e?Y(typeof e=="boolean"?{}:e):null,a?D(typeof a=="boolean"?{}:a):null,t?N({element:t}):null,w?H(w):null].filter(Boolean)}),{refs:s,middlewareData:A}=o,x=g(S,y);if(z(()=>{o.reference(i.current)},[i]),W)n.useEffect(()=>{if(s.reference.current&&s.floating.current)return I(s.reference.current,s.floating.current,o.update)},[o.update,s.floating,s.reference]);else{const l=j(),[F,v]=n.useState(!1);n.useEffect(()=>{const _=E.addListener("keyboardDidShow",()=>{v(!0)}),M=E.addListener("keyboardDidHide",()=>{v(!1)});return()=>{_.remove(),M.remove()}},[]),z(()=>{o.update()},[l,F])}return<G scope={p}anchorRef={i}size={P}arrowRef={x}arrowStyle={A.arrow}onArrowSize={h}isMounted={r}{...o}>{d}</G>}const J="PopperAnchor",Me=R.extractable(n.forwardRef(function(p,d){const{__scopePopper:P,virtualRef:u,...c}=p,{anchorRef:e,getReferenceProps:a}=C(J,P),r=n.useRef(null),m=g(d,r,e);if(u)return null;const i={ref:m,...c};return<R{...a?a(i):i}/>})),Q="PopperContent",X=k(B,{name:"PopperContent",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",alignItems:"center",radiused:!0}},size:{"...size":(f,{tokens:p})=>({padding:p.space[f],borderRadius:p.radius[f]})}},defaultVariants:{unstyled:!1}}),Te=n.forwardRef(function(p,d){const{__scopePopper:P,...u}=p,{strategy:c,placement:e,floating:a,x:r,y:m,getFloatingProps:i,size:t,isMounted:y}=C(Q,P),w=g(a,d),h=n.useMemo(()=><X key="popper-content-frame"data-placement={e}data-strategy={c}size={u.size||t}{...u}/>,[e,c,p]);if(!y)return null;const S={ref:w,x:r||0,y:m||0,position:c};return<R animateOnly={["transform"]}{...i?i(S):S}>{h}</R>}),Z="PopperArrow",V=k(R,{name:"PopperArrow",variants:{unstyled:{false:{borderColor:"$borderColor",backgroundColor:"$background",position:"relative"}}},defaultVariants:{unstyled:!1}}),Pe=k(R,{name:"PopperArrowOuter",variants:{unstyled:{false:{position:"absolute",zIndex:-1,pointerEvents:"none",overflow:"hidden",alignItems:"center",justifyContent:"center"}}},defaultVariants:{unstyled:!1}}),ue={top:"bottom",right:"left",bottom:"top",left:"right"},We=V.extractable(n.forwardRef(function(p,d){const{__scopePopper:P,offset:u,size:c,borderWidth:e=0,...a}=p,r=C(Z,P),m=c??r.size,t=+T($("space",m,-2,[2])),{placement:y}=r,w=g(r.arrowRef,d),h=r.arrowStyle?.x||0,S=r.arrowStyle?.y||0,o=y?y.split("-")[0]:"top",s={x:h,y:S,width:t,height:t},A={},x=o==="bottom"||o==="top";if(o){s[x?"width":"height"]=t*2;const l=ue[o];l&&(s[l]=-t,A[l]=t/2),(l==="top"||l==="bottom")&&(s.left=0),(l==="left"||l==="right")&&(s.top=0)}return z(()=>{r.onArrowSize?.(t)},[t,r.onArrowSize]),<Pe ref={w}{...s}><V width={t}height={t}{...a}{...A}rotate="45deg"{...o==="bottom"&&{borderBottomWidth:e,borderRightWidth:e}}{...o==="top"&&{borderTopWidth:e,borderLeftWidth:e}}{...o==="right"&&{borderTopWidth:e,borderRightWidth:e}}{...o==="left"&&{borderBottomWidth:e,borderLeftWidth:e}}/></Pe>}));export{_e as Popper,Me as PopperAnchor,We as PopperArrow,Te as PopperContent,X as PopperContentFrame,G as PopperProvider,Fe as createPopperScope,C as usePopperContext};
+import { useComposedRefs } from "@tamagui/compose-refs";
+import {
+  getVariableValue,
+  isWeb,
+  styled,
+  useIsomorphicLayoutEffect
+} from "@tamagui/core";
+import { createContextScope } from "@tamagui/create-context";
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating
+} from "@tamagui/floating";
+import { stepTokenUpOrDown } from "@tamagui/get-size";
+import { ThemeableStack, YStack } from "@tamagui/stacks";
+import * as React from "react";
+import { Keyboard, useWindowDimensions } from "react-native";
+const POPPER_NAME = "Popper";
+const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
+const createPopperScope = createScope;
+const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+function Popper(props) {
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip
+  } = props;
+  const [isMounted, setIsMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const anchorRef = React.useRef();
+  const [arrowEl, setArrow] = React.useState(null);
+  const [arrowSize, setArrowSize] = React.useState(0);
+  const arrowRef = React.useRef();
+  const floating = useFloating({
+    strategy,
+    placement,
+    sameScrollView: false,
+    // this only takes effect on native
+    middleware: [
+      stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
+      allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
+      arrowEl ? arrow({ element: arrowEl }) : null,
+      arrowSize ? offset(arrowSize) : null
+    ].filter(Boolean)
+  });
+  const { refs, middlewareData } = floating;
+  const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
+  useIsomorphicLayoutEffect(() => {
+    floating.reference(anchorRef.current);
+  }, [anchorRef]);
+  if (isWeb) {
+    React.useEffect(() => {
+      if (!(refs.reference.current && refs.floating.current)) {
+        return;
+      }
+      return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
+    }, [floating.update, refs.floating, refs.reference]);
+  } else {
+    const dimensions = useWindowDimensions();
+    const [keyboardOpen, setKeyboardOpen] = React.useState(false);
+    React.useEffect(() => {
+      const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+        setKeyboardOpen(true);
+      });
+      const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+        setKeyboardOpen(false);
+      });
+      return () => {
+        showSubscription.remove();
+        hideSubscription.remove();
+      };
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+      floating.update();
+    }, [dimensions, keyboardOpen]);
+  }
+  return <PopperProvider
+    scope={__scopePopper}
+    anchorRef={anchorRef}
+    size={size}
+    arrowRef={composedArrowRefs}
+    arrowStyle={middlewareData.arrow}
+    onArrowSize={setArrowSize}
+    isMounted={isMounted}
+    {...floating}
+  >{children}</PopperProvider>;
+}
+const ANCHOR_NAME = "PopperAnchor";
+const PopperAnchor = YStack.extractable(
+  React.forwardRef(function PopperAnchor2(props, forwardedRef) {
+    const { __scopePopper, virtualRef, ...anchorProps } = props;
+    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
+    const ref = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
+    if (virtualRef) {
+      return null;
+    }
+    const stackProps = {
+      ref: composedRefs,
+      ...anchorProps
+    };
+    return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
+  })
+);
+const CONTENT_NAME = "PopperContent";
+const PopperContentFrame = styled(ThemeableStack, {
+  name: "PopperContent",
+  variants: {
+    unstyled: {
+      false: {
+        size: "$true",
+        backgroundColor: "$background",
+        alignItems: "center",
+        radiused: true
+      }
+    },
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const PopperContent = React.forwardRef(
+  function PopperContent2(props, forwardedRef) {
+    const { __scopePopper, ...contentProps } = props;
+    const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
+    const contentRefs = useComposedRefs(floating, forwardedRef);
+    const contents = React.useMemo(() => {
+      return <PopperContentFrame
+        key="popper-content-frame"
+        data-placement={placement}
+        data-strategy={strategy}
+        size={contentProps.size || size}
+        {...contentProps}
+      />;
+    }, [placement, strategy, props]);
+    if (!isMounted) {
+      return null;
+    }
+    const frameProps = {
+      ref: contentRefs,
+      x: x || 0,
+      y: y || 0,
+      position: strategy
+    };
+    return <YStack
+      animateOnly={["transform"]}
+      {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}
+    >{contents}</YStack>;
+  }
+);
+const ARROW_NAME = "PopperArrow";
+const PopperArrowFrame = styled(YStack, {
+  name: "PopperArrow",
+  variants: {
+    unstyled: {
+      false: {
+        borderColor: "$borderColor",
+        backgroundColor: "$background",
+        position: "relative"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const PopperArrowOuterFrame = styled(YStack, {
+  name: "PopperArrowOuter",
+  variants: {
+    unstyled: {
+      false: {
+        position: "absolute",
+        zIndex: -1,
+        pointerEvents: "none",
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }
+  },
+  defaultVariants: {
+    unstyled: false
+  }
+});
+const opposites = {
+  top: "bottom",
+  right: "left",
+  bottom: "top",
+  left: "right"
+};
+const PopperArrow = PopperArrowFrame.extractable(
+  React.forwardRef(function PopperArrow2(props, forwardedRef) {
+    const {
+      __scopePopper,
+      offset: offset2,
+      size: sizeProp,
+      borderWidth = 0,
+      ...arrowProps
+    } = props;
+    const context = usePopperContext(ARROW_NAME, __scopePopper);
+    const sizeVal = sizeProp ?? context.size;
+    const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
+    const size = +sizeValResolved;
+    const { placement } = context;
+    const refs = useComposedRefs(context.arrowRef, forwardedRef);
+    const x = context.arrowStyle?.x || 0;
+    const y = context.arrowStyle?.y || 0;
+    const primaryPlacement = placement ? placement.split("-")[0] : "top";
+    const arrowStyle = { x, y, width: size, height: size };
+    const innerArrowStyle = {};
+    const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+    if (primaryPlacement) {
+      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;
+      }
+    }
+    useIsomorphicLayoutEffect(() => {
+      context.onArrowSize?.(size);
+    }, [size, context.onArrowSize]);
+    return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
+      width={size}
+      height={size}
+      {...arrowProps}
+      {...innerArrowStyle}
+      rotate="45deg"
+      {...primaryPlacement === "bottom" && {
+        borderBottomWidth: borderWidth,
+        borderRightWidth: borderWidth
+      }}
+      {...primaryPlacement === "top" && {
+        borderTopWidth: borderWidth,
+        borderLeftWidth: borderWidth
+      }}
+      {...primaryPlacement === "right" && {
+        borderTopWidth: borderWidth,
+        borderRightWidth: borderWidth
+      }}
+      {...primaryPlacement === "left" && {
+        borderBottomWidth: borderWidth,
+        borderLeftWidth: borderWidth
+      }}
+    /></PopperArrowOuterFrame>;
+  })
+);
+export {
+  Popper,
+  PopperAnchor,
+  PopperArrow,
+  PopperContent,
+  PopperContentFrame,
+  PopperProvider,
+  createPopperScope,
+  usePopperContext
+};
 //# sourceMappingURL=Popper.mjs.map