@tamagui/popper 1.0.1-beta.21 → 1.0.1-beta.211

package/src/Popper.tsx

@@ -0,0 +1,346 @@
+// adapted from radix-ui popper
+
+import { useComposedRefs } from '@tamagui/compose-refs'
+import {
+  SizeTokens,
+  StackProps,
+  getTokens,
+  getVariableValue,
+  stepTokenUpOrDown,
+  styled,
+  useIsomorphicLayoutEffect,
+} from '@tamagui/core'
+import { Scope, createContextScope } from '@tamagui/create-context'
+import { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'
+import * as React from 'react'
+import { View } from 'react-native'
+
+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
+
+/* -------------------------------------------------------------------------------------------------
+ * Popper
+ * -----------------------------------------------------------------------------------------------*/
+
+const POPPER_NAME = 'Popper'
+
+type ScopedProps<P> = P & { __scopePopper?: Scope }
+const [createPopperContext, createScope] = createContextScope(POPPER_NAME)
+
+export const createPopperScope = createScope
+
+type PopperContextValue = UseFloatingReturn & {
+  isMounted: boolean
+  anchorRef: any
+  size?: SizeTokens
+  placement?: Placement
+  arrowRef: any
+  onArrowSize?: (val: number) => void
+  arrowStyle?: Partial<Coords> & {
+    centerOffset: number
+  }
+}
+const [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)
+
+export type PopperProps = {
+  size?: SizeTokens
+  children?: React.ReactNode
+  placement?: Placement
+  stayInFrame?: ShiftProps | boolean
+  allowFlip?: FlipProps | boolean
+  strategy?: Strategy
+}
+
+export const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {
+  const {
+    __scopePopper,
+    children,
+    size,
+    strategy = 'absolute',
+    placement = 'bottom',
+    stayInFrame,
+    allowFlip,
+  } = props
+
+  const [isMounted, setIsMounted] = React.useState(false)
+  useIsomorphicLayoutEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const anchorRef = React.useRef<any>()
+  const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)
+  const [arrowSize, setArrowSize] = React.useState(0)
+  const arrowRef = React.useRef()
+
+  const floating = useFloating({
+    strategy,
+    placement,
+    middleware: [
+      stayInFrame ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame) : (null as any),
+      allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : allowFlip) : (null as any),
+      arrowEl ? arrow({ element: arrowEl }) : (null as any),
+      arrowSize ? offset(arrowSize) : (null as any),
+    ].filter(Boolean),
+  })
+
+  const { refs, middlewareData } = floating
+
+  const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)
+
+  useIsomorphicLayoutEffect(() => {
+    floating.reference(anchorRef.current)
+  }, [anchorRef])
+
+  React.useEffect(() => {
+    if (!refs.reference.current || !refs.floating.current) {
+      return
+    }
+    // Only call this when the floating element is rendered
+    return autoUpdate(refs.reference.current, refs.floating.current, floating.update)
+  }, [floating.update, refs.floating, refs.reference])
+
+  return (
+    <PopperProvider
+      scope={__scopePopper}
+      anchorRef={anchorRef}
+      size={size}
+      arrowRef={composedArrowRefs}
+      arrowStyle={middlewareData.arrow}
+      onArrowSize={setArrowSize}
+      isMounted={isMounted}
+      {...floating}
+    >
+      {children}
+    </PopperProvider>
+  )
+}
+
+Popper.displayName = POPPER_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * PopperAnchor
+ * -----------------------------------------------------------------------------------------------*/
+
+const ANCHOR_NAME = 'PopperAnchor'
+
+type PopperAnchorRef = HTMLElement | View
+
+export type PopperAnchorProps = YStackProps & {
+  virtualRef?: React.RefObject<any>
+}
+
+export const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(
+  (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {
+    const { __scopePopper, virtualRef, ...anchorProps } = props
+    const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)
+    const ref = React.useRef<PopperAnchorRef>(null)
+    const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)
+    if (virtualRef) {
+      return null
+    }
+    const stackProps = {
+      ref: composedRefs,
+      ...anchorProps,
+    }
+    return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />
+  }
+)
+
+PopperAnchor.displayName = ANCHOR_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * PopperContent
+ * -----------------------------------------------------------------------------------------------*/
+
+const CONTENT_NAME = 'PopperContent'
+
+type PopperContentElement = HTMLElement | View
+
+export type PopperContentProps = SizableStackProps
+
+const PopperContentFrame = styled(ThemeableStack, {
+  name: 'PopperContent',
+  backgroundColor: '$background',
+  alignItems: 'center',
+  radiused: true,
+
+  variants: {
+    size: {
+      '...size': (val, { tokens }) => {
+        return {
+          padding: tokens.space[val],
+          borderRadius: tokens.radius[val],
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$4',
+  },
+})
+
+export const PopperContent = PopperContentFrame.extractable(
+  React.forwardRef<PopperContentElement, PopperContentProps>(
+    (props: ScopedProps<PopperContentProps>, forwardedRef) => {
+      const { __scopePopper, ...contentProps } = props
+      const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =
+        usePopperContext(CONTENT_NAME, __scopePopper)
+      const contentRefs = useComposedRefs<any>(floating, forwardedRef)
+
+      const contents = React.useMemo(() => {
+        return (
+          <PopperContentFrame
+            key="popper-content-frame"
+            data-placement={placement}
+            data-strategy={strategy}
+            size={contentProps.size || size}
+            {...contentProps}
+          />
+        )
+      }, [placement, strategy, props])
+
+      // all poppers hidden on ssr by default
+      if (!isMounted) {
+        return null
+      }
+
+      const frameProps = {
+        ref: contentRefs,
+        x: x || 0,
+        y: y || 0,
+        position: strategy,
+      }
+
+      // outer frame because we explicitly dont want animation to apply to this
+      return (
+        <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>
+          {contents}
+        </YStack>
+      )
+    }
+  )
+)
+
+PopperContent.displayName = CONTENT_NAME
+
+/* -------------------------------------------------------------------------------------------------
+ * PopperArrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const ARROW_NAME = 'PopperArrow'
+
+type PopperArrowElement = HTMLElement | View
+
+export type PopperArrowProps = YStackProps & {
+  offset?: number
+  size?: SizeTokens
+}
+
+const PopperArrowFrame = styled(YStack, {
+  name: 'PopperArrow',
+  borderColor: '$borderColor',
+  backgroundColor: '$background',
+  position: 'relative',
+})
+
+const PopperArrowOuterFrame = styled(YStack, {
+  name: 'PopperArrowOuter',
+  position: 'absolute',
+  zIndex: -1,
+  pointerEvents: 'none',
+  overflow: 'hidden',
+  alignItems: 'center',
+  justifyContent: 'center',
+})
+
+const opposites = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right',
+} as const
+
+type Sides = keyof typeof opposites
+
+export const PopperArrow = PopperArrowFrame.extractable(
+  React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(
+    props: ScopedProps<PopperArrowProps>,
+    forwardedRef
+  ) {
+    const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props
+    const context = usePopperContext(ARROW_NAME, __scopePopper)
+    const tokens = getTokens()
+    const sizeVal = sizeProp ?? context.size
+    const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))
+    const size = +sizeValResolved
+    const { placement } = context
+    const { x, y } = context.arrowStyle || { x: 0, y: 0 }
+    const refs = useComposedRefs(context.arrowRef, forwardedRef)
+
+    const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides
+
+    const arrowStyle: StackProps = { x, y, width: size, height: size }
+    const innerArrowStyle: StackProps = {}
+    const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'
+
+    if (primaryPlacement) {
+      // allows for extra diagonal size
+      arrowStyle[isVertical ? 'width' : 'height'] = size * 2
+      const oppSide = opposites[primaryPlacement]
+      if (oppSide) {
+        arrowStyle[oppSide] = -size
+        innerArrowStyle[oppSide] = size / 2
+      }
+      if (oppSide === 'top' || oppSide === 'bottom') {
+        arrowStyle.left = 0
+      }
+      if (oppSide === 'left' || oppSide === 'right') {
+        arrowStyle.top = 0
+      }
+    }
+
+    // send the Arrow's offset up to Popper
+    useIsomorphicLayoutEffect(() => {
+      context.onArrowSize?.(size)
+    }, [size, context.onArrowSize])
+
+    // outer frame to cut off for ability to have nicer shadows/borders
+    return (
+      <PopperArrowOuterFrame ref={refs} {...arrowStyle}>
+        <PopperArrowFrame
+          width={size}
+          height={size}
+          {...arrowProps}
+          {...innerArrowStyle}
+          rotate="45deg"
+          {...(primaryPlacement === 'bottom' && {
+            borderBottomWidth: borderWidth,
+            borderRightWidth: borderWidth,
+          })}
+          {...(primaryPlacement === 'top' && {
+            borderTopWidth: borderWidth,
+            borderLeftWidth: borderWidth,
+          })}
+          {...(primaryPlacement === 'right' && {
+            borderTopWidth: borderWidth,
+            borderRightWidth: borderWidth,
+          })}
+          {...(primaryPlacement === 'left' && {
+            borderBottomWidth: borderWidth,
+            borderLeftWidth: borderWidth,
+          })}
+        />
+      </PopperArrowOuterFrame>
+    )
+  })
+)
+
+PopperArrow.displayName = ARROW_NAME
+
+/* -----------------------------------------------------------------------------------------------*/
+
+export { usePopperContext }

package/src/floating.native.tsx

@@ -0,0 +1 @@
+export * from '@floating-ui/react-native'

package/src/floating.tsx

@@ -0,0 +1 @@
+export * from '@floating-ui/react-dom'

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'
+export * from './Popper'

package/src/useFloating.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react'
+
+import * as Floating from './floating'
+
+export type UseFloatingFn = typeof Floating.useFloating
+
+type UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never
+
+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): UseFloatingReturn => {
+  const context = useContext(FloatingOverrideContext)
+  return (context || Floating.useFloating)?.(props)
+}

package/types/Popper.d.ts

@@ -1,94 +1,106 @@
 import { SizeTokens } from '@tamagui/core';
+import { Scope } from '@tamagui/create-context';
 import { SizableStackProps, YStackProps } from '@tamagui/stacks';
 import * as React from 'react';
 import { View } from 'react-native';
-import { Placement, flip, shift } from './floating';
+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 = UseFloatingReturn & {
+    isMounted: boolean;
+    anchorRef: any;
+    size?: SizeTokens;
+    placement?: Placement;
+    arrowRef: any;
+    onArrowSize?: (val: number) => void;
+    arrowStyle?: Partial<Coords> & {
+        centerOffset: number;
+    };
+};
+declare const usePopperContext: (consumerName: string, scope: Scope<PopperContextValue | undefined>) => PopperContextValue;
 export declare type PopperProps = {
     size?: SizeTokens;
     children?: React.ReactNode;
     placement?: Placement;
-    stayInFrame?: ShiftProps;
-    allowFlip?: FlipProps;
+    stayInFrame?: ShiftProps | boolean;
+    allowFlip?: FlipProps | boolean;
+    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"> & {
-    fullscreen?: boolean | undefined;
-    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"> & {
-    fullscreen?: boolean | undefined;
-    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"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>> & {
     virtualRef?: React.RefObject<any> | undefined;
 } & 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<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | 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<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | 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<{
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
-}, "size" | "focusable" | "fontFamily" | "disabled" | "transparent" | "hoverable" | "pressable" | "bordered" | "chromeless"> & {
-    fontFamily?: unknown;
-    hoverable?: boolean | undefined;
-    pressable?: boolean | undefined;
-    focusable?: boolean | undefined;
-    bordered?: boolean | undefined;
-    size?: SizeTokens | undefined;
-    disabled?: boolean | undefined;
-    transparent?: boolean | undefined;
-    chromeless?: boolean | undefined;
+export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("@tamagui/types-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<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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<{
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}, "size" | "fontFamily" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
+    readonly fontFamily?: unknown;
+    readonly hoverTheme?: boolean | undefined;
+    readonly pressTheme?: boolean | undefined;
+    readonly focusTheme?: boolean | undefined;
+    readonly circular?: boolean | undefined;
+    readonly elevate?: boolean | undefined;
+    readonly bordered?: number | boolean | undefined;
+    readonly size?: SizeTokens | undefined;
 }>> & React.RefAttributes<PopperContentElement>>;
 declare type PopperArrowElement = HTMLElement | View;
 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"> & {
-    fullscreen?: boolean | undefined;
-    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"> & {
-    fullscreen?: boolean | undefined;
-    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"> & {
-    fullscreen?: boolean | undefined;
-    elevation?: SizeTokens | undefined;
+export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+} & import("@tamagui/core").MediaProps<Partial<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
+}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("@tamagui/types-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"> & {
+    readonly fullscreen?: boolean | undefined;
+    readonly elevation?: SizeTokens | undefined;
 }>> & {
     offset?: number | undefined;
     size?: SizeTokens | undefined;
 } & React.RefAttributes<PopperArrowElement>>;
-export {};
+export { usePopperContext };
 //# sourceMappingURL=Popper.d.ts.map

package/types/index.d.ts

@@ -1,3 +1,3 @@
-export { FloatingOverrideContext, UseFloatingFn } from './useFloating';
+export { FloatingOverrideContext, type UseFloatingFn } from './useFloating';
 export * from './Popper';
 //# sourceMappingURL=index.d.ts.map

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/Popper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAMX,MAAM,eAAe,CAAA;AAEtB,OAAO,EAAgB,iBAAiB,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACtF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAU,SAAS,EAAqB,IAAI,EAAU,KAAK,EAAE,MAAM,YAAY,CAAA;AAGtF,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,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;AAYlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDAsCzB,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;AAmBD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CA4DvB,CAAA"}

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.map

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

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AACtE,cAAc,UAAU,CAAA"}

package/types/useFloating.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/types/useFloating.native.d.ts

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

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

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

package/types/useFloating.web.d.ts

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

package/types/useFloating.web.d.ts.map

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