@tamagui/popper 1.0.1-beta.21 → 1.0.1-beta.210
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 +159 -125
- package/dist/cjs/Popper.js.map +3 -3
- package/dist/cjs/floating.js +1 -0
- package/dist/cjs/floating.js.map +1 -1
- package/dist/cjs/floating.native.js +1 -0
- package/dist/cjs/floating.native.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/useFloating.js +7 -4
- package/dist/cjs/useFloating.js.map +2 -2
- package/dist/esm/Popper.js +153 -108
- package/dist/esm/Popper.js.map +3 -3
- package/dist/esm/floating.js +0 -0
- package/dist/esm/floating.js.map +1 -1
- package/dist/esm/floating.native.js +0 -0
- package/dist/esm/floating.native.js.map +1 -1
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/useFloating.js +2 -4
- package/dist/esm/useFloating.js.map +2 -2
- package/dist/jsx/Popper.js +124 -86
- package/dist/jsx/Popper.js.map +7 -0
- package/dist/jsx/floating.js +1 -0
- package/dist/jsx/floating.js.map +7 -0
- package/dist/jsx/floating.native.js +1 -0
- package/dist/jsx/floating.native.js.map +7 -0
- package/dist/jsx/index.js +1 -0
- package/dist/jsx/index.js.map +7 -0
- package/dist/jsx/useFloating.js +4 -6
- package/dist/jsx/useFloating.js.map +7 -0
- package/package.json +17 -12
- package/src/Popper.tsx +351 -0
- package/src/floating.native.tsx +1 -0
- package/src/floating.tsx +1 -0
- package/src/index.tsx +2 -0
- package/src/useFloating.tsx +20 -0
- package/types/Popper.d.ts +73 -61
- package/types/index.d.ts +1 -1
- package/types/useFloating.d.ts +3 -2
- package/types/Popper.d.ts.map +0 -1
- package/types/floating.d.ts.map +0 -1
- package/types/floating.native.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
- package/types/useFloating.d.ts.map +0 -1
- package/types/useFloating.native.d.ts +0 -2
- package/types/useFloating.native.d.ts.map +0 -1
- package/types/useFloating.web.d.ts +0 -2
- package/types/useFloating.web.d.ts.map +0 -1
package/dist/esm/Popper.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
2
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
4
3
|
import {
|
|
5
4
|
getTokens,
|
|
6
5
|
getVariableValue,
|
|
6
|
+
stepTokenUpOrDown,
|
|
7
7
|
styled,
|
|
8
8
|
useIsomorphicLayoutEffect
|
|
9
9
|
} from "@tamagui/core";
|
|
10
10
|
import { createContextScope } from "@tamagui/create-context";
|
|
11
|
-
import {
|
|
11
|
+
import { ThemeableStack, YStack } from "@tamagui/stacks";
|
|
12
12
|
import * as React from "react";
|
|
13
13
|
import { arrow, autoUpdate, flip, offset, shift } from "./floating";
|
|
14
14
|
import { useFloating } from "./useFloating";
|
|
@@ -16,8 +16,16 @@ const POPPER_NAME = "Popper";
|
|
|
16
16
|
const [createPopperContext, createScope] = createContextScope(POPPER_NAME);
|
|
17
17
|
const createPopperScope = createScope;
|
|
18
18
|
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
19
|
-
const Popper =
|
|
20
|
-
const {
|
|
19
|
+
const Popper = (props) => {
|
|
20
|
+
const {
|
|
21
|
+
__scopePopper,
|
|
22
|
+
children,
|
|
23
|
+
size,
|
|
24
|
+
strategy = "absolute",
|
|
25
|
+
placement = "bottom",
|
|
26
|
+
stayInFrame,
|
|
27
|
+
allowFlip
|
|
28
|
+
} = props;
|
|
21
29
|
const [isMounted, setIsMounted] = React.useState(false);
|
|
22
30
|
useIsomorphicLayoutEffect(() => {
|
|
23
31
|
setIsMounted(true);
|
|
@@ -27,10 +35,11 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
27
35
|
const [arrowSize, setArrowSize] = React.useState(0);
|
|
28
36
|
const arrowRef = React.useRef();
|
|
29
37
|
const floating = useFloating({
|
|
38
|
+
strategy,
|
|
30
39
|
placement,
|
|
31
40
|
middleware: [
|
|
32
|
-
stayInFrame ? shift(stayInFrame) : null,
|
|
33
|
-
allowFlip ? flip(allowFlip) : null,
|
|
41
|
+
stayInFrame ? shift(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
|
|
42
|
+
allowFlip ? flip(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
|
|
34
43
|
arrowEl ? arrow({ element: arrowEl }) : null,
|
|
35
44
|
arrowSize ? offset(arrowSize) : null
|
|
36
45
|
].filter(Boolean)
|
|
@@ -45,11 +54,11 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
45
54
|
return;
|
|
46
55
|
}
|
|
47
56
|
return autoUpdate(refs.reference.current, refs.floating.current, floating.update);
|
|
48
|
-
}, [refs.floating
|
|
57
|
+
}, [floating.update, refs.floating, refs.reference]);
|
|
49
58
|
const arrowStyle = React.useMemo(() => {
|
|
50
59
|
return middlewareData.arrow;
|
|
51
60
|
}, [JSON.stringify(middlewareData.arrow || {})]);
|
|
52
|
-
return /* @__PURE__ */
|
|
61
|
+
return /* @__PURE__ */ jsx(PopperProvider, {
|
|
53
62
|
scope: __scopePopper,
|
|
54
63
|
anchorRef,
|
|
55
64
|
size,
|
|
@@ -57,72 +66,97 @@ const Popper = /* @__PURE__ */ __name((props) => {
|
|
|
57
66
|
arrowStyle,
|
|
58
67
|
onArrowSize: setArrowSize,
|
|
59
68
|
isMounted,
|
|
60
|
-
...floating
|
|
61
|
-
|
|
62
|
-
}
|
|
69
|
+
...floating,
|
|
70
|
+
children
|
|
71
|
+
});
|
|
72
|
+
};
|
|
63
73
|
Popper.displayName = POPPER_NAME;
|
|
64
74
|
const ANCHOR_NAME = "PopperAnchor";
|
|
65
|
-
const PopperAnchor = React.forwardRef(
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
75
|
+
const PopperAnchor = React.forwardRef(
|
|
76
|
+
(props, forwardedRef) => {
|
|
77
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
78
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
79
|
+
const ref = React.useRef(null);
|
|
80
|
+
const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef);
|
|
81
|
+
if (virtualRef) {
|
|
82
|
+
return null;
|
|
83
|
+
}
|
|
84
|
+
const stackProps = {
|
|
85
|
+
ref: composedRefs,
|
|
86
|
+
...anchorProps
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ jsx(YStack, {
|
|
89
|
+
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
90
|
+
});
|
|
72
91
|
}
|
|
73
|
-
|
|
74
|
-
ref: composedRefs,
|
|
75
|
-
...anchorProps
|
|
76
|
-
};
|
|
77
|
-
return /* @__PURE__ */ React.createElement(YStack, {
|
|
78
|
-
...getReferenceProps ? getReferenceProps(stackProps) : stackProps
|
|
79
|
-
});
|
|
80
|
-
});
|
|
92
|
+
);
|
|
81
93
|
PopperAnchor.displayName = ANCHOR_NAME;
|
|
82
94
|
const CONTENT_NAME = "PopperContent";
|
|
83
|
-
const PopperContentFrame = styled(
|
|
95
|
+
const PopperContentFrame = styled(ThemeableStack, {
|
|
84
96
|
name: "PopperContent",
|
|
85
97
|
backgroundColor: "$background",
|
|
86
98
|
alignItems: "center",
|
|
99
|
+
radiused: true,
|
|
100
|
+
variants: {
|
|
101
|
+
size: {
|
|
102
|
+
"...size": (val, { tokens }) => {
|
|
103
|
+
return {
|
|
104
|
+
padding: tokens.space[val],
|
|
105
|
+
borderRadius: tokens.radius[val]
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
},
|
|
87
110
|
defaultVariants: {
|
|
88
111
|
size: "$4"
|
|
89
112
|
}
|
|
90
113
|
});
|
|
91
|
-
const PopperContent =
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
});
|
|
114
|
+
const PopperContent = PopperContentFrame.extractable(
|
|
115
|
+
React.forwardRef(
|
|
116
|
+
(props, forwardedRef) => {
|
|
117
|
+
const { __scopePopper, ...contentProps } = props;
|
|
118
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
119
|
+
const contentRefs = useComposedRefs(floating, forwardedRef);
|
|
120
|
+
const contents = React.useMemo(() => {
|
|
121
|
+
return /* @__PURE__ */ jsx(PopperContentFrame, {
|
|
122
|
+
"data-placement": placement,
|
|
123
|
+
"data-strategy": strategy,
|
|
124
|
+
size: contentProps.size || size,
|
|
125
|
+
...contentProps
|
|
126
|
+
}, "popper-content-frame");
|
|
127
|
+
}, [placement, strategy, props]);
|
|
128
|
+
if (!isMounted) {
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
const frameProps = {
|
|
132
|
+
ref: contentRefs,
|
|
133
|
+
x: x || 0,
|
|
134
|
+
y: y || 0,
|
|
135
|
+
position: strategy
|
|
136
|
+
};
|
|
137
|
+
return /* @__PURE__ */ jsx(YStack, {
|
|
138
|
+
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
139
|
+
children: contents
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
)
|
|
143
|
+
);
|
|
118
144
|
PopperContent.displayName = CONTENT_NAME;
|
|
119
145
|
const ARROW_NAME = "PopperArrow";
|
|
120
146
|
const PopperArrowFrame = styled(YStack, {
|
|
121
147
|
name: "PopperArrow",
|
|
122
148
|
borderColor: "$borderColor",
|
|
123
149
|
backgroundColor: "$background",
|
|
150
|
+
position: "relative"
|
|
151
|
+
});
|
|
152
|
+
const PopperArrowOuterFrame = styled(YStack, {
|
|
153
|
+
name: "PopperArrowOuter",
|
|
124
154
|
position: "absolute",
|
|
125
|
-
zIndex: 1
|
|
155
|
+
zIndex: -1,
|
|
156
|
+
pointerEvents: "none",
|
|
157
|
+
overflow: "hidden",
|
|
158
|
+
alignItems: "center",
|
|
159
|
+
justifyContent: "center"
|
|
126
160
|
});
|
|
127
161
|
const opposites = {
|
|
128
162
|
top: "bottom",
|
|
@@ -130,64 +164,75 @@ const opposites = {
|
|
|
130
164
|
bottom: "top",
|
|
131
165
|
left: "right"
|
|
132
166
|
};
|
|
133
|
-
const PopperArrow =
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
const
|
|
148
|
-
if (
|
|
149
|
-
arrowStyle[
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
167
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
168
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
169
|
+
const { __scopePopper, offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props;
|
|
170
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
171
|
+
const tokens = getTokens();
|
|
172
|
+
const sizeVal = sizeProp ?? context.size;
|
|
173
|
+
const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]));
|
|
174
|
+
const size = +sizeValResolved;
|
|
175
|
+
const { placement } = context;
|
|
176
|
+
const { x, y } = context.arrowStyle || { x: 0, y: 0 };
|
|
177
|
+
const refs = useComposedRefs(context.arrowRef, forwardedRef);
|
|
178
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
179
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
180
|
+
const innerArrowStyle = {};
|
|
181
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
182
|
+
if (primaryPlacement) {
|
|
183
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
184
|
+
const oppSide = opposites[primaryPlacement];
|
|
185
|
+
if (oppSide) {
|
|
186
|
+
arrowStyle[oppSide] = -size;
|
|
187
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
188
|
+
}
|
|
189
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
190
|
+
arrowStyle.left = 0;
|
|
191
|
+
}
|
|
192
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
193
|
+
arrowStyle.top = 0;
|
|
194
|
+
}
|
|
156
195
|
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
196
|
+
useIsomorphicLayoutEffect(() => {
|
|
197
|
+
var _a;
|
|
198
|
+
(_a = context.onArrowSize) == null ? void 0 : _a.call(context, size);
|
|
199
|
+
}, [size, context.onArrowSize]);
|
|
200
|
+
return /* @__PURE__ */ jsx(PopperArrowOuterFrame, {
|
|
201
|
+
ref: refs,
|
|
202
|
+
...arrowStyle,
|
|
203
|
+
children: /* @__PURE__ */ jsx(PopperArrowFrame, {
|
|
204
|
+
width: size,
|
|
205
|
+
height: size,
|
|
206
|
+
...arrowProps,
|
|
207
|
+
...innerArrowStyle,
|
|
208
|
+
rotate: "45deg",
|
|
209
|
+
...primaryPlacement === "bottom" && {
|
|
210
|
+
borderBottomWidth: borderWidth,
|
|
211
|
+
borderRightWidth: borderWidth
|
|
212
|
+
},
|
|
213
|
+
...primaryPlacement === "top" && {
|
|
214
|
+
borderTopWidth: borderWidth,
|
|
215
|
+
borderLeftWidth: borderWidth
|
|
216
|
+
},
|
|
217
|
+
...primaryPlacement === "right" && {
|
|
218
|
+
borderTopWidth: borderWidth,
|
|
219
|
+
borderRightWidth: borderWidth
|
|
220
|
+
},
|
|
221
|
+
...primaryPlacement === "left" && {
|
|
222
|
+
borderBottomWidth: borderWidth,
|
|
223
|
+
borderLeftWidth: borderWidth
|
|
224
|
+
}
|
|
225
|
+
})
|
|
226
|
+
});
|
|
227
|
+
})
|
|
228
|
+
);
|
|
185
229
|
PopperArrow.displayName = ARROW_NAME;
|
|
186
230
|
export {
|
|
187
231
|
Popper,
|
|
188
232
|
PopperAnchor,
|
|
189
233
|
PopperArrow,
|
|
190
234
|
PopperContent,
|
|
191
|
-
createPopperScope
|
|
235
|
+
createPopperScope,
|
|
236
|
+
usePopperContext
|
|
192
237
|
};
|
|
193
238
|
//# sourceMappingURL=Popper.js.map
|
package/dist/esm/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 getTokens,\n getVariableValue,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStack, SizableStackProps, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingResult, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingResult & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps\n allowFlip?: FlipProps\n}\n\nexport const Popper: React.FC<PopperProps> = (props: ScopedProps<PopperProps>) => {\n const { __scopePopper, children, size, placement = 'bottom', stayInFrame, allowFlip } = props\n\n const [isMounted, setIsMounted] = React.useState(false)\n useIsomorphicLayoutEffect(() => {\n setIsMounted(true)\n }, [])\n\n const anchorRef = React.useRef<any>()\n const [arrowEl, setArrow] = React.useState<HTMLSpanElement | null>(null)\n const [arrowSize, setArrowSize] = React.useState(0)\n const arrowRef = React.useRef()\n\n const floating = useFloating({\n placement,\n middleware: [\n stayInFrame ? shift(stayInFrame) : (null as any),\n allowFlip ? flip(allowFlip) : (null as any),\n arrowEl ? arrow({ element: arrowEl }) : (null as any),\n arrowSize ? offset(arrowSize) : (null as any),\n ].filter(Boolean),\n })\n\n const { refs, middlewareData } = floating\n\n const composedArrowRefs = useComposedRefs<any>(arrowRef, setArrow)\n\n useIsomorphicLayoutEffect(() => {\n floating.reference(anchorRef.current)\n }, [anchorRef])\n\n React.useEffect(() => {\n if (!refs.reference.current || !refs.floating.current) {\n return\n }\n // Only call this when the floating element is rendered\n return autoUpdate(refs.reference.current, refs.floating.current, floating.update)\n }, [refs.floating.current, refs.reference.current])\n\n const arrowStyle = React.useMemo(() => {\n return middlewareData.arrow\n }, [JSON.stringify(middlewareData.arrow || {})])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={arrowStyle}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(SizableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>(\n (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n {...contentProps}\n size={contentProps.size ?? size}\n />\n )\n }, [placement, strategy, props])\n\n // all poppers hidden on ssr by default\n if (!isMounted) {\n return null\n }\n\n const frameProps = {\n ref: contentRefs,\n x: (x as any) || 0,\n y: (y as any) || 0,\n position: 'absolute',\n }\n\n // outer frame because we explicitly dont want animation to apply to this\n return (\n <YStack {...(getFloatingProps ? getFloatingProps(frameProps) : frameProps)}>\n {contents}\n </YStack>\n )\n }\n)\n\nPopperContent.displayName = CONTENT_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopperArrow'\n\ntype PopperArrowElement = HTMLElement | View\n\nexport type PopperArrowProps = YStackProps & {\n offset?: number\n size?: SizeTokens\n}\n\nconst PopperArrowFrame = styled(YStack, {\n name: 'PopperArrow',\n borderColor: '$borderColor',\n backgroundColor: '$background',\n position: 'absolute',\n zIndex: 1,\n // TODO bug not applying\n // rotate: '45deg',\n})\n\nconst opposites = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n}\n\nexport const PopperArrow = React.forwardRef<PopperArrowElement, PopperArrowProps>(\n function PopperArrow(props: ScopedProps<PopperArrowProps>, forwardedRef) {\n const { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const tokens = getTokens()\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(tokens.size[sizeVal as any] ?? sizeVal ?? 12)\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = placement ? placement.split('-')[0] : 'top'\n\n let arrowStyle: StackProps = { x, y, width: size, height: size }\n if (primaryPlacement) {\n const oppSide = opposites[primaryPlacement]\n if (oppSide) {\n arrowStyle[oppSide] = -size / 2\n }\n if (oppSide === 'top' || oppSide === 'bottom') {\n arrowStyle.left = 0\n }\n if (oppSide === 'left' || oppSide === 'right') {\n arrowStyle.top = 0\n }\n }\n\n // send the Arrow's offset up to Popper\n useIsomorphicLayoutEffect(() => {\n context.onArrowSize?.(size)\n }, [size, context.onArrowSize])\n\n return (\n <PopperArrowFrame\n {...arrowProps}\n ref={refs}\n {...arrowStyle}\n rotate=\"45deg\"\n // left={0}\n // top={0}\n {...(primaryPlacement === 'top' && {\n borderBottomWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'bottom' && {\n borderTopWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n {...(primaryPlacement === 'left' && {\n borderTopWidth: borderWidth,\n borderRightWidth: borderWidth,\n })}\n {...(primaryPlacement === 'right' && {\n borderBottomWidth: borderWidth,\n borderLeftWidth: borderWidth,\n })}\n />\n )\n }\n)\n\nPopperArrow.displayName = ARROW_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popper\n\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n StackProps,\n getTokens,\n getVariableValue,\n stepTokenUpOrDown,\n styled,\n useIsomorphicLayoutEffect,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { SizableStackProps, ThemeableStack, YStack, YStackProps } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { Coords, Placement, Strategy, arrow, autoUpdate, flip, offset, shift } from './floating'\nimport { UseFloatingReturn, useFloating } from './useFloating'\n\ntype ShiftProps = typeof shift extends (options: infer Opts) => void ? Opts : never\ntype FlipProps = typeof flip extends (options: infer Opts) => void ? Opts : never\n\n/* -------------------------------------------------------------------------------------------------\n * Popper\n * -----------------------------------------------------------------------------------------------*/\n\nconst POPPER_NAME = 'Popper'\n\ntype ScopedProps<P> = P & { __scopePopper?: Scope }\nconst [createPopperContext, createScope] = createContextScope(POPPER_NAME)\n\nexport const createPopperScope = createScope\n\ntype PopperContextValue = UseFloatingReturn & {\n isMounted: boolean\n anchorRef: any\n size?: SizeTokens\n placement?: Placement\n arrowRef: any\n onArrowSize?: (val: number) => void\n arrowStyle?: Partial<Coords> & {\n centerOffset: number\n }\n}\nconst [PopperProvider, usePopperContext] = createPopperContext<PopperContextValue>(POPPER_NAME)\n\nexport type PopperProps = {\n size?: SizeTokens\n children?: React.ReactNode\n placement?: Placement\n stayInFrame?: ShiftProps | 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 ? shift(typeof stayInFrame === 'boolean' ? {} : stayInFrame) : (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 const arrowStyle = React.useMemo(() => {\n return middlewareData.arrow\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(middlewareData.arrow || {})])\n\n return (\n <PopperProvider\n scope={__scopePopper}\n anchorRef={anchorRef}\n size={size}\n arrowRef={composedArrowRefs}\n arrowStyle={arrowStyle}\n onArrowSize={setArrowSize}\n isMounted={isMounted}\n {...floating}\n >\n {children}\n </PopperProvider>\n )\n}\n\nPopper.displayName = POPPER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopperAnchor'\n\ntype PopperAnchorRef = HTMLElement | View\n\nexport type PopperAnchorProps = YStackProps & {\n virtualRef?: React.RefObject<any>\n}\n\nexport const PopperAnchor = React.forwardRef<PopperAnchorRef, PopperAnchorProps>(\n (props: ScopedProps<PopperAnchorProps>, forwardedRef) => {\n const { __scopePopper, virtualRef, ...anchorProps } = props\n const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper)\n const ref = React.useRef<PopperAnchorRef>(null)\n const composedRefs = useComposedRefs(forwardedRef, ref, anchorRef)\n if (virtualRef) {\n return null\n }\n const stackProps = {\n ref: composedRefs,\n ...anchorProps,\n }\n return <YStack {...(getReferenceProps ? getReferenceProps(stackProps) : stackProps)} />\n }\n)\n\nPopperAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopperContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopperContent'\n\ntype PopperContentElement = HTMLElement | View\n\nexport type PopperContentProps = SizableStackProps\n\nconst PopperContentFrame = styled(ThemeableStack, {\n name: 'PopperContent',\n backgroundColor: '$background',\n alignItems: 'center',\n radiused: true,\n\n variants: {\n size: {\n '...size': (val, { tokens }) => {\n return {\n padding: tokens.space[val],\n borderRadius: tokens.radius[val],\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$4',\n },\n})\n\nexport const PopperContent = PopperContentFrame.extractable(\n React.forwardRef<PopperContentElement, PopperContentProps>(\n (props: ScopedProps<PopperContentProps>, forwardedRef) => {\n const { __scopePopper, ...contentProps } = props\n const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } =\n usePopperContext(CONTENT_NAME, __scopePopper)\n const contentRefs = useComposedRefs<any>(floating, forwardedRef)\n\n const contents = React.useMemo(() => {\n return (\n <PopperContentFrame\n key=\"popper-content-frame\"\n data-placement={placement}\n data-strategy={strategy}\n 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 { __scopePopper, offset, size: sizeProp, borderWidth = 0, ...arrowProps } = props\n const context = usePopperContext(ARROW_NAME, __scopePopper)\n const tokens = getTokens()\n const sizeVal = sizeProp ?? context.size\n const sizeValResolved = getVariableValue(stepTokenUpOrDown(tokens.space, sizeVal, -2, [2]))\n const size = +sizeValResolved\n const { placement } = context\n const { x, y } = context.arrowStyle || { x: 0, y: 0 }\n const refs = useComposedRefs(context.arrowRef, forwardedRef)\n\n const primaryPlacement = (placement ? placement.split('-')[0] : 'top') 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\nexport { usePopperContext }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["PopperArrow", "offset"]
|
|
7
7
|
}
|
package/dist/esm/floating.js
CHANGED
|
File without changes
|
package/dist/esm/floating.js.map
CHANGED
|
File without changes
|
package/dist/esm/index.js
CHANGED
|
File without changes
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["export { FloatingOverrideContext, type UseFloatingFn } from './useFloating'\nexport * from './Popper'\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,SAAS,+BAAmD;AAC5D,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/useFloating.js
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { createContext, useContext } from "react";
|
|
4
2
|
import * as Floating from "./floating";
|
|
5
3
|
const FloatingOverrideContext = createContext(null);
|
|
6
|
-
const useFloating =
|
|
4
|
+
const useFloating = (props) => {
|
|
7
5
|
var _a;
|
|
8
6
|
const context = useContext(FloatingOverrideContext);
|
|
9
7
|
return (_a = context || Floating.useFloating) == null ? void 0 : _a(props);
|
|
10
|
-
}
|
|
8
|
+
};
|
|
11
9
|
export {
|
|
12
10
|
FloatingOverrideContext,
|
|
13
11
|
useFloating
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/useFloating.tsx"],
|
|
4
|
-
"sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { createContext, useContext } from 'react'\n\nimport * as Floating from './floating'\n\nexport type UseFloatingFn = typeof Floating.useFloating\n\ntype UseFloatingProps = UseFloatingFn extends (props: infer Props) => any ? Props : never\n\nexport type UseFloatingReturn = Floating.UseFloatingReturn & {\n context?: any\n getFloatingProps?: (props: { ref: any; [key: string]: any }) => any\n getReferenceProps?: (props: { ref: any; [key: string]: any }) => any\n}\n\nexport const FloatingOverrideContext = createContext<UseFloatingFn | null>(null)\n\nexport const useFloating = (props: UseFloatingProps): UseFloatingReturn => {\n const context = useContext(FloatingOverrideContext)\n return (context || Floating.useFloating)?.(props)\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,YAAY,cAAc;AAYnB,MAAM,0BAA0B,cAAoC,IAAI;AAExE,MAAM,cAAc,CAAC,UAA+C;AAhB3E;AAiBE,QAAM,UAAU,WAAW,uBAAuB;AAClD,UAAQ,gBAAW,SAAS,gBAApB,mBAAmC;AAC7C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|