@tamagui/popover 2.7.7 → 3.0.0-beta.643.1
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/Popover.cjs +509 -664
- package/dist/cjs/Popover.native.cjs +603 -0
- package/dist/cjs/Popover.native.js +536 -691
- package/dist/cjs/Popover.native.js.map +1 -1
- package/dist/cjs/index.cjs +10 -11
- package/dist/cjs/index.native.cjs +22 -0
- package/dist/cjs/index.native.js +10 -10
- package/dist/cjs/index.native.js.map +1 -1
- package/dist/cjs/useFloatingContext.cjs +202 -234
- package/dist/cjs/useFloatingContext.native.cjs +36 -0
- package/dist/cjs/useFloatingContext.native.js +20 -27
- package/dist/cjs/useFloatingContext.native.js.map +1 -1
- package/dist/esm/Popover.mjs +473 -617
- package/dist/esm/Popover.mjs.map +1 -1
- package/dist/esm/Popover.native.js +499 -644
- package/dist/esm/Popover.native.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.mjs +3 -3
- package/dist/esm/index.native.js +3 -3
- package/dist/esm/useFloatingContext.mjs +186 -208
- package/dist/esm/useFloatingContext.mjs.map +1 -1
- package/dist/esm/useFloatingContext.native.js +4 -2
- package/dist/esm/useFloatingContext.native.js.map +1 -1
- package/dist/jsx/Popover.mjs +473 -617
- package/dist/jsx/Popover.mjs.map +1 -1
- package/dist/jsx/Popover.native.cjs +603 -0
- package/dist/jsx/Popover.native.js +536 -691
- package/dist/jsx/Popover.native.js.map +1 -1
- package/dist/jsx/index.js +3 -3
- package/dist/jsx/index.mjs +3 -3
- package/dist/jsx/index.native.cjs +22 -0
- package/dist/jsx/index.native.js +10 -10
- package/dist/jsx/index.native.js.map +1 -1
- package/dist/jsx/useFloatingContext.mjs +186 -208
- package/dist/jsx/useFloatingContext.mjs.map +1 -1
- package/dist/jsx/useFloatingContext.native.cjs +36 -0
- package/dist/jsx/useFloatingContext.native.js +20 -27
- package/dist/jsx/useFloatingContext.native.js.map +1 -1
- package/package.json +22 -22
- package/src/Popover.tsx +115 -147
- package/types/Popover.d.ts +33 -109
- package/types/Popover.d.ts.map +1 -1
- package/types/useFloatingContext.d.ts.map +1 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/esm/index.native.js.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
|
@@ -0,0 +1,603 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all) __defProp(target, name, {
|
|
12
|
+
get: all[name],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
19
|
+
get: () => from[key],
|
|
20
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
return to;
|
|
24
|
+
};
|
|
25
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
26
|
+
value: mod,
|
|
27
|
+
enumerable: true
|
|
28
|
+
}) : target, mod));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var Popover_exports = {};
|
|
31
|
+
__export(Popover_exports, {
|
|
32
|
+
Popover: () => Popover,
|
|
33
|
+
PopoverAnchor: () => PopoverAnchor,
|
|
34
|
+
PopoverArrow: () => PopoverArrow,
|
|
35
|
+
PopoverClose: () => PopoverClose,
|
|
36
|
+
PopoverContent: () => PopoverContent,
|
|
37
|
+
PopoverContext: () => PopoverContext,
|
|
38
|
+
PopoverContextProvider: () => PopoverContextProvider,
|
|
39
|
+
PopoverTrigger: () => PopoverTrigger,
|
|
40
|
+
PopoverTriggerContext: () => PopoverTriggerContext,
|
|
41
|
+
PopoverZIndexContext: () => PopoverZIndexContext,
|
|
42
|
+
closeLastOpenedPopover: () => closeLastOpenedPopover,
|
|
43
|
+
closeOpenPopovers: () => closeOpenPopovers,
|
|
44
|
+
hasOpenPopovers: () => hasOpenPopovers,
|
|
45
|
+
usePopoverContext: () => usePopoverContext,
|
|
46
|
+
usePopoverOpen: () => usePopoverOpen,
|
|
47
|
+
usePopoverTriggerContext: () => usePopoverTriggerContext,
|
|
48
|
+
usePopoverTriggerSetup: () => usePopoverTriggerSetup
|
|
49
|
+
});
|
|
50
|
+
module.exports = __toCommonJS(Popover_exports);
|
|
51
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
52
|
+
require("@tamagui/polyfill-dev");
|
|
53
|
+
var import_adapt = require("@tamagui/adapt");
|
|
54
|
+
var import_animate = require("@tamagui/animate");
|
|
55
|
+
var import_animate_presence = require("@tamagui/animate-presence");
|
|
56
|
+
var import_compose_refs = require("@tamagui/compose-refs");
|
|
57
|
+
var import_constants = require("@tamagui/constants");
|
|
58
|
+
var import_core = require("@tamagui/core");
|
|
59
|
+
var import_dismissable = require("@tamagui/dismissable");
|
|
60
|
+
var import_floating = require("@tamagui/floating");
|
|
61
|
+
var import_focus_scope = require("@tamagui/focus-scope");
|
|
62
|
+
var import_helpers = require("@tamagui/helpers");
|
|
63
|
+
var import_popper = require("@tamagui/popper");
|
|
64
|
+
var import_portal = require("@tamagui/portal");
|
|
65
|
+
require("@tamagui/remove-scroll");
|
|
66
|
+
var import_scroll_view = require("@tamagui/scroll-view");
|
|
67
|
+
var import_stacks = require("@tamagui/stacks");
|
|
68
|
+
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
69
|
+
var React = __toESM(require("react"), 1);
|
|
70
|
+
var import_useFloatingContext = require("./useFloatingContext.native.js");
|
|
71
|
+
var needsRepropagation = (0, import_portal.needsPortalRepropagation)();
|
|
72
|
+
var openPopovers = /* @__PURE__ */ new Set();
|
|
73
|
+
var hasOpenPopovers = function() {
|
|
74
|
+
return openPopovers.size > 0;
|
|
75
|
+
};
|
|
76
|
+
var closeOpenPopovers = function() {
|
|
77
|
+
if (openPopovers.size === 0) return false;
|
|
78
|
+
openPopovers.forEach(function(setOpen) {
|
|
79
|
+
return setOpen(false);
|
|
80
|
+
});
|
|
81
|
+
return true;
|
|
82
|
+
};
|
|
83
|
+
var closeLastOpenedPopover = function() {
|
|
84
|
+
if (openPopovers.size === 0) return false;
|
|
85
|
+
var last = Array.from(openPopovers).pop();
|
|
86
|
+
if (last) {
|
|
87
|
+
last(false);
|
|
88
|
+
return true;
|
|
89
|
+
}
|
|
90
|
+
return false;
|
|
91
|
+
};
|
|
92
|
+
var PopoverContext = (0, import_core.createStyledContext)({}, "Popover__");
|
|
93
|
+
var PopoverZIndexContext = /* @__PURE__ */ React.createContext(void 0);
|
|
94
|
+
var PopoverTriggerContext = (0, import_core.createStyledContext)({}, "PopoverTrigger__");
|
|
95
|
+
var usePopoverContext = PopoverContext.useStyledContext;
|
|
96
|
+
var usePopoverTriggerContext = PopoverTriggerContext.useStyledContext;
|
|
97
|
+
function usePopoverOpen(scope) {
|
|
98
|
+
return usePopoverContext(scope).open;
|
|
99
|
+
}
|
|
100
|
+
function usePopoverTriggerSetup(open) {
|
|
101
|
+
var triggerStateSettersRef = React.useRef(/* @__PURE__ */ new Map());
|
|
102
|
+
var activeTriggerIdRef = React.useRef(null);
|
|
103
|
+
var setActiveTrigger = (0, import_core.useEvent)(function(id) {
|
|
104
|
+
var prevId = activeTriggerIdRef.current;
|
|
105
|
+
if (prevId === id) return;
|
|
106
|
+
if (prevId) {
|
|
107
|
+
var _triggerStateSettersRef_current_get;
|
|
108
|
+
(_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(prevId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(false);
|
|
109
|
+
}
|
|
110
|
+
activeTriggerIdRef.current = id;
|
|
111
|
+
if (id && open) {
|
|
112
|
+
var _triggerStateSettersRef_current_get1;
|
|
113
|
+
(_triggerStateSettersRef_current_get1 = triggerStateSettersRef.current.get(id)) === null || _triggerStateSettersRef_current_get1 === void 0 || _triggerStateSettersRef_current_get1(true);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
var registerTrigger = (0, import_core.useEvent)(function(id, setOpenState) {
|
|
117
|
+
triggerStateSettersRef.current.set(id, setOpenState);
|
|
118
|
+
setOpenState(activeTriggerIdRef.current === id && open);
|
|
119
|
+
});
|
|
120
|
+
var unregisterTrigger = (0, import_core.useEvent)(function(id) {
|
|
121
|
+
triggerStateSettersRef.current.delete(id);
|
|
122
|
+
if (activeTriggerIdRef.current === id) activeTriggerIdRef.current = null;
|
|
123
|
+
});
|
|
124
|
+
React.useEffect(function() {
|
|
125
|
+
if (!open) {
|
|
126
|
+
setActiveTrigger(null);
|
|
127
|
+
return;
|
|
128
|
+
}
|
|
129
|
+
var activeId = activeTriggerIdRef.current;
|
|
130
|
+
if (activeId) {
|
|
131
|
+
var _triggerStateSettersRef_current_get;
|
|
132
|
+
(_triggerStateSettersRef_current_get = triggerStateSettersRef.current.get(activeId)) === null || _triggerStateSettersRef_current_get === void 0 || _triggerStateSettersRef_current_get(true);
|
|
133
|
+
}
|
|
134
|
+
}, [open, setActiveTrigger]);
|
|
135
|
+
return {
|
|
136
|
+
setActiveTrigger,
|
|
137
|
+
registerTrigger,
|
|
138
|
+
unregisterTrigger
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
var PopoverContextProvider = /* @__PURE__ */ React.memo(function(param) {
|
|
142
|
+
var { scope, children, open, onOpenChange, onOpenToggle, triggerRef, id = "", contentId, hasCustomAnchor = false, onCustomAnchorAdd = voidFn, onCustomAnchorRemove = voidFn, anchorTo, adaptScope, breakpointActive, keepChildrenMounted, disableDismissable, hoverable } = param;
|
|
143
|
+
var [branches] = React.useState(function() {
|
|
144
|
+
return /* @__PURE__ */ new Set();
|
|
145
|
+
});
|
|
146
|
+
var { setActiveTrigger, registerTrigger, unregisterTrigger } = usePopoverTriggerSetup(open);
|
|
147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
|
|
148
|
+
scope,
|
|
149
|
+
popoverScope: scope,
|
|
150
|
+
adaptScope,
|
|
151
|
+
id,
|
|
152
|
+
contentId,
|
|
153
|
+
triggerRef,
|
|
154
|
+
open,
|
|
155
|
+
onOpenChange,
|
|
156
|
+
onOpenToggle,
|
|
157
|
+
hasCustomAnchor,
|
|
158
|
+
onCustomAnchorAdd,
|
|
159
|
+
onCustomAnchorRemove,
|
|
160
|
+
anchorTo,
|
|
161
|
+
branches,
|
|
162
|
+
breakpointActive,
|
|
163
|
+
keepChildrenMounted,
|
|
164
|
+
disableDismissable,
|
|
165
|
+
hoverable,
|
|
166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverTriggerContext.Provider, {
|
|
167
|
+
scope,
|
|
168
|
+
triggerRef,
|
|
169
|
+
hasCustomAnchor,
|
|
170
|
+
anchorTo,
|
|
171
|
+
branches,
|
|
172
|
+
onOpenToggle,
|
|
173
|
+
setActiveTrigger,
|
|
174
|
+
registerTrigger,
|
|
175
|
+
unregisterTrigger,
|
|
176
|
+
children
|
|
177
|
+
})
|
|
178
|
+
});
|
|
179
|
+
});
|
|
180
|
+
var voidFn = function() {};
|
|
181
|
+
var PopoverAnchor = /* @__PURE__ */ React.memo((0, import_core.createRefComponent)(function PopoverAnchor2(props, forwardedRef) {
|
|
182
|
+
var { scope, ...rest } = props;
|
|
183
|
+
var { onCustomAnchorAdd, onCustomAnchorRemove } = usePopoverContext(scope) || {};
|
|
184
|
+
React.useEffect(function() {
|
|
185
|
+
onCustomAnchorAdd();
|
|
186
|
+
return function() {
|
|
187
|
+
return onCustomAnchorRemove();
|
|
188
|
+
};
|
|
189
|
+
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
|
|
190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
|
|
191
|
+
scope,
|
|
192
|
+
...rest,
|
|
193
|
+
ref: forwardedRef
|
|
194
|
+
});
|
|
195
|
+
}));
|
|
196
|
+
var PopoverTrigger = /* @__PURE__ */ React.memo((0, import_core.createRefComponent)(function PopoverTrigger2(props, forwardedRef) {
|
|
197
|
+
var { scope, disablePressTrigger, ...rest } = props;
|
|
198
|
+
var triggerContext = usePopoverTriggerContext(scope);
|
|
199
|
+
var triggerId = React.useId();
|
|
200
|
+
var [open, setOpen] = React.useState(false);
|
|
201
|
+
var anchorTo = triggerContext.anchorTo;
|
|
202
|
+
var triggerElRef = React.useRef(null);
|
|
203
|
+
var composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, triggerElRef);
|
|
204
|
+
var { registerTrigger, unregisterTrigger } = triggerContext;
|
|
205
|
+
React.useEffect(function() {
|
|
206
|
+
registerTrigger(triggerId, setOpen);
|
|
207
|
+
return function() {
|
|
208
|
+
unregisterTrigger(triggerId);
|
|
209
|
+
};
|
|
210
|
+
}, [
|
|
211
|
+
registerTrigger,
|
|
212
|
+
unregisterTrigger,
|
|
213
|
+
triggerId
|
|
214
|
+
]);
|
|
215
|
+
if (!rest.children) return null;
|
|
216
|
+
var activateSelf = function() {
|
|
217
|
+
triggerContext.setActiveTrigger(triggerId);
|
|
218
|
+
var el = triggerElRef.current;
|
|
219
|
+
if (el) triggerContext.triggerRef.current = el;
|
|
220
|
+
};
|
|
221
|
+
var trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
|
|
222
|
+
"aria-expanded": open,
|
|
223
|
+
"data-state": getState(open),
|
|
224
|
+
...rest,
|
|
225
|
+
ref: composedTriggerRef,
|
|
226
|
+
onPress: (0, import_helpers.composeEventHandlers)(rest.onPress, function() {
|
|
227
|
+
if (disablePressTrigger) return;
|
|
228
|
+
triggerContext.setActiveTrigger(open ? null : triggerId);
|
|
229
|
+
triggerContext.onOpenToggle();
|
|
230
|
+
}),
|
|
231
|
+
onMouseEnter: (0, import_helpers.composeEventHandlers)(rest.onMouseEnter, activateSelf),
|
|
232
|
+
onPressIn: (0, import_helpers.composeEventHandlers)(rest.onPressIn, activateSelf),
|
|
233
|
+
onFocus: (0, import_helpers.composeEventHandlers)(rest.onFocus, activateSelf)
|
|
234
|
+
});
|
|
235
|
+
var virtualRef = React.useMemo(function() {
|
|
236
|
+
if (!anchorTo) return null;
|
|
237
|
+
return { current: {
|
|
238
|
+
getBoundingClientRect: function() {
|
|
239
|
+
return import_constants.isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
|
|
240
|
+
},
|
|
241
|
+
...!import_constants.isWeb && {
|
|
242
|
+
measure: function(c) {
|
|
243
|
+
return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
|
|
244
|
+
},
|
|
245
|
+
measureInWindow: function(c) {
|
|
246
|
+
return c(anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width, anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
} };
|
|
250
|
+
}, [
|
|
251
|
+
triggerContext.anchorTo,
|
|
252
|
+
anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.x,
|
|
253
|
+
anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.y,
|
|
254
|
+
anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.height,
|
|
255
|
+
anchorTo === null || anchorTo === void 0 ? void 0 : anchorTo.width
|
|
256
|
+
]);
|
|
257
|
+
var wrappedTrigger = import_constants.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.DismissableBranch, {
|
|
258
|
+
branches: triggerContext.branches,
|
|
259
|
+
children: trigger
|
|
260
|
+
}) : trigger;
|
|
261
|
+
return triggerContext.hasCustomAnchor ? wrappedTrigger : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
|
|
262
|
+
...virtualRef && { virtualRef },
|
|
263
|
+
scope,
|
|
264
|
+
asChild: true,
|
|
265
|
+
children: wrappedTrigger
|
|
266
|
+
});
|
|
267
|
+
}));
|
|
268
|
+
var PopoverContent = (0, import_core.createStyledHOC)(import_popper.PopperContentFrame, function PopoverContent2(props, forwardedRef) {
|
|
269
|
+
var { trapFocus, enableRemoveScroll = false, zIndex: zIndexProp, scope, forceMount, ...contentImplProps } = props;
|
|
270
|
+
var context = usePopoverContext(scope);
|
|
271
|
+
var adaptContext = (0, import_adapt.useAdaptContext)(context.adaptScope);
|
|
272
|
+
var zIndexFromContext = React.useContext(PopoverZIndexContext);
|
|
273
|
+
var zIndex = zIndexProp !== null && zIndexProp !== void 0 ? zIndexProp : zIndexFromContext;
|
|
274
|
+
var open = usePopoverOpen(scope);
|
|
275
|
+
var contentRef = React.useRef(null);
|
|
276
|
+
var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
277
|
+
var isRightClickOutsideRef = React.useRef(false);
|
|
278
|
+
var [isFullyHidden, setIsFullyHidden] = React.useState(!open);
|
|
279
|
+
(0, import_constants.useIsomorphicLayoutEffect)(function() {
|
|
280
|
+
if (open && isFullyHidden) setIsFullyHidden(false);
|
|
281
|
+
}, [open, isFullyHidden]);
|
|
282
|
+
if (!forceMount && !context.keepChildrenMounted) {
|
|
283
|
+
if (context.breakpointActive) {
|
|
284
|
+
if (!open && adaptContext.targetFullyHidden) return null;
|
|
285
|
+
} else if (isFullyHidden && !open) return null;
|
|
286
|
+
}
|
|
287
|
+
var _contentImplProps_pointerEvents;
|
|
288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPortal, {
|
|
289
|
+
passThrough: context.breakpointActive,
|
|
290
|
+
context,
|
|
291
|
+
open,
|
|
292
|
+
visuallyActive: open || !isFullyHidden,
|
|
293
|
+
zIndex,
|
|
294
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.View, {
|
|
295
|
+
passThrough: context.breakpointActive,
|
|
296
|
+
pointerEvents: open ? (_contentImplProps_pointerEvents = contentImplProps.pointerEvents) !== null && _contentImplProps_pointerEvents !== void 0 ? _contentImplProps_pointerEvents : "auto" : "none",
|
|
297
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContentImpl, {
|
|
298
|
+
...contentImplProps,
|
|
299
|
+
context,
|
|
300
|
+
open,
|
|
301
|
+
forceMount,
|
|
302
|
+
enableRemoveScroll,
|
|
303
|
+
ref: composedRefs,
|
|
304
|
+
setIsFullyHidden,
|
|
305
|
+
scope,
|
|
306
|
+
trapFocus: trapFocus !== null && trapFocus !== void 0 ? trapFocus : open,
|
|
307
|
+
disableOutsidePointerEvents: true,
|
|
308
|
+
onCloseAutoFocus: props.onCloseAutoFocus === false ? void 0 : (0, import_helpers.composeEventHandlers)(props.onCloseAutoFocus, function(event) {
|
|
309
|
+
var _context_triggerRef_current;
|
|
310
|
+
if (event.isCanceled) return;
|
|
311
|
+
event.cancel();
|
|
312
|
+
if (!isRightClickOutsideRef.current) (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
|
|
313
|
+
}),
|
|
314
|
+
onPointerDownOutside: (0, import_helpers.composeEventHandlers)(props.onPointerDownOutside, function(event) {
|
|
315
|
+
var originalEvent = event.event;
|
|
316
|
+
if (!originalEvent) return;
|
|
317
|
+
var ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
318
|
+
isRightClickOutsideRef.current = originalEvent.button === 2 || ctrlLeftClick;
|
|
319
|
+
}, { checkDefaultPrevented: false }),
|
|
320
|
+
onFocusOutside: (0, import_helpers.composeEventHandlers)(props.onFocusOutside, function(event) {
|
|
321
|
+
if (trapFocus !== null && trapFocus !== void 0 ? trapFocus : open) event.cancel();
|
|
322
|
+
}, { checkDefaultPrevented: false })
|
|
323
|
+
})
|
|
324
|
+
})
|
|
325
|
+
});
|
|
326
|
+
});
|
|
327
|
+
var useParentContexts = function(scope) {
|
|
328
|
+
var context = usePopoverContext(scope);
|
|
329
|
+
var triggerContext = usePopoverTriggerContext(scope);
|
|
330
|
+
return {
|
|
331
|
+
popperContext: (0, import_popper.usePopperContext)(scope),
|
|
332
|
+
adaptContext: (0, import_adapt.useAdaptContext)(context.adaptScope),
|
|
333
|
+
context,
|
|
334
|
+
triggerContext
|
|
335
|
+
};
|
|
336
|
+
};
|
|
337
|
+
function RepropagateParentContexts(param) {
|
|
338
|
+
var { adaptContext, children, context, triggerContext, popperContext } = param;
|
|
339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperProvider, {
|
|
340
|
+
scope: context.popoverScope,
|
|
341
|
+
...popperContext,
|
|
342
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContext.Provider, {
|
|
343
|
+
scope: context.popoverScope,
|
|
344
|
+
...context,
|
|
345
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverTriggerContext.Provider, {
|
|
346
|
+
scope: context.popoverScope,
|
|
347
|
+
...triggerContext,
|
|
348
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.ProvideAdaptContext, {
|
|
349
|
+
...adaptContext,
|
|
350
|
+
children
|
|
351
|
+
})
|
|
352
|
+
})
|
|
353
|
+
})
|
|
354
|
+
});
|
|
355
|
+
}
|
|
356
|
+
var PortalAdaptSafe = function(param) {
|
|
357
|
+
"use no memo";
|
|
358
|
+
var { children, context } = param;
|
|
359
|
+
if (needsRepropagation) {
|
|
360
|
+
var parentContexts = useParentContexts(context.popoverScope);
|
|
361
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
|
|
362
|
+
scope: context.adaptScope,
|
|
363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RepropagateParentContexts, {
|
|
364
|
+
...parentContexts,
|
|
365
|
+
children
|
|
366
|
+
})
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptPortalContents, {
|
|
370
|
+
scope: context.adaptScope,
|
|
371
|
+
children
|
|
372
|
+
});
|
|
373
|
+
};
|
|
374
|
+
function PopoverPortal(param) {
|
|
375
|
+
"use no memo";
|
|
376
|
+
var { context, open, visuallyActive, zIndex, passThrough, children, onPress } = param;
|
|
377
|
+
var content = children;
|
|
378
|
+
if (needsRepropagation) {
|
|
379
|
+
var parentContexts = useParentContexts(context.popoverScope);
|
|
380
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RepropagateParentContexts, {
|
|
381
|
+
...parentContexts,
|
|
382
|
+
children: content
|
|
383
|
+
});
|
|
384
|
+
}
|
|
385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_portal.Portal, {
|
|
386
|
+
passThrough,
|
|
387
|
+
stackZIndex: true,
|
|
388
|
+
zIndex,
|
|
389
|
+
hidden: !visuallyActive,
|
|
390
|
+
children: [!!open && !context.breakpointActive && !context.hoverable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
391
|
+
position: "absolute",
|
|
392
|
+
inset: 0,
|
|
393
|
+
onPress: (0, import_helpers.composeEventHandlers)(onPress, context.onOpenToggle)
|
|
394
|
+
}), content]
|
|
395
|
+
});
|
|
396
|
+
}
|
|
397
|
+
var PopoverContentImpl = (0, import_core.createRefComponent)(function PopoverContentImpl2(props, forwardedRef) {
|
|
398
|
+
var { trapFocus, scope, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, enableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, lazyMount, forceUnmount, forceMount, context, open, alwaysDisable, ...contentProps } = props;
|
|
399
|
+
var { disableDismissable } = context;
|
|
400
|
+
var keepChildrenMounted = context.keepChildrenMounted || forceMount;
|
|
401
|
+
var handleExitComplete = React.useCallback(function() {
|
|
402
|
+
setIsFullyHidden === null || setIsFullyHidden === void 0 || setIsFullyHidden(true);
|
|
403
|
+
}, [setIsFullyHidden]);
|
|
404
|
+
var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.ResetPresence, {
|
|
405
|
+
disable: context.breakpointActive,
|
|
406
|
+
children
|
|
407
|
+
});
|
|
408
|
+
React.useCallback(function() {
|
|
409
|
+
context.onOpenChange(false, "press");
|
|
410
|
+
}, [context]);
|
|
411
|
+
if (!context.breakpointActive) {}
|
|
412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate.Animate, {
|
|
413
|
+
type: "presence",
|
|
414
|
+
present: Boolean(open),
|
|
415
|
+
keepChildrenMounted: Boolean(keepChildrenMounted),
|
|
416
|
+
onExitComplete: handleExitComplete,
|
|
417
|
+
lazyMount,
|
|
418
|
+
passThrough: context.breakpointActive,
|
|
419
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperContent, {
|
|
420
|
+
scope,
|
|
421
|
+
"data-state": getState(open),
|
|
422
|
+
id: context.contentId,
|
|
423
|
+
ref: forwardedRef,
|
|
424
|
+
passThrough: context.breakpointActive,
|
|
425
|
+
...contentProps,
|
|
426
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalAdaptSafe, {
|
|
427
|
+
context,
|
|
428
|
+
children: contents
|
|
429
|
+
})
|
|
430
|
+
}, context.contentId)
|
|
431
|
+
});
|
|
432
|
+
});
|
|
433
|
+
var PopoverClose = (0, import_core.createRefComponent)(function PopoverClose2(props, forwardedRef) {
|
|
434
|
+
var { scope, className, ...rest } = props;
|
|
435
|
+
var context = usePopoverContext(scope);
|
|
436
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
437
|
+
...rest,
|
|
438
|
+
ref: forwardedRef,
|
|
439
|
+
className: `is_PopoverClose ${className || ""}`.trim(),
|
|
440
|
+
onPress: (0, import_helpers.composeEventHandlers)(props.onPress, function() {
|
|
441
|
+
var _context_onOpenChange;
|
|
442
|
+
return context === null || context === void 0 ? void 0 : (_context_onOpenChange = context.onOpenChange) === null || _context_onOpenChange === void 0 ? void 0 : _context_onOpenChange.call(context, false, "press");
|
|
443
|
+
})
|
|
444
|
+
});
|
|
445
|
+
});
|
|
446
|
+
var PopoverArrow = (0, import_core.createStyledHOC)(import_popper.PopperArrowFrame, function PopoverArrow2(props, forwardedRef) {
|
|
447
|
+
var { scope, className, ...rest } = props;
|
|
448
|
+
var context = usePopoverContext(scope);
|
|
449
|
+
if ((0, import_adapt.useAdaptIsActive)(context.adaptScope)) return null;
|
|
450
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
|
|
451
|
+
scope,
|
|
452
|
+
className: `is_PopoverArrow ${className || ""}`.trim(),
|
|
453
|
+
...rest,
|
|
454
|
+
ref: forwardedRef
|
|
455
|
+
});
|
|
456
|
+
});
|
|
457
|
+
var PopoverScrollView = (0, import_core.createRefComponent)(function(param, ref) {
|
|
458
|
+
var { scope, ...props } = param;
|
|
459
|
+
var context = usePopoverContext(scope);
|
|
460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_view.ScrollView, {
|
|
461
|
+
ref,
|
|
462
|
+
pointerEvents: context.breakpointActive ? "none" : void 0,
|
|
463
|
+
scrollEnabled: !context.breakpointActive,
|
|
464
|
+
passThrough: context.breakpointActive,
|
|
465
|
+
...props
|
|
466
|
+
});
|
|
467
|
+
});
|
|
468
|
+
var DEFAULT_SCOPE = "";
|
|
469
|
+
var Popover = (0, import_helpers.withStaticProperties)((0, import_core.createRefComponent)(function Popover2(param, ref) {
|
|
470
|
+
var { scope = DEFAULT_SCOPE, ...props } = param;
|
|
471
|
+
var id = React.useId();
|
|
472
|
+
var adaptScope = `PopoverAdapt${scope}`;
|
|
473
|
+
var { open: openProp, defaultOpen, onOpenChange } = props;
|
|
474
|
+
var viaRef = React.useRef(void 0);
|
|
475
|
+
var [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
476
|
+
prop: openProp,
|
|
477
|
+
defaultProp: defaultOpen || false,
|
|
478
|
+
onChange: function(val) {
|
|
479
|
+
onOpenChange === null || onOpenChange === void 0 || onOpenChange(val, viaRef.current);
|
|
480
|
+
}
|
|
481
|
+
});
|
|
482
|
+
var handleOpenChange = (0, import_core.useEvent)(function(val, via) {
|
|
483
|
+
viaRef.current = via;
|
|
484
|
+
setOpen(val);
|
|
485
|
+
});
|
|
486
|
+
React.useEffect(function() {
|
|
487
|
+
if (!open) return;
|
|
488
|
+
openPopovers.add(setOpen);
|
|
489
|
+
return function() {
|
|
490
|
+
openPopovers.delete(setOpen);
|
|
491
|
+
};
|
|
492
|
+
}, [open, setOpen]);
|
|
493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_adapt.AdaptParent, {
|
|
494
|
+
scope: adaptScope,
|
|
495
|
+
open,
|
|
496
|
+
onOpenChange: setOpen,
|
|
497
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverInner, {
|
|
498
|
+
adaptScope,
|
|
499
|
+
ref,
|
|
500
|
+
id,
|
|
501
|
+
scope,
|
|
502
|
+
open,
|
|
503
|
+
setOpen,
|
|
504
|
+
handleOpenChange,
|
|
505
|
+
...props
|
|
506
|
+
})
|
|
507
|
+
});
|
|
508
|
+
}), {
|
|
509
|
+
Anchor: PopoverAnchor,
|
|
510
|
+
Arrow: PopoverArrow,
|
|
511
|
+
Trigger: PopoverTrigger,
|
|
512
|
+
Content: PopoverContent,
|
|
513
|
+
Close: PopoverClose,
|
|
514
|
+
Adapt: import_adapt.Adapt,
|
|
515
|
+
ScrollView: PopoverScrollView,
|
|
516
|
+
FocusScope: import_focus_scope.FocusScopeController
|
|
517
|
+
});
|
|
518
|
+
var PopoverInner = (0, import_core.createRefComponent)(function PopoverInner2(props, forwardedRef) {
|
|
519
|
+
var { children, open: _openProp, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, scope = DEFAULT_SCOPE, keepChildrenMounted: keepChildrenMountedProp, hoverable, disableFocus, disableDismissable, zIndex, id, adaptScope, open, setOpen, handleOpenChange, ...restProps } = props;
|
|
520
|
+
var triggerRef = React.useRef(null);
|
|
521
|
+
var [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
522
|
+
var [keepChildrenMounted] = (0, import_use_controllable_state.useControllableState)({
|
|
523
|
+
prop: keepChildrenMountedProp,
|
|
524
|
+
defaultProp: false,
|
|
525
|
+
transition: keepChildrenMountedProp === "lazy"
|
|
526
|
+
});
|
|
527
|
+
var isAdapted = (0, import_adapt.useAdaptIsActive)(adaptScope);
|
|
528
|
+
var floatingContext = (0, import_useFloatingContext.useFloatingContext)({
|
|
529
|
+
open,
|
|
530
|
+
setOpen: handleOpenChange,
|
|
531
|
+
disable: isAdapted,
|
|
532
|
+
hoverable,
|
|
533
|
+
disableFocus
|
|
534
|
+
});
|
|
535
|
+
var [anchorTo, setAnchorToRaw] = React.useState();
|
|
536
|
+
var setAnchorTo = (0, import_core.useCreateShallowSetState)(setAnchorToRaw);
|
|
537
|
+
React.useImperativeHandle(forwardedRef, function() {
|
|
538
|
+
return {
|
|
539
|
+
anchorTo: setAnchorTo,
|
|
540
|
+
toggle: function() {
|
|
541
|
+
return setOpen(function(prev) {
|
|
542
|
+
return !prev;
|
|
543
|
+
});
|
|
544
|
+
},
|
|
545
|
+
open: function() {
|
|
546
|
+
return setOpen(true);
|
|
547
|
+
},
|
|
548
|
+
close: function() {
|
|
549
|
+
return setOpen(false);
|
|
550
|
+
},
|
|
551
|
+
setOpen
|
|
552
|
+
};
|
|
553
|
+
});
|
|
554
|
+
var contentId = React.useId();
|
|
555
|
+
var onOpenToggle = (0, import_core.useEvent)(function() {
|
|
556
|
+
if (open && isAdapted) return;
|
|
557
|
+
setOpen(!open);
|
|
558
|
+
});
|
|
559
|
+
var onCustomAnchorAdd = React.useCallback(function() {
|
|
560
|
+
return setHasCustomAnchor(true);
|
|
561
|
+
}, []);
|
|
562
|
+
var onCustomAnchorRemove = React.useCallback(function() {
|
|
563
|
+
return setHasCustomAnchor(false);
|
|
564
|
+
}, []);
|
|
565
|
+
var contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.Popper, {
|
|
566
|
+
open,
|
|
567
|
+
passThrough: isAdapted,
|
|
568
|
+
scope,
|
|
569
|
+
stayInFrame: true,
|
|
570
|
+
...restProps,
|
|
571
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContextProvider, {
|
|
572
|
+
scope,
|
|
573
|
+
open,
|
|
574
|
+
onOpenChange: handleOpenChange,
|
|
575
|
+
onOpenToggle,
|
|
576
|
+
triggerRef,
|
|
577
|
+
id,
|
|
578
|
+
contentId,
|
|
579
|
+
hasCustomAnchor,
|
|
580
|
+
onCustomAnchorAdd,
|
|
581
|
+
onCustomAnchorRemove,
|
|
582
|
+
anchorTo,
|
|
583
|
+
adaptScope,
|
|
584
|
+
breakpointActive: isAdapted,
|
|
585
|
+
keepChildrenMounted,
|
|
586
|
+
disableDismissable,
|
|
587
|
+
hoverable,
|
|
588
|
+
children
|
|
589
|
+
})
|
|
590
|
+
});
|
|
591
|
+
var result = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: import_constants.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
|
|
592
|
+
value: floatingContext,
|
|
593
|
+
children: contents
|
|
594
|
+
}) : contents });
|
|
595
|
+
if (zIndex !== void 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverZIndexContext.Provider, {
|
|
596
|
+
value: zIndex,
|
|
597
|
+
children: result
|
|
598
|
+
});
|
|
599
|
+
return result;
|
|
600
|
+
});
|
|
601
|
+
function getState(open) {
|
|
602
|
+
return open ? "open" : "closed";
|
|
603
|
+
}
|