@tamagui/popover 1.1.7 → 1.1.8
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 +46 -40
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/esm/Popover.js +53 -39
- package/dist/esm/Popover.js.map +2 -2
- package/dist/jsx/Popover.js +28 -20
- package/dist/jsx/Popover.js.map +2 -2
- package/package.json +17 -17
- package/src/Popover.tsx +66 -40
- package/types/Popover.d.ts +4 -3
- package/types/useFloating.d.ts +23 -0
- package/src/floating.native.ts +0 -18
- package/src/floating.ts +0 -8
package/dist/cjs/Popover.js
CHANGED
|
@@ -37,12 +37,14 @@ __export(Popover_exports, {
|
|
|
37
37
|
module.exports = __toCommonJS(Popover_exports);
|
|
38
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
39
|
var import_polyfill_dev = require("@tamagui/polyfill-dev");
|
|
40
|
+
var import_react_dom_interactions = require("@floating-ui/react-dom-interactions");
|
|
40
41
|
var import_adapt = require("@tamagui/adapt");
|
|
41
42
|
var import_animate_presence = require("@tamagui/animate-presence");
|
|
42
43
|
var import_aria_hidden = require("@tamagui/aria-hidden");
|
|
43
44
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
44
45
|
var import_core = require("@tamagui/core");
|
|
45
46
|
var import_create_context = require("@tamagui/create-context");
|
|
47
|
+
var import_floating = require("@tamagui/floating");
|
|
46
48
|
var import_focus_scope = require("@tamagui/focus-scope");
|
|
47
49
|
var import_popper = require("@tamagui/popper");
|
|
48
50
|
var import_portal = require("@tamagui/portal");
|
|
@@ -52,7 +54,6 @@ var import_stacks = require("@tamagui/stacks");
|
|
|
52
54
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
53
55
|
var React = __toESM(require("react"));
|
|
54
56
|
var import_react_native = require("react-native");
|
|
55
|
-
var import_floating = require("./floating");
|
|
56
57
|
const POPOVER_NAME = "Popover";
|
|
57
58
|
const [createPopoverContext, createPopoverScopeInternal] = (0, import_create_context.createContextScope)(
|
|
58
59
|
POPOVER_NAME,
|
|
@@ -156,9 +157,9 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
156
157
|
});
|
|
157
158
|
function PopoverContentPortal(props) {
|
|
158
159
|
const themeName = (0, import_core.useThemeName)();
|
|
160
|
+
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
159
161
|
let contents = props.children;
|
|
160
162
|
if (import_react_native.Platform.OS === "android") {
|
|
161
|
-
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
162
163
|
const popperContext = (0, import_popper.usePopperContext)(CONTENT_NAME, context.popperScope);
|
|
163
164
|
contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperProvider, {
|
|
164
165
|
...popperContext,
|
|
@@ -170,12 +171,22 @@ function PopoverContentPortal(props) {
|
|
|
170
171
|
})
|
|
171
172
|
});
|
|
172
173
|
}
|
|
174
|
+
const zIndex = props.zIndex ?? 1e3;
|
|
173
175
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal, {
|
|
174
|
-
zIndex
|
|
175
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.
|
|
176
|
+
zIndex,
|
|
177
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Theme, {
|
|
176
178
|
forceClassName: true,
|
|
177
179
|
name: themeName,
|
|
178
|
-
children:
|
|
180
|
+
children: [
|
|
181
|
+
!!context.open && !context.breakpointActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
|
|
182
|
+
fullscreen: true,
|
|
183
|
+
onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
|
|
184
|
+
}),
|
|
185
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Stack, {
|
|
186
|
+
zIndex: zIndex + 1,
|
|
187
|
+
children: contents
|
|
188
|
+
})
|
|
189
|
+
]
|
|
179
190
|
})
|
|
180
191
|
});
|
|
181
192
|
}
|
|
@@ -196,8 +207,7 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
196
207
|
} = props;
|
|
197
208
|
const popperScope = usePopoverScope(__scopePopover);
|
|
198
209
|
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
199
|
-
|
|
200
|
-
if (showSheet) {
|
|
210
|
+
if (context.breakpointActive) {
|
|
201
211
|
const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
|
|
202
212
|
if (React.isValidElement(child)) {
|
|
203
213
|
if (child.type === PopoverScrollView) {
|
|
@@ -216,9 +226,9 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
216
226
|
"data-state": getState(context.open),
|
|
217
227
|
id: context.contentId,
|
|
218
228
|
pointerEvents: "auto",
|
|
229
|
+
ref: forwardedRef,
|
|
219
230
|
...popperScope,
|
|
220
231
|
...contentProps,
|
|
221
|
-
ref: forwardedRef,
|
|
222
232
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
|
|
223
233
|
enabled: disableRemoveScroll ? false : context.open,
|
|
224
234
|
allowPinchZoom: true,
|
|
@@ -231,13 +241,13 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
231
241
|
trapped: trapFocus ?? context.open,
|
|
232
242
|
onMountAutoFocus: onOpenAutoFocus,
|
|
233
243
|
onUnmountAutoFocus: onCloseAutoFocus,
|
|
234
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
244
|
+
children: import_core.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
235
245
|
style: { display: "contents" },
|
|
236
246
|
children
|
|
237
|
-
})
|
|
247
|
+
}) : children
|
|
238
248
|
})
|
|
239
249
|
})
|
|
240
|
-
},
|
|
250
|
+
}, context.contentId)
|
|
241
251
|
});
|
|
242
252
|
});
|
|
243
253
|
const CLOSE_NAME = "PopoverClose";
|
|
@@ -259,9 +269,6 @@ PopoverClose.displayName = CLOSE_NAME;
|
|
|
259
269
|
const ARROW_NAME = "PopoverArrow";
|
|
260
270
|
const PopoverArrow = React.forwardRef(
|
|
261
271
|
(props, forwardedRef) => {
|
|
262
|
-
if (!import_core.isWeb) {
|
|
263
|
-
return null;
|
|
264
|
-
}
|
|
265
272
|
const { __scopePopover, ...arrowProps } = props;
|
|
266
273
|
const popperScope = usePopoverScope(__scopePopover);
|
|
267
274
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.PopperArrow, {
|
|
@@ -310,14 +317,14 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
310
317
|
const breakpointActive = useSheetBreakpointActive(sheetBreakpoint);
|
|
311
318
|
const useFloatingContext = React.useCallback(
|
|
312
319
|
(props2) => {
|
|
313
|
-
const floating = (0,
|
|
320
|
+
const floating = (0, import_react_dom_interactions.useFloating)({
|
|
314
321
|
...props2,
|
|
315
322
|
open,
|
|
316
323
|
onOpenChange: setOpen
|
|
317
324
|
});
|
|
318
|
-
const { getReferenceProps, getFloatingProps } = (0,
|
|
319
|
-
(0,
|
|
320
|
-
(0,
|
|
325
|
+
const { getReferenceProps, getFloatingProps } = (0, import_react_dom_interactions.useInteractions)([
|
|
326
|
+
(0, import_react_dom_interactions.useRole)(floating.context, { role: "dialog" }),
|
|
327
|
+
(0, import_react_dom_interactions.useDismiss)(floating.context, {
|
|
321
328
|
enabled: !breakpointActive
|
|
322
329
|
})
|
|
323
330
|
]);
|
|
@@ -337,6 +344,7 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
337
344
|
contentId: (0, import_core.useId)(),
|
|
338
345
|
triggerRef,
|
|
339
346
|
open,
|
|
347
|
+
breakpointActive,
|
|
340
348
|
onOpenChange: setOpen,
|
|
341
349
|
onOpenToggle: (0, import_core.useEvent)(() => {
|
|
342
350
|
if (open && breakpointActive) {
|
|
@@ -348,24 +356,25 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
348
356
|
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
349
357
|
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
350
358
|
};
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
onOpenChange: setOpen,
|
|
362
|
-
__scopePopover,
|
|
363
|
-
children
|
|
364
|
-
})
|
|
365
|
-
})
|
|
359
|
+
const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popper.Popper, {
|
|
360
|
+
...popperScope,
|
|
361
|
+
stayInFrame: true,
|
|
362
|
+
...restProps,
|
|
363
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverProviderInternal, {
|
|
364
|
+
...popoverContext,
|
|
365
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverSheetController, {
|
|
366
|
+
onOpenChange: setOpen,
|
|
367
|
+
__scopePopover,
|
|
368
|
+
children
|
|
366
369
|
})
|
|
367
370
|
})
|
|
368
371
|
});
|
|
372
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AdaptProvider, {
|
|
373
|
+
children: import_core.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_floating.FloatingOverrideContext.Provider, {
|
|
374
|
+
value: useFloatingContext,
|
|
375
|
+
children: contents
|
|
376
|
+
}) : contents
|
|
377
|
+
});
|
|
369
378
|
},
|
|
370
379
|
{
|
|
371
380
|
Anchor: PopoverAnchor,
|
|
@@ -388,7 +397,7 @@ const PopoverSheetController = (props) => {
|
|
|
388
397
|
props.__scopePopover
|
|
389
398
|
);
|
|
390
399
|
const showSheet = useShowPopoverSheet(context);
|
|
391
|
-
const breakpointActive =
|
|
400
|
+
const breakpointActive = context.breakpointActive;
|
|
392
401
|
const getShowSheet = (0, import_core.useGet)(showSheet);
|
|
393
402
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
|
|
394
403
|
onOpenChange: (val) => {
|
|
@@ -403,15 +412,12 @@ const PopoverSheetController = (props) => {
|
|
|
403
412
|
};
|
|
404
413
|
const useSheetBreakpointActive = (breakpoint) => {
|
|
405
414
|
const media = (0, import_core.useMedia)();
|
|
406
|
-
if (!breakpoint)
|
|
407
|
-
return
|
|
408
|
-
|
|
409
|
-
return true;
|
|
415
|
+
if (typeof breakpoint === "boolean" || !breakpoint) {
|
|
416
|
+
return !!breakpoint;
|
|
417
|
+
}
|
|
410
418
|
return media[breakpoint];
|
|
411
419
|
};
|
|
412
420
|
const useShowPopoverSheet = (context) => {
|
|
413
|
-
if (!import_core.isWeb)
|
|
414
|
-
return true;
|
|
415
421
|
const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
|
|
416
422
|
return context.open === false ? false : breakpointActive;
|
|
417
423
|
};
|
package/dist/cjs/Popover.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popover.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<\n PopoverContentTypeElement,\n PopoverContentTypeProps\n>((props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentModalProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n})\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme forceClassName name={themeName}>\n {contents}\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n // we dont show on native and i'm getting an err\n if (!isWeb) {\n return null\n }\n\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}SheetContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n // useFocus(floating.context, {\n // enabled: !breakpointActive,\n // keyboardOnly: true,\n // }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: useId(),\n triggerRef,\n open,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n return (\n <AdaptProvider>\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController\n onOpenChange={setOpen}\n __scopePopover={__scopePopover}\n >\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n </AdaptProvider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (!breakpoint) return false\n if (breakpoint === true) return true\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport type { UseFloatingProps } from '@floating-ui/react-dom-interactions'\nimport {\n useDismiss,\n useFloating,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n GestureReponderEvent,\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { SizableStack, XStack, YStack, YStackProps, ZStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { useEffect } from 'react'\nimport {\n GestureResponderEvent,\n Platform,\n ScrollView,\n ScrollViewProps,\n View,\n} from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<\n PopoverContentTypeElement,\n PopoverContentTypeProps\n>((props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentModalProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n})\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}SheetContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n // Custom floating context to override the Popper on web\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n // useFocus(floating.context, {\n // enabled: !breakpointActive,\n // keyboardOnly: true,\n // }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/Popover.js
CHANGED
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import "@tamagui/polyfill-dev";
|
|
3
|
+
import {
|
|
4
|
+
useDismiss,
|
|
5
|
+
useFloating,
|
|
6
|
+
useInteractions,
|
|
7
|
+
useRole
|
|
8
|
+
} from "@floating-ui/react-dom-interactions";
|
|
3
9
|
import { Adapt, useAdaptParent } from "@tamagui/adapt";
|
|
4
10
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
5
11
|
import { hideOthers } from "@tamagui/aria-hidden";
|
|
6
12
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
7
13
|
import {
|
|
14
|
+
Stack,
|
|
8
15
|
Theme,
|
|
9
16
|
composeEventHandlers,
|
|
10
17
|
isWeb,
|
|
@@ -16,9 +23,9 @@ import {
|
|
|
16
23
|
withStaticProperties
|
|
17
24
|
} from "@tamagui/core";
|
|
18
25
|
import { createContextScope } from "@tamagui/create-context";
|
|
26
|
+
import { FloatingOverrideContext } from "@tamagui/floating";
|
|
19
27
|
import { FocusScope } from "@tamagui/focus-scope";
|
|
20
28
|
import {
|
|
21
|
-
FloatingOverrideContext,
|
|
22
29
|
Popper,
|
|
23
30
|
PopperAnchor,
|
|
24
31
|
PopperArrow,
|
|
@@ -33,8 +40,10 @@ import { ControlledSheet, SheetController } from "@tamagui/sheet";
|
|
|
33
40
|
import { YStack } from "@tamagui/stacks";
|
|
34
41
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
35
42
|
import * as React from "react";
|
|
36
|
-
import {
|
|
37
|
-
|
|
43
|
+
import {
|
|
44
|
+
Platform,
|
|
45
|
+
ScrollView
|
|
46
|
+
} from "react-native";
|
|
38
47
|
const POPOVER_NAME = "Popover";
|
|
39
48
|
const [createPopoverContext, createPopoverScopeInternal] = createContextScope(
|
|
40
49
|
POPOVER_NAME,
|
|
@@ -138,9 +147,9 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
138
147
|
});
|
|
139
148
|
function PopoverContentPortal(props) {
|
|
140
149
|
const themeName = useThemeName();
|
|
150
|
+
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
141
151
|
let contents = props.children;
|
|
142
152
|
if (Platform.OS === "android") {
|
|
143
|
-
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
144
153
|
const popperContext = usePopperContext(CONTENT_NAME, context.popperScope);
|
|
145
154
|
contents = /* @__PURE__ */ jsx(PopperProvider, {
|
|
146
155
|
...popperContext,
|
|
@@ -152,12 +161,22 @@ function PopoverContentPortal(props) {
|
|
|
152
161
|
})
|
|
153
162
|
});
|
|
154
163
|
}
|
|
164
|
+
const zIndex = props.zIndex ?? 1e3;
|
|
155
165
|
return /* @__PURE__ */ jsx(Portal, {
|
|
156
|
-
zIndex
|
|
157
|
-
children: /* @__PURE__ */
|
|
166
|
+
zIndex,
|
|
167
|
+
children: /* @__PURE__ */ jsxs(Theme, {
|
|
158
168
|
forceClassName: true,
|
|
159
169
|
name: themeName,
|
|
160
|
-
children:
|
|
170
|
+
children: [
|
|
171
|
+
!!context.open && !context.breakpointActive && /* @__PURE__ */ jsx(YStack, {
|
|
172
|
+
fullscreen: true,
|
|
173
|
+
onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
|
|
174
|
+
}),
|
|
175
|
+
/* @__PURE__ */ jsx(Stack, {
|
|
176
|
+
zIndex: zIndex + 1,
|
|
177
|
+
children: contents
|
|
178
|
+
})
|
|
179
|
+
]
|
|
161
180
|
})
|
|
162
181
|
});
|
|
163
182
|
}
|
|
@@ -178,8 +197,7 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
178
197
|
} = props;
|
|
179
198
|
const popperScope = usePopoverScope(__scopePopover);
|
|
180
199
|
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
181
|
-
|
|
182
|
-
if (showSheet) {
|
|
200
|
+
if (context.breakpointActive) {
|
|
183
201
|
const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {
|
|
184
202
|
if (React.isValidElement(child)) {
|
|
185
203
|
if (child.type === PopoverScrollView) {
|
|
@@ -198,9 +216,9 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
198
216
|
"data-state": getState(context.open),
|
|
199
217
|
id: context.contentId,
|
|
200
218
|
pointerEvents: "auto",
|
|
219
|
+
ref: forwardedRef,
|
|
201
220
|
...popperScope,
|
|
202
221
|
...contentProps,
|
|
203
|
-
ref: forwardedRef,
|
|
204
222
|
children: /* @__PURE__ */ jsx(RemoveScroll, {
|
|
205
223
|
enabled: disableRemoveScroll ? false : context.open,
|
|
206
224
|
allowPinchZoom: true,
|
|
@@ -213,13 +231,13 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
213
231
|
trapped: trapFocus ?? context.open,
|
|
214
232
|
onMountAutoFocus: onOpenAutoFocus,
|
|
215
233
|
onUnmountAutoFocus: onCloseAutoFocus,
|
|
216
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
234
|
+
children: isWeb ? /* @__PURE__ */ jsx("div", {
|
|
217
235
|
style: { display: "contents" },
|
|
218
236
|
children
|
|
219
|
-
})
|
|
237
|
+
}) : children
|
|
220
238
|
})
|
|
221
239
|
})
|
|
222
|
-
},
|
|
240
|
+
}, context.contentId)
|
|
223
241
|
});
|
|
224
242
|
});
|
|
225
243
|
const CLOSE_NAME = "PopoverClose";
|
|
@@ -241,9 +259,6 @@ PopoverClose.displayName = CLOSE_NAME;
|
|
|
241
259
|
const ARROW_NAME = "PopoverArrow";
|
|
242
260
|
const PopoverArrow = React.forwardRef(
|
|
243
261
|
(props, forwardedRef) => {
|
|
244
|
-
if (!isWeb) {
|
|
245
|
-
return null;
|
|
246
|
-
}
|
|
247
262
|
const { __scopePopover, ...arrowProps } = props;
|
|
248
263
|
const popperScope = usePopoverScope(__scopePopover);
|
|
249
264
|
return /* @__PURE__ */ jsx(PopperArrow, {
|
|
@@ -319,6 +334,7 @@ const Popover = withStaticProperties(
|
|
|
319
334
|
contentId: useId(),
|
|
320
335
|
triggerRef,
|
|
321
336
|
open,
|
|
337
|
+
breakpointActive,
|
|
322
338
|
onOpenChange: setOpen,
|
|
323
339
|
onOpenToggle: useEvent(() => {
|
|
324
340
|
if (open && breakpointActive) {
|
|
@@ -330,24 +346,25 @@ const Popover = withStaticProperties(
|
|
|
330
346
|
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
331
347
|
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
332
348
|
};
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
onOpenChange: setOpen,
|
|
344
|
-
__scopePopover,
|
|
345
|
-
children
|
|
346
|
-
})
|
|
347
|
-
})
|
|
349
|
+
const contents = /* @__PURE__ */ jsx(Popper, {
|
|
350
|
+
...popperScope,
|
|
351
|
+
stayInFrame: true,
|
|
352
|
+
...restProps,
|
|
353
|
+
children: /* @__PURE__ */ jsx(PopoverProviderInternal, {
|
|
354
|
+
...popoverContext,
|
|
355
|
+
children: /* @__PURE__ */ jsx(PopoverSheetController, {
|
|
356
|
+
onOpenChange: setOpen,
|
|
357
|
+
__scopePopover,
|
|
358
|
+
children
|
|
348
359
|
})
|
|
349
360
|
})
|
|
350
361
|
});
|
|
362
|
+
return /* @__PURE__ */ jsx(AdaptProvider, {
|
|
363
|
+
children: isWeb ? /* @__PURE__ */ jsx(FloatingOverrideContext.Provider, {
|
|
364
|
+
value: useFloatingContext,
|
|
365
|
+
children: contents
|
|
366
|
+
}) : contents
|
|
367
|
+
});
|
|
351
368
|
},
|
|
352
369
|
{
|
|
353
370
|
Anchor: PopoverAnchor,
|
|
@@ -370,7 +387,7 @@ const PopoverSheetController = (props) => {
|
|
|
370
387
|
props.__scopePopover
|
|
371
388
|
);
|
|
372
389
|
const showSheet = useShowPopoverSheet(context);
|
|
373
|
-
const breakpointActive =
|
|
390
|
+
const breakpointActive = context.breakpointActive;
|
|
374
391
|
const getShowSheet = useGet(showSheet);
|
|
375
392
|
return /* @__PURE__ */ jsx(SheetController, {
|
|
376
393
|
onOpenChange: (val) => {
|
|
@@ -385,15 +402,12 @@ const PopoverSheetController = (props) => {
|
|
|
385
402
|
};
|
|
386
403
|
const useSheetBreakpointActive = (breakpoint) => {
|
|
387
404
|
const media = useMedia();
|
|
388
|
-
if (!breakpoint)
|
|
389
|
-
return
|
|
390
|
-
|
|
391
|
-
return true;
|
|
405
|
+
if (typeof breakpoint === "boolean" || !breakpoint) {
|
|
406
|
+
return !!breakpoint;
|
|
407
|
+
}
|
|
392
408
|
return media[breakpoint];
|
|
393
409
|
};
|
|
394
410
|
const useShowPopoverSheet = (context) => {
|
|
395
|
-
if (!isWeb)
|
|
396
|
-
return true;
|
|
397
411
|
const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint);
|
|
398
412
|
return context.open === false ? false : breakpointActive;
|
|
399
413
|
};
|