@tamagui/popover 1.0.1-beta.99 → 1.0.1-rc.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.js +315 -214
- package/dist/cjs/Popover.js.map +3 -3
- package/dist/cjs/floating.js +37 -0
- package/dist/cjs/floating.js.map +7 -0
- package/dist/cjs/floating.native.js +59 -0
- package/dist/cjs/floating.native.js.map +7 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Popover.js +314 -222
- package/dist/esm/Popover.js.map +3 -3
- package/dist/esm/floating.js +15 -0
- package/dist/esm/floating.js.map +7 -0
- package/dist/esm/floating.native.js +31 -0
- package/dist/esm/floating.native.js.map +7 -0
- package/dist/esm/index.js +0 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/jsx/Popover.js +210 -124
- package/dist/jsx/Popover.js.map +3 -3
- package/dist/jsx/floating.js +15 -0
- package/dist/jsx/floating.js.map +7 -0
- package/dist/jsx/floating.native.js +31 -0
- package/dist/jsx/floating.native.js.map +7 -0
- package/dist/jsx/index.js +0 -0
- package/dist/jsx/index.js.map +1 -1
- package/package.json +25 -21
- package/src/Popover.tsx +214 -100
- package/src/floating.native.ts +18 -0
- package/src/floating.ts +8 -0
- package/types/Popover.d.ts +109 -35
- package/types/floating.d.ts +2 -0
- package/types/floating.native.d.ts +15 -0
- package/types/index.d.ts +0 -0
- package/types/Popover.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
package/dist/cjs/Popover.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -45,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
45
17
|
}
|
|
46
18
|
return to;
|
|
47
19
|
};
|
|
48
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
49
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
50
25
|
var Popover_exports = {};
|
|
51
26
|
__export(Popover_exports, {
|
|
@@ -54,26 +29,31 @@ __export(Popover_exports, {
|
|
|
54
29
|
PopoverArrow: () => PopoverArrow,
|
|
55
30
|
PopoverClose: () => PopoverClose,
|
|
56
31
|
PopoverContent: () => PopoverContent,
|
|
32
|
+
PopoverSheetContents: () => PopoverSheetContents,
|
|
57
33
|
PopoverTrigger: () => PopoverTrigger,
|
|
58
34
|
__PopoverProviderInternal: () => __PopoverProviderInternal,
|
|
59
35
|
createPopoverScope: () => createPopoverScope,
|
|
60
36
|
usePopoverScope: () => usePopoverScope
|
|
61
37
|
});
|
|
62
38
|
module.exports = __toCommonJS(Popover_exports);
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
63
40
|
var import_polyfill_dev = require("@tamagui/polyfill-dev");
|
|
64
|
-
var
|
|
41
|
+
var import_adapt = require("@tamagui/adapt");
|
|
65
42
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
43
|
+
var import_aria_hidden = require("@tamagui/aria-hidden");
|
|
66
44
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
67
45
|
var import_core = require("@tamagui/core");
|
|
68
46
|
var import_create_context = require("@tamagui/create-context");
|
|
69
47
|
var import_focus_scope = require("@tamagui/focus-scope");
|
|
70
48
|
var import_popper = require("@tamagui/popper");
|
|
71
49
|
var import_portal = require("@tamagui/portal");
|
|
50
|
+
var import_remove_scroll = require("@tamagui/remove-scroll");
|
|
51
|
+
var import_sheet = require("@tamagui/sheet");
|
|
72
52
|
var import_stacks = require("@tamagui/stacks");
|
|
73
53
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
74
|
-
var import_aria_hidden = require("aria-hidden");
|
|
75
54
|
var React = __toESM(require("react"));
|
|
76
|
-
var
|
|
55
|
+
var import_react_native = require("react-native");
|
|
56
|
+
var import_floating = require("./floating");
|
|
77
57
|
const POPOVER_NAME = "Popover";
|
|
78
58
|
const [createPopoverContext, createPopoverScopeInternal] = (0, import_create_context.createContextScope)(POPOVER_NAME, [
|
|
79
59
|
import_popper.createPopperScope
|
|
@@ -83,201 +63,321 @@ const createPopoverScope = createPopoverScopeInternal;
|
|
|
83
63
|
const [PopoverProviderInternal, usePopoverInternalContext] = createPopoverContext(POPOVER_NAME);
|
|
84
64
|
const __PopoverProviderInternal = PopoverProviderInternal;
|
|
85
65
|
const ANCHOR_NAME = "PopoverAnchor";
|
|
86
|
-
const PopoverAnchor = React.forwardRef(
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
66
|
+
const PopoverAnchor = React.forwardRef(
|
|
67
|
+
(props, forwardedRef) => {
|
|
68
|
+
const { __scopePopover, ...anchorProps } = props;
|
|
69
|
+
const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover);
|
|
70
|
+
const popperScope = usePopoverScope(__scopePopover);
|
|
71
|
+
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
|
|
72
|
+
React.useEffect(() => {
|
|
73
|
+
onCustomAnchorAdd();
|
|
74
|
+
return () => onCustomAnchorRemove();
|
|
75
|
+
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
|
|
76
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
|
|
77
|
+
...popperScope,
|
|
78
|
+
...anchorProps,
|
|
79
|
+
ref: forwardedRef
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
);
|
|
99
83
|
PopoverAnchor.displayName = ANCHOR_NAME;
|
|
100
84
|
const TRIGGER_NAME = "PopoverTrigger";
|
|
101
|
-
const PopoverTrigger = React.forwardRef(
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
85
|
+
const PopoverTrigger = React.forwardRef(
|
|
86
|
+
(props, forwardedRef) => {
|
|
87
|
+
const { __scopePopover, ...triggerProps } = props;
|
|
88
|
+
const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover);
|
|
89
|
+
const popperScope = usePopoverScope(__scopePopover);
|
|
90
|
+
const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
|
91
|
+
const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
92
|
+
"aria-haspopup": "dialog",
|
|
93
|
+
"aria-expanded": context.open,
|
|
94
|
+
"data-state": getState(context.open),
|
|
95
|
+
...triggerProps,
|
|
96
|
+
ref: composedTriggerRef,
|
|
97
|
+
onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
|
|
98
|
+
});
|
|
99
|
+
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperAnchor, {
|
|
100
|
+
asChild: true,
|
|
101
|
+
...popperScope,
|
|
102
|
+
children: trigger
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
);
|
|
119
106
|
PopoverTrigger.displayName = TRIGGER_NAME;
|
|
120
107
|
const CONTENT_NAME = "PopoverContent";
|
|
121
|
-
const PopoverContent = React.forwardRef(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
108
|
+
const PopoverContent = React.forwardRef(
|
|
109
|
+
(props, forwardedRef) => {
|
|
110
|
+
const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props;
|
|
111
|
+
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
112
|
+
const contentRef = React.useRef(null);
|
|
113
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
114
|
+
const isRightClickOutsideRef = React.useRef(false);
|
|
115
|
+
const themeName = (0, import_core.useThemeName)();
|
|
116
|
+
React.useEffect(() => {
|
|
117
|
+
if (!context.open)
|
|
118
|
+
return;
|
|
119
|
+
const content = contentRef.current;
|
|
120
|
+
if (content)
|
|
121
|
+
return (0, import_aria_hidden.hideOthers)(content);
|
|
122
|
+
}, [context.open]);
|
|
123
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
|
|
124
|
+
zIndex: props.zIndex ?? 1e3,
|
|
125
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
|
|
126
|
+
name: themeName,
|
|
127
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContentImpl, {
|
|
128
|
+
...contentModalProps,
|
|
129
|
+
disableRemoveScroll,
|
|
130
|
+
ref: composedRefs,
|
|
131
|
+
trapFocus: trapFocus ?? context.open,
|
|
132
|
+
disableOutsidePointerEvents: true,
|
|
133
|
+
onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
134
|
+
var _a;
|
|
135
|
+
event.preventDefault();
|
|
136
|
+
if (!isRightClickOutsideRef.current)
|
|
137
|
+
(_a = context.triggerRef.current) == null ? void 0 : _a.focus();
|
|
138
|
+
}),
|
|
139
|
+
onPointerDownOutside: (0, import_core.composeEventHandlers)(
|
|
140
|
+
props.onPointerDownOutside,
|
|
141
|
+
(event) => {
|
|
142
|
+
const originalEvent = event.detail.originalEvent;
|
|
143
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
144
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
145
|
+
isRightClickOutsideRef.current = isRightClick;
|
|
146
|
+
},
|
|
147
|
+
{ checkDefaultPrevented: false }
|
|
148
|
+
),
|
|
149
|
+
onFocusOutside: (0, import_core.composeEventHandlers)(
|
|
150
|
+
props.onFocusOutside,
|
|
151
|
+
(event) => event.preventDefault(),
|
|
152
|
+
{ checkDefaultPrevented: false }
|
|
153
|
+
)
|
|
154
|
+
})
|
|
155
|
+
})
|
|
156
|
+
});
|
|
157
|
+
}
|
|
158
|
+
);
|
|
159
|
+
const PopoverContentImpl = React.forwardRef(
|
|
160
|
+
(props, forwardedRef) => {
|
|
161
|
+
const {
|
|
162
|
+
__scopePopover,
|
|
163
|
+
trapFocus,
|
|
164
|
+
onOpenAutoFocus,
|
|
165
|
+
onCloseAutoFocus,
|
|
166
|
+
disableOutsidePointerEvents,
|
|
167
|
+
onEscapeKeyDown,
|
|
168
|
+
onPointerDownOutside,
|
|
169
|
+
onFocusOutside,
|
|
170
|
+
onInteractOutside,
|
|
171
|
+
children,
|
|
172
|
+
disableRemoveScroll,
|
|
173
|
+
...contentProps
|
|
174
|
+
} = props;
|
|
175
|
+
const popperScope = usePopoverScope(__scopePopover);
|
|
176
|
+
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
177
|
+
const showSheet = useShowPopoverSheet(context);
|
|
178
|
+
if (showSheet) {
|
|
179
|
+
const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
|
|
180
|
+
if (React.isValidElement(child)) {
|
|
181
|
+
if (child.type === PopoverScrollView) {
|
|
182
|
+
return child.props.children;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
return child;
|
|
186
|
+
});
|
|
187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
|
|
188
|
+
hostName: `${context.scopeKey}SheetContents`,
|
|
189
|
+
children: childrenWithoutScrollView
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
|
|
193
|
+
children: !!context.open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperContent, {
|
|
194
|
+
"data-state": getState(context.open),
|
|
195
|
+
id: context.contentId,
|
|
196
|
+
pointerEvents: "auto",
|
|
197
|
+
...popperScope,
|
|
198
|
+
...contentProps,
|
|
199
|
+
ref: forwardedRef,
|
|
200
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
|
|
201
|
+
enabled: disableRemoveScroll ? false : context.open,
|
|
202
|
+
allowPinchZoom: true,
|
|
203
|
+
removeScrollBar: false,
|
|
204
|
+
style: {
|
|
205
|
+
display: "contents"
|
|
206
|
+
},
|
|
207
|
+
children: trapFocus === false ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
|
|
208
|
+
loop: true,
|
|
209
|
+
trapped: trapFocus ?? context.open,
|
|
210
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
211
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
212
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
213
|
+
style: { display: "contents" },
|
|
214
|
+
children
|
|
215
|
+
})
|
|
216
|
+
})
|
|
217
|
+
})
|
|
218
|
+
}, "popper-content")
|
|
219
|
+
});
|
|
220
|
+
}
|
|
221
|
+
);
|
|
201
222
|
const CLOSE_NAME = "PopoverClose";
|
|
202
|
-
const PopoverClose = React.forwardRef(
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
223
|
+
const PopoverClose = React.forwardRef(
|
|
224
|
+
(props, forwardedRef) => {
|
|
225
|
+
const { __scopePopover, ...closeProps } = props;
|
|
226
|
+
const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover);
|
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
228
|
+
...closeProps,
|
|
229
|
+
ref: forwardedRef,
|
|
230
|
+
onPress: (0, import_core.composeEventHandlers)(props.onPress, () => context.onOpenChange(false))
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
);
|
|
210
234
|
PopoverClose.displayName = CLOSE_NAME;
|
|
211
235
|
const ARROW_NAME = "PopoverArrow";
|
|
212
|
-
const PopoverArrow = React.forwardRef(
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
236
|
+
const PopoverArrow = React.forwardRef(
|
|
237
|
+
(props, forwardedRef) => {
|
|
238
|
+
const { __scopePopover, ...arrowProps } = props;
|
|
239
|
+
const popperScope = usePopoverScope(__scopePopover);
|
|
240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
|
|
241
|
+
...popperScope,
|
|
242
|
+
...arrowProps,
|
|
243
|
+
ref: forwardedRef
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
);
|
|
219
247
|
PopoverArrow.displayName = ARROW_NAME;
|
|
220
|
-
const
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
"onOpenChange"
|
|
233
|
-
]);
|
|
234
|
-
const popperScope = usePopoverScope(__scopePopover);
|
|
235
|
-
const triggerRef = React.useRef(null);
|
|
236
|
-
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
237
|
-
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
238
|
-
prop: openProp,
|
|
239
|
-
defaultProp: defaultOpen || false,
|
|
240
|
-
onChange: onOpenChange
|
|
248
|
+
const SHEET_CONTENTS_NAME = "PopoverSheetContents";
|
|
249
|
+
const PopoverSheetContents = ({ __scopePopover }) => {
|
|
250
|
+
const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover);
|
|
251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
|
|
252
|
+
name: `${context.scopeKey}SheetContents`
|
|
253
|
+
});
|
|
254
|
+
};
|
|
255
|
+
PopoverSheetContents.displayName = SHEET_CONTENTS_NAME;
|
|
256
|
+
const PopoverScrollView = React.forwardRef((props, ref) => {
|
|
257
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, {
|
|
258
|
+
ref,
|
|
259
|
+
...props
|
|
241
260
|
});
|
|
242
|
-
const useFloatingContext = React.useCallback((props2) => {
|
|
243
|
-
const floating = (0, import_react_dom_interactions.useFloating)(__spreadProps(__spreadValues({}, props2), {
|
|
244
|
-
open,
|
|
245
|
-
onOpenChange: setOpen
|
|
246
|
-
}));
|
|
247
|
-
const { getReferenceProps, getFloatingProps } = (0, import_react_dom_interactions.useInteractions)([
|
|
248
|
-
(0, import_react_dom_interactions.useFocus)(floating.context),
|
|
249
|
-
(0, import_react_dom_interactions.useRole)(floating.context, { role: "dialog" }),
|
|
250
|
-
(0, import_react_dom_interactions.useDismiss)(floating.context)
|
|
251
|
-
]);
|
|
252
|
-
return __spreadProps(__spreadValues({}, floating), {
|
|
253
|
-
getReferenceProps,
|
|
254
|
-
getFloatingProps
|
|
255
|
-
});
|
|
256
|
-
}, [open]);
|
|
257
|
-
return /* @__PURE__ */ React.createElement(import_popper.FloatingOverrideContext.Provider, {
|
|
258
|
-
value: useFloatingContext
|
|
259
|
-
}, /* @__PURE__ */ React.createElement(import_popper.Popper, __spreadValues(__spreadValues({}, popperScope), restProps), /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
|
|
260
|
-
scope: __scopePopover,
|
|
261
|
-
contentId: (0, import_core.useId)(),
|
|
262
|
-
triggerRef,
|
|
263
|
-
open,
|
|
264
|
-
onOpenChange: setOpen,
|
|
265
|
-
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
266
|
-
hasCustomAnchor,
|
|
267
|
-
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
268
|
-
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
269
|
-
}, children)));
|
|
270
|
-
}, {
|
|
271
|
-
Anchor: PopoverAnchor,
|
|
272
|
-
Arrow: PopoverArrow,
|
|
273
|
-
Trigger: PopoverTrigger,
|
|
274
|
-
Content: PopoverContent,
|
|
275
|
-
Close: PopoverClose
|
|
276
261
|
});
|
|
262
|
+
const Popover = (0, import_core.withStaticProperties)(
|
|
263
|
+
(props) => {
|
|
264
|
+
const {
|
|
265
|
+
__scopePopover,
|
|
266
|
+
children,
|
|
267
|
+
open: openProp,
|
|
268
|
+
defaultOpen,
|
|
269
|
+
onOpenChange,
|
|
270
|
+
...restProps
|
|
271
|
+
} = props;
|
|
272
|
+
const { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
|
|
273
|
+
Contents: PopoverSheetContents
|
|
274
|
+
});
|
|
275
|
+
const sheetBreakpoint = when || false;
|
|
276
|
+
const popperScope = usePopoverScope(__scopePopover);
|
|
277
|
+
const triggerRef = React.useRef(null);
|
|
278
|
+
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
279
|
+
const [open, setOpen] = (0, import_use_controllable_state.useControllableState)({
|
|
280
|
+
prop: openProp,
|
|
281
|
+
defaultProp: defaultOpen || false,
|
|
282
|
+
onChange: onOpenChange
|
|
283
|
+
});
|
|
284
|
+
const breakpointActive = useSheetBreakpointActive(sheetBreakpoint);
|
|
285
|
+
const useFloatingContext = React.useCallback(
|
|
286
|
+
(props2) => {
|
|
287
|
+
const floating = (0, import_floating.useFloating)({
|
|
288
|
+
...props2,
|
|
289
|
+
open,
|
|
290
|
+
onOpenChange: setOpen
|
|
291
|
+
});
|
|
292
|
+
const { getReferenceProps, getFloatingProps } = (0, import_floating.useInteractions)([
|
|
293
|
+
(0, import_floating.useRole)(floating.context, { role: "dialog" }),
|
|
294
|
+
(0, import_floating.useDismiss)(floating.context, {
|
|
295
|
+
enabled: !breakpointActive
|
|
296
|
+
})
|
|
297
|
+
]);
|
|
298
|
+
return {
|
|
299
|
+
...floating,
|
|
300
|
+
getReferenceProps,
|
|
301
|
+
getFloatingProps
|
|
302
|
+
};
|
|
303
|
+
},
|
|
304
|
+
[breakpointActive, open, setOpen]
|
|
305
|
+
);
|
|
306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, {
|
|
307
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.FloatingOverrideContext.Provider, {
|
|
308
|
+
value: useFloatingContext,
|
|
309
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.Popper, {
|
|
310
|
+
...popperScope,
|
|
311
|
+
stayInFrame: true,
|
|
312
|
+
...restProps,
|
|
313
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverProviderInternal, {
|
|
314
|
+
scope: __scopePopover,
|
|
315
|
+
scopeKey: __scopePopover ? Object.keys(__scopePopover)[0] : "",
|
|
316
|
+
sheetBreakpoint,
|
|
317
|
+
contentId: (0, import_core.useId)(),
|
|
318
|
+
triggerRef,
|
|
319
|
+
open,
|
|
320
|
+
onOpenChange: setOpen,
|
|
321
|
+
onOpenToggle: (0, import_core.useEvent)(() => {
|
|
322
|
+
if (open && breakpointActive) {
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
setOpen(!open);
|
|
326
|
+
}),
|
|
327
|
+
hasCustomAnchor,
|
|
328
|
+
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
329
|
+
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
|
|
330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverSheetController, {
|
|
331
|
+
onOpenChange: setOpen,
|
|
332
|
+
__scopePopover,
|
|
333
|
+
children
|
|
334
|
+
})
|
|
335
|
+
})
|
|
336
|
+
})
|
|
337
|
+
})
|
|
338
|
+
});
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
Anchor: PopoverAnchor,
|
|
342
|
+
Arrow: PopoverArrow,
|
|
343
|
+
Trigger: PopoverTrigger,
|
|
344
|
+
Content: PopoverContent,
|
|
345
|
+
Close: PopoverClose,
|
|
346
|
+
Adapt: import_adapt.Adapt,
|
|
347
|
+
ScrollView: PopoverScrollView,
|
|
348
|
+
Sheet: import_sheet.ControlledSheet
|
|
349
|
+
}
|
|
350
|
+
);
|
|
277
351
|
Popover.displayName = POPOVER_NAME;
|
|
278
352
|
function getState(open) {
|
|
279
353
|
return open ? "open" : "closed";
|
|
280
354
|
}
|
|
355
|
+
const PopoverSheetController = (props) => {
|
|
356
|
+
const context = usePopoverInternalContext("PopoverSheetController", props.__scopePopover);
|
|
357
|
+
const showSheet = useShowPopoverSheet(context);
|
|
358
|
+
const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
|
|
359
|
+
const getShowSheet = (0, import_core.useGet)(showSheet);
|
|
360
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
|
|
361
|
+
onOpenChange: (val) => {
|
|
362
|
+
if (getShowSheet()) {
|
|
363
|
+
props.onOpenChange(val);
|
|
364
|
+
}
|
|
365
|
+
},
|
|
366
|
+
open: context.open,
|
|
367
|
+
hidden: breakpointActive === false,
|
|
368
|
+
children: props.children
|
|
369
|
+
});
|
|
370
|
+
};
|
|
371
|
+
const useSheetBreakpointActive = (breakpoint) => {
|
|
372
|
+
const media = (0, import_core.useMedia)();
|
|
373
|
+
return breakpoint ? media[breakpoint] : false;
|
|
374
|
+
};
|
|
375
|
+
const useShowPopoverSheet = (context) => {
|
|
376
|
+
if (!import_core.isWeb)
|
|
377
|
+
return true;
|
|
378
|
+
const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
|
|
379
|
+
return context.open === false ? false : breakpointActive;
|
|
380
|
+
};
|
|
281
381
|
// Annotate the CommonJS export names for ESM import in node:
|
|
282
382
|
0 && (module.exports = {
|
|
283
383
|
Popover,
|
|
@@ -285,6 +385,7 @@ function getState(open) {
|
|
|
285
385
|
PopoverArrow,
|
|
286
386
|
PopoverClose,
|
|
287
387
|
PopoverContent,
|
|
388
|
+
PopoverSheetContents,
|
|
288
389
|
PopoverTrigger,
|
|
289
390
|
__PopoverProviderInternal,
|
|
290
391
|
createPopoverScope,
|