@tamagui/popper 1.0.1-beta.92 → 1.0.1-beta.95

package/dist/cjs/Popper.js

@@ -69,7 +69,15 @@ const [createPopperContext, createScope] = (0, import_create_context.createConte
 const createPopperScope = createScope;
 const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 const Popper = (props) => {
-  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip
+  } = props;
   const [isMounted, setIsMounted] = React.useState(false);
   (0, import_core.useIsomorphicLayoutEffect)(() => {
     setIsMounted(true);
@@ -79,6 +87,7 @@ const Popper = (props) => {
   const [arrowSize, setArrowSize] = React.useState(0);
   const arrowRef = React.useRef();
   const floating = (0, import_useFloating.useFloating)({
+    strategy,
     placement,
     middleware: [
       stayInFrame ? (0, import_floating.shift)(stayInFrame) : null,
@@ -133,6 +142,16 @@ const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack,
   backgroundColor: "$background",
   alignItems: "center",
   radiused: true,
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
   defaultVariants: {
     size: "$4"
   }
@@ -157,7 +176,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
     ref: contentRefs,
     x: x || 0,
     y: y || 0,
-    position: "absolute"
+    position: strategy
   };
   return /* @__PURE__ */ React.createElement(import_stacks.YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
 }));
@@ -182,7 +201,7 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
   const context = usePopperContext(ARROW_NAME, __scopePopper);
   const tokens = (0, import_core.getTokens)();
   const sizeVal = sizeProp ?? context.size;
-  const sizeValResolved = (0, import_core.getVariableValue)((0, import_core.stepTokenUpOrDown)(tokens.space, sizeVal, 0));
+  const sizeValResolved = (0, import_core.getVariableValue)((0, import_core.stepTokenUpOrDown)(tokens.space, sizeVal, -2, [2]));
   const size = +sizeValResolved;
   const { placement } = context;
   const { x, y } = context.arrowStyle || { x: 0, y: 0 };

package/dist/cjs/Popper.js.map

@@ -1,7 +1,7 @@
 {
   "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  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\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 = UseFloatingResult & {\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = 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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 as any) || 0,\n        y: (y as any) || 0,\n        position: 'absolute',\n      }\n\n      // outer frame because we explicitly dont want animation to apply to this\n      return (\n        <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
-  "mappings": "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",
+  "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n  strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    strategy,\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val],\n          borderRadius: tokens.radius[val],\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/useFloating.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useFloating.tsx"],
-  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAWnB,MAAM,0BAA0B,gCAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,6BAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n  context?: any\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAE1C,eAA0B;AAYnB,MAAM,0BAA0B,gCAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,6BAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
   "names": []
 }

package/dist/esm/Popper.js

@@ -47,7 +47,15 @@ const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
 const createPopperScope = createScope;
 const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 const Popper = (props) => {
-  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip
+  } = props;
   const [isMounted, setIsMounted] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
     setIsMounted(true);
@@ -57,6 +65,7 @@ const Popper = (props) => {
   const [arrowSize, setArrowSize] = React.useState(0);
   const arrowRef = React.useRef();
   const floating = useFloating({
+    strategy,
     placement,
     middleware: [
       stayInFrame ? shift(stayInFrame) : null,
@@ -111,6 +120,16 @@ const PopperContentFrame = styled(ThemeableStack, {
   backgroundColor: "$background",
   alignItems: "center",
   radiused: true,
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
   defaultVariants: {
     size: "$4"
   }
@@ -135,7 +154,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
     ref: contentRefs,
     x: x || 0,
     y: y || 0,
-    position: "absolute"
+    position: strategy
   };
   return /* @__PURE__ */ React.createElement(YStack, __spreadValues({}, getFloatingProps ? getFloatingProps(frameProps) : frameProps), contents);
 }));
@@ -160,7 +179,7 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
   const context = usePopperContext(ARROW_NAME, __scopePopper);
   const tokens = getTokens();
   const sizeVal = sizeProp ?? context.size;
-  const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0));
+  const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
   const size = +sizeValResolved;
   const { placement } = context;
   const { x, y } = context.arrowStyle || { x: 0, y: 0 };

package/dist/esm/Popper.js.map

@@ -1,7 +1,7 @@
 {
   "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  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\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 = UseFloatingResult & {\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = 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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 as any) || 0,\n        y: (y as any) || 0,\n        position: 'absolute',\n      }\n\n      // outer frame because we explicitly dont want animation to apply to this\n      return (\n        <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
-  "mappings": "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",
+  "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n  strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    strategy,\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val],\n          borderRadius: tokens.radius[val],\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/useFloating.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useFloating.tsx"],
-  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
-  "mappings": "AAAA;AAEA;AAWO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n  context?: any\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
+  "mappings": "AAAA;AAEA;AAYO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
   "names": []
 }

package/dist/jsx/Popper.js

@@ -16,7 +16,15 @@ const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
 const createPopperScope = createScope;
 const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
 const Popper = (props) => {
-  const { __scopePopper, children, size, placement = "bottom", stayInFrame, allowFlip } = props;
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = "absolute",
+    placement = "bottom",
+    stayInFrame,
+    allowFlip
+  } = props;
   const [isMounted, setIsMounted] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
     setIsMounted(true);
@@ -26,6 +34,7 @@ const Popper = (props) => {
   const [arrowSize, setArrowSize] = React.useState(0);
   const arrowRef = React.useRef();
   const floating = useFloating({
+    strategy,
     placement,
     middleware: [
       stayInFrame ? shift(stayInFrame) : null,
@@ -73,6 +82,16 @@ const PopperContentFrame = styled(ThemeableStack, {
   backgroundColor: "$background",
   alignItems: "center",
   radiused: true,
+  variants: {
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val]
+        };
+      }
+    }
+  },
   defaultVariants: {
     size: "$4"
   }
@@ -91,7 +110,7 @@ const PopperContent = PopperContentFrame.extractable(React.forwardRef((props, fo
     ref: contentRefs,
     x: x || 0,
     y: y || 0,
-    position: "absolute"
+    position: strategy
   };
   return <YStack {...getFloatingProps ? getFloatingProps(frameProps) : frameProps}>{contents}</YStack>;
 }));
@@ -116,7 +135,7 @@ const PopperArrow = PopperArrowFrame.extractable(React.forwardRef(function Poppe
   const context = usePopperContext(ARROW_NAME, __scopePopper);
   const tokens = getTokens();
   const sizeVal = sizeProp != null ? sizeProp : context.size;
-  const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0));
+  const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
   const size = +sizeValResolved;
   const { placement } = context;
   const { x, y } = context.arrowStyle || { x: 0, y: 0 };

package/dist/jsx/Popper.js.map

@@ -1,7 +1,7 @@
 {
   "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  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\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 = UseFloatingResult & {\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = 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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 as any) || 0,\n        y: (y as any) || 0,\n        position: 'absolute',\n      }\n\n      // outer frame because we explicitly dont want animation to apply to this\n      return (\n        <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
-  "mappings": "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",
+  "sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n  SizeTokens,\n  StackProps,\n  getTokens,\n  getVariableValue,\n  stepTokenUpOrDown,\n  styled,\n  useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\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}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n  size?: SizeTokens\n  children?: React.ReactNode\n  placement?: Placement\n  stayInFrame?: ShiftProps\n  allowFlip?: FlipProps\n  strategy?: Strategy\n}\n\nexport const Popper: React.FC<PopperProps> = (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<HTMLSpanElement | null>(null)\n  const [arrowSize, setArrowSize] = React.useState(0)\n  const arrowRef = React.useRef()\n\n  const floating = useFloating({\n    strategy,\n    placement,\n    middleware: [\n      stayInFrame ? shift(stayInFrame) : (null as any),\n      allowFlip ? flip(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  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  }, [refs.floating.current, refs.reference.current])\n\n  const arrowStyle = React.useMemo(() => {\n    return middlewareData.arrow\n  }, [JSON.stringify(middlewareData.arrow || {})])\n\n  return (\n    <PopperProvider\n      scope={__scopePopper}\n      anchorRef={anchorRef}\n      size={size}\n      arrowRef={composedArrowRefs}\n      arrowStyle={arrowStyle}\n      onArrowSize={setArrowSize}\n      isMounted={isMounted}\n      {...floating}\n    >\n      {children}\n    </PopperProvider>\n  )\n}\n\nPopper.displayName = POPPER_NAME\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 = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\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 <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n  }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n  name: 'PopperContent',\n  backgroundColor: '$background',\n  alignItems: 'center',\n  radiused: true,\n\n  variants: {\n    size: {\n      '...size': (val, { tokens }) => {\n        return {\n          padding: tokens.space[val],\n          borderRadius: tokens.radius[val],\n        }\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: '$4',\n  },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n  React.forwardRef<PopperContentElement, PopperContentProps>(\n    (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            {...contentProps}\n            // @ts-ignore\n            size={contentProps.size || size}\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 {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n          {contents}\n        </YStack>\n      )\n    }\n  )\n)\n\nPopperContent.displayName = CONTENT_NAME\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  borderColor: '$borderColor',\n  backgroundColor: '$background',\n  position: 'absolute',\n  zIndex: 0,\n  pointerEvents: 'none',\n})\n\nconst opposites = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n}\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n    props: ScopedProps<PopperArrowProps>,\n    forwardedRef\n  ) {\n    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n    const context = usePopperContext(ARROW_NAME, __scopePopper)\n    const tokens = getTokens()\n    const sizeVal = sizeProp ?? context.size\n    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n    const size = +sizeValResolved\n    const { placement } = context\n    const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n    const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n    const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n    let arrowStyle: StackProps = { x, y, width: size, height: size }\n    if (primaryPlacement) {\n      const oppSide = opposites[primaryPlacement]\n      if (oppSide) {\n        arrowStyle[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    return (\n      <PopperArrowFrame\n        {...arrowProps}\n        ref={refs}\n        {...arrowStyle}\n        rotate=\"45deg\"\n        {...(primaryPlacement === 'top' && {\n          borderBottomWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'bottom' && {\n          borderTopWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'left' && {\n          borderTopWidth: borderWidth,\n          borderRightWidth: borderWidth,\n        })}\n        {...(primaryPlacement === 'right' && {\n          borderBottomWidth: borderWidth,\n          borderLeftWidth: borderWidth,\n        })}\n      />\n    )\n  })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport { usePopperContext }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/jsx/useFloating.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/useFloating.tsx"],
-  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingResult = ReturnType<UseFloatingFn> & {\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingResult => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
-  "mappings": "AAAA;AAEA;AAWO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAf3E;AAgBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
+  "sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n  context?: any\n  getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n  getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n  const context = useContext(FloatingOverrideContext)\n  return (context || Floating.useFloating)?.(props)\n}\n"],
+  "mappings": "AAAA;AAEA;AAYO,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,SAAQ,iBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/popper",
-  "version": "1.0.1-beta.92",
+  "version": "1.0.1-beta.95",
   "sideEffects": [
     "*.css"
   ],
@@ -23,11 +23,11 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.7.0",
     "@floating-ui/react-native": "^0.7.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.92",
-    "@tamagui/core": "^1.0.1-beta.92",
-    "@tamagui/create-context": "^1.0.1-beta.92",
-    "@tamagui/stacks": "^1.0.1-beta.92",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.92"
+    "@tamagui/compose-refs": "^1.0.1-beta.95",
+    "@tamagui/core": "^1.0.1-beta.95",
+    "@tamagui/create-context": "^1.0.1-beta.95",
+    "@tamagui/stacks": "^1.0.1-beta.95",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.95"
   },
   "peerDependencies": {
     "react": "*",
@@ -35,7 +35,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.92",
+    "@tamagui/build": "^1.0.1-beta.95",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Popper.tsx

@@ -15,8 +15,8 @@ import { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui
 import * as React from 'react'
 import { View } from 'react-native'
 
-import { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'
-import { UseFloatingResult, useFloating } from './useFloating'
+import { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'
+import { UseFloatingReturn, useFloating } from './useFloating'
 
 type ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never
 type FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never
@@ -32,7 +32,7 @@ const [createPopperContext, createScope] = createContextScope(POPPER_NAME)
 
 export const createPopperScope = createScope
 
-type PopperContextValue = UseFloatingResult & {
+type PopperContextValue = UseFloatingReturn & {
   isMounted: boolean
   anchorRef: any
   size?: SizeTokens
@@ -51,10 +51,19 @@ export type PopperProps = {
   placement?: Placement
   stayInFrame?: ShiftProps
   allowFlip?: FlipProps
+  strategy?: Strategy
 }
 
 export const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {
-  const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = props
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = 'absolute',
+    placement = 'bottom',
+    stayInFrame,
+    allowFlip,
+  } = props
 
   const [isMounted, setIsMounted] = React.useState(false)
   useIsomorphicLayoutEffect(() => {
@@ -67,6 +76,7 @@ export const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) =
   const arrowRef = React.useRef()
 
   const floating = useFloating({
+    strategy,
     placement,
     middleware: [
       stayInFrame ? shift(stayInFrame) : (null as any),
@@ -161,6 +171,17 @@ const PopperContentFrame = styled(ThemeableStack, {
   alignItems: 'center',
   radiused: true,
 
+  variants: {
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val],
+        }
+      },
+    },
+  },
+
   defaultVariants: {
     size: '$4',
   },
@@ -194,9 +215,9 @@ export const PopperContent = PopperContentFrame.extractable(
 
       const frameProps = {
         ref: contentRefs,
-        x: (x as any) || 0,
-        y: (y as any) || 0,
-        position: 'absolute',
+        x: x || 0,
+        y: y || 0,
+        position: strategy,
       }
 
       // outer frame because we explicitly dont want animation to apply to this
@@ -249,7 +270,7 @@ export const PopperArrow = PopperArrowFrame.extractable(
     const context = usePopperContext(ARROW_NAME, __scopePopper)
     const tokens = getTokens()
     const sizeVal = sizeProp ?? context.size
-    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, 0))
+    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))
     const size = +sizeValResolved
     const { placement } = context
     const { x, y } = context.arrowStyle || { x: 0, y: 0 }

package/src/useFloating.tsx

@@ -6,14 +6,15 @@ export type UseFloatingFn = typeof Floating.useFloating
 
 type UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never
 
-export type UseFloatingResult = ReturnType<UseFloatingFn> & {
+export type UseFloatingReturn = Floating.UseFloatingReturn & {
+  context?: any
   getFloatingProps?: (props: { ref: any; [key: string]: any }) => any
   getReferenceProps?: (props: { ref: any; [key: string]: any }) => any
 }
 
 export const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)
 
-export const useFloating = (props: UseFloatingProps): UseFloatingResult => {
+export const useFloating = (props: UseFloatingProps): UseFloatingReturn => {
   const context = useContext(FloatingOverrideContext)
   return (context || Floating.useFloating)?.(props)
 }

package/types/Popper.d.ts

@@ -3,12 +3,12 @@ import { Scope } from '@tamagui/create-context';
 import { SizableStackProps, YStackProps } from '@tamagui/stacks';
 import * as React from 'react';
 import { View } from 'react-native';
-import { Coords, Placement, flip, shift } from './floating';
-import { UseFloatingResult } from './useFloating';
+import { Coords, Placement, Strategy, flip, shift } from './floating';
+import { UseFloatingReturn } from './useFloating';
 declare type ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never;
 declare type FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never;
 export declare const createPopperScope: import("@tamagui/create-context").CreateScope;
-declare type PopperContextValue = UseFloatingResult & {
+declare type PopperContextValue = UseFloatingReturn & {
     isMounted: boolean;
     anchorRef: any;
     size?: SizeTokens;
@@ -26,19 +26,20 @@ export declare type PopperProps = {
     placement?: Placement;
     stayInFrame?: ShiftProps;
     allowFlip?: FlipProps;
+    strategy?: Strategy;
 };
 export declare const Popper: React.FC<PopperProps>;
 declare type PopperAnchorRef = HTMLElement | View;
 export declare type PopperAnchorProps = YStackProps & {
     virtualRef?: React.RefObject<any>;
 };
-export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
-} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
-}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
 }>> & {
@@ -46,7 +47,7 @@ export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("
 } & React.RefAttributes<PopperAnchorRef>>;
 declare type PopperContentElement = HTMLElement | View;
 export declare type PopperContentProps = SizableStackProps;
-export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
 }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -58,7 +59,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: SizeTokens | undefined;
-} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
 }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -70,7 +71,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
     elevate?: boolean | undefined;
     bordered?: number | boolean | undefined;
     size?: SizeTokens | undefined;
-}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
 }, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
@@ -88,13 +89,13 @@ export declare type PopperArrowProps = YStackProps & {
     offset?: number;
     size?: SizeTokens;
 };
-export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
-} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
-}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "children" | "display"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children"> & import("@tamagui/core").RNWViewProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & Omit<{}, "elevation" | "fullscreen"> & {
     readonly fullscreen?: boolean | undefined;
     readonly elevation?: SizeTokens | undefined;
 }>> & {

package/types/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAOX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AACtF,OAAO,EAAE,iBAAiB,EAAe,MAAM,eAAe,CAAA;AAE9D,aAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,aAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAE5C,aAAK,kBAAkB,GAAG,iBAAiB,GAAG;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,GAAG,CAAA;IACd,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF,CAAA;AACD,QAAA,MAAuB,gBAAgB,4FAAwD,CAAA;AAE/F,oBAAY,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyDxC,CAAA;AAUD,aAAK,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEzC,oBAAY,iBAAiB,GAAG,WAAW,GAAG;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;yCAexB,CAAA;AAUD,aAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE9C,oBAAY,kBAAkB,GAAG,iBAAiB,CAAA;AAalD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAyCzB,CAAA;AAUD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE5C,oBAAY,gBAAgB,GAAG,WAAW,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAkBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA6DvB,CAAA;AAMD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAOX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,iBAAiB,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AAChG,OAAO,EAAE,iBAAiB,EAAe,MAAM,eAAe,CAAA;AAE9D,aAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,aAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAE5C,aAAK,kBAAkB,GAAG,iBAAiB,GAAG;IAC5C,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,GAAG,CAAA;IACd,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,EAAE,GAAG,CAAA;IACb,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB,CAAA;CACF,CAAA;AACD,QAAA,MAAuB,gBAAgB,4FAAwD,CAAA;AAE/F,oBAAY,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,UAAU,CAAA;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkExC,CAAA;AAUD,aAAK,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEzC,oBAAY,iBAAiB,GAAG,WAAW,GAAG;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;yCAexB,CAAA;AAUD,aAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE9C,oBAAY,kBAAkB,GAAG,iBAAiB,CAAA;AAwBlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAyCzB,CAAA;AAUD,aAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE5C,oBAAY,gBAAgB,GAAG,WAAW,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAkBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA6DvB,CAAA;AAMD,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/types/useFloating.d.ts

@@ -2,7 +2,8 @@
 import * as Floating from './floating';
 export declare type UseFloatingFn = typeof Floating.useFloating;
 declare type UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never;
-export declare type UseFloatingResult = ReturnType<UseFloatingFn> & {
+export declare type UseFloatingReturn = Floating.UseFloatingReturn & {
+    context?: any;
     getFloatingProps?: (props: {
         ref: any;
         [key: string]: any;
@@ -13,6 +14,6 @@ export declare type UseFloatingResult = ReturnType<UseFloatingFn> & {
     }) => any;
 };
 export declare const FloatingOverrideContext: import("react").Context<typeof Floating.useFloating | null>;
-export declare const useFloating: (props: UseFloatingProps) => UseFloatingResult;
+export declare const useFloating: (props: UseFloatingProps) => UseFloatingReturn;
 export {};
 //# sourceMappingURL=useFloating.d.ts.map

package/types/useFloating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFloating.d.ts","sourceRoot":"","sources":["../src/useFloating.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAA;AAEtC,oBAAY,aAAa,GAAG,OAAO,QAAQ,CAAC,WAAW,CAAA;AAEvD,aAAK,gBAAgB,GAAG,aAAa,SAAS,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK,CAAA;AAEzF,oBAAY,iBAAiB,GAAG,UAAU,CAAC,aAAa,CAAC,GAAG;IAC1D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;IACnE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,uBAAuB,6DAA4C,CAAA;AAEhF,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,iBAGrD,CAAA"}
+{"version":3,"file":"useFloating.d.ts","sourceRoot":"","sources":["../src/useFloating.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,QAAQ,MAAM,YAAY,CAAA;AAEtC,oBAAY,aAAa,GAAG,OAAO,QAAQ,CAAC,WAAW,CAAA;AAEvD,aAAK,gBAAgB,GAAG,aAAa,SAAS,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK,CAAA;AAEzF,oBAAY,iBAAiB,GAAG,QAAQ,CAAC,iBAAiB,GAAG;IAC3D,OAAO,CAAC,EAAE,GAAG,CAAA;IACb,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;IACnE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,GAAG,EAAE,GAAG,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,KAAK,GAAG,CAAA;CACrE,CAAA;AAED,eAAO,MAAM,uBAAuB,6DAA4C,CAAA;AAEhF,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,iBAGrD,CAAA"}

package/types/floating.d.ts

@@ -1,2 +0,0 @@
-export * from '@floating-ui/react-dom';
-//# sourceMappingURL=floating.d.ts.map

package/types/floating.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"floating.d.ts","sourceRoot":"","sources":["../src/floating.tsx"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA"}

package/types/floating.native.d.ts

@@ -1,2 +0,0 @@
-export * from '@floating-ui/react-native';
-//# sourceMappingURL=floating.native.d.ts.map

package/types/floating.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"floating.native.d.ts","sourceRoot":"","sources":["../src/floating.native.tsx"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA"}