@tamagui/popper 1.13.2 → 1.13.4
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 +1 -326
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/cjs/index.js +1 -18
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Popper.js +1 -297
- package/dist/esm/Popper.js.map +2 -2
- package/dist/esm/Popper.mjs +1 -297
- package/dist/esm/Popper.mjs.map +2 -2
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/index.mjs.map +1 -1
- package/dist/jsx/Popper.js +1 -280
- package/dist/jsx/Popper.js.map +2 -2
- package/dist/jsx/Popper.mjs +1 -280
- package/dist/jsx/Popper.mjs.map +2 -2
- package/dist/jsx/index.js +1 -1
- package/dist/jsx/index.js.map +1 -1
- package/dist/jsx/index.mjs +1 -1
- package/dist/jsx/index.mjs.map +1 -1
- package/package.json +9 -9
package/dist/esm/Popper.js
CHANGED
|
@@ -1,298 +1,2 @@
|
|
|
1
|
-
import
|
|
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
|
-
function 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
|
-
const ANCHOR_NAME = "PopperAnchor";
|
|
103
|
-
const PopperAnchor = YStack.extractable(
|
|
104
|
-
React.forwardRef(function PopperAnchor2(props, forwardedRef) {
|
|
105
|
-
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
106
|
-
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
107
|
-
const ref = React.useRef(null);
|
|
108
|
-
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
109
|
-
if (virtualRef) {
|
|
110
|
-
return null;
|
|
111
|
-
}
|
|
112
|
-
const stackProps = {
|
|
113
|
-
ref: composedRefs,
|
|
114
|
-
...anchorProps
|
|
115
|
-
};
|
|
116
|
-
return /* @__PURE__ */ jsx(YStack, { ...getReferenceProps ? getReferenceProps(stackProps) : stackProps });
|
|
117
|
-
})
|
|
118
|
-
);
|
|
119
|
-
const CONTENT_NAME = "PopperContent";
|
|
120
|
-
const PopperContentFrame = styled(ThemeableStack, {
|
|
121
|
-
name: "PopperContent",
|
|
122
|
-
variants: {
|
|
123
|
-
unstyled: {
|
|
124
|
-
false: {
|
|
125
|
-
size: "$true",
|
|
126
|
-
backgroundColor: "$background",
|
|
127
|
-
alignItems: "center",
|
|
128
|
-
radiused: true
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
size: {
|
|
132
|
-
"...size": (val, { tokens }) => {
|
|
133
|
-
return {
|
|
134
|
-
padding: tokens.space[val],
|
|
135
|
-
borderRadius: tokens.radius[val]
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
defaultVariants: {
|
|
141
|
-
unstyled: false
|
|
142
|
-
}
|
|
143
|
-
});
|
|
144
|
-
const PopperContent = React.forwardRef(
|
|
145
|
-
function PopperContent2(props, forwardedRef) {
|
|
146
|
-
const { __scopePopper, ...contentProps } = props;
|
|
147
|
-
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
148
|
-
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
149
|
-
const contents = React.useMemo(() => {
|
|
150
|
-
return /* @__PURE__ */ jsx(
|
|
151
|
-
PopperContentFrame,
|
|
152
|
-
{
|
|
153
|
-
"data-placement": placement,
|
|
154
|
-
"data-strategy": strategy,
|
|
155
|
-
size: contentProps.size || size,
|
|
156
|
-
...contentProps
|
|
157
|
-
},
|
|
158
|
-
"popper-content-frame"
|
|
159
|
-
);
|
|
160
|
-
}, [placement, strategy, props]);
|
|
161
|
-
if (!isMounted) {
|
|
162
|
-
return null;
|
|
163
|
-
}
|
|
164
|
-
const frameProps = {
|
|
165
|
-
ref: contentRefs,
|
|
166
|
-
x: x || 0,
|
|
167
|
-
y: y || 0,
|
|
168
|
-
position: strategy
|
|
169
|
-
};
|
|
170
|
-
return /* @__PURE__ */ jsx(
|
|
171
|
-
YStack,
|
|
172
|
-
{
|
|
173
|
-
animateOnly: ["transform"],
|
|
174
|
-
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
175
|
-
children: contents
|
|
176
|
-
}
|
|
177
|
-
);
|
|
178
|
-
}
|
|
179
|
-
);
|
|
180
|
-
const ARROW_NAME = "PopperArrow";
|
|
181
|
-
const PopperArrowFrame = styled(YStack, {
|
|
182
|
-
name: "PopperArrow",
|
|
183
|
-
variants: {
|
|
184
|
-
unstyled: {
|
|
185
|
-
false: {
|
|
186
|
-
borderColor: "$borderColor",
|
|
187
|
-
backgroundColor: "$background",
|
|
188
|
-
position: "relative"
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
},
|
|
192
|
-
defaultVariants: {
|
|
193
|
-
unstyled: false
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
const PopperArrowOuterFrame = styled(YStack, {
|
|
197
|
-
name: "PopperArrowOuter",
|
|
198
|
-
variants: {
|
|
199
|
-
unstyled: {
|
|
200
|
-
false: {
|
|
201
|
-
position: "absolute",
|
|
202
|
-
zIndex: -1,
|
|
203
|
-
pointerEvents: "none",
|
|
204
|
-
overflow: "hidden",
|
|
205
|
-
alignItems: "center",
|
|
206
|
-
justifyContent: "center"
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
|
-
defaultVariants: {
|
|
211
|
-
unstyled: false
|
|
212
|
-
}
|
|
213
|
-
});
|
|
214
|
-
const opposites = {
|
|
215
|
-
top: "bottom",
|
|
216
|
-
right: "left",
|
|
217
|
-
bottom: "top",
|
|
218
|
-
left: "right"
|
|
219
|
-
};
|
|
220
|
-
const PopperArrow = PopperArrowFrame.extractable(
|
|
221
|
-
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
222
|
-
var _a, _b;
|
|
223
|
-
const {
|
|
224
|
-
__scopePopper,
|
|
225
|
-
offset: offset2,
|
|
226
|
-
size: sizeProp,
|
|
227
|
-
borderWidth = 0,
|
|
228
|
-
...arrowProps
|
|
229
|
-
} = props;
|
|
230
|
-
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
231
|
-
const sizeVal = sizeProp ?? context.size;
|
|
232
|
-
const sizeValResolved = getVariableValue(stepTokenUpOrDown("space", sizeVal, -2, [2]));
|
|
233
|
-
const size = +sizeValResolved;
|
|
234
|
-
const { placement } = context;
|
|
235
|
-
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
236
|
-
const x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0;
|
|
237
|
-
const y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0;
|
|
238
|
-
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
239
|
-
const arrowStyle = { x, y, width: size, height: size };
|
|
240
|
-
const innerArrowStyle = {};
|
|
241
|
-
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
242
|
-
if (primaryPlacement) {
|
|
243
|
-
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
244
|
-
const oppSide = opposites[primaryPlacement];
|
|
245
|
-
if (oppSide) {
|
|
246
|
-
arrowStyle[oppSide] = -size;
|
|
247
|
-
innerArrowStyle[oppSide] = size / 2;
|
|
248
|
-
}
|
|
249
|
-
if (oppSide === "top" || oppSide === "bottom") {
|
|
250
|
-
arrowStyle.left = 0;
|
|
251
|
-
}
|
|
252
|
-
if (oppSide === "left" || oppSide === "right") {
|
|
253
|
-
arrowStyle.top = 0;
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
useIsomorphicLayoutEffect(() => {
|
|
257
|
-
var _a2;
|
|
258
|
-
(_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
|
|
259
|
-
}, [size, context.onArrowSize]);
|
|
260
|
-
return /* @__PURE__ */ jsx(PopperArrowOuterFrame, { ref: refs, ...arrowStyle, children: /* @__PURE__ */ jsx(
|
|
261
|
-
PopperArrowFrame,
|
|
262
|
-
{
|
|
263
|
-
width: size,
|
|
264
|
-
height: size,
|
|
265
|
-
...arrowProps,
|
|
266
|
-
...innerArrowStyle,
|
|
267
|
-
rotate: "45deg",
|
|
268
|
-
...primaryPlacement === "bottom" && {
|
|
269
|
-
borderBottomWidth: borderWidth,
|
|
270
|
-
borderRightWidth: borderWidth
|
|
271
|
-
},
|
|
272
|
-
...primaryPlacement === "top" && {
|
|
273
|
-
borderTopWidth: borderWidth,
|
|
274
|
-
borderLeftWidth: borderWidth
|
|
275
|
-
},
|
|
276
|
-
...primaryPlacement === "right" && {
|
|
277
|
-
borderTopWidth: borderWidth,
|
|
278
|
-
borderRightWidth: borderWidth
|
|
279
|
-
},
|
|
280
|
-
...primaryPlacement === "left" && {
|
|
281
|
-
borderBottomWidth: borderWidth,
|
|
282
|
-
borderLeftWidth: borderWidth
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
) });
|
|
286
|
-
})
|
|
287
|
-
);
|
|
288
|
-
export {
|
|
289
|
-
Popper,
|
|
290
|
-
PopperAnchor,
|
|
291
|
-
PopperArrow,
|
|
292
|
-
PopperContent,
|
|
293
|
-
PopperContentFrame,
|
|
294
|
-
PopperProvider,
|
|
295
|
-
createPopperScope,
|
|
296
|
-
usePopperContext
|
|
297
|
-
};
|
|
1
|
+
import{jsx as h}from"react/jsx-runtime";import{useComposedRefs as k}from"@tamagui/compose-refs";import{getVariableValue as T,isWeb as W,styled as v,useIsomorphicLayoutEffect as C}from"@tamagui/core";import{createContextScope as L}from"@tamagui/create-context";import{arrow as N,autoUpdate as I,flip as D,offset as H,shift as Y,useFloating as U}from"@tamagui/floating";import{stepTokenUpOrDown as $}from"@tamagui/get-size";import{ThemeableStack as B,YStack as R}from"@tamagui/stacks";import*as s from"react";import{Keyboard as O,useWindowDimensions as K}from"react-native";const V="Popper",[j,q]=L(V),he=q,[G,E]=j(V);function be(f){const{__scopePopper:a,children:d,size:P,strategy:u="absolute",placement:l="bottom",stayInFrame:e,allowFlip:i}=f,[o,m]=s.useState(!1);C(()=>{m(!0)},[]);const c=s.useRef(),[r,y]=s.useState(null),[w,b]=s.useState(0),S=s.useRef(),t=U({strategy:u,placement:l,sameScrollView:!1,middleware:[e?Y(typeof e=="boolean"?{}:e):null,i?D(typeof i=="boolean"?{}:i):null,r?N({element:r}):null,w?H(w):null].filter(Boolean)}),{refs:p,middlewareData:A}=t,x=k(S,y);if(C(()=>{t.reference(c.current)},[c]),W)s.useEffect(()=>{if(p.reference.current&&p.floating.current)return I(p.reference.current,p.floating.current,t.update)},[t.update,p.floating,p.reference]);else{const g=K(),[z,n]=s.useState(!1);s.useEffect(()=>{const _=O.addListener("keyboardDidShow",()=>{n(!0)}),M=O.addListener("keyboardDidHide",()=>{n(!1)});return()=>{_.remove(),M.remove()}},[]),C(()=>{t.update()},[g,z])}return h(G,{scope:a,anchorRef:c,size:P,arrowRef:x,arrowStyle:A.arrow,onArrowSize:b,isMounted:o,...t,children:d})}const J="PopperAnchor",Re=R.extractable(s.forwardRef(function(a,d){const{__scopePopper:P,virtualRef:u,...l}=a,{anchorRef:e,getReferenceProps:i}=E(J,P),o=s.useRef(null),m=k(d,o,e);if(u)return null;const c={ref:m,...l};return h(R,{...i?i(c):c})})),Q="PopperContent",X=v(B,{name:"PopperContent",variants:{unstyled:{false:{size:"$true",backgroundColor:"$background",alignItems:"center",radiused:!0}},size:{"...size":(f,{tokens:a})=>({padding:a.space[f],borderRadius:a.radius[f]})}},defaultVariants:{unstyled:!1}}),Ae=s.forwardRef(function(a,d){const{__scopePopper:P,...u}=a,{strategy:l,placement:e,floating:i,x:o,y:m,getFloatingProps:c,size:r,isMounted:y}=E(Q,P),w=k(i,d),b=s.useMemo(()=>h(X,{"data-placement":e,"data-strategy":l,size:u.size||r,...u},"popper-content-frame"),[e,l,a]);if(!y)return null;const S={ref:w,x:o||0,y:m||0,position:l};return h(R,{animateOnly:["transform"],...c?c(S):S,children:b})}),Z="PopperArrow",F=v(R,{name:"PopperArrow",variants:{unstyled:{false:{borderColor:"$borderColor",backgroundColor:"$background",position:"relative"}}},defaultVariants:{unstyled:!1}}),ee=v(R,{name:"PopperArrowOuter",variants:{unstyled:{false:{position:"absolute",zIndex:-1,pointerEvents:"none",overflow:"hidden",alignItems:"center",justifyContent:"center"}}},defaultVariants:{unstyled:!1}}),oe={top:"bottom",right:"left",bottom:"top",left:"right"},ge=F.extractable(s.forwardRef(function(a,d){var g,z;const{__scopePopper:P,offset:u,size:l,borderWidth:e=0,...i}=a,o=E(Z,P),m=l??o.size,r=+T($("space",m,-2,[2])),{placement:y}=o,w=k(o.arrowRef,d),b=((g=o.arrowStyle)==null?void 0:g.x)||0,S=((z=o.arrowStyle)==null?void 0:z.y)||0,t=y?y.split("-")[0]:"top",p={x:b,y:S,width:r,height:r},A={},x=t==="bottom"||t==="top";if(t){p[x?"width":"height"]=r*2;const n=oe[t];n&&(p[n]=-r,A[n]=r/2),(n==="top"||n==="bottom")&&(p.left=0),(n==="left"||n==="right")&&(p.top=0)}return C(()=>{var n;(n=o.onArrowSize)==null||n.call(o,r)},[r,o.onArrowSize]),h(ee,{ref:w,...p,children:h(F,{width:r,height:r,...i,...A,rotate:"45deg",...t==="bottom"&&{borderBottomWidth:e,borderRightWidth:e},...t==="top"&&{borderTopWidth:e,borderLeftWidth:e},...t==="right"&&{borderTopWidth:e,borderRightWidth:e},...t==="left"&&{borderBottomWidth:e,borderLeftWidth:e}})})}));export{be as Popper,Re as PopperAnchor,ge as PopperArrow,Ae as PopperContent,X as PopperContentFrame,G as PopperProvider,he as createPopperScope,E as usePopperContext};
|
|
298
2
|
//# sourceMappingURL=Popper.js.map
|
package/dist/esm/Popper.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popper.tsx"],
|
|
4
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 function Popper(props: ScopedProps<PopperProps>) {\n const {\n __scopePopper,\n children,\n size,\n strategy = 'absolute',\n placement = 'bottom',\n stayInFrame,\n allowFlip,\n } = props\n\n const [isMounted, setIsMounted] = React.useState(false)\n useIsomorphicLayoutEffect(() => {\n setIsMounted(true)\n }, [])\n\n const anchorRef = React.useRef<any>()\n const [arrowEl, setArrow] = React.useState<any>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n strategy,\n placement,\n sameScrollView: false, // this only takes effect on native\n middleware: [\n stayInFrame\n ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame)\n : (null as any),\n allowFlip ? flip(typeof allowFlip === 'boolean' ? {} : allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n if (isWeb) {\n React.useEffect(() => {\n if (!(refs.reference.current && refs.floating.current)) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [floating.update, refs.floating, refs.reference])\n } else {\n // On Native there's no autoupdate so we call update() when necessary\n\n // Subscribe to window dimensions (orientation, scale, etc...)\n const dimensions = useWindowDimensions()\n\n // Subscribe to keyboard state\n const [keyboardOpen, setKeyboardOpen] = React.useState(false)\n React.useEffect(() => {\n const showSubscription = Keyboard.addListener('keyboardDidShow', () => {\n setKeyboardOpen(true)\n })\n const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {\n setKeyboardOpen(false)\n })\n\n return () => {\n showSubscription.remove()\n hideSubscription.remove()\n }\n }, [])\n\n useIsomorphicLayoutEffect(() => {\n floating.update()\n }, [dimensions, keyboardOpen])\n }\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={middlewareData.arrow}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = YStack.extractable(\n React.forwardRef<PopperAnchorRef, PopperAnchorProps>(function PopperAnchor(\n props: ScopedProps<PopperAnchorProps>,\n forwardedRef\n ) {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return (\n <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n )\n })\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nexport const PopperContentFrame = styled(ThemeableStack, {\n name: 'PopperContent',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val],\n borderRadius: tokens.radius[val],\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nexport const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n function PopperContent(props: ScopedProps<PopperContentProps>, forwardedRef) {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n size={contentProps.size || size}\n {...contentProps}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: x || 0,\n y: y || 0,\n position: strategy,\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack\n animateOnly={['transform']}\n {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}\n >\n {contents}\n </YStack>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n offset?: number\n size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n name: 'PopperArrow',\n\n variants: {\n unstyled: {\n false: {\n borderColor: '$borderColor',\n backgroundColor: '$background',\n position: 'relative',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nconst PopperArrowOuterFrame = styled(YStack, {\n name: 'PopperArrowOuter',\n\n variants: {\n unstyled: {\n false: {\n position: 'absolute',\n zIndex: -1,\n pointerEvents: 'none',\n overflow: 'hidden',\n alignItems: 'center',\n justifyContent: 'center',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n} as const\n\ntype Sides = keyof typeof opposites\n\nexport const PopperArrow = PopperArrowFrame.extractable(\n React.forwardRef<PopperArrowElement, PopperArrowProps>(function PopperArrow(\n props: ScopedProps<PopperArrowProps>,\n forwardedRef\n ) {\n const {\n __scopePopper,\n offset,\n size: sizeProp,\n borderWidth = 0,\n ...arrowProps\n } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown('space', sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n // Sometimes floating-ui can return NaN during orientation or screen size changes on native\n // so we explictly force the x,y position types as a number\n const x = (context.arrowStyle?.x as number) || 0\n const y = (context.arrowStyle?.y as number) || 0\n\n const primaryPlacement = (placement ? placement.split('-')[0] : 'top') as Sides\n\n const arrowStyle: StackProps = { x, y, width: size, height: size }\n const innerArrowStyle: StackProps = {}\n const isVertical = primaryPlacement === 'bottom' || primaryPlacement === 'top'\n\n if (primaryPlacement) {\n // allows for extra diagonal size\n arrowStyle[isVertical ? 'width' : 'height'] = size * 2\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size\n innerArrowStyle[oppSide] = size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n // outer frame to cut off for ability to have nicer shadows/borders\n return (\n <PopperArrowOuterFrame ref={refs} {...arrowStyle}>\n <PopperArrowFrame\n width={size}\n height={size}\n {...arrowProps}\n {...innerArrowStyle}\n rotate=\"45deg\"\n {...(primaryPlacement === 'bottom' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'top' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n </PopperArrowOuterFrame>\n )\n })\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
-
"mappings": "AAiJI
|
|
6
|
-
"names": ["PopperAnchor", "PopperContent", "
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["jsx", "useComposedRefs", "getVariableValue", "isWeb", "styled", "useIsomorphicLayoutEffect", "createContextScope", "arrow", "autoUpdate", "flip", "offset", "shift", "useFloating", "stepTokenUpOrDown", "ThemeableStack", "YStack", "React", "Keyboard", "useWindowDimensions", "POPPER_NAME", "createPopperContext", "createScope", "createPopperScope", "PopperProvider", "usePopperContext", "Popper", "props", "__scopePopper", "children", "size", "strategy", "placement", "stayInFrame", "allowFlip", "isMounted", "setIsMounted", "anchorRef", "arrowEl", "setArrow", "arrowSize", "setArrowSize", "arrowRef", "floating", "refs", "middlewareData", "composedArrowRefs", "dimensions", "keyboardOpen", "setKeyboardOpen", "showSubscription", "hideSubscription", "ANCHOR_NAME", "PopperAnchor", "forwardedRef", "virtualRef", "anchorProps", "getReferenceProps", "ref", "composedRefs", "stackProps", "CONTENT_NAME", "PopperContentFrame", "val", "tokens", "PopperContent", "contentProps", "x", "y", "getFloatingProps", "contentRefs", "contents", "frameProps", "ARROW_NAME", "PopperArrowFrame", "PopperArrowOuterFrame", "opposites", "PopperArrow", "_a", "_b", "sizeProp", "borderWidth", "arrowProps", "context", "sizeVal", "primaryPlacement", "arrowStyle", "innerArrowStyle", "isVertical", "oppSide"]
|
|
7
7
|
}
|