@tamagui/popover 1.0.1-beta.55 → 1.0.1-beta.56
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 +5 -2
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/esm/Popover.js +12 -3
- package/dist/esm/Popover.js.map +2 -2
- package/dist/jsx/Popover.js +10 -3
- package/package.json +11 -11
- package/types/Popover.d.ts.map +1 -1
package/dist/cjs/Popover.js
CHANGED
|
@@ -131,8 +131,11 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
131
131
|
const contentRef = React.useRef(null);
|
|
132
132
|
const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
133
133
|
const isRightClickOutsideRef = React.useRef(false);
|
|
134
|
+
const themeName = (0, import_core.useThemeName)();
|
|
134
135
|
const PortalWrapper = context.modal ? import_portal.Portal : React.Fragment;
|
|
135
|
-
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(
|
|
136
|
+
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(import_core.Theme, {
|
|
137
|
+
name: themeName
|
|
138
|
+
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, __spreadProps(__spreadValues({}, contentModalProps), {
|
|
136
139
|
ref: composedRefs,
|
|
137
140
|
trapFocus: context.open,
|
|
138
141
|
disableOutsidePointerEvents: true,
|
|
@@ -149,7 +152,7 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
149
152
|
isRightClickOutsideRef.current = isRightClick;
|
|
150
153
|
}, { checkDefaultPrevented: false }),
|
|
151
154
|
onFocusOutside: (0, import_core.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
152
|
-
})));
|
|
155
|
+
}))));
|
|
153
156
|
});
|
|
154
157
|
const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
155
158
|
const contentNonModalProps = __objRest(props, []);
|
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 useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers, useId, withStaticProperties } 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 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\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 {/* <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 {/* </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 = YStackProps\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,oCAQO;AACP,8BAAgC;AAChC,0BAAgC;AAChC,
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\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 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 = YStackProps\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,oCAQO;AACP,8BAAgC;AAChC,0BAAgC;AAChC,kBAMO;AAEP,4BAAmC;AAInC,oBAUO;AACP,oBAAuB;AACvB,oBAAoC;AACpC,oCAAqC;AAErC,YAAuB;AAKvB,MAAM,eAAe;AAGrB,MAAM,CAAC,sBAAsB,8BAA8B,8CAAmB,cAAc;AAAA,EAC1F;AACF,CAAC;AACM,MAAM,kBAAkB,qCAAkB;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,QAA2C,YAAnC,qBAAmC,IAAhB,wBAAgB,IAAhB,CAAnB;AACR,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,oCAAC,4EAAiB,cAAiB,cAAlC;AAAA,IAA+C,KAAK;AAAA,IAAc;AAC5E,CACF;AAEA,cAAc,cAAc;AAM5B,MAAM,eAAe;AAKd,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAA4C,YAApC,qBAAoC,IAAjB,yBAAiB,IAAjB,CAAnB;AACR,QAAM,UAAU,0BAA0B,cAAc,cAAc;AACtE,QAAM,cAAc,gBAAgB,cAAc;AAClD,QAAM,qBAAqB,yCAAgB,cAAc,QAAQ,UAAU;AAE3E,QAAM,UACJ,oCAAC;AAAA,IACC,iBAAc;AAAA,IACd,iBAAe,QAAQ;AAAA,IACvB,iBAAe,QAAQ;AAAA,IACvB,cAAY,SAAS,QAAQ,IAAI;AAAA,KAC7B,eALL;AAAA,IAMC,KAAK;AAAA,IACL,SAAS,sCAAqB,MAAM,SAAS,QAAQ,YAAY;AAAA,IACnE;AAGF,SAAO,QAAQ,kBACb,UAEA,oCAAC;AAAA,IAAa,SAAO;AAAA,KAAK,cACvB,OACH;AAEJ,CACF;AAEA,eAAe,cAAc;AAM7B,MAAM,eAAe;AAYd,MAAM,iBAAiB,MAAM,WAClC,CAAC,OAAyC,iBAAiB;AACzD,QAAM,UAAU,0BAA0B,cAAc,MAAM,cAAc;AAC5E,SAAO,QAAQ,QACb,oCAAC,sDAAwB,QAAxB;AAAA,IAA+B,KAAK;AAAA,IAAc,IAEnD,oCAAC,yDAA2B,QAA3B;AAAA,IAAkC,KAAK;AAAA,IAAc;AAE1D,CACF;AAEA,eAAe,cAAc;AAO7B,MAAM,sBAAsB,MAAM,WAChC,CAAC,OAA6C,iBAAiB;AAC7D,QAAiD,YAAzC,qBAAyC,IAAtB,8BAAsB,IAAtB,CAAnB;AACR,QAAM,UAAU,0BAA0B,cAAc,MAAM,cAAc;AAC5E,QAAM,aAAa,MAAM,OAAuB,IAAI;AACpD,QAAM,eAAe,yCAAgB,cAAc,UAAU;AAC7D,QAAM,yBAAyB,MAAM,OAAO,KAAK;AACjD,QAAM,YAAY,8BAAa;AAQ/B,QAAM,gBAAgB,QAAQ,QAAQ,uBAAS,MAAM;AAErD,SACE,oCAAC,qBACC,oCAAC;AAAA,IAAM,MAAM;AAAA,KAEX,oCAAC,qDACK,oBADL;AAAA,IAEC,KAAK;AAAA,IAGL,WAAW,QAAQ;AAAA,IACnB,6BAA2B;AAAA,IAC3B,kBAAkB,sCAAqB,MAAM,kBAAkB,CAAC,UAAU;AA1MtF;AA2Mc,YAAM,eAAe;AACrB,UAAI,CAAC,uBAAuB;AAAS,uBAAQ,WAAW,YAAnB,oBAA4B;AAAA,IACnE,CAAC;AAAA,IACD,sBAAsB,sCACpB,MAAM,sBACN,CAAC,UAAU;AAET,YAAM,gBAAgB,MAAM,OAAO;AACnC,YAAM,gBAAgB,cAAc,WAAW,KAAK,cAAc,YAAY;AAC9E,YAAM,eAAe,cAAc,WAAW,KAAK;AACnD,6BAAuB,UAAU;AAAA,IACnC,GACA,EAAE,uBAAuB,MAAM,CACjC;AAAA,IAGA,gBAAgB,sCACd,MAAM,gBACN,CAAC,UAAU,MAAM,eAAe,GAChC,EAAE,uBAAuB,MAAM,CACjC;AAAA,IACF,CACF,CAEF;AAEJ,CACF;AAEA,MAAM,yBAAyB,MAAM,WACnC,CAAC,OAA6C,iBAAiB;AAC7D,QAAW,iCAAyB,OAAzB;AACX,QAAM,UAAU,0BAA0B,cAAc,MAAM,cAAc;AAC5E,QAAM,0BAA0B,MAAM,OAAO,KAAK;AAClD,QAAM,gBAAgB,QAAQ,QAAQ,uBAAS,MAAM;AAErD,SACE,oCAAC,qBACC,oCAAC,qDACK,uBADL;AAAA,IAEC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,6BAA6B;AAAA,IAC7B,kBAAkB,CAAC,UAAU;AAtPvC;AAuPY,kBAAM,qBAAN,+BAAyB;AAEzB,UAAI,CAAC,MAAM,kBAAkB;AAC3B,YAAI,CAAC,wBAAwB;AAAS,wBAAQ,WAAW,YAAnB,mBAA4B;AAElE,cAAM,eAAe;AAAA,MACvB;AAEA,8BAAwB,UAAU;AAAA,IACpC;AAAA,IACA,mBAAmB,CAAC,UAAU;AAjQxC;AAkQY,kBAAM,sBAAN,+BAA0B;AAE1B,UAAI,CAAC,MAAM;AAAkB,gCAAwB,UAAU;AAS/D,YAAM,SAAS,MAAM;AACrB,YAAM,kBAAkB,cAAQ,WAAW,YAAnB,mBAA4B,SAAS;AAC7D,UAAI;AAAiB,cAAM,eAAe;AAAA,IAC5C;AAAA,IACF,CACF;AAEJ,CACF;AAwFA,MAAM,qBAAqB,MAAM,WAC/B,CAAC,OAA6C,iBAAiB;AAC7D,QAWI,YAVF;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEE,IADC,yBACD,IADC;AAAA,IATH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,UAAU,0BAA0B,cAAc,cAAc;AACtE,QAAM,cAAc,gBAAgB,cAAc;AAsBlD,SACE,oCAAC,+CACE,CAAC,CAAC,QAAQ,QACT,oCAAC;AAAA,IACC,cAAY,SAAS,QAAQ,IAAI;AAAA,IAEjC,IAAI,QAAQ;AAAA,IACZ,eAAc;AAAA,KACV,cACA,eANL;AAAA,IAOC,KAAK;AAAA,IACP,CAEJ;AAIJ,CACF;AAMA,MAAM,aAAa;AAKZ,MAAM,eAAe,MAAM,WAChC,CAAC,OAAuC,iBAAiB;AACvD,QAA0C,YAAlC,qBAAkC,IAAf,uBAAe,IAAf,CAAnB;AACR,QAAM,UAAU,0BAA0B,YAAY,cAAc;AACpE,SACE,oCAAC,uDACK,aADL;AAAA,IAEC,KAAK;AAAA,IACL,SAAS,sCAAqB,MAAM,SAAS,MAAM,QAAQ,aAAa,KAAK,CAAC;AAAA,IAChF;AAEJ,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,aAAa;AAKZ,MAAM,eAAe,MAAM,WAChC,CAAC,OAAuC,iBAAiB;AACvD,QAA0C,YAAlC,qBAAkC,IAAf,uBAAe,IAAf,CAAnB;AACR,QAAM,cAAc,gBAAgB,cAAc;AAClD,SAAO,oCAAC,2EAAgB,cAAiB,aAAjC;AAAA,IAA6C,KAAK;AAAA,IAAc;AAC1E,CACF;AAEA,aAAa,cAAc;AAapB,MAAM,UAAU,sCACpB,CAAC,UAAqC;AACrC,QAQI,YAPF;AAAA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,MAEN,IADC,sBACD,IADC;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,cAAc,gBAAgB,cAAc;AAClD,QAAM,aAAa,MAAM,OAA0B,IAAI;AACvD,QAAM,CAAC,iBAAiB,sBAAsB,MAAM,SAAS,KAAK;AAClE,QAAM,CAAC,MAAM,WAAW,wDAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa,eAAe;AAAA,IAC5B,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,gBAA+B,wBAAC,WAAU;AAC9C,UAAM,WAAW,+CAAY,iCACxB,SADwB;AAAA,MAE3B;AAAA,MACA,cAAc;AAAA,IAChB,EAAC;AACD,UAAM,EAAE,mBAAmB,qBAAqB,mDAAgB;AAAA,MAC9D,4CAAS,SAAS,OAAO;AAAA,MACzB,2CAAQ,SAAS,SAAS,EAAE,MAAM,SAAS,CAAC;AAAA,MAC5C,8CAAW,SAAS,OAAO;AAAA,IAC7B,CAAC;AACD,WAAO,iCACF,WADE;AAAA,MAEL;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAhBqC;AAkBrC,QAAM,qBAAqB,MAAM,YAAY,eAAe,CAAC,IAAI,CAAC;AAElE,SACE,oCAAC,sCAAwB,UAAxB;AAAA,IAAiC,OAAO;AAAA,KACvC,oCAAC,wDAAW,cAAiB,YAC3B,oCAAC;AAAA,IACC,OAAO;AAAA,IACP,WAAW,uBAAM;AAAA,IACjB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc,MAAM,YAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;AAAA,IACjF;AAAA,IACA,mBAAmB,MAAM,YAAY,MAAM,mBAAmB,IAAI,GAAG,CAAC,CAAC;AAAA,IACvE,sBAAsB,MAAM,YAAY,MAAM,mBAAmB,KAAK,GAAG,CAAC,CAAC;AAAA,IAC3E;AAAA,KAEC,QACH,CACF,CACF;AAEJ,GACA;AAAA,EACE,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT,CACF;AAEA,QAAQ,cAAc;AAItB,kBAAkB,MAAe;AAC/B,SAAO,OAAO,SAAS;AACzB;AAFS;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Popover.js
CHANGED
|
@@ -10,7 +10,13 @@ import {
|
|
|
10
10
|
} from "@floating-ui/react-dom-interactions";
|
|
11
11
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
12
12
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
Theme,
|
|
15
|
+
composeEventHandlers,
|
|
16
|
+
useId,
|
|
17
|
+
useThemeName,
|
|
18
|
+
withStaticProperties
|
|
19
|
+
} from "@tamagui/core";
|
|
14
20
|
import { createContextScope } from "@tamagui/create-context";
|
|
15
21
|
import {
|
|
16
22
|
FloatingOverrideContext,
|
|
@@ -88,8 +94,11 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
88
94
|
const contentRef = React.useRef(null);
|
|
89
95
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
90
96
|
const isRightClickOutsideRef = React.useRef(false);
|
|
97
|
+
const themeName = useThemeName();
|
|
91
98
|
const PortalWrapper = context.modal ? Portal : React.Fragment;
|
|
92
|
-
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(
|
|
99
|
+
return /* @__PURE__ */ React.createElement(PortalWrapper, null, /* @__PURE__ */ React.createElement(Theme, {
|
|
100
|
+
name: themeName
|
|
101
|
+
}, /* @__PURE__ */ React.createElement(PopoverContentImpl, {
|
|
93
102
|
...contentModalProps,
|
|
94
103
|
ref: composedRefs,
|
|
95
104
|
trapFocus: context.open,
|
|
@@ -107,7 +116,7 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
107
116
|
isRightClickOutsideRef.current = isRightClick;
|
|
108
117
|
}, { checkDefaultPrevented: false }),
|
|
109
118
|
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })
|
|
110
|
-
}));
|
|
119
|
+
})));
|
|
111
120
|
});
|
|
112
121
|
const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
113
122
|
const { ...contentNonModalProps } = props;
|
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 useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from '@floating-ui/react-dom-interactions'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers, useId, withStaticProperties } 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 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\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 {/* <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 {/* </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 = YStackProps\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;AASA;AACA;AACA;
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport {\n useDelayGroup,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\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 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 = YStackProps\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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Popover.js
CHANGED
|
@@ -10,7 +10,13 @@ import {
|
|
|
10
10
|
} from "@floating-ui/react-dom-interactions";
|
|
11
11
|
import { AnimatePresence } from "@tamagui/animate-presence";
|
|
12
12
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
Theme,
|
|
15
|
+
composeEventHandlers,
|
|
16
|
+
useId,
|
|
17
|
+
useThemeName,
|
|
18
|
+
withStaticProperties
|
|
19
|
+
} from "@tamagui/core";
|
|
14
20
|
import { createContextScope } from "@tamagui/create-context";
|
|
15
21
|
import {
|
|
16
22
|
FloatingOverrideContext,
|
|
@@ -67,8 +73,9 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
67
73
|
const contentRef = React.useRef(null);
|
|
68
74
|
const composedRefs = useComposedRefs(forwardedRef, contentRef);
|
|
69
75
|
const isRightClickOutsideRef = React.useRef(false);
|
|
76
|
+
const themeName = useThemeName();
|
|
70
77
|
const PortalWrapper = context.modal ? Portal : React.Fragment;
|
|
71
|
-
return <PortalWrapper><PopoverContentImpl {...contentModalProps} ref={composedRefs} trapFocus={context.open} disableOutsidePointerEvents onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
78
|
+
return <PortalWrapper><Theme name={themeName}><PopoverContentImpl {...contentModalProps} ref={composedRefs} trapFocus={context.open} disableOutsidePointerEvents onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
|
|
72
79
|
var _a;
|
|
73
80
|
event.preventDefault();
|
|
74
81
|
if (!isRightClickOutsideRef.current)
|
|
@@ -78,7 +85,7 @@ const PopoverContentModal = React.forwardRef((props, forwardedRef) => {
|
|
|
78
85
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
79
86
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
80
87
|
isRightClickOutsideRef.current = isRightClick;
|
|
81
|
-
}, { checkDefaultPrevented: false })} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })} /></PortalWrapper>;
|
|
88
|
+
}, { checkDefaultPrevented: false })} onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault(), { checkDefaultPrevented: false })} /></Theme></PortalWrapper>;
|
|
82
89
|
});
|
|
83
90
|
const PopoverContentNonModal = React.forwardRef((props, forwardedRef) => {
|
|
84
91
|
const { ...contentNonModalProps } = props;
|
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.56",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -19,15 +19,15 @@
|
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@floating-ui/react-dom-interactions": "^0.5.0",
|
|
22
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
23
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
24
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
26
|
-
"@tamagui/polyfill-dev": "^1.0.1-beta.
|
|
27
|
-
"@tamagui/popper": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/portal": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
22
|
+
"@tamagui/animate-presence": "^1.0.1-beta.56",
|
|
23
|
+
"@tamagui/compose-refs": "^1.0.1-beta.56",
|
|
24
|
+
"@tamagui/core": "^1.0.1-beta.56",
|
|
25
|
+
"@tamagui/create-context": "^1.0.1-beta.56",
|
|
26
|
+
"@tamagui/polyfill-dev": "^1.0.1-beta.56",
|
|
27
|
+
"@tamagui/popper": "^1.0.1-beta.56",
|
|
28
|
+
"@tamagui/portal": "^1.0.1-beta.56",
|
|
29
|
+
"@tamagui/stacks": "^1.0.1-beta.56",
|
|
30
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.56"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"react": "*",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"react-native": "*"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
38
|
+
"@tamagui/build": "^1.0.1-beta.56",
|
|
39
39
|
"@types/react-dom": "^18.0.3",
|
|
40
40
|
"@types/react-native": "^0.67.3",
|
|
41
41
|
"react": "*",
|
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;
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../src/Popover.tsx"],"names":[],"mappings":"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"}
|