@tamagui/popover 1.111.8 → 1.111.10

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.
@@ -18,336 +18,428 @@ import { YStack } from "@tamagui/stacks";
18
18
  import { useControllableState } from "@tamagui/use-controllable-state";
19
19
  import * as React from "react";
20
20
  import { Platform, ScrollView } from "react-native";
21
- import { useFloatingContext } from "./useFloatingContext";
22
- var POPOVER_SCOPE = "PopoverScope", PopoverContext = createStyledContext({}), usePopoverContext = PopoverContext.useStyledContext, PopoverAnchor = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
23
- var { __scopePopover, ...rest } = props, context = usePopoverContext(__scopePopover), { onCustomAnchorAdd, onCustomAnchorRemove } = context || {};
24
- return React.useEffect(function() {
25
- return onCustomAnchorAdd(), function() {
26
- return onCustomAnchorRemove();
27
- };
28
- }, [
29
- onCustomAnchorAdd,
30
- onCustomAnchorRemove
31
- ]), /* @__PURE__ */ _jsx(PopperAnchor, {
32
- __scopePopper: __scopePopover || POPOVER_SCOPE,
33
- ...rest,
34
- ref: forwardedRef
35
- });
36
- }), PopoverTrigger = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
37
- var { __scopePopover, ...rest } = props, context = usePopoverContext(__scopePopover), anchorTo = context.anchorTo, composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
38
- if (!props.children) return null;
39
- var trigger = /* @__PURE__ */ _jsx(View, {
40
- "aria-haspopup": "dialog",
41
- "aria-expanded": context.open,
42
- // TODO not matching
43
- // aria-controls={context.contentId}
44
- "data-state": getState(context.open),
45
- ...rest,
46
- // @ts-ignore
47
- ref: composedTriggerRef,
48
- onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
49
- });
50
- if (anchorTo) {
51
- var virtualRef = {
52
- current: {
53
- getBoundingClientRect: function() {
54
- return isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
55
- },
56
- ...!isWeb && {
57
- measure: function(c) {
58
- return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
21
+ import { useFloatingContext } from "./useFloatingContext.native.js";
22
+ var POPOVER_SCOPE = "PopoverScope",
23
+ PopoverContext = createStyledContext({}),
24
+ usePopoverContext = PopoverContext.useStyledContext,
25
+ PopoverAnchor = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
26
+ var {
27
+ __scopePopover,
28
+ ...rest
29
+ } = props,
30
+ context = usePopoverContext(__scopePopover),
31
+ {
32
+ onCustomAnchorAdd,
33
+ onCustomAnchorRemove
34
+ } = context || {};
35
+ return React.useEffect(function () {
36
+ return onCustomAnchorAdd(), function () {
37
+ return onCustomAnchorRemove();
38
+ };
39
+ }, [onCustomAnchorAdd, onCustomAnchorRemove]), /* @__PURE__ */_jsx(PopperAnchor, {
40
+ __scopePopper: __scopePopover || POPOVER_SCOPE,
41
+ ...rest,
42
+ ref: forwardedRef
43
+ });
44
+ }),
45
+ PopoverTrigger = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
46
+ var {
47
+ __scopePopover,
48
+ ...rest
49
+ } = props,
50
+ context = usePopoverContext(__scopePopover),
51
+ anchorTo = context.anchorTo,
52
+ composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
53
+ if (!props.children) return null;
54
+ var trigger = /* @__PURE__ */_jsx(View, {
55
+ "aria-haspopup": "dialog",
56
+ "aria-expanded": context.open,
57
+ // TODO not matching
58
+ // aria-controls={context.contentId}
59
+ "data-state": getState(context.open),
60
+ ...rest,
61
+ // @ts-ignore
62
+ ref: composedTriggerRef,
63
+ onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
64
+ });
65
+ if (anchorTo) {
66
+ var virtualRef = {
67
+ current: {
68
+ getBoundingClientRect: function () {
69
+ return isWeb ? DOMRect.fromRect(anchorTo) : anchorTo;
59
70
  },
60
- measureInWindow: function(c) {
61
- return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
62
- }
71
+ ...(!isWeb && {
72
+ measure: function (c) {
73
+ return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
74
+ },
75
+ measureInWindow: function (c) {
76
+ return c(anchorTo?.x, anchorTo?.y, anchorTo?.width, anchorTo?.height);
77
+ }
78
+ })
63
79
  }
64
- }
65
- };
66
- return /* @__PURE__ */ _jsx(PopperAnchor, {
67
- virtualRef,
80
+ };
81
+ return /* @__PURE__ */_jsx(PopperAnchor, {
82
+ virtualRef,
83
+ __scopePopper: __scopePopover || POPOVER_SCOPE,
84
+ children: trigger
85
+ });
86
+ }
87
+ return context.hasCustomAnchor ? trigger : /* @__PURE__ */_jsx(PopperAnchor, {
68
88
  __scopePopper: __scopePopover || POPOVER_SCOPE,
89
+ asChild: !0,
69
90
  children: trigger
70
91
  });
71
- }
72
- return context.hasCustomAnchor ? trigger : /* @__PURE__ */ _jsx(PopperAnchor, {
73
- __scopePopper: __scopePopover || POPOVER_SCOPE,
74
- asChild: !0,
75
- children: trigger
76
- });
77
- }), PopoverContent = PopperContentFrame.extractable(/* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
78
- var { allowPinchZoom, trapFocus, disableRemoveScroll = !0, zIndex, __scopePopover, ...contentImplProps } = props, context = usePopoverContext(__scopePopover), contentRef = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, contentRef), isRightClickOutsideRef = React.useRef(!1), [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
79
- return context.open && isFullyHidden && setIsFullyHidden(!1), React.useEffect(function() {
80
- if (context.open) {
81
- var content = contentRef.current;
82
- if (content) return hideOthers(content);
83
- }
84
- }, [
85
- context.open
86
- ]), !context.keepChildrenMounted && isFullyHidden ? null : /* @__PURE__ */ _jsx(PopoverContentPortal, {
87
- __scopePopover,
88
- zIndex: props.zIndex,
89
- children: /* @__PURE__ */ _jsx(Stack, {
90
- pointerEvents: context.open ? "auto" : "none",
91
- children: /* @__PURE__ */ _jsx(PopoverContentImpl, {
92
- ...contentImplProps,
93
- disableRemoveScroll,
94
- ref: composedRefs,
95
- setIsFullyHidden,
92
+ }),
93
+ PopoverContent = PopperContentFrame.extractable(/* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
94
+ var {
95
+ allowPinchZoom,
96
+ trapFocus,
97
+ disableRemoveScroll = !0,
98
+ zIndex,
96
99
  __scopePopover,
97
- // we make sure we're not trapping once it's been closed
98
- // (closed !== unmounted when animating out)
99
- trapFocus: trapFocus ?? context.open,
100
- disableOutsidePointerEvents: !0,
101
- onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, function(event) {
102
- var _context_triggerRef_current;
103
- event.preventDefault(), isRightClickOutsideRef.current || (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
104
- }),
105
- onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, function(event) {
106
- var originalEvent = event.detail.originalEvent, ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0, isRightClick = originalEvent.button === 2 || ctrlLeftClick;
107
- isRightClickOutsideRef.current = isRightClick;
108
- }, {
109
- checkDefaultPrevented: !1
110
- }),
111
- // When focus is trapped, a `focusout` event may still happen.
112
- // We make sure we don't trigger our `onDismiss` in such case.
113
- onFocusOutside: composeEventHandlers(props.onFocusOutside, function(event) {
114
- return event.preventDefault();
115
- }, {
116
- checkDefaultPrevented: !1
100
+ ...contentImplProps
101
+ } = props,
102
+ context = usePopoverContext(__scopePopover),
103
+ contentRef = React.useRef(null),
104
+ composedRefs = useComposedRefs(forwardedRef, contentRef),
105
+ isRightClickOutsideRef = React.useRef(!1),
106
+ [isFullyHidden, setIsFullyHidden] = React.useState(!context.open);
107
+ return context.open && isFullyHidden && setIsFullyHidden(!1), React.useEffect(function () {
108
+ if (context.open) {
109
+ var content = contentRef.current;
110
+ if (content) return hideOthers(content);
111
+ }
112
+ }, [context.open]), !context.keepChildrenMounted && isFullyHidden ? null : /* @__PURE__ */_jsx(PopoverContentPortal, {
113
+ __scopePopover,
114
+ zIndex: props.zIndex,
115
+ children: /* @__PURE__ */_jsx(Stack, {
116
+ pointerEvents: context.open ? "auto" : "none",
117
+ children: /* @__PURE__ */_jsx(PopoverContentImpl, {
118
+ ...contentImplProps,
119
+ disableRemoveScroll,
120
+ ref: composedRefs,
121
+ setIsFullyHidden,
122
+ __scopePopover,
123
+ // we make sure we're not trapping once it's been closed
124
+ // (closed !== unmounted when animating out)
125
+ trapFocus: trapFocus ?? context.open,
126
+ disableOutsidePointerEvents: !0,
127
+ onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, function (event) {
128
+ var _context_triggerRef_current;
129
+ event.preventDefault(), isRightClickOutsideRef.current || (_context_triggerRef_current = context.triggerRef.current) === null || _context_triggerRef_current === void 0 || _context_triggerRef_current.focus();
130
+ }),
131
+ onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, function (event) {
132
+ var originalEvent = event.detail.originalEvent,
133
+ ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === !0,
134
+ isRightClick = originalEvent.button === 2 || ctrlLeftClick;
135
+ isRightClickOutsideRef.current = isRightClick;
136
+ }, {
137
+ checkDefaultPrevented: !1
138
+ }),
139
+ // When focus is trapped, a `focusout` event may still happen.
140
+ // We make sure we don't trigger our `onDismiss` in such case.
141
+ onFocusOutside: composeEventHandlers(props.onFocusOutside, function (event) {
142
+ return event.preventDefault();
143
+ }, {
144
+ checkDefaultPrevented: !1
145
+ })
117
146
  })
118
147
  })
119
- })
120
- });
121
- }));
148
+ });
149
+ }));
122
150
  function PopoverRepropagateContext(props) {
123
- return /* @__PURE__ */ _jsx(PopperContext.Provider, {
151
+ return /* @__PURE__ */_jsx(PopperContext.Provider, {
124
152
  scope: props.scope,
125
153
  ...props.popperContext,
126
- children: /* @__PURE__ */ _jsx(PopoverContext.Provider, {
154
+ children: /* @__PURE__ */_jsx(PopoverContext.Provider, {
127
155
  ...props.context,
128
156
  children: props.children
129
157
  })
130
158
  });
131
159
  }
132
160
  function PopoverContentPortal(props) {
133
- var { __scopePopover } = props, _props_zIndex, zIndex = (_props_zIndex = props.zIndex) !== null && _props_zIndex !== void 0 ? _props_zIndex : 15e4, context = usePopoverContext(__scopePopover), popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE), themeName = useThemeName(), contents = props.children;
134
- return (Platform.OS === "android" || Platform.OS === "ios") && (contents = /* @__PURE__ */ _jsx(PopoverRepropagateContext, {
161
+ var {
162
+ __scopePopover
163
+ } = props,
164
+ _props_zIndex,
165
+ zIndex = (_props_zIndex = props.zIndex) !== null && _props_zIndex !== void 0 ? _props_zIndex : 15e4,
166
+ context = usePopoverContext(__scopePopover),
167
+ popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
168
+ themeName = useThemeName(),
169
+ contents = props.children;
170
+ return (Platform.OS === "android" || Platform.OS === "ios") && (contents = /* @__PURE__ */_jsx(PopoverRepropagateContext, {
135
171
  scope: __scopePopover || POPOVER_SCOPE,
136
172
  popperContext,
137
173
  context,
138
174
  children: props.children
139
- })), /* @__PURE__ */ _jsx(Portal, {
175
+ })), /* @__PURE__ */_jsx(Portal, {
140
176
  zIndex,
141
- children: (
142
- /* forceClassName avoids forced re-mount renders for some reason... see the HeadMenu as you change tints a few times */
143
- /* without this you'll see the site menu re-rendering. It must be something in wrapping children in Theme */
144
- /* @__PURE__ */ _jsxs(Theme, {
145
- forceClassName: !0,
146
- name: themeName,
147
- children: [
148
- !!context.open && !context.breakpointActive && /* @__PURE__ */ _jsx(YStack, {
149
- fullscreen: !0,
150
- onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
151
- }),
152
- contents
153
- ]
154
- })
155
- )
177
+ children: (/* forceClassName avoids forced re-mount renders for some reason... see the HeadMenu as you change tints a few times */
178
+ /* without this you'll see the site menu re-rendering. It must be something in wrapping children in Theme */
179
+ /* @__PURE__ */_jsxs(Theme, {
180
+ forceClassName: !0,
181
+ name: themeName,
182
+ children: [!!context.open && !context.breakpointActive && /* @__PURE__ */_jsx(YStack, {
183
+ fullscreen: !0,
184
+ onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
185
+ }), contents]
186
+ }))
156
187
  });
157
188
  }
158
- var PopoverContentImpl = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
159
- var { trapFocus, __scopePopover, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, disableFocusScope, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, children, disableRemoveScroll, freezeContentsWhenHidden, setIsFullyHidden, ...contentProps } = props, context = usePopoverContext(__scopePopover), { open, keepChildrenMounted } = context, popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE), handleExitComplete = React.useCallback(function() {
160
- setIsFullyHidden?.(!0);
161
- }, [
162
- setIsFullyHidden
163
- ]);
164
- if (context.breakpointActive) {
165
- var childrenWithoutScrollView = React.Children.toArray(children).map(function(child) {
166
- return /* @__PURE__ */ React.isValidElement(child) && child.type === ScrollView ? child.props.children : child;
167
- }), content = /* @__PURE__ */ _jsx(ResetPresence, {
168
- children: childrenWithoutScrollView
189
+ var PopoverContentImpl = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
190
+ var {
191
+ trapFocus,
192
+ __scopePopover,
193
+ onOpenAutoFocus,
194
+ onCloseAutoFocus,
195
+ disableOutsidePointerEvents,
196
+ disableFocusScope,
197
+ onEscapeKeyDown,
198
+ onPointerDownOutside,
199
+ onFocusOutside,
200
+ onInteractOutside,
201
+ children,
202
+ disableRemoveScroll,
203
+ freezeContentsWhenHidden,
204
+ setIsFullyHidden,
205
+ ...contentProps
206
+ } = props,
207
+ context = usePopoverContext(__scopePopover),
208
+ {
209
+ open,
210
+ keepChildrenMounted
211
+ } = context,
212
+ popperContext = usePopperContext(__scopePopover || POPOVER_SCOPE),
213
+ handleExitComplete = React.useCallback(function () {
214
+ setIsFullyHidden?.(!0);
215
+ }, [setIsFullyHidden]);
216
+ if (context.breakpointActive) {
217
+ var childrenWithoutScrollView = React.Children.toArray(children).map(function (child) {
218
+ return /* @__PURE__ */React.isValidElement(child) && child.type === ScrollView ? child.props.children : child;
219
+ }),
220
+ content = /* @__PURE__ */_jsx(ResetPresence, {
221
+ children: childrenWithoutScrollView
222
+ });
223
+ return (Platform.OS === "android" || Platform.OS === "ios") && (content = /* @__PURE__ */_jsx(PopperContext.Provider, {
224
+ scope: __scopePopover || POPOVER_SCOPE,
225
+ ...popperContext,
226
+ children: childrenWithoutScrollView
227
+ })), /* @__PURE__ */_jsx(PortalItem, {
228
+ hostName: `${context.id}PopoverContents`,
229
+ children: content
230
+ });
231
+ }
232
+ return /* @__PURE__ */_jsx(Animate, {
233
+ type: "presence",
234
+ present: !!open,
235
+ keepChildrenMounted,
236
+ onExitComplete: handleExitComplete,
237
+ children: /* @__PURE__ */_jsx(PopperContent, {
238
+ __scopePopper: __scopePopover || POPOVER_SCOPE,
239
+ "data-state": getState(open),
240
+ id: context.contentId,
241
+ ref: forwardedRef,
242
+ ...contentProps,
243
+ children: /* @__PURE__ */_jsx(RemoveScroll, {
244
+ enabled: disableRemoveScroll ? !1 : open,
245
+ allowPinchZoom: !0,
246
+ // causes lots of bugs on touch web on site
247
+ removeScrollBar: !1,
248
+ style: dspContentsStyle,
249
+ children: /* @__PURE__ */_jsx(ResetPresence, {
250
+ children: /* @__PURE__ */_jsx(FocusScope, {
251
+ loop: !0,
252
+ enabled: disableFocusScope ? !1 : open,
253
+ trapped: trapFocus,
254
+ onMountAutoFocus: onOpenAutoFocus,
255
+ onUnmountAutoFocus: onCloseAutoFocus,
256
+ children: isWeb ? /* @__PURE__ */_jsx("div", {
257
+ style: dspContentsStyle,
258
+ children
259
+ }) : children
260
+ })
261
+ })
262
+ })
263
+ }, context.contentId)
169
264
  });
170
- return (Platform.OS === "android" || Platform.OS === "ios") && (content = /* @__PURE__ */ _jsx(PopperContext.Provider, {
171
- scope: __scopePopover || POPOVER_SCOPE,
172
- ...popperContext,
173
- children: childrenWithoutScrollView
174
- })), /* @__PURE__ */ _jsx(PortalItem, {
175
- hostName: `${context.id}PopoverContents`,
176
- children: content
265
+ }),
266
+ dspContentsStyle = {
267
+ display: "contents"
268
+ },
269
+ PopoverClose = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
270
+ var {
271
+ __scopePopover,
272
+ ...rest
273
+ } = props,
274
+ context = usePopoverContext(__scopePopover);
275
+ return /* @__PURE__ */_jsx(YStack, {
276
+ ...rest,
277
+ ref: forwardedRef,
278
+ componentName: "PopoverClose",
279
+ onPress: composeEventHandlers(props.onPress, function () {
280
+ return context.onOpenChange(!1, "press");
281
+ })
177
282
  });
178
- }
179
- return /* @__PURE__ */ _jsx(Animate, {
180
- type: "presence",
181
- present: !!open,
182
- keepChildrenMounted,
183
- onExitComplete: handleExitComplete,
184
- children: /* @__PURE__ */ _jsx(PopperContent, {
283
+ }),
284
+ PopoverArrow = PopperArrow.styleable(function (props, forwardedRef) {
285
+ var {
286
+ __scopePopover,
287
+ ...rest
288
+ } = props,
289
+ context = usePopoverContext(__scopePopover),
290
+ sheetActive = useSheetBreakpointActive(context.sheetBreakpoint);
291
+ return sheetActive ? null : /* @__PURE__ */_jsx(PopperArrow, {
185
292
  __scopePopper: __scopePopover || POPOVER_SCOPE,
186
- "data-state": getState(open),
187
- id: context.contentId,
188
- ref: forwardedRef,
189
- ...contentProps,
190
- children: /* @__PURE__ */ _jsx(RemoveScroll, {
191
- enabled: disableRemoveScroll ? !1 : open,
192
- allowPinchZoom: !0,
193
- // causes lots of bugs on touch web on site
194
- removeScrollBar: !1,
195
- style: dspContentsStyle,
196
- children: /* @__PURE__ */ _jsx(ResetPresence, {
197
- children: /* @__PURE__ */ _jsx(FocusScope, {
198
- loop: !0,
199
- enabled: disableFocusScope ? !1 : open,
200
- trapped: trapFocus,
201
- onMountAutoFocus: onOpenAutoFocus,
202
- onUnmountAutoFocus: onCloseAutoFocus,
203
- children: isWeb ? /* @__PURE__ */ _jsx("div", {
204
- style: dspContentsStyle,
205
- children
206
- }) : children
293
+ componentName: "PopoverArrow",
294
+ ...rest,
295
+ ref: forwardedRef
296
+ });
297
+ }),
298
+ Popover = withStaticProperties(/* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
299
+ var {
300
+ children,
301
+ open: openProp,
302
+ defaultOpen,
303
+ onOpenChange,
304
+ __scopePopover,
305
+ keepChildrenMounted,
306
+ hoverable,
307
+ disableFocus,
308
+ ...restProps
309
+ } = props,
310
+ id = React.useId(),
311
+ {
312
+ when,
313
+ AdaptProvider
314
+ } = useAdaptParent({
315
+ Contents: React.useCallback(function () {
316
+ return /* @__PURE__ */_jsx(PortalHost, {
317
+ name: `${id}PopoverContents`
318
+ });
319
+ }, [])
320
+ }),
321
+ sheetBreakpoint = when,
322
+ triggerRef = React.useRef(null),
323
+ [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1),
324
+ viaRef = React.useRef(),
325
+ [open, setOpen] = useControllableState({
326
+ prop: openProp,
327
+ defaultProp: defaultOpen || !1,
328
+ onChange: function (val) {
329
+ onOpenChange?.(val, viaRef.current);
330
+ }
331
+ }),
332
+ handleOpenChange = useEvent(function (val, via) {
333
+ viaRef.current = via, setOpen(val);
334
+ }),
335
+ sheetActive = useSheetBreakpointActive(sheetBreakpoint),
336
+ floatingContext = useFloatingContext({
337
+ open,
338
+ setOpen: handleOpenChange,
339
+ disable: sheetActive,
340
+ hoverable,
341
+ disableFocus
342
+ }),
343
+ [anchorTo, setAnchorToRaw] = React.useState(),
344
+ setAnchorTo = createShallowSetState(setAnchorToRaw);
345
+ React.useImperativeHandle(forwardedRef, function () {
346
+ return {
347
+ anchorTo: setAnchorTo,
348
+ toggle: function () {
349
+ return setOpen(function (prev) {
350
+ return !prev;
351
+ });
352
+ },
353
+ open: function () {
354
+ return setOpen(!0);
355
+ },
356
+ close: function () {
357
+ return setOpen(!1);
358
+ },
359
+ setOpen
360
+ };
361
+ });
362
+ var popoverContext = {
363
+ id,
364
+ sheetBreakpoint,
365
+ contentId: React.useId(),
366
+ triggerRef,
367
+ open,
368
+ breakpointActive: sheetActive,
369
+ onOpenChange: handleOpenChange,
370
+ onOpenToggle: useEvent(function () {
371
+ open && sheetActive || setOpen(!open);
372
+ }),
373
+ hasCustomAnchor,
374
+ anchorTo,
375
+ onCustomAnchorAdd: React.useCallback(function () {
376
+ return setHasCustomAnchor(!0);
377
+ }, []),
378
+ onCustomAnchorRemove: React.useCallback(function () {
379
+ return setHasCustomAnchor(!1);
380
+ }, []),
381
+ keepChildrenMounted
382
+ },
383
+ contents = /* @__PURE__ */_jsx(Popper, {
384
+ __scopePopper: __scopePopover || POPOVER_SCOPE,
385
+ stayInFrame: !0,
386
+ ...restProps,
387
+ children: /* @__PURE__ */_jsx(PopoverContext.Provider, {
388
+ scope: __scopePopover,
389
+ ...popoverContext,
390
+ children: /* @__PURE__ */_jsx(PopoverSheetController, {
391
+ onOpenChange: setOpen,
392
+ children
207
393
  })
208
394
  })
209
- })
210
- }, context.contentId)
211
- });
212
- }), dspContentsStyle = {
213
- display: "contents"
214
- }, PopoverClose = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
215
- var { __scopePopover, ...rest } = props, context = usePopoverContext(__scopePopover);
216
- return /* @__PURE__ */ _jsx(YStack, {
217
- ...rest,
218
- ref: forwardedRef,
219
- componentName: "PopoverClose",
220
- onPress: composeEventHandlers(props.onPress, function() {
221
- return context.onOpenChange(!1, "press");
222
- })
223
- });
224
- }), PopoverArrow = PopperArrow.styleable(function(props, forwardedRef) {
225
- var { __scopePopover, ...rest } = props, context = usePopoverContext(__scopePopover), sheetActive = useSheetBreakpointActive(context.sheetBreakpoint);
226
- return sheetActive ? null : /* @__PURE__ */ _jsx(PopperArrow, {
227
- __scopePopper: __scopePopover || POPOVER_SCOPE,
228
- componentName: "PopoverArrow",
229
- ...rest,
230
- ref: forwardedRef
231
- });
232
- }), Popover = withStaticProperties(/* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
233
- var { children, open: openProp, defaultOpen, onOpenChange, __scopePopover, keepChildrenMounted, hoverable, disableFocus, ...restProps } = props, id = React.useId(), { when, AdaptProvider } = useAdaptParent({
234
- Contents: React.useCallback(function() {
235
- return /* @__PURE__ */ _jsx(PortalHost, {
236
- name: `${id}PopoverContents`
237
395
  });
238
- }, [])
239
- }), sheetBreakpoint = when, triggerRef = React.useRef(null), [hasCustomAnchor, setHasCustomAnchor] = React.useState(!1), viaRef = React.useRef(), [open, setOpen] = useControllableState({
240
- prop: openProp,
241
- defaultProp: defaultOpen || !1,
242
- onChange: function(val) {
243
- onOpenChange?.(val, viaRef.current);
244
- }
245
- }), handleOpenChange = useEvent(function(val, via) {
246
- viaRef.current = via, setOpen(val);
247
- }), sheetActive = useSheetBreakpointActive(sheetBreakpoint), floatingContext = useFloatingContext({
248
- open,
249
- setOpen: handleOpenChange,
250
- disable: sheetActive,
251
- hoverable,
252
- disableFocus
253
- }), [anchorTo, setAnchorToRaw] = React.useState(), setAnchorTo = createShallowSetState(setAnchorToRaw);
254
- React.useImperativeHandle(forwardedRef, function() {
255
- return {
256
- anchorTo: setAnchorTo,
257
- toggle: function() {
258
- return setOpen(function(prev) {
259
- return !prev;
260
- });
261
- },
262
- open: function() {
263
- return setOpen(!0);
264
- },
265
- close: function() {
266
- return setOpen(!1);
267
- },
268
- setOpen
269
- };
270
- });
271
- var popoverContext = {
272
- id,
273
- sheetBreakpoint,
274
- contentId: React.useId(),
275
- triggerRef,
276
- open,
277
- breakpointActive: sheetActive,
278
- onOpenChange: handleOpenChange,
279
- onOpenToggle: useEvent(function() {
280
- open && sheetActive || setOpen(!open);
281
- }),
282
- hasCustomAnchor,
283
- anchorTo,
284
- onCustomAnchorAdd: React.useCallback(function() {
285
- return setHasCustomAnchor(!0);
286
- }, []),
287
- onCustomAnchorRemove: React.useCallback(function() {
288
- return setHasCustomAnchor(!1);
289
- }, []),
290
- keepChildrenMounted
291
- }, contents = /* @__PURE__ */ _jsx(Popper, {
292
- __scopePopper: __scopePopover || POPOVER_SCOPE,
293
- stayInFrame: !0,
294
- ...restProps,
295
- children: /* @__PURE__ */ _jsx(PopoverContext.Provider, {
296
- scope: __scopePopover,
297
- ...popoverContext,
298
- children: /* @__PURE__ */ _jsx(PopoverSheetController, {
299
- onOpenChange: setOpen,
300
- children
301
- })
302
- })
303
- });
304
- return /* @__PURE__ */ _jsx(AdaptProvider, {
305
- children: isWeb ? /* @__PURE__ */ _jsx(FloatingOverrideContext.Provider, {
306
- value: floatingContext,
307
- children: contents
308
- }) : contents
396
+ return /* @__PURE__ */_jsx(AdaptProvider, {
397
+ children: isWeb ? /* @__PURE__ */_jsx(FloatingOverrideContext.Provider, {
398
+ value: floatingContext,
399
+ children: contents
400
+ }) : contents
401
+ });
402
+ }), {
403
+ Anchor: PopoverAnchor,
404
+ Arrow: PopoverArrow,
405
+ Trigger: PopoverTrigger,
406
+ Content: PopoverContent,
407
+ Close: PopoverClose,
408
+ Adapt,
409
+ ScrollView,
410
+ Sheet: Sheet.Controlled
309
411
  });
