@tamagui/popover 1.0.1-beta.93 → 1.0.1-beta.96
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 +36 -58
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/esm/Popover.js +36 -58
- package/dist/esm/Popover.js.map +2 -2
- package/dist/jsx/Popover.js +19 -41
- package/dist/jsx/Popover.js.map +2 -2
- package/package.json +15 -11
- package/src/Popover.tsx +97 -223
- package/types/Popover.d.ts +35 -45
- package/types/Popover.d.ts.map +1 -1
package/dist/cjs/Popover.js
CHANGED
|
@@ -66,11 +66,14 @@ var import_animate_presence = require("@tamagui/animate-presence");
|
|
|
66
66
|
var import_compose_refs = require("@tamagui/compose-refs");
|
|
67
67
|
var import_core = require("@tamagui/core");
|
|
68
68
|
var import_create_context = require("@tamagui/create-context");
|
|
69
|
+
var import_focus_scope = require("@tamagui/focus-scope");
|
|
69
70
|
var import_popper = require("@tamagui/popper");
|
|
70
71
|
var import_portal = require("@tamagui/portal");
|
|
71
72
|
var import_stacks = require("@tamagui/stacks");
|
|
72
73
|
var import_use_controllable_state = require("@tamagui/use-controllable-state");
|
|
74
|
+
var import_aria_hidden = require("aria-hidden");
|
|
73
75
|
var React = __toESM(require("react"));
|
|
76
|
+
var import_react_remove_scroll = require("react-remove-scroll");
|
|
74
77
|
const POPOVER_NAME = "Popover";
|
|
75
78
|
const [createPopoverContext, createPopoverScopeInternal] = (0, import_create_context.createContextScope)(POPOVER_NAME, [
|
|
76
79
|
import_popper.createPopperScope
|
|
@@ -116,27 +119,27 @@ const PopoverTrigger = React.forwardRef((props, forwardedRef) => {
|
|
|
116
119
|
PopoverTrigger.displayName = TRIGGER_NAME;
|
|
117
120
|
const CONTENT_NAME = "PopoverContent";
|
|
118
121
|
const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
119
|
-
const
|
|
120
|
-
return context.modal ? /* @__PURE__ */ React.createElement(PopoverContentModal, __spreadProps(__spreadValues({}, props), {
|
|
121
|
-
ref: forwardedRef
|
|
122
|
-
})) : /* @__PURE__ */ React.createElement(PopoverContentNonModal, __spreadProps(__spreadValues({}, props), {
|
|
123
|
-
ref: forwardedRef
|
|
124
|
-
}));
|
|
125
|
-
});
|
|
126
|
-
PopoverContent.displayName = CONTENT_NAME;
|
|
127
|
-
const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
128
|
-
const _a = props, { allowPinchZoom } = _a, contentModalProps = __objRest(_a, ["allowPinchZoom"]);
|
|
122
|
+
const _a = props, { allowPinchZoom, trapFocus } = _a, contentModalProps = __objRest(_a, ["allowPinchZoom", "trapFocus"]);
|
|
129
123
|
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
130
124
|
const contentRef = React.useRef(null);
|
|
131
125
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
132
126
|
const isRightClickOutsideRef = React.useRef(false);
|
|
133
127
|
const themeName = (0, import_core.useThemeName)();
|
|
134
|
-
|
|
135
|
-
|
|
128
|
+
React.useEffect(() => {
|
|
129
|
+
if (!context.open)
|
|
130
|
+
return;
|
|
131
|
+
const content = contentRef.current;
|
|
132
|
+
if (content)
|
|
133
|
+
return (0, import_aria_hidden.hideOthers)(content);
|
|
134
|
+
}, [context.open]);
|
|
135
|
+
return /* @__PURE__ */ React.createElement(import_portal.Portal, null, /* @__PURE__ */ React.createElement(import_core.Theme, {
|
|
136
136
|
name: themeName
|
|
137
|
+
}, /* @__PURE__ */ React.createElement(import_react_remove_scroll.RemoveScroll, {
|
|
138
|
+
enabled: context.open,
|
|
139
|
+
allowPinchZoom
|
|
137
140
|
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, __spreadProps(__spreadValues({}, contentModalProps), {
|
|
138
141
|
ref: composedRefs,
|
|
139
|
-
trapFocus: context.open,
|
|
142
|
+
trapFocus: trapFocus ?? context.open,
|
|
140
143
|
disableOutsidePointerEvents: true,
|
|
141
144
|
onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
142
145
|
var _a2;
|
|
@@ -151,38 +154,7 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
151
154
|
isRightClickOutsideRef.current = isRightClick;
|
|
152
155
|
}, { checkDefaultPrevented: false }),
|
|
153
156
|
onFocusOutside: (0, import_core.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
154
|
-
}))));
|
|
155
|
-
});
|
|
156
|
-
const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
157
|
-
const contentNonModalProps = __objRest(props, []);
|
|
158
|
-
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
159
|
-
const hasInteractedOutsideRef = React.useRef(false);
|
|
160
|
-
const PortalWrapper = context.modal ? import_portal.Portal : React.Fragment;
|
|
161
|
-
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(PopoverContentImpl, __spreadProps(__spreadValues({}, contentNonModalProps), {
|
|
162
|
-
ref: forwardedRef,
|
|
163
|
-
trapFocus: false,
|
|
164
|
-
disableOutsidePointerEvents: false,
|
|
165
|
-
onCloseAutoFocus: (event) => {
|
|
166
|
-
var _a, _b;
|
|
167
|
-
(_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
|
|
168
|
-
if (!event.defaultPrevented) {
|
|
169
|
-
if (!hasInteractedOutsideRef.current)
|
|
170
|
-
(_b = context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
171
|
-
event.preventDefault();
|
|
172
|
-
}
|
|
173
|
-
hasInteractedOutsideRef.current = false;
|
|
174
|
-
},
|
|
175
|
-
onInteractOutside: (event) => {
|
|
176
|
-
var _a, _b;
|
|
177
|
-
(_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
|
|
178
|
-
if (!event.defaultPrevented)
|
|
179
|
-
hasInteractedOutsideRef.current = true;
|
|
180
|
-
const target = event.target;
|
|
181
|
-
const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target);
|
|
182
|
-
if (targetIsTrigger)
|
|
183
|
-
event.preventDefault();
|
|
184
|
-
}
|
|
185
|
-
})));
|
|
157
|
+
})))));
|
|
186
158
|
});
|
|
187
159
|
const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
188
160
|
const _a = props, {
|
|
@@ -194,7 +166,8 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
194
166
|
onEscapeKeyDown,
|
|
195
167
|
onPointerDownOutside,
|
|
196
168
|
onFocusOutside,
|
|
197
|
-
onInteractOutside
|
|
169
|
+
onInteractOutside,
|
|
170
|
+
children
|
|
198
171
|
} = _a, contentProps = __objRest(_a, [
|
|
199
172
|
"__scopePopover",
|
|
200
173
|
"trapFocus",
|
|
@@ -204,17 +177,26 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
204
177
|
"onEscapeKeyDown",
|
|
205
178
|
"onPointerDownOutside",
|
|
206
179
|
"onFocusOutside",
|
|
207
|
-
"onInteractOutside"
|
|
180
|
+
"onInteractOutside",
|
|
181
|
+
"children"
|
|
208
182
|
]);
|
|
209
|
-
const context = usePopoverInternalContext(CONTENT_NAME, __scopePopover);
|
|
210
183
|
const popperScope = usePopoverScope(__scopePopover);
|
|
184
|
+
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
211
185
|
return /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(import_popper.PopperContent, __spreadProps(__spreadValues(__spreadValues({
|
|
186
|
+
key: "popper-content",
|
|
212
187
|
"data-state": getState(context.open),
|
|
213
188
|
id: context.contentId,
|
|
214
189
|
pointerEvents: "auto"
|
|
215
190
|
}, popperScope), contentProps), {
|
|
216
191
|
ref: forwardedRef
|
|
217
|
-
})
|
|
192
|
+
}), /* @__PURE__ */ React.createElement(import_focus_scope.FocusScope, {
|
|
193
|
+
loop: true,
|
|
194
|
+
trapped: trapFocus ?? context.open,
|
|
195
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
196
|
+
onUnmountAutoFocus: onCloseAutoFocus
|
|
197
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
198
|
+
style: { display: "contents" }
|
|
199
|
+
}, children))));
|
|
218
200
|
});
|
|
219
201
|
const CLOSE_NAME = "PopoverClose";
|
|
220
202
|
const PopoverClose = React.forwardRef((props, forwardedRef) => {
|
|
@@ -241,15 +223,13 @@ const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
|
241
223
|
children,
|
|
242
224
|
open: openProp,
|
|
243
225
|
defaultOpen,
|
|
244
|
-
onOpenChange
|
|
245
|
-
modal = true
|
|
226
|
+
onOpenChange
|
|
246
227
|
} = _a, restProps = __objRest(_a, [
|
|
247
228
|
"__scopePopover",
|
|
248
229
|
"children",
|
|
249
230
|
"open",
|
|
250
231
|
"defaultOpen",
|
|
251
|
-
"onOpenChange"
|
|
252
|
-
"modal"
|
|
232
|
+
"onOpenChange"
|
|
253
233
|
]);
|
|
254
234
|
const popperScope = usePopoverScope(__scopePopover);
|
|
255
235
|
const triggerRef = React.useRef(null);
|
|
@@ -259,7 +239,7 @@ const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
|
259
239
|
defaultProp: defaultOpen || false,
|
|
260
240
|
onChange: onOpenChange
|
|
261
241
|
});
|
|
262
|
-
const
|
|
242
|
+
const useFloatingContext = React.useCallback((props2) => {
|
|
263
243
|
const floating = (0, import_react_dom_interactions.useFloating)(__spreadProps(__spreadValues({}, props2), {
|
|
264
244
|
open,
|
|
265
245
|
onOpenChange: setOpen
|
|
@@ -273,8 +253,7 @@ const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
|
273
253
|
getReferenceProps,
|
|
274
254
|
getFloatingProps
|
|
275
255
|
});
|
|
276
|
-
};
|
|
277
|
-
const useFloatingContext = React.useCallback(useFloatingFn, [open]);
|
|
256
|
+
}, [open]);
|
|
278
257
|
return /* @__PURE__ */ React.createElement(import_popper.FloatingOverrideContext.Provider, {
|
|
279
258
|
value: useFloatingContext
|
|
280
259
|
}, /* @__PURE__ */ React.createElement(import_popper.Popper, __spreadValues(__spreadValues({}, popperScope), restProps), /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
|
|
@@ -286,8 +265,7 @@ const Popover = (0, import_core.withStaticProperties)((props) => {
|
|
|
286
265
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
287
266
|
hasCustomAnchor,
|
|
288
267
|
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
289
|
-
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
290
|
-
modal
|
|
268
|
+
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
291
269
|
}, children)));
|
|
292
270
|
}, {
|
|
293
271
|
Anchor: PopoverAnchor,
|
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 useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\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'\n// import { DismissableLayer } from '@tamagui/react-dismissable-layer'\n// import { useFocusGuards } from '@tamagui/react-focus-guards'\n// import { FocusScope } from '@tamagui/react-focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n UseFloatingFn,\n createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\n// import { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { GestureResponderEvent, View } from 'react-native'\n\n// import { RemoveScroll } from 'react-remove-scroll'\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 modal: boolean\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 interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentProps>(\n (props: ScopedProps<PopoverContentProps>, forwardedRef) => {\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n return context.modal ? (\n <PopoverContentModal {...props} ref={forwardedRef} />\n ) : (\n <PopoverContentNonModal {...props} ref={forwardedRef} />\n )\n }\n)\n\nPopoverContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RemoveScrollProps = any //React.ComponentProps<typeof RemoveScroll>\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nconst PopoverContentModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, ...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 // const content = contentRef.current\n // if (content) return hideOthers(content)\n // }, [])\n\n const PortalWrapper = context.modal ? Portal : React.Fragment\n\n return (\n <PortalWrapper>\n <Theme name={themeName}>\n {/* <RemoveScroll allowPinchZoom={allowPinchZoom}> */}\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={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 // @ts-expect-error\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 </Theme>\n {/* </RemoveScroll> */}\n </PortalWrapper>\n )\n }\n)\n\nconst PopoverContentNonModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { ...contentNonModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const hasInteractedOutsideRef = React.useRef(false)\n const PortalWrapper = context.modal ? Portal : React.Fragment\n\n return (\n <PortalWrapper>\n <PopoverContentImpl\n {...contentNonModalProps}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus()\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n // @ts-ignore\n const target = event.target as HTMLElement\n const targetIsTrigger = context.triggerRef.current?.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n </PortalWrapper>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\n// TODO\ntype FocusScopeProps = {\n /**\n * Whether focus should be trapped within the FocusScope\n * (default: false)\n */\n trapped?: boolean\n\n /**\n * Event handler called when auto-focusing on mount.\n * Can be prevented.\n */\n onMountAutoFocus?: (event: GestureResponderEvent) => void\n\n /**\n * Event handler called when auto-focusing on unmount.\n * Can be prevented.\n */\n onUnmountAutoFocus?: (event: GestureResponderEvent) => void\n}\n\ntype DismissableLayerProps = {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`.\n * Users will need to click twice on outside elements to interact with them:\n * Once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n /**\n * Event handler called when the a pointer event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: GestureResponderEvent) => void\n // onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void\n\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: React.FocusEvent) => void\n\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a pointer event happens outside of the `DismissableLayer` or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: GestureResponderEvent) => void\n // onInteractOutside?: (event: MouseEvent | TouchEvent | React.FocusEvent) => void\n\n /** Callback called when the `DismissableLayer` should be dismissed */\n onDismiss?: () => void\n}\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableLayerProps, 'onDismiss'> {\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 ...contentProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n\n // Make sure the whole tree has focus guards as our `Popover` may be\n // the last element in the DOM (beacuse of the `Portal`)\n // useFocusGuards()\n\n // <FocusScope\n // asChild\n // loop\n // trapped={trapFocus}\n // onMountAutoFocus={onOpenAutoFocus}\n // onUnmountAutoFocus={onCloseAutoFocus}\n // >\n // <DismissableLayer\n // asChild\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // onPointerDownOutside={onPointerDownOutside}\n // onFocusOutside={onFocusOutside}\n // onDismiss={() => context.onOpenChange(false)}\n // >\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n data-state={getState(context.open)}\n // role=\"dialog\"\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n />\n )}\n </AnimatePresence>\n )\n // </DismissableLayer>\n // </FocusScope>\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 modal?: boolean\n}\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\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 useFloatingFn: UseFloatingFn = (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 } as any\n }\n\n const useFloatingContext = React.useCallback(useFloatingFn, [open])\n\n return (\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 modal={modal}\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAO;AAEP,
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n FloatingFocusManager,\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 { 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 { Dismissable, 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 usePopperContext,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\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 interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, ...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 enabled={context.open} allowPinchZoom={allowPinchZoom}>\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 <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 </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]\n )\n\n return (\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/esm/Popover.js
CHANGED
|
@@ -47,6 +47,7 @@ import {
|
|
|
47
47
|
withStaticProperties
|
|
48
48
|
} from "@tamagui/core";
|
|
49
49
|
import { createContextScope } from "@tamagui/create-context";
|
|
50
|
+
import { FocusScope } from "@tamagui/focus-scope";
|
|
50
51
|
import {
|
|
51
52
|
FloatingOverrideContext,
|
|
52
53
|
Popper,
|
|
@@ -58,7 +59,9 @@ import {
|
|
|
58
59
|
import { Portal } from "@tamagui/portal";
|
|
59
60
|
import { YStack } from "@tamagui/stacks";
|
|
60
61
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
62
|
+
import { hideOthers } from "aria-hidden";
|
|
61
63
|
import * as React from "react";
|
|
64
|
+
import { RemoveScroll } from "react-remove-scroll";
|
|
62
65
|
const POPOVER_NAME = "Popover";
|
|
63
66
|
const [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [
|
|
64
67
|
createPopperScope
|
|
@@ -104,27 +107,27 @@ const PopoverTrigger = React.forwardRef((props, forwardedRef) => {
|
|
|
104
107
|
PopoverTrigger.displayName = TRIGGER_NAME;
|
|
105
108
|
const CONTENT_NAME = "PopoverContent";
|
|
106
109
|
const PopoverContent = React.forwardRef((props, forwardedRef) => {
|
|
107
|
-
const
|
|
108
|
-
return context.modal ? /* @__PURE__ */ React.createElement(PopoverContentModal, __spreadProps(__spreadValues({}, props), {
|
|
109
|
-
ref: forwardedRef
|
|
110
|
-
})) : /* @__PURE__ */ React.createElement(PopoverContentNonModal, __spreadProps(__spreadValues({}, props), {
|
|
111
|
-
ref: forwardedRef
|
|
112
|
-
}));
|
|
113
|
-
});
|
|
114
|
-
PopoverContent.displayName = CONTENT_NAME;
|
|
115
|
-
const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
116
|
-
const _a = props, { allowPinchZoom } = _a, contentModalProps = __objRest(_a, ["allowPinchZoom"]);
|
|
110
|
+
const _a = props, { allowPinchZoom, trapFocus } = _a, contentModalProps = __objRest(_a, ["allowPinchZoom", "trapFocus"]);
|
|
117
111
|
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
118
112
|
const contentRef = React.useRef(null);
|
|
119
113
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
120
114
|
const isRightClickOutsideRef = React.useRef(false);
|
|
121
115
|
const themeName = useThemeName();
|
|
122
|
-
|
|
123
|
-
|
|
116
|
+
React.useEffect(() => {
|
|
117
|
+
if (!context.open)
|
|
118
|
+
return;
|
|
119
|
+
const content = contentRef.current;
|
|
120
|
+
if (content)
|
|
121
|
+
return hideOthers(content);
|
|
122
|
+
}, [context.open]);
|
|
123
|
+
return /* @__PURE__ */ React.createElement(Portal, null, /* @__PURE__ */ React.createElement(Theme, {
|
|
124
124
|
name: themeName
|
|
125
|
+
}, /* @__PURE__ */ React.createElement(RemoveScroll, {
|
|
126
|
+
enabled: context.open,
|
|
127
|
+
allowPinchZoom
|
|
125
128
|
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, __spreadProps(__spreadValues({}, contentModalProps), {
|
|
126
129
|
ref: composedRefs,
|
|
127
|
-
trapFocus: context.open,
|
|
130
|
+
trapFocus: trapFocus ?? context.open,
|
|
128
131
|
disableOutsidePointerEvents: true,
|
|
129
132
|
onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
130
133
|
var _a2;
|
|
@@ -139,38 +142,7 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
139
142
|
isRightClickOutsideRef.current = isRightClick;
|
|
140
143
|
}, { checkDefaultPrevented: false }),
|
|
141
144
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
142
|
-
}))));
|
|
143
|
-
});
|
|
144
|
-
const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
145
|
-
const contentNonModalProps = __objRest(props, []);
|
|
146
|
-
const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover);
|
|
147
|
-
const hasInteractedOutsideRef = React.useRef(false);
|
|
148
|
-
const PortalWrapper = context.modal ? Portal : React.Fragment;
|
|
149
|
-
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(PopoverContentImpl, __spreadProps(__spreadValues({}, contentNonModalProps), {
|
|
150
|
-
ref: forwardedRef,
|
|
151
|
-
trapFocus: false,
|
|
152
|
-
disableOutsidePointerEvents: false,
|
|
153
|
-
onCloseAutoFocus: (event) => {
|
|
154
|
-
var _a, _b;
|
|
155
|
-
(_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
|
|
156
|
-
if (!event.defaultPrevented) {
|
|
157
|
-
if (!hasInteractedOutsideRef.current)
|
|
158
|
-
(_b = context.triggerRef.current) == null ? void 0 : _b.focus();
|
|
159
|
-
event.preventDefault();
|
|
160
|
-
}
|
|
161
|
-
hasInteractedOutsideRef.current = false;
|
|
162
|
-
},
|
|
163
|
-
onInteractOutside: (event) => {
|
|
164
|
-
var _a, _b;
|
|
165
|
-
(_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
|
|
166
|
-
if (!event.defaultPrevented)
|
|
167
|
-
hasInteractedOutsideRef.current = true;
|
|
168
|
-
const target = event.target;
|
|
169
|
-
const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target);
|
|
170
|
-
if (targetIsTrigger)
|
|
171
|
-
event.preventDefault();
|
|
172
|
-
}
|
|
173
|
-
})));
|
|
145
|
+
})))));
|
|
174
146
|
});
|
|
175
147
|
const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
176
148
|
const _a = props, {
|
|
@@ -182,7 +154,8 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
182
154
|
onEscapeKeyDown,
|
|
183
155
|
onPointerDownOutside,
|
|
184
156
|
onFocusOutside,
|
|
185
|
-
onInteractOutside
|
|
157
|
+
onInteractOutside,
|
|
158
|
+
children
|
|
186
159
|
} = _a, contentProps = __objRest(_a, [
|
|
187
160
|
"__scopePopover",
|
|
188
161
|
"trapFocus",
|
|
@@ -192,17 +165,26 @@ const PopoverContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
|
192
165
|
"onEscapeKeyDown",
|
|
193
166
|
"onPointerDownOutside",
|
|
194
167
|
"onFocusOutside",
|
|
195
|
-
"onInteractOutside"
|
|
168
|
+
"onInteractOutside",
|
|
169
|
+
"children"
|
|
196
170
|
]);
|
|
197
|
-
const context = usePopoverInternalContext(CONTENT_NAME, __scopePopover);
|
|
198
171
|
const popperScope = usePopoverScope(__scopePopover);
|
|
172
|
+
const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover);
|
|
199
173
|
return /* @__PURE__ */ React.createElement(AnimatePresence, null, !!context.open && /* @__PURE__ */ React.createElement(PopperContent, __spreadProps(__spreadValues(__spreadValues({
|
|
174
|
+
key: "popper-content",
|
|
200
175
|
"data-state": getState(context.open),
|
|
201
176
|
id: context.contentId,
|
|
202
177
|
pointerEvents: "auto"
|
|
203
178
|
}, popperScope), contentProps), {
|
|
204
179
|
ref: forwardedRef
|
|
205
|
-
})
|
|
180
|
+
}), /* @__PURE__ */ React.createElement(FocusScope, {
|
|
181
|
+
loop: true,
|
|
182
|
+
trapped: trapFocus ?? context.open,
|
|
183
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
184
|
+
onUnmountAutoFocus: onCloseAutoFocus
|
|
185
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
186
|
+
style: { display: "contents" }
|
|
187
|
+
}, children))));
|
|
206
188
|
});
|
|
207
189
|
const CLOSE_NAME = "PopoverClose";
|
|
208
190
|
const PopoverClose = React.forwardRef((props, forwardedRef) => {
|
|
@@ -229,15 +211,13 @@ const Popover = withStaticProperties((props) => {
|
|
|
229
211
|
children,
|
|
230
212
|
open: openProp,
|
|
231
213
|
defaultOpen,
|
|
232
|
-
onOpenChange
|
|
233
|
-
modal = true
|
|
214
|
+
onOpenChange
|
|
234
215
|
} = _a, restProps = __objRest(_a, [
|
|
235
216
|
"__scopePopover",
|
|
236
217
|
"children",
|
|
237
218
|
"open",
|
|
238
219
|
"defaultOpen",
|
|
239
|
-
"onOpenChange"
|
|
240
|
-
"modal"
|
|
220
|
+
"onOpenChange"
|
|
241
221
|
]);
|
|
242
222
|
const popperScope = usePopoverScope(__scopePopover);
|
|
243
223
|
const triggerRef = React.useRef(null);
|
|
@@ -247,7 +227,7 @@ const Popover = withStaticProperties((props) => {
|
|
|
247
227
|
defaultProp: defaultOpen || false,
|
|
248
228
|
onChange: onOpenChange
|
|
249
229
|
});
|
|
250
|
-
const
|
|
230
|
+
const useFloatingContext = React.useCallback((props2) => {
|
|
251
231
|
const floating = useFloating(__spreadProps(__spreadValues({}, props2), {
|
|
252
232
|
open,
|
|
253
233
|
onOpenChange: setOpen
|
|
@@ -261,8 +241,7 @@ const Popover = withStaticProperties((props) => {
|
|
|
261
241
|
getReferenceProps,
|
|
262
242
|
getFloatingProps
|
|
263
243
|
});
|
|
264
|
-
};
|
|
265
|
-
const useFloatingContext = React.useCallback(useFloatingFn, [open]);
|
|
244
|
+
}, [open]);
|
|
266
245
|
return /* @__PURE__ */ React.createElement(FloatingOverrideContext.Provider, {
|
|
267
246
|
value: useFloatingContext
|
|
268
247
|
}, /* @__PURE__ */ React.createElement(Popper, __spreadValues(__spreadValues({}, popperScope), restProps), /* @__PURE__ */ React.createElement(PopoverProviderInternal, {
|
|
@@ -274,8 +253,7 @@ const Popover = withStaticProperties((props) => {
|
|
|
274
253
|
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
275
254
|
hasCustomAnchor,
|
|
276
255
|
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
|
|
277
|
-
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
278
|
-
modal
|
|
256
|
+
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), [])
|
|
279
257
|
}, children)));
|
|
280
258
|
}, {
|
|
281
259
|
Anchor: PopoverAnchor,
|
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 useDismiss,\n useFloating,\n useFocus,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\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'\n// import { DismissableLayer } from '@tamagui/react-dismissable-layer'\n// import { useFocusGuards } from '@tamagui/react-focus-guards'\n// import { FocusScope } from '@tamagui/react-focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n UseFloatingFn,\n createPopperScope,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\n// import { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { GestureResponderEvent, View } from 'react-native'\n\n// import { RemoveScroll } from 'react-remove-scroll'\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 modal: boolean\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 interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentProps>(\n (props: ScopedProps<PopoverContentProps>, forwardedRef) => {\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n return context.modal ? (\n <PopoverContentModal {...props} ref={forwardedRef} />\n ) : (\n <PopoverContentNonModal {...props} ref={forwardedRef} />\n )\n }\n)\n\nPopoverContent.displayName = CONTENT_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype RemoveScrollProps = any //React.ComponentProps<typeof RemoveScroll>\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nconst PopoverContentModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, ...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 // const content = contentRef.current\n // if (content) return hideOthers(content)\n // }, [])\n\n const PortalWrapper = context.modal ? Portal : React.Fragment\n\n return (\n <PortalWrapper>\n <Theme name={themeName}>\n {/* <RemoveScroll allowPinchZoom={allowPinchZoom}> */}\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={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 // @ts-expect-error\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 </Theme>\n {/* </RemoveScroll> */}\n </PortalWrapper>\n )\n }\n)\n\nconst PopoverContentNonModal = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { ...contentNonModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const hasInteractedOutsideRef = React.useRef(false)\n const PortalWrapper = context.modal ? Portal : React.Fragment\n\n return (\n <PortalWrapper>\n <PopoverContentImpl\n {...contentNonModalProps}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event)\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus()\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault()\n }\n\n hasInteractedOutsideRef.current = false\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event)\n\n if (!event.defaultPrevented) hasInteractedOutsideRef.current = true\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n //\n // We use `onInteractOutside` as some browsers also\n // focus on pointer down, creating the same issue.\n // @ts-ignore\n const target = event.target as HTMLElement\n const targetIsTrigger = context.triggerRef.current?.contains(target)\n if (targetIsTrigger) event.preventDefault()\n }}\n />\n </PortalWrapper>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\n// TODO\ntype FocusScopeProps = {\n /**\n * Whether focus should be trapped within the FocusScope\n * (default: false)\n */\n trapped?: boolean\n\n /**\n * Event handler called when auto-focusing on mount.\n * Can be prevented.\n */\n onMountAutoFocus?: (event: GestureResponderEvent) => void\n\n /**\n * Event handler called when auto-focusing on unmount.\n * Can be prevented.\n */\n onUnmountAutoFocus?: (event: GestureResponderEvent) => void\n}\n\ntype DismissableLayerProps = {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`.\n * Users will need to click twice on outside elements to interact with them:\n * Once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean\n\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void\n\n /**\n * Event handler called when the a pointer event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: GestureResponderEvent) => void\n // onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void\n\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: React.FocusEvent) => void\n\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a pointer event happens outside of the `DismissableLayer` or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: GestureResponderEvent) => void\n // onInteractOutside?: (event: MouseEvent | TouchEvent | React.FocusEvent) => void\n\n /** Callback called when the `DismissableLayer` should be dismissed */\n onDismiss?: () => void\n}\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableLayerProps, 'onDismiss'> {\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 ...contentProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n\n // Make sure the whole tree has focus guards as our `Popover` may be\n // the last element in the DOM (beacuse of the `Portal`)\n // useFocusGuards()\n\n // <FocusScope\n // asChild\n // loop\n // trapped={trapFocus}\n // onMountAutoFocus={onOpenAutoFocus}\n // onUnmountAutoFocus={onCloseAutoFocus}\n // >\n // <DismissableLayer\n // asChild\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // onPointerDownOutside={onPointerDownOutside}\n // onFocusOutside={onFocusOutside}\n // onDismiss={() => context.onOpenChange(false)}\n // >\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n data-state={getState(context.open)}\n // role=\"dialog\"\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n />\n )}\n </AnimatePresence>\n )\n // </DismissableLayer>\n // </FocusScope>\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 modal?: boolean\n}\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\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 useFloatingFn: UseFloatingFn = (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 } as any\n }\n\n const useFloatingContext = React.useCallback(useFloatingFn, [open])\n\n return (\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 modal={modal}\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;
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n FloatingFocusManager,\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 { 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 { Dismissable, 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 usePopperContext,\n} from '@tamagui/popper'\nimport { Portal } from '@tamagui/portal'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport { hideOthers } from 'aria-hidden'\nimport * as React from 'react'\nimport { View } from 'react-native'\nimport { RemoveScroll } from 'react-remove-scroll'\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 interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, ...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 enabled={context.open} allowPinchZoom={allowPinchZoom}>\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 <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 </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]\n )\n\n return (\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
|
}
|