@tamagui/popper 1.14.0 → 1.14.2
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 +326 -1
- package/dist/cjs/Popper.js.map +2 -2
- package/dist/cjs/index.js +18 -1
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/Popper.js +297 -1
- package/dist/esm/Popper.js.map +2 -2
- package/dist/esm/Popper.mjs +297 -1
- 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 +280 -1
- package/dist/jsx/Popper.js.map +2 -2
- package/dist/jsx/Popper.mjs +280 -1
- 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/cjs/Popper.js
CHANGED
|
@@ -1,2 +1,327 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Popper_exports = {};
|
|
30
|
+
__export(Popper_exports, {
|
|
31
|
+
Popper: () => Popper,
|
|
32
|
+
PopperAnchor: () => PopperAnchor,
|
|
33
|
+
PopperArrow: () => PopperArrow,
|
|
34
|
+
PopperContent: () => PopperContent,
|
|
35
|
+
PopperContentFrame: () => PopperContentFrame,
|
|
36
|
+
PopperProvider: () => PopperProvider,
|
|
37
|
+
createPopperScope: () => createPopperScope,
|
|
38
|
+
usePopperContext: () => usePopperContext
|
|
39
|
+
});
|
|
40
|
+
module.exports = __toCommonJS(Popper_exports);
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
43
|
+
var import_core = require("@tamagui/core");
|
|
44
|
+
var import_create_context = require("@tamagui/create-context");
|
|
45
|
+
var import_floating = require("@tamagui/floating");
|
|
46
|
+
var import_get_size = require("@tamagui/get-size");
|
|
47
|
+
var import_stacks = require("@tamagui/stacks");
|
|
48
|
+
var React = __toESM(require("react"));
|
|
49
|
+
var import_react_native = require("react-native");
|
|
50
|
+
const POPPER_NAME = "Popper";
|
|
51
|
+
const [createPopperContext, createScope] = (0, import_create_context.createContextScope)(POPPER_NAME);
|
|
52
|
+
const createPopperScope = createScope;
|
|
53
|
+
const [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
|
|
54
|
+
function Popper(props) {
|
|
55
|
+
const {
|
|
56
|
+
__scopePopper,
|
|
57
|
+
children,
|
|
58
|
+
size,
|
|
59
|
+
strategy = "absolute",
|
|
60
|
+
placement = "bottom",
|
|
61
|
+
stayInFrame,
|
|
62
|
+
allowFlip
|
|
63
|
+
} = props;
|
|
64
|
+
const [isMounted, setIsMounted] = React.useState(false);
|
|
65
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
66
|
+
setIsMounted(true);
|
|
67
|
+
}, []);
|
|
68
|
+
const anchorRef = React.useRef();
|
|
69
|
+
const [arrowEl, setArrow] = React.useState(null);
|
|
70
|
+
const [arrowSize, setArrowSize] = React.useState(0);
|
|
71
|
+
const arrowRef = React.useRef();
|
|
72
|
+
const floating = (0, import_floating.useFloating)({
|
|
73
|
+
strategy,
|
|
74
|
+
placement,
|
|
75
|
+
sameScrollView: false,
|
|
76
|
+
// this only takes effect on native
|
|
77
|
+
middleware: [
|
|
78
|
+
stayInFrame ? (0, import_floating.shift)(typeof stayInFrame === "boolean" ? {} : stayInFrame) : null,
|
|
79
|
+
allowFlip ? (0, import_floating.flip)(typeof allowFlip === "boolean" ? {} : allowFlip) : null,
|
|
80
|
+
arrowEl ? (0, import_floating.arrow)({ element: arrowEl }) : null,
|
|
81
|
+
arrowSize ? (0, import_floating.offset)(arrowSize) : null
|
|
82
|
+
].filter(Boolean)
|
|
83
|
+
});
|
|
84
|
+
const { refs, middlewareData } = floating;
|
|
85
|
+
const composedArrowRefs = (0, import_compose_refs.useComposedRefs)(arrowRef, setArrow);
|
|
86
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
87
|
+
floating.reference(anchorRef.current);
|
|
88
|
+
}, [anchorRef]);
|
|
89
|
+
if (import_core.isWeb) {
|
|
90
|
+
React.useEffect(() => {
|
|
91
|
+
if (!(refs.reference.current && refs.floating.current)) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
return (0, import_floating.autoUpdate)(refs.reference.current, refs.floating.current, floating.update);
|
|
95
|
+
}, [floating.update, refs.floating, refs.reference]);
|
|
96
|
+
} else {
|
|
97
|
+
const dimensions = (0, import_react_native.useWindowDimensions)();
|
|
98
|
+
const [keyboardOpen, setKeyboardOpen] = React.useState(false);
|
|
99
|
+
React.useEffect(() => {
|
|
100
|
+
const showSubscription = import_react_native.Keyboard.addListener("keyboardDidShow", () => {
|
|
101
|
+
setKeyboardOpen(true);
|
|
102
|
+
});
|
|
103
|
+
const hideSubscription = import_react_native.Keyboard.addListener("keyboardDidHide", () => {
|
|
104
|
+
setKeyboardOpen(false);
|
|
105
|
+
});
|
|
106
|
+
return () => {
|
|
107
|
+
showSubscription.remove();
|
|
108
|
+
hideSubscription.remove();
|
|
109
|
+
};
|
|
110
|
+
}, []);
|
|
111
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
112
|
+
floating.update();
|
|
113
|
+
}, [dimensions, keyboardOpen]);
|
|
114
|
+
}
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
+
PopperProvider,
|
|
117
|
+
{
|
|
118
|
+
scope: __scopePopper,
|
|
119
|
+
anchorRef,
|
|
120
|
+
size,
|
|
121
|
+
arrowRef: composedArrowRefs,
|
|
122
|
+
arrowStyle: middlewareData.arrow,
|
|
123
|
+
onArrowSize: setArrowSize,
|
|
124
|
+
isMounted,
|
|
125
|
+
...floating,
|
|
126
|
+
children
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
const ANCHOR_NAME = "PopperAnchor";
|
|
131
|
+
const PopperAnchor = import_stacks.YStack.extractable(
|
|
132
|
+
React.forwardRef(function PopperAnchor2(props, forwardedRef) {
|
|
133
|
+
const { __scopePopper, virtualRef, ...anchorProps } = props;
|
|
134
|
+
const { anchorRef, getReferenceProps } = usePopperContext(ANCHOR_NAME, __scopePopper);
|
|
135
|
+
const ref = React.useRef(null);
|
|
136
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref, anchorRef);
|
|
137
|
+
if (virtualRef) {
|
|
138
|
+
return null;
|
|
139
|
+
}
|
|
140
|
+
const stackProps = {
|
|
141
|
+
ref: composedRefs,
|
|
142
|
+
...anchorProps
|
|
143
|
+
};
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, { ...getReferenceProps ? getReferenceProps(stackProps) : stackProps });
|
|
145
|
+
})
|
|
146
|
+
);
|
|
147
|
+
const CONTENT_NAME = "PopperContent";
|
|
148
|
+
const PopperContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
149
|
+
name: "PopperContent",
|
|
150
|
+
variants: {
|
|
151
|
+
unstyled: {
|
|
152
|
+
false: {
|
|
153
|
+
size: "$true",
|
|
154
|
+
backgroundColor: "$background",
|
|
155
|
+
alignItems: "center",
|
|
156
|
+
radiused: true
|
|
157
|
+
}
|
|
158
|
+
},
|
|
159
|
+
size: {
|
|
160
|
+
"...size": (val, { tokens }) => {
|
|
161
|
+
return {
|
|
162
|
+
padding: tokens.space[val],
|
|
163
|
+
borderRadius: tokens.radius[val]
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
defaultVariants: {
|
|
169
|
+
unstyled: false
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
const PopperContent = React.forwardRef(
|
|
173
|
+
function PopperContent2(props, forwardedRef) {
|
|
174
|
+
const { __scopePopper, ...contentProps } = props;
|
|
175
|
+
const { strategy, placement, floating, x, y, getFloatingProps, size, isMounted } = usePopperContext(CONTENT_NAME, __scopePopper);
|
|
176
|
+
const contentRefs = (0, import_compose_refs.useComposedRefs)(floating, forwardedRef);
|
|
177
|
+
const contents = React.useMemo(() => {
|
|
178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
179
|
+
PopperContentFrame,
|
|
180
|
+
{
|
|
181
|
+
"data-placement": placement,
|
|
182
|
+
"data-strategy": strategy,
|
|
183
|
+
size: contentProps.size || size,
|
|
184
|
+
...contentProps
|
|
185
|
+
},
|
|
186
|
+
"popper-content-frame"
|
|
187
|
+
);
|
|
188
|
+
}, [placement, strategy, props]);
|
|
189
|
+
if (!isMounted) {
|
|
190
|
+
return null;
|
|
191
|
+
}
|
|
192
|
+
const frameProps = {
|
|
193
|
+
ref: contentRefs,
|
|
194
|
+
x: x || 0,
|
|
195
|
+
y: y || 0,
|
|
196
|
+
position: strategy
|
|
197
|
+
};
|
|
198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
199
|
+
import_stacks.YStack,
|
|
200
|
+
{
|
|
201
|
+
animateOnly: ["transform"],
|
|
202
|
+
...getFloatingProps ? getFloatingProps(frameProps) : frameProps,
|
|
203
|
+
children: contents
|
|
204
|
+
}
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
);
|
|
208
|
+
const ARROW_NAME = "PopperArrow";
|
|
209
|
+
const PopperArrowFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
210
|
+
name: "PopperArrow",
|
|
211
|
+
variants: {
|
|
212
|
+
unstyled: {
|
|
213
|
+
false: {
|
|
214
|
+
borderColor: "$borderColor",
|
|
215
|
+
backgroundColor: "$background",
|
|
216
|
+
position: "relative"
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
defaultVariants: {
|
|
221
|
+
unstyled: false
|
|
222
|
+
}
|
|
223
|
+
});
|
|
224
|
+
const PopperArrowOuterFrame = (0, import_core.styled)(import_stacks.YStack, {
|
|
225
|
+
name: "PopperArrowOuter",
|
|
226
|
+
variants: {
|
|
227
|
+
unstyled: {
|
|
228
|
+
false: {
|
|
229
|
+
position: "absolute",
|
|
230
|
+
zIndex: -1,
|
|
231
|
+
pointerEvents: "none",
|
|
232
|
+
overflow: "hidden",
|
|
233
|
+
alignItems: "center",
|
|
234
|
+
justifyContent: "center"
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
defaultVariants: {
|
|
239
|
+
unstyled: false
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
const opposites = {
|
|
243
|
+
top: "bottom",
|
|
244
|
+
right: "left",
|
|
245
|
+
bottom: "top",
|
|
246
|
+
left: "right"
|
|
247
|
+
};
|
|
248
|
+
const PopperArrow = PopperArrowFrame.extractable(
|
|
249
|
+
React.forwardRef(function PopperArrow2(props, forwardedRef) {
|
|
250
|
+
var _a, _b;
|
|
251
|
+
const {
|
|
252
|
+
__scopePopper,
|
|
253
|
+
offset: offset2,
|
|
254
|
+
size: sizeProp,
|
|
255
|
+
borderWidth = 0,
|
|
256
|
+
...arrowProps
|
|
257
|
+
} = props;
|
|
258
|
+
const context = usePopperContext(ARROW_NAME, __scopePopper);
|
|
259
|
+
const sizeVal = sizeProp ?? context.size;
|
|
260
|
+
const sizeValResolved = (0, import_core.getVariableValue)((0, import_get_size.stepTokenUpOrDown)("space", sizeVal, -2, [2]));
|
|
261
|
+
const size = +sizeValResolved;
|
|
262
|
+
const { placement } = context;
|
|
263
|
+
const refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef);
|
|
264
|
+
const x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0;
|
|
265
|
+
const y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0;
|
|
266
|
+
const primaryPlacement = placement ? placement.split("-")[0] : "top";
|
|
267
|
+
const arrowStyle = { x, y, width: size, height: size };
|
|
268
|
+
const innerArrowStyle = {};
|
|
269
|
+
const isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
|
|
270
|
+
if (primaryPlacement) {
|
|
271
|
+
arrowStyle[isVertical ? "width" : "height"] = size * 2;
|
|
272
|
+
const oppSide = opposites[primaryPlacement];
|
|
273
|
+
if (oppSide) {
|
|
274
|
+
arrowStyle[oppSide] = -size;
|
|
275
|
+
innerArrowStyle[oppSide] = size / 2;
|
|
276
|
+
}
|
|
277
|
+
if (oppSide === "top" || oppSide === "bottom") {
|
|
278
|
+
arrowStyle.left = 0;
|
|
279
|
+
}
|
|
280
|
+
if (oppSide === "left" || oppSide === "right") {
|
|
281
|
+
arrowStyle.top = 0;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
(0, import_core.useIsomorphicLayoutEffect)(() => {
|
|
285
|
+
var _a2;
|
|
286
|
+
(_a2 = context.onArrowSize) == null ? void 0 : _a2.call(context, size);
|
|
287
|
+
}, [size, context.onArrowSize]);
|
|
288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperArrowOuterFrame, { ref: refs, ...arrowStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
289
|
+
PopperArrowFrame,
|
|
290
|
+
{
|
|
291
|
+
width: size,
|
|
292
|
+
height: size,
|
|
293
|
+
...arrowProps,
|
|
294
|
+
...innerArrowStyle,
|
|
295
|
+
rotate: "45deg",
|
|
296
|
+
...primaryPlacement === "bottom" && {
|
|
297
|
+
borderBottomWidth: borderWidth,
|
|
298
|
+
borderRightWidth: borderWidth
|
|
299
|
+
},
|
|
300
|
+
...primaryPlacement === "top" && {
|
|
301
|
+
borderTopWidth: borderWidth,
|
|
302
|
+
borderLeftWidth: borderWidth
|
|
303
|
+
},
|
|
304
|
+
...primaryPlacement === "right" && {
|
|
305
|
+
borderTopWidth: borderWidth,
|
|
306
|
+
borderRightWidth: borderWidth
|
|
307
|
+
},
|
|
308
|
+
...primaryPlacement === "left" && {
|
|
309
|
+
borderBottomWidth: borderWidth,
|
|
310
|
+
borderLeftWidth: borderWidth
|
|
311
|
+
}
|
|
312
|
+
}
|
|
313
|
+
) });
|
|
314
|
+
})
|
|
315
|
+
);
|
|
316
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
317
|
+
0 && (module.exports = {
|
|
318
|
+
Popper,
|
|
319
|
+
PopperAnchor,
|
|
320
|
+
PopperArrow,
|
|
321
|
+
PopperContent,
|
|
322
|
+
PopperContentFrame,
|
|
323
|
+
PopperProvider,
|
|
324
|
+
createPopperScope,
|
|
325
|
+
usePopperContext
|
|
326
|
+
});
|
|
2
327
|
//# sourceMappingURL=Popper.js.map
|
package/dist/cjs/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": "
|
|
6
|
-
"names": ["
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiJI;AA/IJ,0BAAgC;AAChC,kBAOO;AACP,4BAA0C;AAC1C,sBAWO;AACP,sBAAkC;AAClC,oBAAuE;AACvE,YAAuB;AACvB,0BAAoD;AASpD,MAAM,cAAc;AAGpB,MAAM,CAAC,qBAAqB,WAAW,QAAI,0CAAmB,WAAW;AAElE,MAAM,oBAAoB;AAa1B,MAAM,CAAC,gBAAgB,gBAAgB,IAC5C,oBAAwC,WAAW;AAW9C,SAAS,OAAO,OAAiC;AACtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,KAAK;AACtD,6CAA0B,MAAM;AAC9B,iBAAa,IAAI;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,MAAM,OAAY;AACpC,QAAM,CAAC,SAAS,QAAQ,IAAI,MAAM,SAAc,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,WAAW,MAAM,OAAO;AAE9B,QAAM,eAAW,6BAAY;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA;AAAA,IAChB,YAAY;AAAA,MACV,kBACI,uBAAM,OAAO,gBAAgB,YAAY,CAAC,IAAI,WAAW,IACxD;AAAA,MACL,gBAAY,sBAAK,OAAO,cAAc,YAAY,CAAC,IAAI,SAAS,IAAK;AAAA,MACrE,cAAU,uBAAM,EAAE,SAAS,QAAQ,CAAC,IAAK;AAAA,MACzC,gBAAY,wBAAO,SAAS,IAAK;AAAA,IACnC,EAAE,OAAO,OAAO;AAAA,EAClB,CAAC;AAED,QAAM,EAAE,MAAM,eAAe,IAAI;AAEjC,QAAM,wBAAoB,qCAAqB,UAAU,QAAQ;AAEjE,6CAA0B,MAAM;AAC9B,aAAS,UAAU,UAAU,OAAO;AAAA,EACtC,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,mBAAO;AACT,UAAM,UAAU,MAAM;AACpB,UAAI,EAAE,KAAK,UAAU,WAAW,KAAK,SAAS,UAAU;AACtD;AAAA,MACF;AAEA,iBAAO,4BAAW,KAAK,UAAU,SAAS,KAAK,SAAS,SAAS,SAAS,MAAM;AAAA,IAClF,GAAG,CAAC,SAAS,QAAQ,KAAK,UAAU,KAAK,SAAS,CAAC;AAAA,EACrD,OAAO;AAIL,UAAM,iBAAa,yCAAoB;AAGvC,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAC5D,UAAM,UAAU,MAAM;AACpB,YAAM,mBAAmB,6BAAS,YAAY,mBAAmB,MAAM;AACrE,wBAAgB,IAAI;AAAA,MACtB,CAAC;AACD,YAAM,mBAAmB,6BAAS,YAAY,mBAAmB,MAAM;AACrE,wBAAgB,KAAK;AAAA,MACvB,CAAC;AAED,aAAO,MAAM;AACX,yBAAiB,OAAO;AACxB,yBAAiB,OAAO;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,CAAC;AAEL,+CAA0B,MAAM;AAC9B,eAAS,OAAO;AAAA,IAClB,GAAG,CAAC,YAAY,YAAY,CAAC;AAAA,EAC/B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,YAAY,eAAe;AAAA,MAC3B,aAAa;AAAA,MACb;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAMA,MAAM,cAAc;AAQb,MAAM,eAAe,qBAAO;AAAA,EACjC,MAAM,WAA+C,SAASA,cAC5D,OACA,cACA;AACA,UAAM,EAAE,eAAe,YAAY,GAAG,YAAY,IAAI;AACtD,UAAM,EAAE,WAAW,kBAAkB,IAAI,iBAAiB,aAAa,aAAa;AACpF,UAAM,MAAM,MAAM,OAAwB,IAAI;AAC9C,UAAM,mBAAe,qCAAgB,cAAc,KAAK,SAAS;AACjE,QAAI,YAAY;AACd,aAAO;AAAA,IACT;AACA,UAAM,aAAa;AAAA,MACjB,KAAK;AAAA,MACL,GAAG;AAAA,IACL;AACA,WACE,4CAAC,wBAAQ,GAAI,oBAAoB,kBAAkB,UAAU,IAAI,YAAa;AAAA,EAElF,CAAC;AACH;AAMA,MAAM,eAAe;AAMd,MAAM,yBAAqB,oBAAO,8BAAgB;AAAA,EACvD,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,eAAO;AAAA,UACL,SAAS,OAAO,MAAM,GAAG;AAAA,UACzB,cAAc,OAAO,OAAO,GAAG;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAEM,MAAM,gBAAgB,MAAM;AAAA,EACjC,SAASC,eAAc,OAAwC,cAAc;AAC3E,UAAM,EAAE,eAAe,GAAG,aAAa,IAAI;AAC3C,UAAM,EAAE,UAAU,WAAW,UAAU,GAAG,GAAG,kBAAkB,MAAM,UAAU,IAC7E,iBAAiB,cAAc,aAAa;AAC9C,UAAM,kBAAc,qCAAqB,UAAU,YAAY;AAE/D,UAAM,WAAW,MAAM,QAAQ,MAAM;AACnC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,kBAAgB;AAAA,UAChB,iBAAe;AAAA,UACf,MAAM,aAAa,QAAQ;AAAA,UAC1B,GAAG;AAAA;AAAA,QAJA;AAAA,MAKN;AAAA,IAEJ,GAAG,CAAC,WAAW,UAAU,KAAK,CAAC;AAG/B,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AAEA,UAAM,aAAa;AAAA,MACjB,KAAK;AAAA,MACL,GAAG,KAAK;AAAA,MACR,GAAG,KAAK;AAAA,MACR,UAAU;AAAA,IACZ;AAGA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,CAAC,WAAW;AAAA,QACxB,GAAI,mBAAmB,iBAAiB,UAAU,IAAI;AAAA,QAEtD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAMA,MAAM,aAAa;AASnB,MAAM,uBAAmB,oBAAO,sBAAQ;AAAA,EACtC,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,aAAa;AAAA,QACb,iBAAiB;AAAA,QACjB,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAED,MAAM,4BAAwB,oBAAO,sBAAQ;AAAA,EAC3C,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAED,MAAM,YAAY;AAAA,EAChB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AAIO,MAAM,cAAc,iBAAiB;AAAA,EAC1C,MAAM,WAAiD,SAASC,aAC9D,OACA,cACA;AApVJ;AAqVI,UAAM;AAAA,MACJ;AAAA,MACA,QAAAC;AAAA,MACA,MAAM;AAAA,MACN,cAAc;AAAA,MACd,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,UAAU,iBAAiB,YAAY,aAAa;AAC1D,UAAM,UAAU,YAAY,QAAQ;AACpC,UAAM,sBAAkB,kCAAiB,mCAAkB,SAAS,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC;AACrF,UAAM,OAAO,CAAC;AACd,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,WAAO,qCAAgB,QAAQ,UAAU,YAAY;AAI3D,UAAM,MAAK,aAAQ,eAAR,mBAAoB,MAAgB;AAC/C,UAAM,MAAK,aAAQ,eAAR,mBAAoB,MAAgB;AAE/C,UAAM,mBAAoB,YAAY,UAAU,MAAM,GAAG,EAAE,CAAC,IAAI;AAEhE,UAAM,aAAyB,EAAE,GAAG,GAAG,OAAO,MAAM,QAAQ,KAAK;AACjE,UAAM,kBAA8B,CAAC;AACrC,UAAM,aAAa,qBAAqB,YAAY,qBAAqB;AAEzE,QAAI,kBAAkB;AAEpB,iBAAW,aAAa,UAAU,QAAQ,IAAI,OAAO;AACrD,YAAM,UAAU,UAAU,gBAAgB;AAC1C,UAAI,SAAS;AACX,mBAAW,OAAO,IAAI,CAAC;AACvB,wBAAgB,OAAO,IAAI,OAAO;AAAA,MACpC;AACA,UAAI,YAAY,SAAS,YAAY,UAAU;AAC7C,mBAAW,OAAO;AAAA,MACpB;AACA,UAAI,YAAY,UAAU,YAAY,SAAS;AAC7C,mBAAW,MAAM;AAAA,MACnB;AAAA,IACF;AAGA,+CAA0B,MAAM;AA/XpC,UAAAC;AAgYM,OAAAA,MAAA,QAAQ,gBAAR,gBAAAA,IAAA,cAAsB;AAAA,IACxB,GAAG,CAAC,MAAM,QAAQ,WAAW,CAAC;AAG9B,WACE,4CAAC,yBAAsB,KAAK,MAAO,GAAG,YACpC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,QAAO;AAAA,QACN,GAAI,qBAAqB,YAAY;AAAA,UACpC,mBAAmB;AAAA,UACnB,kBAAkB;AAAA,QACpB;AAAA,QACC,GAAI,qBAAqB,SAAS;AAAA,UACjC,gBAAgB;AAAA,UAChB,iBAAiB;AAAA,QACnB;AAAA,QACC,GAAI,qBAAqB,WAAW;AAAA,UACnC,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,QACpB;AAAA,QACC,GAAI,qBAAqB,UAAU;AAAA,UAClC,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,QACnB;AAAA;AAAA,IACF,GACF;AAAA,EAEJ,CAAC;AACH;",
|
|
6
|
+
"names": ["PopperAnchor", "PopperContent", "PopperArrow", "offset", "_a"]
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,19 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
15
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
16
|
+
var src_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(src_exports);
|
|
18
|
+
__reExport(src_exports, require("./Popper"), module.exports);
|
|
2
19
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx"],
|
|
4
4
|
"sourcesContent": ["export * from './Popper'\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": [
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,qBAAd;",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|