310
- }), {
311
- Anchor: PopoverAnchor,
312
- Arrow: PopoverArrow,
313
- Trigger: PopoverTrigger,
314
- Content: PopoverContent,
315
- Close: PopoverClose,
316
- Adapt,
317
- ScrollView,
318
- Sheet: Sheet.Controlled
319
- });
320
412
  function getState(open) {
321
413
  return open ? "open" : "closed";
322
414
  }
323
- var PopoverSheetController = function(param) {
324
- var { __scopePopover, ...props } = param, context = usePopoverContext(__scopePopover), showSheet = useShowPopoverSheet(context), breakpointActive = context.breakpointActive, getShowSheet = useGet(showSheet);
325
- return /* @__PURE__ */ _jsx(SheetController, {
326
- onOpenChange: function(val) {
327
- if (getShowSheet()) {
328
- var _props_onOpenChange;
329
- (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 || _props_onOpenChange.call(props, val);
330
- }
331
- },
332
- open: context.open,
333
- hidden: breakpointActive === !1,
334
- children: props.children
335
- });
336
- }, useSheetBreakpointActive = function(breakpoint) {
337
- var media = useMedia();
338
- return typeof breakpoint == "boolean" || !breakpoint ? !!breakpoint : media[breakpoint];
339
- }, useShowPopoverSheet = function(context) {
340
- var breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
341
- return context.open === !1 ? !1 : breakpointActive;
342
- };
343
- export {
344
- Popover,
345
- PopoverAnchor,
346
- PopoverArrow,
347
- PopoverClose,
348
- PopoverContent,
349
- PopoverContext,
350
- PopoverTrigger,
351
- usePopoverContext
352
- };
353
- //# sourceMappingURL=Popover.js.map
415
+ var PopoverSheetController = function (param) {
416
+ var {
417
+ __scopePopover,
418
+ ...props
419
+ } = param,
420
+ context = usePopoverContext(__scopePopover),
421
+ showSheet = useShowPopoverSheet(context),
422
+ breakpointActive = context.breakpointActive,
423
+ getShowSheet = useGet(showSheet);
424
+ return /* @__PURE__ */_jsx(SheetController, {
425
+ onOpenChange: function (val) {
426
+ if (getShowSheet()) {
427
+ var _props_onOpenChange;
428
+ (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 || _props_onOpenChange.call(props, val);
429
+ }
430
+ },
431
+ open: context.open,
432
+ hidden: breakpointActive === !1,
433
+ children: props.children
434
+ });
435
+ },
436
+ useSheetBreakpointActive = function (breakpoint) {
437
+ var media = useMedia();
438
+ return typeof breakpoint == "boolean" || !breakpoint ? !!breakpoint : media[breakpoint];
439
+ },
440
+ useShowPopoverSheet = function (context) {
441
+ var breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
442
+ return context.open === !1 ? !1 : breakpointActive;
443
+ };
444
+ export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverContext, PopoverTrigger, usePopoverContext };
445
+ //# sourceMappingURL=Popover.native.js.map