@tamagui/popper 1.1.7 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Popper.js +77 -41
- package/dist/cjs/Popper.js.map +3 -3
- package/dist/cjs/index.js +0 -12
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Popper.js +78 -44
- package/dist/esm/Popper.js.map +3 -3
- package/dist/esm/index.js +0 -4
- package/dist/esm/index.js.map +2 -2
- package/dist/jsx/Popper.js +82 -29
- package/dist/jsx/Popper.js.map +2 -2
- package/dist/jsx/index.js +0 -4
- package/dist/jsx/index.js.map +2 -2
- package/package.json +9 -8
- package/src/Popper.tsx +53 -17
- package/src/index.tsx +0 -1
- package/types/Popper.d.ts +13 -14
- package/types/index.d.ts +0 -1
- package/dist/cjs/floating.js +0 -19
- package/dist/cjs/floating.js.map +0 -7
- package/dist/cjs/floating.native.js +0 -19
- package/dist/cjs/floating.native.js.map +0 -7
- package/dist/cjs/useFloating.js +0 -44
- package/dist/cjs/useFloating.js.map +0 -7
- package/dist/esm/floating.js +0 -2
- package/dist/esm/floating.js.map +0 -7
- package/dist/esm/floating.native.js +0 -2
- package/dist/esm/floating.native.js.map +0 -7
- package/dist/esm/useFloating.js +0 -13
- package/dist/esm/useFloating.js.map +0 -7
- package/dist/jsx/floating.js +0 -2
- package/dist/jsx/floating.js.map +0 -7
- package/dist/jsx/floating.native.js +0 -2
- package/dist/jsx/floating.native.js.map +0 -7
- package/dist/jsx/useFloating.js +0 -12
- package/dist/jsx/useFloating.js.map +0 -7
- package/src/floating.native.tsx +0 -1
- package/src/floating.tsx +0 -1
- package/src/useFloating.tsx +0 -22
- package/types/floating.d.ts +0 -2
- package/types/floating.native.d.ts +0 -2
- package/types/useFloating.d.ts +0 -19
package/dist/jsx/Popper.js
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
2
|
import {
|
|
3
3
|
getVariableValue,
|
|
4
|
+
isWeb,
|
|
4
5
|
styled,
|
|
5
6
|
useIsomorphicLayoutEffect
|
|
6
7
|
} from "@tamagui/core";
|
|
7
8
|
import { createContextScope } from "@tamagui/create-context";
|
|
8
|
-
import { stepTokenUpOrDown } from "@tamagui/get-size";
|
|
9
|
-
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
10
|
-
import * as React from "react";
|
|
11
9
|
import {
|
|
12
10
|
arrow,
|
|
13
11
|
autoUpdate,
|
|
14
12
|
flip,
|
|
15
13
|
offset,
|
|
16
|
-
shift
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
shift,
|
|
15
|
+
useFloating
|
|
16
|
+
} from "@tamagui/floating";
|
|
17
|
+
import { stepTokenUpOrDown } from "@tamagui/get-size";
|
|
18
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
19
|
+
import * as React from "react";
|
|
20
|
+
import { Keyboard, useWindowDimensions } from "react-native";
|
|
19
21
|
const POPPER_NAME = "Popper";
|
|
20
22
|
const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
|
|
21
23
|
const createPopperScope = createScope;
|
|
@@ -41,6 +43,8 @@ const Popper = (props) => {
|
|
|
41
43
|
const floating = useFloating({
|
|
42
44
|
strategy,
|
|
43
45
|
placement,
|
|
46
|
+
sameScrollView: false,
|
|
47
|
+
// this only takes effect on native
|
|
44
48
|
middleware: [
|
|
45
49
|
stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
|
|
46
50
|
allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
|
|
@@ -53,13 +57,42 @@ const Popper = (props) => {
|
|
|
53
57
|
useIsomorphicLayoutEffect(() => {
|
|
54
58
|
floating.reference(anchorRef.current);
|
|
55
59
|
}, [anchorRef]);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
60
|
+
if (isWeb) {
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
if (!(refs.reference.current && refs.floating.current)) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
|
|
66
|
+
}, [floating.update, refs.floating, refs.reference]);
|
|
67
|
+
} else {
|
|
68
|
+
const dimensions = useWindowDimensions();
|
|
69
|
+
const [keyboardOpen, setKeyboardOpen] = React.useState(false);
|
|
70
|
+
React.useEffect(() => {
|
|
71
|
+
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
|
|
72
|
+
setKeyboardOpen(true);
|
|
73
|
+
});
|
|
74
|
+
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
|
|
75
|
+
setKeyboardOpen(false);
|
|
76
|
+
});
|
|
77
|
+
return () => {
|
|
78
|
+
showSubscription.remove();
|
|
79
|
+
hideSubscription.remove();
|
|
80
|
+
};
|
|
81
|
+
}, []);
|
|
82
|
+
useIsomorphicLayoutEffect(() => {
|
|
83
|
+
floating.update();
|
|
84
|
+
}, [dimensions, keyboardOpen]);
|
|
85
|
+
}
|
|
86
|
+
return <PopperProvider
|
|
87
|
+
scope={__scopePopper}
|
|
88
|
+
anchorRef={anchorRef}
|
|
89
|
+
size={size}
|
|
90
|
+
arrowRef={composedArrowRefs}
|
|
91
|
+
arrowStyle={middlewareData.arrow}
|
|
92
|
+
onArrowSize={setArrowSize}
|
|
93
|
+
isMounted={isMounted}
|
|
94
|
+
{...floating}
|
|
95
|
+
>{children}</PopperProvider>;
|
|
63
96
|
};
|
|
64
97
|
Popper.displayName = POPPER_NAME;
|
|
65
98
|
const ANCHOR_NAME = "PopperAnchor";
|
|
@@ -107,7 +140,13 @@ const PopperContent = PopperContentFrame.extractable(
|
|
|
107
140
|
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
108
141
|
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
109
142
|
const contents = React.useMemo(() => {
|
|
110
|
-
return <PopperContentFrame
|
|
143
|
+
return <PopperContentFrame
|
|
144
|
+
key="popper-content-frame"
|
|
145
|
+
data-placement={placement}
|
|
146
|
+
data-strategy={strategy}
|
|
147
|
+
size={contentProps.size || size}
|
|
148
|
+
{...contentProps}
|
|
149
|
+
/>;
|
|
111
150
|
}, [placement, strategy, props]);
|
|
112
151
|
if (!isMounted) {
|
|
113
152
|
return null;
|
|
@@ -118,7 +157,10 @@ const PopperContent = PopperContentFrame.extractable(
|
|
|
118
157
|
y: y || 0,
|
|
119
158
|
position: strategy
|
|
120
159
|
};
|
|
121
|
-
return <YStack
|
|
160
|
+
return <YStack
|
|
161
|
+
animateOnly={["transform"]}
|
|
162
|
+
{...getFloatingProps ? getFloatingProps(frameProps) : frameProps}
|
|
163
|
+
>{contents}</YStack>;
|
|
122
164
|
}
|
|
123
165
|
)
|
|
124
166
|
);
|
|
@@ -159,8 +201,9 @@ const PopperArrow = PopperArrowFrame.extractable(
|
|
|
159
201
|
const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
|
|
160
202
|
const size = +sizeValResolved;
|
|
161
203
|
const { placement } = context;
|
|
162
|
-
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
163
204
|
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
205
|
+
const x = context.arrowStyle?.x || 0;
|
|
206
|
+
const y = context.arrowStyle?.y || 0;
|
|
164
207
|
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
165
208
|
const arrowStyle = { x, y, width: size, height: size };
|
|
166
209
|
const innerArrowStyle = {};
|
|
@@ -182,19 +225,29 @@ const PopperArrow = PopperArrowFrame.extractable(
|
|
|
182
225
|
useIsomorphicLayoutEffect(() => {
|
|
183
226
|
context.onArrowSize?.(size);
|
|
184
227
|
}, [size, context.onArrowSize]);
|
|
185
|
-
return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
228
|
+
return <PopperArrowOuterFrame ref={refs} {...arrowStyle}><PopperArrowFrame
|
|
229
|
+
width={size}
|
|
230
|
+
height={size}
|
|
231
|
+
{...arrowProps}
|
|
232
|
+
{...innerArrowStyle}
|
|
233
|
+
rotate="45deg"
|
|
234
|
+
{...primaryPlacement === "bottom" && {
|
|
235
|
+
borderBottomWidth: borderWidth,
|
|
236
|
+
borderRightWidth: borderWidth
|
|
237
|
+
}}
|
|
238
|
+
{...primaryPlacement === "top" && {
|
|
239
|
+
borderTopWidth: borderWidth,
|
|
240
|
+
borderLeftWidth: borderWidth
|
|
241
|
+
}}
|
|
242
|
+
{...primaryPlacement === "right" && {
|
|
243
|
+
borderTopWidth: borderWidth,
|
|
244
|
+
borderRightWidth: borderWidth
|
|
245
|
+
}}
|
|
246
|
+
{...primaryPlacement === "left" && {
|
|
247
|
+
borderBottomWidth: borderWidth,
|
|
248
|
+
borderLeftWidth: borderWidth
|
|
249
|
+
}}
|
|
250
|
+
/></PopperArrowOuterFrame>;
|
|
198
251
|
})
|
|
199
252
|
);
|
|
200
253
|
PopperArrow.displayName = ARROW_NAME;
|
package/dist/jsx/Popper.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popper.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getVariableValue,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { stepTokenUpOrDown } from '@tamagui/get-size'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport {\n Coords,\n Placement,\n Strategy,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n} 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}\nexport const [PopperProvider, usePopperContext] =\n createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps | boolean\n allowFlip?: FlipProps | boolean\n strategy?: Strategy\n}\n\nexport 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\n ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame)\n : (null as any),\n allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n React.useEffect(() => {\n if (!(refs.reference.current && refs.floating.current)) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [floating.update, refs.floating, refs.reference])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={middlewareData.arrow}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\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 (\n <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n )\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 } as const,\n\n defaultVariants: {\n size: '$true',\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 size={contentProps.size || size}\n {...contentProps}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack {...(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: 'relative',\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const {\n __scopePopper,\n offset,\n size: sizeProp,\n borderWidth = 0,\n ...arrowProps\n } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown('space', sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[oppSide] = size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
-
"mappings": "AAEA,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getVariableValue,\n isWeb,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport {\n Coords,\n Placement,\n Strategy,\n UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useFloating,\n} from '@tamagui/floating'\nimport { stepTokenUpOrDown } from '@tamagui/get-size'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { Keyboard, View, useWindowDimensions } from 'react-native'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nexport const [PopperProvider, usePopperContext] =\n createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps | boolean\n allowFlip?: FlipProps | boolean\n strategy?: Strategy\n}\n\nexport 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<any>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n strategy,\n placement,\n sameScrollView: false, // this only takes effect on native\n middleware: [\n stayInFrame\n ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame)\n : (null as any),\n allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n if (isWeb) {\n React.useEffect(() => {\n if (!(refs.reference.current && refs.floating.current)) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [floating.update, refs.floating, refs.reference])\n } else {\n // On Native there's no autoupdate so we call update() when necessary\n\n // Subscribe to window dimensions (orientation, scale, etc...)\n const dimensions = useWindowDimensions()\n\n // Subscribe to keyboard state\n const [keyboardOpen, setKeyboardOpen] = React.useState(false)\n React.useEffect(() => {\n const showSubscription = Keyboard.addListener('keyboardDidShow', () => {\n setKeyboardOpen(true)\n })\n const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {\n setKeyboardOpen(false)\n })\n\n return () => {\n showSubscription.remove()\n hideSubscription.remove()\n }\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n floating.update()\n }, [dimensions, keyboardOpen])\n }\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={middlewareData.arrow}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\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 (\n <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n )\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 } as const,\n\n defaultVariants: {\n size: '$true',\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 size={contentProps.size || size}\n {...contentProps}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack\n animateOnly={['transform']}\n {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}\n >\n {contents}\n </YStack>\n )\n }\n )\n)\n\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: 'relative',\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const {\n __scopePopper,\n offset,\n size: sizeProp,\n borderWidth = 0,\n ...arrowProps\n } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown('space', sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n // Sometimes floating-ui can return NaN during orientation or screen size changes on native\n // so we explictly force the x,y position types as a number\n const x = (context.arrowStyle?.x as number) || 0\n const y = (context.arrowStyle?.y as number) || 0\n\n const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[oppSide] = size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["PopperArrow", "offset"]
|
|
7
7
|
}
|
package/dist/jsx/index.js
CHANGED
package/dist/jsx/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["export
|
|
5
|
-
"mappings": "AAAA,
|
|
4
|
+
"sourcesContent": ["export * from './Popper'\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popper",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -25,12 +25,13 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/react-dom": "1.0.0",
|
|
27
27
|
"@floating-ui/react-native": "0.8.0",
|
|
28
|
-
"@tamagui/compose-refs": "^1.1.
|
|
29
|
-
"@tamagui/core": "^1.1.
|
|
30
|
-
"@tamagui/create-context": "^1.1.
|
|
31
|
-
"@tamagui/
|
|
32
|
-
"@tamagui/
|
|
33
|
-
"@tamagui/
|
|
28
|
+
"@tamagui/compose-refs": "^1.1.9",
|
|
29
|
+
"@tamagui/core": "^1.1.9",
|
|
30
|
+
"@tamagui/create-context": "^1.1.9",
|
|
31
|
+
"@tamagui/floating": "^1.1.9",
|
|
32
|
+
"@tamagui/get-size": "^1.1.9",
|
|
33
|
+
"@tamagui/stacks": "^1.1.9",
|
|
34
|
+
"@tamagui/use-controllable-state": "^1.1.9"
|
|
34
35
|
},
|
|
35
36
|
"peerDependencies": {
|
|
36
37
|
"react": "*",
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
"react-native": "*"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.1.
|
|
42
|
+
"@tamagui/build": "^1.1.9",
|
|
42
43
|
"react": "^18.2.0",
|
|
43
44
|
"react-dom": "^18.2.0",
|
|
44
45
|
"react-native": "*"
|
package/src/Popper.tsx
CHANGED
|
@@ -5,26 +5,27 @@ import {
|
|
|
5
5
|
SizeTokens,
|
|
6
6
|
StackProps,
|
|
7
7
|
getVariableValue,
|
|
8
|
+
isWeb,
|
|
8
9
|
styled,
|
|
9
10
|
useIsomorphicLayoutEffect,
|
|
10
11
|
} from '@tamagui/core'
|
|
11
12
|
import { Scope, createContextScope } from '@tamagui/create-context'
|
|
12
|
-
import { stepTokenUpOrDown } from '@tamagui/get-size'
|
|
13
|
-
import { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'
|
|
14
|
-
import * as React from 'react'
|
|
15
|
-
import { View } from 'react-native'
|
|
16
|
-
|
|
17
13
|
import {
|
|
18
14
|
Coords,
|
|
19
15
|
Placement,
|
|
20
16
|
Strategy,
|
|
17
|
+
UseFloatingReturn,
|
|
21
18
|
arrow,
|
|
22
19
|
autoUpdate,
|
|
23
20
|
flip,
|
|
24
21
|
offset,
|
|
25
22
|
shift,
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
useFloating,
|
|
24
|
+
} from '@tamagui/floating'
|
|
25
|
+
import { stepTokenUpOrDown } from '@tamagui/get-size'
|
|
26
|
+
import { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'
|
|
27
|
+
import * as React from 'react'
|
|
28
|
+
import { Keyboard, View, useWindowDimensions } from 'react-native'
|
|
28
29
|
|
|
29
30
|
type ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never
|
|
30
31
|
type FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never
|
|
@@ -80,13 +81,14 @@ export const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) =
|
|
|
80
81
|
}, [])
|
|
81
82
|
|
|
82
83
|
const anchorRef = React.useRef<any>()
|
|
83
|
-
const [arrowEl, setArrow] = React.useState<
|
|
84
|
+
const [arrowEl, setArrow] = React.useState<any>(null)
|
|
84
85
|
const [arrowSize, setArrowSize] = React.useState(0)
|
|
85
86
|
const arrowRef = React.useRef()
|
|
86
87
|
|
|
87
88
|
const floating = useFloating({
|
|
88
89
|
strategy,
|
|
89
90
|
placement,
|
|
91
|
+
sameScrollView: false, // this only takes effect on native
|
|
90
92
|
middleware: [
|
|
91
93
|
stayInFrame
|
|
92
94
|
? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame)
|
|
@@ -105,13 +107,40 @@ export const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) =
|
|
|
105
107
|
floating.reference(anchorRef.current)
|
|
106
108
|
}, [anchorRef])
|
|
107
109
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
110
|
+
if (isWeb) {
|
|
111
|
+
React.useEffect(() => {
|
|
112
|
+
if (!(refs.reference.current && refs.floating.current)) {
|
|
113
|
+
return
|
|
114
|
+
}
|
|
115
|
+
// Only call this when the floating element is rendered
|
|
116
|
+
return autoUpdate(refs.reference.current, refs.floating.current, floating.update)
|
|
117
|
+
}, [floating.update, refs.floating, refs.reference])
|
|
118
|
+
} else {
|
|
119
|
+
// On Native there's no autoupdate so we call update() when necessary
|
|
120
|
+
|
|
121
|
+
// Subscribe to window dimensions (orientation, scale, etc...)
|
|
122
|
+
const dimensions = useWindowDimensions()
|
|
123
|
+
|
|
124
|
+
// Subscribe to keyboard state
|
|
125
|
+
const [keyboardOpen, setKeyboardOpen] = React.useState(false)
|
|
126
|
+
React.useEffect(() => {
|
|
127
|
+
const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
|
|
128
|
+
setKeyboardOpen(true)
|
|
129
|
+
})
|
|
130
|
+
const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
|
|
131
|
+
setKeyboardOpen(false)
|
|
132
|
+
})
|
|
133
|
+
|
|
134
|
+
return () => {
|
|
135
|
+
showSubscription.remove()
|
|
136
|
+
hideSubscription.remove()
|
|
137
|
+
}
|
|
138
|
+
}, [])
|
|
139
|
+
|
|
140
|
+
useIsomorphicLayoutEffect(() => {
|
|
141
|
+
floating.update()
|
|
142
|
+
}, [dimensions, keyboardOpen])
|
|
143
|
+
}
|
|
115
144
|
|
|
116
145
|
return (
|
|
117
146
|
<PopperProvider
|
|
@@ -230,7 +259,10 @@ export const PopperContent = PopperContentFrame.extractable(
|
|
|
230
259
|
|
|
231
260
|
// outer frame because we explicitly dont want animation to apply to this
|
|
232
261
|
return (
|
|
233
|
-
<YStack
|
|
262
|
+
<YStack
|
|
263
|
+
animateOnly={['transform']}
|
|
264
|
+
{...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}
|
|
265
|
+
>
|
|
234
266
|
{contents}
|
|
235
267
|
</YStack>
|
|
236
268
|
)
|
|
@@ -296,9 +328,13 @@ export const PopperArrow = PopperArrowFrame.extractable(
|
|
|
296
328
|
const sizeValResolved = getVariableValue(stepTokenUpOrDown('space', sizeVal, -2, [2]))
|
|
297
329
|
const size = +sizeValResolved
|
|
298
330
|
const { placement } = context
|
|
299
|
-
const { x, y } = context.arrowStyle || { x: 0, y: 0 }
|
|
300
331
|
const refs = useComposedRefs(context.arrowRef, forwardedRef)
|
|
301
332
|
|
|
333
|
+
// Sometimes floating-ui can return NaN during orientation or screen size changes on native
|
|
334
|
+
// so we explictly force the x,y position types as a number
|
|
335
|
+
const x = (context.arrowStyle?.x as number) || 0
|
|
336
|
+
const y = (context.arrowStyle?.y as number) || 0
|
|
337
|
+
|
|
302
338
|
const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides
|
|
303
339
|
|
|
304
340
|
const arrowStyle: StackProps = { x, y, width: size, height: size }
|
package/src/index.tsx
CHANGED
package/types/Popper.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { SizeTokens } from '@tamagui/core';
|
|
2
2
|
import { Scope } from '@tamagui/create-context';
|
|
3
|
+
import { Coords, Placement, Strategy, UseFloatingReturn, flip, shift } from '@tamagui/floating';
|
|
3
4
|
import { SizableStackProps, YStackProps } from '@tamagui/stacks';
|
|
4
5
|
import * as React from 'react';
|
|
5
6
|
import { View } from 'react-native';
|
|
6
|
-
import { Coords, Placement, Strategy, flip, shift } from './floating';
|
|
7
|
-
import { UseFloatingReturn } from './useFloating';
|
|
8
7
|
type ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never;
|
|
9
8
|
type FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never;
|
|
10
9
|
export declare const createPopperScope: import("@tamagui/create-context").CreateScope;
|
|
@@ -20,15 +19,15 @@ type PopperContextValue = UseFloatingReturn & {
|
|
|
20
19
|
};
|
|
21
20
|
};
|
|
22
21
|
export declare const PopperProvider: {
|
|
23
|
-
(props: Omit<import("@floating
|
|
22
|
+
(props: Omit<import("@tamagui/floating").ComputePositionReturn, "x" | "y"> & {
|
|
24
23
|
x: number | null;
|
|
25
24
|
y: number | null;
|
|
26
25
|
} & {
|
|
27
26
|
update: () => void;
|
|
28
|
-
reference: (node: import("@floating
|
|
27
|
+
reference: (node: import("@tamagui/floating").ReferenceType | null) => void;
|
|
29
28
|
floating: (node: HTMLElement | null) => void;
|
|
30
29
|
refs: {
|
|
31
|
-
reference: React.MutableRefObject<import("@floating
|
|
30
|
+
reference: React.MutableRefObject<import("@tamagui/floating").ReferenceType | null>;
|
|
32
31
|
floating: React.MutableRefObject<HTMLElement | null>;
|
|
33
32
|
};
|
|
34
33
|
} & {
|
|
@@ -70,13 +69,13 @@ type PopperAnchorRef = HTMLElement | View;
|
|
|
70
69
|
export type PopperAnchorProps = YStackProps & {
|
|
71
70
|
virtualRef?: React.RefObject<any>;
|
|
72
71
|
};
|
|
73
|
-
export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "
|
|
72
|
+
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"> & {
|
|
74
73
|
readonly fullscreen?: boolean | undefined;
|
|
75
74
|
readonly elevation?: SizeTokens | undefined;
|
|
76
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "
|
|
75
|
+
} & 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"> & {
|
|
77
76
|
readonly fullscreen?: boolean | undefined;
|
|
78
77
|
readonly elevation?: SizeTokens | undefined;
|
|
79
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "
|
|
78
|
+
}>> & 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"> & {
|
|
80
79
|
readonly fullscreen?: boolean | undefined;
|
|
81
80
|
readonly elevation?: SizeTokens | undefined;
|
|
82
81
|
}>> & {
|
|
@@ -84,7 +83,7 @@ export declare const PopperAnchor: React.ForwardRefExoticComponent<Omit<import("
|
|
|
84
83
|
} & React.RefAttributes<PopperAnchorRef>>;
|
|
85
84
|
type PopperContentElement = HTMLElement | View;
|
|
86
85
|
export type PopperContentProps = SizableStackProps;
|
|
87
|
-
export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "
|
|
86
|
+
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<{
|
|
88
87
|
readonly fullscreen?: boolean | undefined;
|
|
89
88
|
readonly elevation?: SizeTokens | undefined;
|
|
90
89
|
}, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
|
|
@@ -95,7 +94,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
|
|
|
95
94
|
readonly elevate?: boolean | undefined;
|
|
96
95
|
readonly bordered?: number | boolean | undefined;
|
|
97
96
|
readonly size?: SizeTokens | undefined;
|
|
98
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "
|
|
97
|
+
} & 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<{
|
|
99
98
|
readonly fullscreen?: boolean | undefined;
|
|
100
99
|
readonly elevation?: SizeTokens | undefined;
|
|
101
100
|
}, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
|
|
@@ -106,7 +105,7 @@ export declare const PopperContent: React.ForwardRefExoticComponent<Omit<import(
|
|
|
106
105
|
readonly elevate?: boolean | undefined;
|
|
107
106
|
readonly bordered?: number | boolean | undefined;
|
|
108
107
|
readonly size?: SizeTokens | undefined;
|
|
109
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "
|
|
108
|
+
}>> & 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<{
|
|
110
109
|
readonly fullscreen?: boolean | undefined;
|
|
111
110
|
readonly elevation?: SizeTokens | undefined;
|
|
112
111
|
}, "size" | "hoverTheme" | "pressTheme" | "focusTheme" | "circular" | "elevate" | "bordered"> & {
|
|
@@ -123,13 +122,13 @@ export type PopperArrowProps = YStackProps & {
|
|
|
123
122
|
offset?: number;
|
|
124
123
|
size?: SizeTokens;
|
|
125
124
|
};
|
|
126
|
-
export declare const PopperArrow: React.ForwardRefExoticComponent<Omit<import("react-native").ViewProps, "
|
|
125
|
+
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"> & {
|
|
127
126
|
readonly fullscreen?: boolean | undefined;
|
|
128
127
|
readonly elevation?: SizeTokens | undefined;
|
|
129
|
-
} & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "
|
|
128
|
+
} & 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"> & {
|
|
130
129
|
readonly fullscreen?: boolean | undefined;
|
|
131
130
|
readonly elevation?: SizeTokens | undefined;
|
|
132
|
-
}>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "
|
|
131
|
+
}>> & 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"> & {
|
|
133
132
|
readonly fullscreen?: boolean | undefined;
|
|
134
133
|
readonly elevation?: SizeTokens | undefined;
|
|
135
134
|
}>> & {
|
package/types/index.d.ts
CHANGED
package/dist/cjs/floating.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var floating_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(floating_exports);
|
|
18
|
-
__reExport(floating_exports, require("@floating-ui/react-dom"), module.exports);
|
|
19
|
-
//# sourceMappingURL=floating.js.map
|
package/dist/cjs/floating.js.map
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __copyProps = (to, from, except, desc) => {
|
|
7
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
-
for (let key of __getOwnPropNames(from))
|
|
9
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
-
}
|
|
12
|
-
return to;
|
|
13
|
-
};
|
|
14
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
-
var floating_native_exports = {};
|
|
17
|
-
module.exports = __toCommonJS(floating_native_exports);
|
|
18
|
-
__reExport(floating_native_exports, require("@floating-ui/react-native"), module.exports);
|
|
19
|
-
//# sourceMappingURL=floating.native.js.map
|