@tamagui/popover 1.0.1-beta.108 → 1.0.1-beta.111
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 +55 -84
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/Popover.js +54 -86
- package/dist/esm/Popover.js.map +2 -2
- package/dist/jsx/Popover.js +1 -1
- package/dist/jsx/Popover.js.map +2 -2
- package/package.json +14 -14
- package/src/Popover.tsx +2 -0
- package/types/Popover.d.ts.map +1 -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 });
|
|
@@ -84,7 +56,7 @@ const [PopoverProviderInternal, usePopoverInternalContext] = createPopoverContex
|
|
|
84
56
|
const __PopoverProviderInternal = PopoverProviderInternal;
|
|
85
57
|
const ANCHOR_NAME = "PopoverAnchor";
|
|
86
58
|
const PopoverAnchor = React.forwardRef((props, forwardedRef) => {
|
|
87
|
-
const
|
|
59
|
+
const { __scopePopover, ...anchorProps } = props;
|
|
88
60
|
const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover);
|
|
89
61
|
const popperScope = usePopoverScope(__scopePopover);
|
|
90
62
|
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
|
|
@@ -92,34 +64,37 @@ const PopoverAnchor = React.forwardRef((props, forwardedRef) => {
|
|
|
92
64
|
onCustomAnchorAdd();
|
|
93
65
|
return () => onCustomAnchorRemove();
|
|
94
66
|
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
|
|
95
|
-
return /* @__PURE__ */ React.createElement(import_popper.PopperAnchor,
|
|
67
|
+
return /* @__PURE__ */ React.createElement(import_popper.PopperAnchor, {
|
|
68
|
+
...popperScope,
|
|
69
|
+
...anchorProps,
|
|
96
70
|
ref: forwardedRef
|
|
97
|
-
})
|
|
71
|
+
});
|
|
98
72
|
});
|
|
99
73
|
PopoverAnchor.displayName = ANCHOR_NAME;
|
|
100
74
|
const TRIGGER_NAME = "PopoverTrigger";
|
|
101
75
|
const PopoverTrigger = React.forwardRef((props, forwardedRef) => {
|
|
102
|
-
const
|
|
76
|
+
const { __scopePopover, ...triggerProps } = props;
|
|
103
77
|
const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover);
|
|
104
78
|
const popperScope = usePopoverScope(__scopePopover);
|
|
105
79
|
const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
|
106
|
-
const trigger = /* @__PURE__ */ React.createElement(import_stacks.YStack,
|
|
80
|
+
const trigger = /* @__PURE__ */ React.createElement(import_stacks.YStack, {
|
|
107
81
|
"aria-haspopup": "dialog",
|
|
108
82
|
"aria-expanded": context.open,
|
|
109
83
|
"aria-controls": context.contentId,
|
|
110
|
-
"data-state": getState(context.open)
|
|
111
|
-
|
|
84
|
+
"data-state": getState(context.open),
|
|
85
|
+
...triggerProps,
|
|
112
86
|
ref: composedTriggerRef,
|
|
113
87
|
onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
|
|
114
|
-
})
|
|
115
|
-
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React.createElement(import_popper.PopperAnchor,
|
|
116
|
-
asChild: true
|
|
117
|
-
|
|
88
|
+
});
|
|
89
|
+
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React.createElement(import_popper.PopperAnchor, {
|
|
90
|
+
asChild: true,
|
|
91
|
+
...popperScope
|
|
92
|
+
}, trigger);
|
|
118
93
|
});
|
|
119
94
|
PopoverTrigger.displayName = TRIGGER_NAME;
|
|
120
95
|
const CONTENT_NAME = "PopoverContent";
|
|
121
96
|
const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
122
|
-
const
|
|
97
|
+
const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = props;
|
|
123
98
|
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
124
99
|
const contentRef = React.useRef(null);
|
|
125
100
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
@@ -136,16 +111,18 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
136
111
|
name: themeName
|
|
137
112
|
}, /* @__PURE__ */ React.createElement(import_remove_scroll.RemoveScroll, {
|
|
138
113
|
enabled: disableRemoveScroll ? false : context.open,
|
|
139
|
-
allowPinchZoom
|
|
140
|
-
|
|
114
|
+
allowPinchZoom,
|
|
115
|
+
removeScrollBar: false
|
|
116
|
+
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, {
|
|
117
|
+
...contentModalProps,
|
|
141
118
|
ref: composedRefs,
|
|
142
119
|
trapFocus: trapFocus ?? context.open,
|
|
143
120
|
disableOutsidePointerEvents: true,
|
|
144
121
|
onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
145
|
-
var
|
|
122
|
+
var _a;
|
|
146
123
|
event.preventDefault();
|
|
147
124
|
if (!isRightClickOutsideRef.current)
|
|
148
|
-
(
|
|
125
|
+
(_a = context.triggerRef.current) == null ? void 0 : _a.focus();
|
|
149
126
|
}),
|
|
150
127
|
onPointerDownOutside: (0, import_core.composeEventHandlers)(props.onPointerDownOutside, (event) => {
|
|
151
128
|
const originalEvent = event.detail.originalEvent;
|
|
@@ -154,10 +131,10 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
154
131
|
isRightClickOutsideRef.current = isRightClick;
|
|
155
132
|
}, { checkDefaultPrevented: false }),
|
|
156
133
|
onFocusOutside: (0, import_core.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
157
|
-
}))))
|
|
134
|
+
}))));
|
|
158
135
|
});
|
|
159
136
|
const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
160
|
-
const
|
|
137
|
+
const {
|
|
161
138
|
__scopePopover,
|
|
162
139
|
trapFocus,
|
|
163
140
|
onOpenAutoFocus,
|
|
@@ -167,29 +144,20 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
167
144
|
onPointerDownOutside,
|
|
168
145
|
onFocusOutside,
|
|
169
146
|
onInteractOutside,
|
|
170
|
-
children
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
"trapFocus",
|
|
174
|
-
"onOpenAutoFocus",
|
|
175
|
-
"onCloseAutoFocus",
|
|
176
|
-
"disableOutsidePointerEvents",
|
|
177
|
-
"onEscapeKeyDown",
|
|
178
|
-
"onPointerDownOutside",
|
|
179
|
-
"onFocusOutside",
|
|
180
|
-
"onInteractOutside",
|
|
181
|
-
"children"
|
|
182
|
-
]);
|
|
147
|
+
children,
|
|
148
|
+
...contentProps
|
|
149
|
+
} = props;
|
|
183
150
|
const popperScope = usePopoverScope(__scopePopover);
|
|
184
151
|
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
185
|
-
return /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(import_popper.PopperContent,
|
|
152
|
+
return /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(import_popper.PopperContent, {
|
|
186
153
|
key: "popper-content",
|
|
187
154
|
"data-state": getState(context.open),
|
|
188
155
|
id: context.contentId,
|
|
189
|
-
pointerEvents: "auto"
|
|
190
|
-
|
|
156
|
+
pointerEvents: "auto",
|
|
157
|
+
...popperScope,
|
|
158
|
+
...contentProps,
|
|
191
159
|
ref: forwardedRef
|
|
192
|
-
}
|
|
160
|
+
}, trapFocus === false ? children : /* @__PURE__ */ React.createElement(import_focus_scope.FocusScope, {
|
|
193
161
|
loop: true,
|
|
194
162
|
trapped: trapFocus ?? context.open,
|
|
195
163
|
onMountAutoFocus: onOpenAutoFocus,
|
|
@@ -200,37 +168,35 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
200
168
|
});
|
|
201
169
|
const CLOSE_NAME = "PopoverClose";
|
|
202
170
|
const PopoverClose = React.forwardRef((props, forwardedRef) => {
|
|
203
|
-
const
|
|
171
|
+
const { __scopePopover, ...closeProps } = props;
|
|
204
172
|
const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover);
|
|
205
|
-
return /* @__PURE__ */ React.createElement(import_stacks.YStack,
|
|
173
|
+
return /* @__PURE__ */ React.createElement(import_stacks.YStack, {
|
|
174
|
+
...closeProps,
|
|
206
175
|
ref: forwardedRef,
|
|
207
176
|
onPress: (0, import_core.composeEventHandlers)(props.onPress, () => context.onOpenChange(false))
|
|
208
|
-
})
|
|
177
|
+
});
|
|
209
178
|
});
|
|
210
179
|
PopoverClose.displayName = CLOSE_NAME;
|
|
211
180
|
const ARROW_NAME = "PopoverArrow";
|
|
212
181
|
const PopoverArrow = React.forwardRef((props, forwardedRef) => {
|
|
213
|
-
const
|
|
182
|
+
const { __scopePopover, ...arrowProps } = props;
|
|
214
183
|
const popperScope = usePopoverScope(__scopePopover);
|
|
215
|
-
return /* @__PURE__ */ React.createElement(import_popper.PopperArrow,
|
|
184
|
+
return /* @__PURE__ */ React.createElement(import_popper.PopperArrow, {
|
|
185
|
+
...popperScope,
|
|
186
|
+
...arrowProps,
|
|
216
187
|
ref: forwardedRef
|
|
217
|
-
})
|
|
188
|
+
});
|
|
218
189
|
});
|
|
219
190
|
PopoverArrow.displayName = ARROW_NAME;
|
|
220
191
|
const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
221
|
-
const
|
|
192
|
+
const {
|
|
222
193
|
__scopePopover,
|
|
223
194
|
children,
|
|
224
195
|
open: openProp,
|
|
225
196
|
defaultOpen,
|
|
226
|
-
onOpenChange
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
"children",
|
|
230
|
-
"open",
|
|
231
|
-
"defaultOpen",
|
|
232
|
-
"onOpenChange"
|
|
233
|
-
]);
|
|
197
|
+
onOpenChange,
|
|
198
|
+
...restProps
|
|
199
|
+
} = props;
|
|
234
200
|
const popperScope = usePopoverScope(__scopePopover);
|
|
235
201
|
const triggerRef = React.useRef(null);
|
|
236
202
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
@@ -240,23 +206,28 @@ const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
|
240
206
|
onChange: onOpenChange
|
|
241
207
|
});
|
|
242
208
|
const useFloatingContext = React.useCallback((props2) => {
|
|
243
|
-
const floating = (0, import_react_dom_interactions.useFloating)(
|
|
209
|
+
const floating = (0, import_react_dom_interactions.useFloating)({
|
|
210
|
+
...props2,
|
|
244
211
|
open,
|
|
245
212
|
onOpenChange: setOpen
|
|
246
|
-
})
|
|
213
|
+
});
|
|
247
214
|
const { getReferenceProps, getFloatingProps } = (0, import_react_dom_interactions.useInteractions)([
|
|
248
215
|
(0, import_react_dom_interactions.useFocus)(floating.context),
|
|
249
216
|
(0, import_react_dom_interactions.useRole)(floating.context, { role: "dialog" }),
|
|
250
217
|
(0, import_react_dom_interactions.useDismiss)(floating.context)
|
|
251
218
|
]);
|
|
252
|
-
return
|
|
219
|
+
return {
|
|
220
|
+
...floating,
|
|
253
221
|
getReferenceProps,
|
|
254
222
|
getFloatingProps
|
|
255
|
-
}
|
|
223
|
+
};
|
|
256
224
|
}, [open, setOpen]);
|
|
257
225
|
return /* @__PURE__ */ React.createElement(import_popper.FloatingOverrideContext.Provider, {
|
|
258
226
|
value: useFloatingContext
|
|
259
|
-
}, /* @__PURE__ */ React.createElement(import_popper.Popper,
|
|
227
|
+
}, /* @__PURE__ */ React.createElement(import_popper.Popper, {
|
|
228
|
+
...popperScope,
|
|
229
|
+
...restProps
|
|
230
|
+
}, /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
|
|
260
231
|
scope: __scopePopover,
|
|
261
232
|
contentId: (0, import_core.useId)(),
|
|
262
233
|
triggerRef,
|
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 {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Popover.js
CHANGED
|
@@ -1,34 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
1
|
import "@tamagui/polyfill-dev";
|
|
33
2
|
import {
|
|
34
3
|
useDismiss,
|
|
@@ -72,7 +41,7 @@ const [PopoverProviderInternal, usePopoverInternalContext] = createPopoverContex
|
|
|
72
41
|
const __PopoverProviderInternal = PopoverProviderInternal;
|
|
73
42
|
const ANCHOR_NAME = "PopoverAnchor";
|
|
74
43
|
const PopoverAnchor = React.forwardRef((props, forwardedRef) => {
|
|
75
|
-
const
|
|
44
|
+
const { __scopePopover, ...anchorProps } = props;
|
|
76
45
|
const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover);
|
|
77
46
|
const popperScope = usePopoverScope(__scopePopover);
|
|
78
47
|
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
|
|
@@ -80,34 +49,37 @@ const PopoverAnchor = React.forwardRef((props, forwardedRef) => {
|
|
|
80
49
|
onCustomAnchorAdd();
|
|
81
50
|
return () => onCustomAnchorRemove();
|
|
82
51
|
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
|
|
83
|
-
return /* @__PURE__ */ React.createElement(PopperAnchor,
|
|
52
|
+
return /* @__PURE__ */ React.createElement(PopperAnchor, {
|
|
53
|
+
...popperScope,
|
|
54
|
+
...anchorProps,
|
|
84
55
|
ref: forwardedRef
|
|
85
|
-
})
|
|
56
|
+
});
|
|
86
57
|
});
|
|
87
58
|
PopoverAnchor.displayName = ANCHOR_NAME;
|
|
88
59
|
const TRIGGER_NAME = "PopoverTrigger";
|
|
89
60
|
const PopoverTrigger = React.forwardRef((props, forwardedRef) => {
|
|
90
|
-
const
|
|
61
|
+
const { __scopePopover, ...triggerProps } = props;
|
|
91
62
|
const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover);
|
|
92
63
|
const popperScope = usePopoverScope(__scopePopover);
|
|
93
64
|
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
|
94
|
-
const trigger = /* @__PURE__ */ React.createElement(YStack,
|
|
65
|
+
const trigger = /* @__PURE__ */ React.createElement(YStack, {
|
|
95
66
|
"aria-haspopup": "dialog",
|
|
96
67
|
"aria-expanded": context.open,
|
|
97
68
|
"aria-controls": context.contentId,
|
|
98
|
-
"data-state": getState(context.open)
|
|
99
|
-
|
|
69
|
+
"data-state": getState(context.open),
|
|
70
|
+
...triggerProps,
|
|
100
71
|
ref: composedTriggerRef,
|
|
101
72
|
onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
|
|
102
|
-
})
|
|
103
|
-
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React.createElement(PopperAnchor,
|
|
104
|
-
asChild: true
|
|
105
|
-
|
|
73
|
+
});
|
|
74
|
+
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ React.createElement(PopperAnchor, {
|
|
75
|
+
asChild: true,
|
|
76
|
+
...popperScope
|
|
77
|
+
}, trigger);
|
|
106
78
|
});
|
|
107
79
|
PopoverTrigger.displayName = TRIGGER_NAME;
|
|
108
80
|
const CONTENT_NAME = "PopoverContent";
|
|
109
81
|
const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
110
|
-
const
|
|
82
|
+
const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = props;
|
|
111
83
|
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
112
84
|
const contentRef = React.useRef(null);
|
|
113
85
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
@@ -124,16 +96,18 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
124
96
|
name: themeName
|
|
125
97
|
}, /* @__PURE__ */ React.createElement(RemoveScroll, {
|
|
126
98
|
enabled: disableRemoveScroll ? false : context.open,
|
|
127
|
-
allowPinchZoom
|
|
128
|
-
|
|
99
|
+
allowPinchZoom,
|
|
100
|
+
removeScrollBar: false
|
|
101
|
+
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, {
|
|
102
|
+
...contentModalProps,
|
|
129
103
|
ref: composedRefs,
|
|
130
104
|
trapFocus: trapFocus ?? context.open,
|
|
131
105
|
disableOutsidePointerEvents: true,
|
|
132
106
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
133
|
-
var
|
|
107
|
+
var _a;
|
|
134
108
|
event.preventDefault();
|
|
135
109
|
if (!isRightClickOutsideRef.current)
|
|
136
|
-
(
|
|
110
|
+
(_a = context.triggerRef.current) == null ? void 0 : _a.focus();
|
|
137
111
|
}),
|
|
138
112
|
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
139
113
|
const originalEvent = event.detail.originalEvent;
|
|
@@ -142,10 +116,10 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
142
116
|
isRightClickOutsideRef.current = isRightClick;
|
|
143
117
|
}, { checkDefaultPrevented: false }),
|
|
144
118
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
145
|
-
}))))
|
|
119
|
+
}))));
|
|
146
120
|
});
|
|
147
121
|
const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
148
|
-
const
|
|
122
|
+
const {
|
|
149
123
|
__scopePopover,
|
|
150
124
|
trapFocus,
|
|
151
125
|
onOpenAutoFocus,
|
|
@@ -155,29 +129,20 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
155
129
|
onPointerDownOutside,
|
|
156
130
|
onFocusOutside,
|
|
157
131
|
onInteractOutside,
|
|
158
|
-
children
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
"trapFocus",
|
|
162
|
-
"onOpenAutoFocus",
|
|
163
|
-
"onCloseAutoFocus",
|
|
164
|
-
"disableOutsidePointerEvents",
|
|
165
|
-
"onEscapeKeyDown",
|
|
166
|
-
"onPointerDownOutside",
|
|
167
|
-
"onFocusOutside",
|
|
168
|
-
"onInteractOutside",
|
|
169
|
-
"children"
|
|
170
|
-
]);
|
|
132
|
+
children,
|
|
133
|
+
...contentProps
|
|
134
|
+
} = props;
|
|
171
135
|
const popperScope = usePopoverScope(__scopePopover);
|
|
172
136
|
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
173
|
-
return /* @__PURE__ */ React.createElement(AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(PopperContent,
|
|
137
|
+
return /* @__PURE__ */ React.createElement(AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(PopperContent, {
|
|
174
138
|
key: "popper-content",
|
|
175
139
|
"data-state": getState(context.open),
|
|
176
140
|
id: context.contentId,
|
|
177
|
-
pointerEvents: "auto"
|
|
178
|
-
|
|
141
|
+
pointerEvents: "auto",
|
|
142
|
+
...popperScope,
|
|
143
|
+
...contentProps,
|
|
179
144
|
ref: forwardedRef
|
|
180
|
-
}
|
|
145
|
+
}, trapFocus === false ? children : /* @__PURE__ */ React.createElement(FocusScope, {
|
|
181
146
|
loop: true,
|
|
182
147
|
trapped: trapFocus ?? context.open,
|
|
183
148
|
onMountAutoFocus: onOpenAutoFocus,
|
|
@@ -188,37 +153,35 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
188
153
|
});
|
|
189
154
|
const CLOSE_NAME = "PopoverClose";
|
|
190
155
|
const PopoverClose = React.forwardRef((props, forwardedRef) => {
|
|
191
|
-
const
|
|
156
|
+
const { __scopePopover, ...closeProps } = props;
|
|
192
157
|
const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover);
|
|
193
|
-
return /* @__PURE__ */ React.createElement(YStack,
|
|
158
|
+
return /* @__PURE__ */ React.createElement(YStack, {
|
|
159
|
+
...closeProps,
|
|
194
160
|
ref: forwardedRef,
|
|
195
161
|
onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
|
|
196
|
-
})
|
|
162
|
+
});
|
|
197
163
|
});
|
|
198
164
|
PopoverClose.displayName = CLOSE_NAME;
|
|
199
165
|
const ARROW_NAME = "PopoverArrow";
|
|
200
166
|
const PopoverArrow = React.forwardRef((props, forwardedRef) => {
|
|
201
|
-
const
|
|
167
|
+
const { __scopePopover, ...arrowProps } = props;
|
|
202
168
|
const popperScope = usePopoverScope(__scopePopover);
|
|
203
|
-
return /* @__PURE__ */ React.createElement(PopperArrow,
|
|
169
|
+
return /* @__PURE__ */ React.createElement(PopperArrow, {
|
|
170
|
+
...popperScope,
|
|
171
|
+
...arrowProps,
|
|
204
172
|
ref: forwardedRef
|
|
205
|
-
})
|
|
173
|
+
});
|
|
206
174
|
});
|
|
207
175
|
PopoverArrow.displayName = ARROW_NAME;
|
|
208
176
|
const Popover = withStaticProperties((props) => {
|
|
209
|
-
const
|
|
177
|
+
const {
|
|
210
178
|
__scopePopover,
|
|
211
179
|
children,
|
|
212
180
|
open: openProp,
|
|
213
181
|
defaultOpen,
|
|
214
|
-
onOpenChange
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
"children",
|
|
218
|
-
"open",
|
|
219
|
-
"defaultOpen",
|
|
220
|
-
"onOpenChange"
|
|
221
|
-
]);
|
|
182
|
+
onOpenChange,
|
|
183
|
+
...restProps
|
|
184
|
+
} = props;
|
|
222
185
|
const popperScope = usePopoverScope(__scopePopover);
|
|
223
186
|
const triggerRef = React.useRef(null);
|
|
224
187
|
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
|
|
@@ -228,23 +191,28 @@ const Popover = withStaticProperties((props) => {
|
|
|
228
191
|
onChange: onOpenChange
|
|
229
192
|
});
|
|
230
193
|
const useFloatingContext = React.useCallback((props2) => {
|
|
231
|
-
const floating = useFloating(
|
|
194
|
+
const floating = useFloating({
|
|
195
|
+
...props2,
|
|
232
196
|
open,
|
|
233
197
|
onOpenChange: setOpen
|
|
234
|
-
})
|
|
198
|
+
});
|
|
235
199
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
236
200
|
useFocus(floating.context),
|
|
237
201
|
useRole(floating.context, { role: "dialog" }),
|
|
238
202
|
useDismiss(floating.context)
|
|
239
203
|
]);
|
|
240
|
-
return
|
|
204
|
+
return {
|
|
205
|
+
...floating,
|
|
241
206
|
getReferenceProps,
|
|
242
207
|
getFloatingProps
|
|
243
|
-
}
|
|
208
|
+
};
|
|
244
209
|
}, [open, setOpen]);
|
|
245
210
|
return /* @__PURE__ */ React.createElement(FloatingOverrideContext.Provider, {
|
|
246
211
|
value: useFloatingContext
|
|
247
|
-
}, /* @__PURE__ */ React.createElement(Popper,
|
|
212
|
+
}, /* @__PURE__ */ React.createElement(Popper, {
|
|
213
|
+
...popperScope,
|
|
214
|
+
...restProps
|
|
215
|
+
}, /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
|
|
248
216
|
scope: __scopePopover,
|
|
249
217
|
contentId: useId(),
|
|
250
218
|
triggerRef,
|
package/dist/esm/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 {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Popover.js
CHANGED
|
@@ -77,7 +77,7 @@ const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
|
77
77
|
if (content)
|
|
78
78
|
return hideOthers(content);
|
|
79
79
|
}, [context.open]);
|
|
80
|
-
return <Portal><Theme name={themeName}><RemoveScroll enabled={disableRemoveScroll ? false : context.open} allowPinchZoom={allowPinchZoom}><PopoverContentImpl {...contentModalProps} ref={composedRefs} trapFocus={trapFocus != null ? trapFocus : context.open} disableOutsidePointerEvents onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
80
|
+
return <Portal><Theme name={themeName}><RemoveScroll enabled={disableRemoveScroll ? false : context.open} allowPinchZoom={allowPinchZoom} removeScrollBar={false}><PopoverContentImpl {...contentModalProps} ref={composedRefs} trapFocus={trapFocus != null ? trapFocus : context.open} disableOutsidePointerEvents onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
81
81
|
var _a;
|
|
82
82
|
event.preventDefault();
|
|
83
83
|
if (!isRightClickOutsideRef.current)
|
package/dist/jsx/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 {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
-
"mappings": "AAEA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;AACA;AACA;AACA;AACA;AAGA,MAAM,eAAe;AAGrB,MAAM,CAAC,sBAAsB,8BAA8B,mBAAmB,cAAc;AAAA,EAC1F;AACF,CAAC;AACM,MAAM,kBAAkB,kBAAkB;AAC1C,MAAM,qBAAqB;AAclC,MAAM,CAAC,yBAAyB,6BAC9B,qBAA0C,YAAY;AAEjD,MAAM,4BAA4B;AAMzC,MAAM,cAAc;AAKb,MAAM,gBAAgB,MAAM,WACjC,CAAC,OAAwC,iBAAiB;AACxD,QAAM,EAAE,mBAAmB,gBAAgB;AAC3C,QAAM,UAAU,0BAA0B,aAAa,cAAc;AACrE,QAAM,cAAc,gBAAgB,cAAc;AAClD,QAAM,EAAE,mBAAmB,yBAAyB;AAEpD,QAAM,UAAU,MAAM;AACpB,sBAAkB;AAClB,WAAO,MAAM,qBAAqB;AAAA,EACpC,GAAG,CAAC,mBAAmB,oBAAoB,CAAC;AAE5C,SAAO,CAAC,iBAAiB,iBAAiB,aAAa,KAAK,cAAc;AAC5E,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,eAAe;AAKd,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,EAAE,mBAAmB,iBAAiB;AAC5C,QAAM,UAAU,0BAA0B,cAAc,cAAc;AACtE,QAAM,cAAc,gBAAgB,cAAc;AAClD,QAAM,qBAAqB,gBAAgB,cAAc,QAAQ,UAAU;AAE3E,QAAM,UACJ,CAAC,OACC,cAAc,SACd,eAAe,QAAQ,MACvB,eAAe,QAAQ,WACvB,YAAY,SAAS,QAAQ,IAAI,OAC7B,cACJ,KAAK,oBACL,SAAS,qBAAqB,MAAM,SAAS,QAAQ,YAAY,GACnE;AAGF,SAAO,QAAQ,kBACb,UAEA,CAAC,aAAa,YAAY,cACvB,QACH,EAFC;AAIL,CACF;AAEA,eAAe,cAAc;AAM7B,MAAM,eAAe;AAgBd,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAA6C,iBAAiB;AAC7D,QAAM,EAAE,gBAAgB,WAAW,wBAAwB,sBAAsB;AACjF,QAAM,UAAU,0BAA0B,cAAc,MAAM,cAAc;AAC5E,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,eAAe,gBAAgB,cAAc,UAAU;AAC7D,QAAM,yBAAyB,MAAM,OAAO,KAAK;AACjD,QAAM,YAAY,aAAa;AAG/B,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAQ;AAAM;AACnB,UAAM,UAAU,WAAW;AAC3B,QAAI;AAAS,aAAO,WAAW,OAAO;AAAA,EACxC,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SACE,CAAC,OACC,CAAC,MAAM,MAAM,WACX,CAAC,aACC,SAAS,sBAAsB,QAAQ,QAAQ,MAC/C,gBAAgB,gBAEhB,CAAC,uBACK,mBACJ,KAAK,cAGL,WAAW,gCAAa,QAAQ,MAChC,4BACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n Props,\n useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n SizeTokens,\n Theme,\n composeEventHandlers,\n useId,\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 createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [\n createPopperScope,\n])\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\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}\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<PopoverTriggerElement, 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 aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\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 disableRemoveScroll?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll, ...contentModalProps } = 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 const themeName = useThemeName()\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 <Portal>\n <Theme name={themeName}>\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom={allowPinchZoom}\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n >\n <PopoverContentImpl\n {...contentModalProps}\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 = 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 </RemoveScroll>\n </Theme>\n </Portal>\n )\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\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, 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 ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\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 {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 </PopperContent>\n )}\n </AnimatePresence>\n )\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, () => context.onOpenChange(false))}\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 * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\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 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 })\n\n const useFloatingContext = React.useCallback(\n (props: Props) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [open, setOpen]\n )\n\n return (\n // @ts-expect-error\n <FloatingOverrideContext.Provider value={useFloatingContext}>\n <Popper {...popperScope} {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n {children}\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popover",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.111",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -22,18 +22,18 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@floating-ui/react-dom-interactions": "^0.5.0",
|
|
25
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/aria-hidden": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/dismissable": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/focus-scope": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/polyfill-dev": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/popper": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/portal": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
25
|
+
"@tamagui/animate-presence": "^1.0.1-beta.111",
|
|
26
|
+
"@tamagui/aria-hidden": "^1.0.1-beta.111",
|
|
27
|
+
"@tamagui/compose-refs": "^1.0.1-beta.111",
|
|
28
|
+
"@tamagui/core": "^1.0.1-beta.111",
|
|
29
|
+
"@tamagui/create-context": "^1.0.1-beta.111",
|
|
30
|
+
"@tamagui/dismissable": "^1.0.1-beta.111",
|
|
31
|
+
"@tamagui/focus-scope": "^1.0.1-beta.111",
|
|
32
|
+
"@tamagui/polyfill-dev": "^1.0.1-beta.111",
|
|
33
|
+
"@tamagui/popper": "^1.0.1-beta.111",
|
|
34
|
+
"@tamagui/portal": "^1.0.1-beta.111",
|
|
35
|
+
"@tamagui/stacks": "^1.0.1-beta.111",
|
|
36
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.111"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": "*",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"react-native": "*"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
44
|
+
"@tamagui/build": "^1.0.1-beta.111",
|
|
45
45
|
"@types/react-dom": "^18.0.3",
|
|
46
46
|
"@types/react-native": "^0.69.2",
|
|
47
47
|
"react": "*",
|
package/src/Popover.tsx
CHANGED
|
@@ -178,6 +178,8 @@ export const PopoverContent = React.forwardRef<PopoverContentTypeElement, Popove
|
|
|
178
178
|
<RemoveScroll
|
|
179
179
|
enabled={disableRemoveScroll ? false : context.open}
|
|
180
180
|
allowPinchZoom={allowPinchZoom}
|
|
181
|
+
// causes lots of bugs on touch web on site
|
|
182
|
+
removeScrollBar={false}
|
|
181
183
|
>
|
|
182
184
|
<PopoverContentImpl
|
|
183
185
|
{...contentModalProps}
|
package/types/Popover.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,uBAAuB,CAAA;AAa9B,OAAO,EACL,UAAU,EAMX,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAc,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAO,EAKL,gBAAgB,EAEhB,kBAAkB,EAClB,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAAgB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AACxE,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAQnC,eAAO,MAAM,eAAe;;CAAsB,CAAA;AAClD,eAAO,MAAM,kBAAkB,+CAA6B,CAAA;AAE5D,aAAK,mBAAmB,GAAG;IACzB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAA;IACjC,YAAY,IAAI,IAAI,CAAA;IACpB,eAAe,EAAE,OAAO,CAAA;IACxB,iBAAiB,IAAI,IAAI,CAAA;IACzB,oBAAoB,IAAI,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAKD,eAAO,MAAM,yBAAyB;;;;;;CAA0B,CAAA;AAQhE,aAAK,oBAAoB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC9C,oBAAY,kBAAkB,GAAG,WAAW,CAAA;AAE5C,eAAO,MAAM,aAAa;;;;;;;;;gDAczB,CAAA;AAUD,aAAK,qBAAqB,GAAG,WAAW,GAAG,IAAI,CAAA;AAC/C,oBAAY,mBAAmB,GAAG,WAAW,CAAA;AAE7C,eAAO,MAAM,cAAc;;;;;;;;;iDA2B1B,CAAA;AAUD,oBAAY,mBAAmB,GAAG,uBAAuB,CAAA;AAIzD,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,uBAAuB,EAAE,6BAA6B,CAAC;IAIpE,cAAc,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAEpD,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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"}
|