@tamagui/popover 1.14.4 → 1.14.6
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 +2 -2
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/esm/Popover.js +2 -3
- package/dist/esm/Popover.js.map +2 -2
- package/dist/esm/Popover.mjs +2 -3
- package/dist/esm/Popover.mjs.map +2 -2
- package/dist/jsx/Popover.js +2 -3
- package/dist/jsx/Popover.js.map +2 -2
- package/dist/jsx/Popover.mjs +2 -3
- package/dist/jsx/Popover.mjs.map +2 -2
- package/package.json +19 -19
- package/src/Popover.tsx +2 -3
- package/types/Popover.d.ts.map +1 -1
- package/dist/cjs/floating.js +0 -37
- package/dist/cjs/floating.js.map +0 -7
- package/dist/cjs/floating.native.js +0 -59
- package/dist/cjs/floating.native.js.map +0 -7
- package/dist/esm/floating.js +0 -15
- package/dist/esm/floating.js.map +0 -7
- package/dist/esm/floating.mjs +0 -15
- package/dist/esm/floating.mjs.map +0 -7
- package/dist/esm/floating.native.js +0 -31
- package/dist/esm/floating.native.js.map +0 -7
- package/dist/esm/floating.native.mjs +0 -31
- package/dist/esm/floating.native.mjs.map +0 -7
- package/dist/jsx/floating.js +0 -15
- package/dist/jsx/floating.js.map +0 -7
- package/dist/jsx/floating.mjs +0 -15
- package/dist/jsx/floating.mjs.map +0 -7
- package/dist/jsx/floating.native.js +0 -31
- package/dist/jsx/floating.native.js.map +0 -7
- package/dist/jsx/floating.native.mjs +0 -31
- package/dist/jsx/floating.native.mjs.map +0 -7
package/dist/cjs/Popover.js
CHANGED
|
@@ -281,7 +281,7 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
281
281
|
onOpenChange,
|
|
282
282
|
...restProps
|
|
283
283
|
} = props;
|
|
284
|
-
const internalId =
|
|
284
|
+
const internalId = React.useId();
|
|
285
285
|
const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId;
|
|
286
286
|
const { when, AdaptProvider } = (0, import_adapt.useAdaptParent)({
|
|
287
287
|
Contents: React.useCallback(() => {
|
|
@@ -305,7 +305,7 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
305
305
|
scopeKey: id,
|
|
306
306
|
popperScope: popperScope.__scopePopper,
|
|
307
307
|
sheetBreakpoint,
|
|
308
|
-
contentId:
|
|
308
|
+
contentId: React.useId(),
|
|
309
309
|
triggerRef,
|
|
310
310
|
open,
|
|
311
311
|
breakpointActive,
|
package/dist/cjs/Popover.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popover.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = React.useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: React.useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["PopoverContent", "Popover"]
|
|
7
7
|
}
|
package/dist/esm/Popover.js
CHANGED
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
isWeb,
|
|
12
12
|
useEvent,
|
|
13
13
|
useGet,
|
|
14
|
-
useId,
|
|
15
14
|
useMedia,
|
|
16
15
|
useThemeName,
|
|
17
16
|
withStaticProperties
|
|
@@ -260,7 +259,7 @@ const Popover = withStaticProperties(
|
|
|
260
259
|
onOpenChange,
|
|
261
260
|
...restProps
|
|
262
261
|
} = props;
|
|
263
|
-
const internalId = useId();
|
|
262
|
+
const internalId = React.useId();
|
|
264
263
|
const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId;
|
|
265
264
|
const { when, AdaptProvider } = useAdaptParent({
|
|
266
265
|
Contents: React.useCallback(() => {
|
|
@@ -284,7 +283,7 @@ const Popover = withStaticProperties(
|
|
|
284
283
|
scopeKey: id,
|
|
285
284
|
popperScope: popperScope.__scopePopper,
|
|
286
285
|
sheetBreakpoint,
|
|
287
|
-
contentId: useId(),
|
|
286
|
+
contentId: React.useId(),
|
|
288
287
|
triggerRef,
|
|
289
288
|
open,
|
|
290
289
|
breakpointActive,
|
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 { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = React.useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: React.useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["PopoverContent", "Popover"]
|
|
7
7
|
}
|
package/dist/esm/Popover.mjs
CHANGED
|
@@ -11,7 +11,6 @@ import {
|
|
|
11
11
|
isWeb,
|
|
12
12
|
useEvent,
|
|
13
13
|
useGet,
|
|
14
|
-
useId,
|
|
15
14
|
useMedia,
|
|
16
15
|
useThemeName,
|
|
17
16
|
withStaticProperties
|
|
@@ -260,7 +259,7 @@ const Popover = withStaticProperties(
|
|
|
260
259
|
onOpenChange,
|
|
261
260
|
...restProps
|
|
262
261
|
} = props;
|
|
263
|
-
const internalId = useId();
|
|
262
|
+
const internalId = React.useId();
|
|
264
263
|
const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId;
|
|
265
264
|
const { when, AdaptProvider } = useAdaptParent({
|
|
266
265
|
Contents: React.useCallback(() => {
|
|
@@ -284,7 +283,7 @@ const Popover = withStaticProperties(
|
|
|
284
283
|
scopeKey: id,
|
|
285
284
|
popperScope: popperScope.__scopePopper,
|
|
286
285
|
sheetBreakpoint,
|
|
287
|
-
contentId: useId(),
|
|
286
|
+
contentId: React.useId(),
|
|
288
287
|
triggerRef,
|
|
289
288
|
open,
|
|
290
289
|
breakpointActive,
|
package/dist/esm/Popover.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popover.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { Adapt, useAdaptParent } from '@tamagui/adapt'\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Stack,\n TamaguiElement,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FloatingOverrideContext } from '@tamagui/floating'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentFrame,\n PopperContentProps,\n PopperProps,\n PopperProvider,\n createPopperScope,\n usePopperContext,\n} from '@tamagui/popper'\nimport { Portal, PortalHost, PortalItem } from '@tamagui/portal'\nimport { RemoveScroll, RemoveScrollProps } from '@tamagui/remove-scroll'\nimport { ControlledSheet, SheetController } from '@tamagui/sheet'\nimport { YStack, YStackProps } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { Platform, ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport { useFloatingContext } from './useFloatingContext'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<any>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: any\n scopeKey: string\n popperScope: any\n breakpointActive?: boolean\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(\n POPOVER_NAME,\n [createPopperScope]\n)\nexport const usePopoverScope = createPopperScope()\nexport const createPopoverScope = createPopoverScopeInternal\n\nconst [PopoverProviderInternal, usePopoverInternalContext] =\n createPopoverContext<PopoverContextValue>(POPOVER_NAME)\n\nexport const __PopoverProviderInternal = PopoverProviderInternal\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverAnchor\n * -----------------------------------------------------------------------------------------------*/\n\nconst ANCHOR_NAME = 'PopoverAnchor'\n\ntype PopoverAnchorElement = HTMLElement | View\nexport type PopoverAnchorProps = YStackProps\n\nexport const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(\n (props: ScopedProps<PopoverAnchorProps>, forwardedRef) => {\n const { __scopePopover, ...anchorProps } = props\n const context = usePopoverInternalContext(ANCHOR_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const { onCustomAnchorAdd, onCustomAnchorRemove } = context\n\n React.useEffect(() => {\n onCustomAnchorAdd()\n return () => onCustomAnchorRemove()\n }, [onCustomAnchorAdd, onCustomAnchorRemove])\n\n return <PopperAnchor {...popperScope} {...anchorProps} ref={forwardedRef} />\n }\n)\n\nPopoverAnchor.displayName = ANCHOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'PopoverTrigger'\n\ntype PopoverTriggerElement = HTMLElement | View\nexport type PopoverTriggerProps = YStackProps\n\nexport const PopoverTrigger = React.forwardRef<\n PopoverTriggerElement,\n PopoverTriggerProps\n>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n})\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = PopperContentFrame.extractable(\n React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n function PopoverContent(props: ScopedProps<PopoverContentTypeProps>, forwardedRef) {\n const {\n allowPinchZoom,\n trapFocus,\n disableRemoveScroll = true,\n zIndex,\n ...contentImplProps\n } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<any>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <PopoverContentPortal zIndex={zIndex}>\n <PopoverContentImpl\n {...contentImplProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </PopoverContentPortal>\n )\n }\n )\n)\n\nfunction PopoverContentPortal(props: ScopedProps<PopoverContentTypeProps>) {\n const themeName = useThemeName()\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n\n // on android we have to re-pass context\n let contents = props.children\n\n if (Platform.OS === 'android') {\n // ok conditional hooks by platform\n const popperContext = usePopperContext(CONTENT_NAME, context.popperScope)\n\n contents = (\n <PopperProvider {...popperContext} scope={context.popperScope}>\n <PopoverProviderInternal scope={props.__scopePopover} {...context}>\n {/* does this need to be props.__scopePopper? */}\n {props.children}\n </PopoverProviderInternal>\n </PopperProvider>\n )\n }\n\n const zIndex = props.zIndex ?? 1000\n\n // Portal the contents and add a transparent bg overlay to handle dismiss on native\n return (\n <Portal zIndex={zIndex}>\n <Theme forceClassName name={themeName}>\n {!!context.open && !context.breakpointActive && (\n <YStack\n fullscreen\n onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}\n />\n )}\n <Stack zIndex={(zIndex as number) + 1}>{contents}</Stack>\n </Theme>\n </Portal>\n )\n}\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<\n PopoverContentImplElement,\n PopoverContentImplProps\n>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n\n if (context.breakpointActive) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}PopoverContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback((event: GestureResponderEvent) =>{\n // context.onOpenChange(false);\n // }, [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key={context.contentId}\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n ref={forwardedRef}\n {...popperScope}\n {...contentProps}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n {isWeb ? <div style={{ display: 'contents' }}>{children}</div> : children}\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n})\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress as any, () =>\n context.onOpenChange(false)\n )}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n function Popover(props: ScopedProps<PopoverProps>) {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n ...restProps\n } = props\n\n const internalId = React.useId()\n const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId\n\n const { when, AdaptProvider } = useAdaptParent({\n Contents: React.useCallback(() => {\n return <PortalHost name={`${id}PopoverContents`} />\n }, []),\n })\n\n const sheetBreakpoint = when\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<TamaguiElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n transition: true,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const floatingContext = useFloatingContext({ open, setOpen, breakpointActive }) as any\n\n const popoverContext = {\n scope: __scopePopover,\n scopeKey: id,\n popperScope: popperScope.__scopePopper,\n sheetBreakpoint,\n contentId: React.useId(),\n triggerRef,\n open,\n breakpointActive,\n onOpenChange: setOpen,\n onOpenToggle: useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n }),\n hasCustomAnchor,\n onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n }\n\n // debug if changing too often\n // if (process.env.NODE_ENV === 'development') {\n // Object.keys(popoverContext).forEach((key) => {\n // React.useEffect(() => console.log(`changed`, key), [popoverContext[key]])\n // })\n // }\n\n const contents = (\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal {...popoverContext}>\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n )\n\n return (\n <AdaptProvider>\n {isWeb ? (\n <FloatingOverrideContext.Provider value={floatingContext}>\n {contents}\n </FloatingOverrideContext.Provider>\n ) : (\n contents\n )}\n </AdaptProvider>\n )\n } as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n Adapt,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext(\n 'PopoverSheetController',\n props.__scopePopover\n )\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = context.breakpointActive\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | null | boolean) => {\n const media = useMedia()\n if (typeof breakpoint === 'boolean' || !breakpoint) {\n return !!breakpoint\n }\n return media[breakpoint]\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["PopoverContent", "Popover"]
|
|
7
7
|
}
|
package/dist/jsx/Popover.js
CHANGED
|
@@ -10,7 +10,6 @@ import {
|
|
|
10
10
|
isWeb,
|
|
11
11
|
useEvent,
|
|
12
12
|
useGet,
|
|
13
|
-
useId,
|
|
14
13
|
useMedia,
|
|
15
14
|
useThemeName,
|
|
16
15
|
withStaticProperties
|
|
@@ -234,7 +233,7 @@ const Popover = withStaticProperties(
|
|
|
234
233
|
onOpenChange,
|
|
235
234
|
...restProps
|
|
236
235
|
} = props;
|
|
237
|
-
const internalId = useId();
|
|
236
|
+
const internalId = React.useId();
|
|
238
237
|
const id = __scopePopover ? Object.keys(__scopePopover)[0] : internalId;
|
|
239
238
|
const { when, AdaptProvider } = useAdaptParent({
|
|
240
239
|
Contents: React.useCallback(() => {
|
|
@@ -258,7 +257,7 @@ const Popover = withStaticProperties(
|
|
|
258
257
|
scopeKey: id,
|
|
259
258
|
popperScope: popperScope.__scopePopper,
|
|
260
259
|
sheetBreakpoint,
|
|
261
|
-
contentId: useId(),
|
|
260
|
+
contentId: React.useId(),
|
|
262
261
|
triggerRef,
|
|
263
262
|
open,
|
|
264
263
|
breakpointActive,
|