@tamagui/popper 1.2.8 → 1.2.10
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/esm/Popper.mjs +280 -0
- package/dist/esm/Popper.mjs.map +7 -0
- package/dist/esm/index.mjs +2 -0
- package/dist/esm/index.mjs.map +7 -0
- package/dist/jsx/Popper.mjs +263 -0
- package/dist/jsx/Popper.mjs.map +7 -0
- package/dist/jsx/index.mjs +2 -0
- package/dist/jsx/index.mjs.map +7 -0
- package/package.json +9 -9
- package/types/Popper.d.ts +4 -1
- package/types/Popper.d.ts.map +1 -1
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
3
|
+
import {
|
|
4
|
+
getVariableValue,
|
|
5
|
+
isWeb,
|
|
6
|
+
styled,
|
|
7
|
+
useIsomorphicLayoutEffect
|
|
8
|
+
} from "@tamagui/core";
|
|
9
|
+
import { createContextScope } from "@tamagui/create-context";
|
|
10
|
+
import {
|
|
11
|
+
arrow,
|
|
12
|
+
autoUpdate,
|
|
13
|
+
flip,
|
|
14
|
+
offset,
|
|
15
|
+
shift,
|
|
16
|
+
useFloating
|
|
17
|
+
} from "@tamagui/floating";
|
|
18
|
+
import { stepTokenUpOrDown } from "@tamagui/get-size";
|
|
19
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
20
|
+
import * as React from "react";
|
|
21
|
+
import { Keyboard, useWindowDimensions } from "react-native";
|
|
22
|
+
const POPPER_NAME = "Popper";
|
|
23
|
+
const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
|
|
24
|
+
const createPopperScope = createScope;
|
|
25
|
+
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
26
|
+
const Popper = (props) => {
|
|
27
|
+
const {
|
|
28
|
+
__scopePopper,
|
|
29
|
+
children,
|
|
30
|
+
size,
|
|
31
|
+
strategy = "absolute",
|
|
32
|
+
placement = "bottom",
|
|
33
|
+
stayInFrame,
|
|
34
|
+
allowFlip
|
|
35
|
+
} = props;
|
|
36
|
+
const [isMounted, setIsMounted] = React.useState(false);
|
|
37
|
+
useIsomorphicLayoutEffect(() => {
|
|
38
|
+
setIsMounted(true);
|
|
39
|
+
}, []);
|
|
40
|
+
const anchorRef = React.useRef();
|
|
41
|
+
const [arrowEl, setArrow] = React.useState(null);
|
|
42
|
+
const [arrowSize, setArrowSize] = React.useState(0);
|
|
43
|
+
const arrowRef = React.useRef();
|
|
44
|
+
const floating = useFloating({
|
|
45
|
+
strategy,
|
|
46
|
+
placement,
|
|
47
|
+
sameScrollView: false,
|
|
48
|
+
// this only takes effect on native
|
|
49
|
+
middleware: [
|
|
50
|
+
stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
|
|
51
|
+
allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
|
|
52
|
+
arrowEl ? arrow({ element: arrowEl }) : null,
|
|
53
|
+
arrowSize ? offset(arrowSize) : null
|
|
54
|
+
].filter(Boolean)
|
|
55
|
+
});
|
|
56
|
+
const { refs, middlewareData } = floating;
|
|
57
|
+
const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
|
|
58
|
+
useIsomorphicLayoutEffect(() => {
|
|
59
|
+
floating.reference(anchorRef.current);
|
|
60
|
+
}, [anchorRef]);
|
|
61
|
+
if (isWeb) {
|
|
62
|
+
React.useEffect(() => {
|
|
63
|
+
if (!(refs.reference.current && refs.floating.current)) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
|
|
67
|
+
}, [floating.update, refs.floating, refs.reference]);
|
|
68
|
+
} else {
|
|
69
|
+
const dimensions = useWindowDimensions();
|
|
70
|
+
const [keyboardOpen, setKeyboardOpen] = React.useState(false);
|
|
71
|
+
React.useEffect(() => {
|
|
72
|
+
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
|
|
73
|
+
setKeyboardOpen(true);
|
|
74
|
+
});
|
|
75
|
+
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
|
|
76
|
+
setKeyboardOpen(false);
|
|
77
|
+
});
|
|
78
|
+
return () => {
|
|
79
|
+
showSubscription.remove();
|
|
80
|
+
hideSubscription.remove();
|
|
81
|
+
};
|
|
82
|
+
}, []);
|
|
83
|
+
useIsomorphicLayoutEffect(() => {
|
|
84
|
+
floating.update();
|
|
85
|
+
}, [dimensions, keyboardOpen]);
|
|
86
|
+
}
|
|
87
|
+
return /* @__PURE__ */ jsx(
|
|
88
|
+
PopperProvider,
|
|
89
|
+
{
|
|
90
|
+
scope: __scopePopper,
|
|
91
|
+
anchorRef,
|
|
92
|
+
size,
|
|
93
|
+
arrowRef: composedArrowRefs,
|
|
94
|
+
arrowStyle: middlewareData.arrow,
|
|
95
|
+
onArrowSize: setArrowSize,
|
|
96
|
+
isMounted,
|
|
97
|
+
...floating,
|
|
98
|
+
children
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
};
|
|
102
|
+
Popper.displayName = POPPER_NAME;
|
|
103
|
+
const ANCHOR_NAME = "PopperAnchor";
|
|
104
|
+
const PopperAnchor = React.forwardRef(
|
|
105
|
+
(props, forwardedRef) => {
|
|
106
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
107
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
108
|
+
const ref = React.useRef(null);
|
|
109
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
110
|
+
if (virtualRef) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
const stackProps = {
|
|
114
|
+
ref: composedRefs,
|
|
115
|
+
...anchorProps
|
|
116
|
+
};
|
|
117
|
+
return /* @__PURE__ */ jsx(YStack, { ...getReferenceProps ? getReferenceProps(stackProps) : stackProps });
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
PopperAnchor.displayName = ANCHOR_NAME;
|
|
121
|
+
const CONTENT_NAME = "PopperContent";
|
|
122
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
123
|
+
name: "PopperContent",
|
|
124
|
+
backgroundColor: "$background",
|
|
125
|
+
alignItems: "center",
|
|
126
|
+
radiused: true,
|
|
127
|
+
variants: {
|
|
128
|
+
size: {
|
|
129
|
+
"...size": (val, { tokens }) => {
|
|
130
|
+
return {
|
|
131
|
+
padding: tokens.space[val],
|
|
132
|
+
borderRadius: tokens.radius[val]
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
defaultVariants: {
|
|
138
|
+
size: "$true"
|
|
139
|
+
}
|
|
140
|
+
});
|
|
141
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
142
|
+
React.forwardRef(
|
|
143
|
+
(props, forwardedRef) => {
|
|
144
|
+
const { __scopePopper, ...contentProps } = props;
|
|
145
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
146
|
+
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
147
|
+
const contents = React.useMemo(() => {
|
|
148
|
+
return /* @__PURE__ */ jsx(
|
|
149
|
+
PopperContentFrame,
|
|
150
|
+
{
|
|
151
|
+
"data-placement": placement,
|
|
152
|
+
"data-strategy": strategy,
|
|
153
|
+
size: contentProps.size || size,
|
|
154
|
+
...contentProps
|
|
155
|
+
},
|
|
156
|
+
"popper-content-frame"
|
|
157
|
+
);
|
|
158
|
+
}, [placement, strategy, props]);
|
|
159
|
+
if (!isMounted) {
|
|
160
|
+
return null;
|
|
161
|
+
}
|
|
162
|
+
const frameProps = {
|
|
163
|
+
ref: contentRefs,
|
|
164
|
+
x: x || 0,
|
|
165
|
+
y: y || 0,
|
|
166
|
+
position: strategy
|
|
167
|
+
};
|
|
168
|
+
return /* @__PURE__ */ jsx(
|
|
169
|
+
YStack,
|
|
170
|
+
{
|
|
171
|
+
animateOnly: ["transform"],
|
|
172
|
+
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
173
|
+
children: contents
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
)
|
|
178
|
+
);
|
|
179
|
+
PopperContent.displayName = CONTENT_NAME;
|
|
180
|
+
const ARROW_NAME = "PopperArrow";
|
|
181
|
+
const PopperArrowFrame = styled(YStack, {
|
|
182
|
+
name: "PopperArrow",
|
|
183
|
+
borderColor: "$borderColor",
|
|
184
|
+
backgroundColor: "$background",
|
|
185
|
+
position: "relative"
|
|
186
|
+
});
|
|
187
|
+
const PopperArrowOuterFrame = styled(YStack, {
|
|
188
|
+
name: "PopperArrowOuter",
|
|
189
|
+
position: "absolute",
|
|
190
|
+
zIndex: -1,
|
|
191
|
+
pointerEvents: "none",
|
|
192
|
+
overflow: "hidden",
|
|
193
|
+
alignItems: "center",
|
|
194
|
+
justifyContent: "center"
|
|
195
|
+
});
|
|
196
|
+
const opposites = {
|
|
197
|
+
top: "bottom",
|
|
198
|
+
right: "left",
|
|
199
|
+
bottom: "top",
|
|
200
|
+
left: "right"
|
|
201
|
+
};
|
|
202
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
203
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
204
|
+
var _a, _b;
|
|
205
|
+
const {
|
|
206
|
+
__scopePopper,
|
|
207
|
+
offset: offset2,
|
|
208
|
+
size: sizeProp,
|
|
209
|
+
borderWidth = 0,
|
|
210
|
+
...arrowProps
|
|
211
|
+
} = props;
|
|
212
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
213
|
+
const sizeVal = sizeProp ?? context.size;
|
|
214
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
|
|
215
|
+
const size = +sizeValResolved;
|
|
216
|
+
const { placement } = context;
|
|
217
|
+
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
218
|
+
const x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0;
|
|
219
|
+
const y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0;
|
|
220
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
221
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
222
|
+
const innerArrowStyle = {};
|
|
223
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
224
|
+
if (primaryPlacement) {
|
|
225
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
226
|
+
const oppSide = opposites[primaryPlacement];
|
|
227
|
+
if (oppSide) {
|
|
228
|
+
arrowStyle[oppSide] = -size;
|
|
229
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
230
|
+
}
|
|
231
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
232
|
+
arrowStyle.left = 0;
|
|
233
|
+
}
|
|
234
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
235
|
+
arrowStyle.top = 0;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
useIsomorphicLayoutEffect(() => {
|
|
239
|
+
var _a2;
|
|
240
|
+
(_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
|
|
241
|
+
}, [size, context.onArrowSize]);
|
|
242
|
+
return /* @__PURE__ */ jsx(PopperArrowOuterFrame, { ref: refs, ...arrowStyle, children: /* @__PURE__ */ jsx(
|
|
243
|
+
PopperArrowFrame,
|
|
244
|
+
{
|
|
245
|
+
width: size,
|
|
246
|
+
height: size,
|
|
247
|
+
...arrowProps,
|
|
248
|
+
...innerArrowStyle,
|
|
249
|
+
rotate: "45deg",
|
|
250
|
+
...primaryPlacement === "bottom" && {
|
|
251
|
+
borderBottomWidth: borderWidth,
|
|
252
|
+
borderRightWidth: borderWidth
|
|
253
|
+
},
|
|
254
|
+
...primaryPlacement === "top" && {
|
|
255
|
+
borderTopWidth: borderWidth,
|
|
256
|
+
borderLeftWidth: borderWidth
|
|
257
|
+
},
|
|
258
|
+
...primaryPlacement === "right" && {
|
|
259
|
+
borderTopWidth: borderWidth,
|
|
260
|
+
borderRightWidth: borderWidth
|
|
261
|
+
},
|
|
262
|
+
...primaryPlacement === "left" && {
|
|
263
|
+
borderBottomWidth: borderWidth,
|
|
264
|
+
borderLeftWidth: borderWidth
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
) });
|
|
268
|
+
})
|
|
269
|
+
);
|
|
270
|
+
PopperArrow.displayName = ARROW_NAME;
|
|
271
|
+
export {
|
|
272
|
+
Popper,
|
|
273
|
+
PopperAnchor,
|
|
274
|
+
PopperArrow,
|
|
275
|
+
PopperContent,
|
|
276
|
+
PopperProvider,
|
|
277
|
+
createPopperScope,
|
|
278
|
+
usePopperContext
|
|
279
|
+
};
|
|
280
|
+
//# sourceMappingURL=Popper.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 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
|
+
"names": ["PopperArrow", "offset", "_a"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
2
|
+
import {
|
|
3
|
+
getVariableValue,
|
|
4
|
+
isWeb,
|
|
5
|
+
styled,
|
|
6
|
+
useIsomorphicLayoutEffect
|
|
7
|
+
} from "@tamagui/core";
|
|
8
|
+
import { createContextScope } from "@tamagui/create-context";
|
|
9
|
+
import {
|
|
10
|
+
arrow,
|
|
11
|
+
autoUpdate,
|
|
12
|
+
flip,
|
|
13
|
+
offset,
|
|
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";
|
|
21
|
+
const POPPER_NAME = "Popper";
|
|
22
|
+
const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
|
|
23
|
+
const createPopperScope = createScope;
|
|
24
|
+
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
25
|
+
const Popper = (props) => {
|
|
26
|
+
const {
|
|
27
|
+
__scopePopper,
|
|
28
|
+
children,
|
|
29
|
+
size,
|
|
30
|
+
strategy = "absolute",
|
|
31
|
+
placement = "bottom",
|
|
32
|
+
stayInFrame,
|
|
33
|
+
allowFlip
|
|
34
|
+
} = props;
|
|
35
|
+
const [isMounted, setIsMounted] = React.useState(false);
|
|
36
|
+
useIsomorphicLayoutEffect(() => {
|
|
37
|
+
setIsMounted(true);
|
|
38
|
+
}, []);
|
|
39
|
+
const anchorRef = React.useRef();
|
|
40
|
+
const [arrowEl, setArrow] = React.useState(null);
|
|
41
|
+
const [arrowSize, setArrowSize] = React.useState(0);
|
|
42
|
+
const arrowRef = React.useRef();
|
|
43
|
+
const floating = useFloating({
|
|
44
|
+
strategy,
|
|
45
|
+
placement,
|
|
46
|
+
sameScrollView: false,
|
|
47
|
+
// this only takes effect on native
|
|
48
|
+
middleware: [
|
|
49
|
+
stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
|
|
50
|
+
allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
|
|
51
|
+
arrowEl ? arrow({ element: arrowEl }) : null,
|
|
52
|
+
arrowSize ? offset(arrowSize) : null
|
|
53
|
+
].filter(Boolean)
|
|
54
|
+
});
|
|
55
|
+
const { refs, middlewareData } = floating;
|
|
56
|
+
const composedArrowRefs = useComposedRefs(arrowRef, setArrow);
|
|
57
|
+
useIsomorphicLayoutEffect(() => {
|
|
58
|
+
floating.reference(anchorRef.current);
|
|
59
|
+
}, [anchorRef]);
|
|
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>;
|
|
96
|
+
};
|
|
97
|
+
Popper.displayName = POPPER_NAME;
|
|
98
|
+
const ANCHOR_NAME = "PopperAnchor";
|
|
99
|
+
const PopperAnchor = React.forwardRef(
|
|
100
|
+
(props, forwardedRef) => {
|
|
101
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
102
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
103
|
+
const ref = React.useRef(null);
|
|
104
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
105
|
+
if (virtualRef) {
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
const stackProps = {
|
|
109
|
+
ref: composedRefs,
|
|
110
|
+
...anchorProps
|
|
111
|
+
};
|
|
112
|
+
return <YStack {...getReferenceProps ? getReferenceProps(stackProps) : stackProps} />;
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
PopperAnchor.displayName = ANCHOR_NAME;
|
|
116
|
+
const CONTENT_NAME = "PopperContent";
|
|
117
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
118
|
+
name: "PopperContent",
|
|
119
|
+
backgroundColor: "$background",
|
|
120
|
+
alignItems: "center",
|
|
121
|
+
radiused: true,
|
|
122
|
+
variants: {
|
|
123
|
+
size: {
|
|
124
|
+
"...size": (val, { tokens }) => {
|
|
125
|
+
return {
|
|
126
|
+
padding: tokens.space[val],
|
|
127
|
+
borderRadius: tokens.radius[val]
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
defaultVariants: {
|
|
133
|
+
size: "$true"
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
137
|
+
React.forwardRef(
|
|
138
|
+
(props, forwardedRef) => {
|
|
139
|
+
const { __scopePopper, ...contentProps } = props;
|
|
140
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
141
|
+
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
142
|
+
const contents = React.useMemo(() => {
|
|
143
|
+
return <PopperContentFrame
|
|
144
|
+
key="popper-content-frame"
|
|
145
|
+
data-placement={placement}
|
|
146
|
+
data-strategy={strategy}
|
|
147
|
+
size={contentProps.size || size}
|
|
148
|
+
{...contentProps}
|
|
149
|
+
/>;
|
|
150
|
+
}, [placement, strategy, props]);
|
|
151
|
+
if (!isMounted) {
|
|
152
|
+
return null;
|
|
153
|
+
}
|
|
154
|
+
const frameProps = {
|
|
155
|
+
ref: contentRefs,
|
|
156
|
+
x: x || 0,
|
|
157
|
+
y: y || 0,
|
|
158
|
+
position: strategy
|
|
159
|
+
};
|
|
160
|
+
return <YStack
|
|
161
|
+
animateOnly={["transform"]}
|
|
162
|
+
{...getFloatingProps ? getFloatingProps(frameProps) : frameProps}
|
|
163
|
+
>{contents}</YStack>;
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
);
|
|
167
|
+
PopperContent.displayName = CONTENT_NAME;
|
|
168
|
+
const ARROW_NAME = "PopperArrow";
|
|
169
|
+
const PopperArrowFrame = styled(YStack, {
|
|
170
|
+
name: "PopperArrow",
|
|
171
|
+
borderColor: "$borderColor",
|
|
172
|
+
backgroundColor: "$background",
|
|
173
|
+
position: "relative"
|
|
174
|
+
});
|
|
175
|
+
const PopperArrowOuterFrame = styled(YStack, {
|
|
176
|
+
name: "PopperArrowOuter",
|
|
177
|
+
position: "absolute",
|
|
178
|
+
zIndex: -1,
|
|
179
|
+
pointerEvents: "none",
|
|
180
|
+
overflow: "hidden",
|
|
181
|
+
alignItems: "center",
|
|
182
|
+
justifyContent: "center"
|
|
183
|
+
});
|
|
184
|
+
const opposites = {
|
|
185
|
+
top: "bottom",
|
|
186
|
+
right: "left",
|
|
187
|
+
bottom: "top",
|
|
188
|
+
left: "right"
|
|
189
|
+
};
|
|
190
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
191
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
192
|
+
const {
|
|
193
|
+
__scopePopper,
|
|
194
|
+
offset: offset2,
|
|
195
|
+
size: sizeProp,
|
|
196
|
+
borderWidth = 0,
|
|
197
|
+
...arrowProps
|
|
198
|
+
} = props;
|
|
199
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
200
|
+
const sizeVal = sizeProp ?? context.size;
|
|
201
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
|
|
202
|
+
const size = +sizeValResolved;
|
|
203
|
+
const { placement } = context;
|
|
204
|
+
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
205
|
+
const x = context.arrowStyle?.x || 0;
|
|
206
|
+
const y = context.arrowStyle?.y || 0;
|
|
207
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
208
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
209
|
+
const innerArrowStyle = {};
|
|
210
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
211
|
+
if (primaryPlacement) {
|
|
212
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
213
|
+
const oppSide = opposites[primaryPlacement];
|
|
214
|
+
if (oppSide) {
|
|
215
|
+
arrowStyle[oppSide] = -size;
|
|
216
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
217
|
+
}
|
|
218
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
219
|
+
arrowStyle.left = 0;
|
|
220
|
+
}
|
|
221
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
222
|
+
arrowStyle.top = 0;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
useIsomorphicLayoutEffect(() => {
|
|
226
|
+
context.onArrowSize?.(size);
|
|
227
|
+
}, [size, context.onArrowSize]);
|
|
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>;
|
|
251
|
+
})
|
|
252
|
+
);
|
|
253
|
+
PopperArrow.displayName = ARROW_NAME;
|
|
254
|
+
export {
|
|
255
|
+
Popper,
|
|
256
|
+
PopperAnchor,
|
|
257
|
+
PopperArrow,
|
|
258
|
+
PopperContent,
|
|
259
|
+
PopperProvider,
|
|
260
|
+
createPopperScope,
|
|
261
|
+
usePopperContext
|
|
262
|
+
};
|
|
263
|
+
//# sourceMappingURL=Popper.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 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 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
|
+
"names": ["PopperArrow", "offset"]
|
|
7
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popper",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.10",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -25,13 +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.2.
|
|
29
|
-
"@tamagui/core": "^1.2.
|
|
30
|
-
"@tamagui/create-context": "^1.2.
|
|
31
|
-
"@tamagui/floating": "^1.2.
|
|
32
|
-
"@tamagui/get-size": "^1.2.
|
|
33
|
-
"@tamagui/stacks": "^1.2.
|
|
34
|
-
"@tamagui/use-controllable-state": "^1.2.
|
|
28
|
+
"@tamagui/compose-refs": "^1.2.10",
|
|
29
|
+
"@tamagui/core": "^1.2.10",
|
|
30
|
+
"@tamagui/create-context": "^1.2.10",
|
|
31
|
+
"@tamagui/floating": "^1.2.10",
|
|
32
|
+
"@tamagui/get-size": "^1.2.10",
|
|
33
|
+
"@tamagui/stacks": "^1.2.10",
|
|
34
|
+
"@tamagui/use-controllable-state": "^1.2.10"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": "*",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react-native": "*"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@tamagui/build": "^1.2.
|
|
42
|
+
"@tamagui/build": "^1.2.10",
|
|
43
43
|
"react": "^18.2.0",
|
|
44
44
|
"react-dom": "^18.2.0",
|
|
45
45
|
"react-native": "*"
|
package/types/Popper.d.ts
CHANGED
|
@@ -55,7 +55,10 @@ export declare const PopperProvider: {
|
|
|
55
55
|
children: React.ReactNode;
|
|
56
56
|
}): JSX.Element;
|
|
57
57
|
displayName: string;
|
|
58
|
-
}, usePopperContext: (consumerName: string, scope: Scope<PopperContextValue | undefined
|
|
58
|
+
}, usePopperContext: (consumerName: string, scope: Scope<PopperContextValue | undefined>, options?: {
|
|
59
|
+
warn?: boolean | undefined;
|
|
60
|
+
fallback?: Partial<PopperContextValue> | undefined;
|
|
61
|
+
} | undefined) => PopperContextValue;
|
|
59
62
|
export type PopperProps = {
|
|
60
63
|
size?: SizeTokens;
|
|
61
64
|
children?: React.ReactNode;
|
package/types/Popper.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAMX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AACnE,OAAO,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,iBAAiB,EAGjB,IAAI,EAEJ,KAAK,EAEN,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,iBAAiB,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAY,IAAI,EAAuB,MAAM,cAAc,CAAA;AAElE,KAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,KAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAE5C,KAAK,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,eAAO,MAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;mBAVf,OAAO;mBACP,GAAG;;;kBAGJ,GAAG;6BACO,MAAM,KAAK,IAAI;;0BAEnB,MAAM;;;;;;;GAGM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../src/Popper.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,UAAU,EAMX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,EAAsB,MAAM,yBAAyB,CAAA;AACnE,OAAO,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,iBAAiB,EAGjB,IAAI,EAEJ,KAAK,EAEN,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,iBAAiB,EAA0B,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAY,IAAI,EAAuB,MAAM,cAAc,CAAA;AAElE,KAAK,UAAU,GAAG,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACnF,KAAK,SAAS,GAAG,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAWjF,eAAO,MAAM,iBAAiB,+CAAc,CAAA;AAE5C,KAAK,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,eAAO,MAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;mBAVf,OAAO;mBACP,GAAG;;;kBAGJ,GAAG;6BACO,MAAM,KAAK,IAAI;;0BAEnB,MAAM;;;;;;;GAGM,gBAAgB;;;oCACQ,CAAA;AAEtD,MAAM,MAAM,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,GAAG,OAAO,CAAA;IAClC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,QAAQ,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4FxC,CAAA;AAUD,KAAK,eAAe,GAAG,WAAW,GAAG,IAAI,CAAA;AAEzC,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;yCAiBxB,CAAA;AAUD,KAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE9C,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAA;AAwBlD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gDA2CzB,CAAA;AAUD,KAAK,kBAAkB,GAAG,WAAW,GAAG,IAAI,CAAA;AAE5C,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AA4BD,eAAO,MAAM,WAAW;;;;;;;;;;;;4CAgFvB,CAAA"}
|