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