@tamagui/popover 1.0.1-beta.221 → 1.0.1-beta.223
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 +0 -3
- package/dist/cjs/Popover.js.map +2 -2
- package/dist/esm/Popover.js +1 -4
- package/dist/esm/Popover.js.map +2 -2
- package/dist/jsx/Popover.js +1 -4
- package/dist/jsx/Popover.js.map +2 -2
- package/package.json +16 -16
- package/src/Popover.tsx +6 -5
package/dist/cjs/Popover.js
CHANGED
|
@@ -286,9 +286,6 @@ const Popover = (0, import_core.withStaticProperties)(
|
|
|
286
286
|
onOpenChange: setOpen
|
|
287
287
|
});
|
|
288
288
|
const { getReferenceProps, getFloatingProps } = (0, import_floating.useInteractions)([
|
|
289
|
-
(0, import_floating.useFocus)(floating.context, {
|
|
290
|
-
enabled: !breakpointActive
|
|
291
|
-
}),
|
|
292
289
|
(0, import_floating.useRole)(floating.context, { role: "dialog" }),
|
|
293
290
|
(0, import_floating.useDismiss)(floating.context, {
|
|
294
291
|
enabled: !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 { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n }\n)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context, {\n enabled: !breakpointActive,\n }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwGW;AAtGX,0BAAO;AAEP,8BAAgC;AAChC,yBAA2B;AAC3B,0BAAgC;AAChC,kBAYO;AAEP,4BAAmC;AAEnC,yBAA4C;AAC5C,oBAUO;AACP,oBAA+C;AAC/C,2BAAgD;AAChD,mBAAiD;AACjD,oBAAoC;AACpC,oCAAqC;AACrC,YAAuB;AACvB,0BAAkD;AAGlD,sBAA4E;AAE5E,MAAM,eAAe;AA0BrB,MAAM,CAAC,sBAAsB,0BAA0B,QAAI,0CAAmB,cAAc;AAAA,EAC1F;AACF,CAAC;AACM,MAAM,sBAAkB,iCAAkB;AAC1C,MAAM,qBAAqB;AAElC,MAAM,CAAC,yBAAyB,yBAAyB,IACvD,qBAA0C,YAAY;AAEjD,MAAM,4BAA4B;AAMzC,MAAM,cAAc;AAKb,MAAM,gBAAgB,MAAM;AAAA,EACjC,CAAC,OAAwC,iBAAiB;AACxD,UAAM,EAAE,mBAAmB,YAAY,IAAI;AAC3C,UAAM,UAAU,0BAA0B,aAAa,cAAc;AACrE,UAAM,cAAc,gBAAgB,cAAc;AAClD,UAAM,EAAE,mBAAmB,qBAAqB,IAAI;AAEpD,UAAM,UAAU,MAAM;AACpB,wBAAkB;AAClB,aAAO,MAAM,qBAAqB;AAAA,IACpC,GAAG,CAAC,mBAAmB,oBAAoB,CAAC;AAE5C,WAAO,4CAAC;AAAA,MAAc,GAAG;AAAA,MAAc,GAAG;AAAA,MAAa,KAAK;AAAA,KAAc;AAAA,EAC5E;AACF;AAEA,cAAc,cAAc;AAM5B,MAAM,eAAe;AAKd,MAAM,iBAAiB,MAAM;AAAA,EAClC,CAAC,OAAyC,iBAAiB;AACzD,UAAM,EAAE,mBAAmB,aAAa,IAAI;AAC5C,UAAM,UAAU,0BAA0B,cAAc,cAAc;AACtE,UAAM,cAAc,gBAAgB,cAAc;AAClD,UAAM,yBAAqB,qCAAgB,cAAc,QAAQ,UAAU;AAE3E,UAAM,UACJ,4CAAC;AAAA,MACC,iBAAc;AAAA,MACd,iBAAe,QAAQ;AAAA,MAGvB,cAAY,SAAS,QAAQ,IAAI;AAAA,MAChC,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,aAAS,kCAAqB,MAAM,
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // 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)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\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, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n // useFocus(floating.context, {\n // enabled: !breakpointActive,\n // keyboardOnly: true,\n // }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/esm/Popover.js
CHANGED
|
@@ -31,7 +31,7 @@ import { YStack } from "@tamagui/stacks";
|
|
|
31
31
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import { ScrollView } from "react-native";
|
|
34
|
-
import { useDismiss, useFloating,
|
|
34
|
+
import { useDismiss, useFloating, useInteractions, useRole } from "./floating";
|
|
35
35
|
const POPOVER_NAME = "Popover";
|
|
36
36
|
const [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [
|
|
37
37
|
createPopperScope
|
|
@@ -265,9 +265,6 @@ const Popover = withStaticProperties(
|
|
|
265
265
|
onOpenChange: setOpen
|
|
266
266
|
});
|
|
267
267
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
268
|
-
useFocus(floating.context, {
|
|
269
|
-
enabled: !breakpointActive
|
|
270
|
-
}),
|
|
271
268
|
useRole(floating.context, { role: "dialog" }),
|
|
272
269
|
useDismiss(floating.context, {
|
|
273
270
|
enabled: !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 { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n }\n)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context, {\n enabled: !breakpointActive,\n }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": "AAwGW;AAtGX,OAAO;AAEP,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AAEnC,SAAS,kBAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,oBAAuC;AAChD,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,cAA2B;AACpC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AACvB,SAAS,kBAAyC;AAGlD,SAAS,YAAY,
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // 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)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\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, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n // useFocus(floating.context, {\n // enabled: !breakpointActive,\n // keyboardOnly: true,\n // }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/dist/jsx/Popover.js
CHANGED
|
@@ -30,7 +30,7 @@ import { YStack } from "@tamagui/stacks";
|
|
|
30
30
|
import { useControllableState } from "@tamagui/use-controllable-state";
|
|
31
31
|
import * as React from "react";
|
|
32
32
|
import { ScrollView } from "react-native";
|
|
33
|
-
import { useDismiss, useFloating,
|
|
33
|
+
import { useDismiss, useFloating, useInteractions, useRole } from "./floating";
|
|
34
34
|
const POPOVER_NAME = "Popover";
|
|
35
35
|
const [createPopoverContext, createPopoverScopeInternal] = createContextScope(POPOVER_NAME, [
|
|
36
36
|
createPopperScope
|
|
@@ -192,9 +192,6 @@ const Popover = withStaticProperties(
|
|
|
192
192
|
onOpenChange: setOpen
|
|
193
193
|
});
|
|
194
194
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
195
|
-
useFocus(floating.context, {
|
|
196
|
-
enabled: !breakpointActive
|
|
197
|
-
}),
|
|
198
195
|
useRole(floating.context, { role: "dialog" }),
|
|
199
196
|
useDismiss(floating.context, {
|
|
200
197
|
enabled: !breakpointActive
|
package/dist/jsx/Popover.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Popover.tsx"],
|
|
4
|
-
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // TODO not matching\n // aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}\n />\n )\n\n return context.hasCustomAnchor ? (\n trigger\n ) : (\n <PopperAnchor asChild {...popperScope}>\n {trigger}\n </PopperAnchor>\n )\n }\n)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'PopoverClose'\n\ntype PopoverCloseElement = HTMLElement | View\nexport type PopoverCloseProps = YStackProps\n\nexport const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(\n (props: ScopedProps<PopoverCloseProps>, forwardedRef) => {\n const { __scopePopover, ...closeProps } = props\n const context = usePopoverInternalContext(CLOSE_NAME, __scopePopover)\n return (\n <YStack\n {...closeProps}\n ref={forwardedRef}\n onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useFocus(floating.context, {\n enabled: !breakpointActive,\n }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
-
"mappings": "AAEA,OAAO;AAEP,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AAEnC,SAAS,kBAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,oBAAuC;AAChD,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,cAA2B;AACpC,SAAS,4BAA4B;AACrC,YAAY,WAAW;AACvB,SAAS,kBAAyC;AAGlD,SAAS,YAAY,
|
|
4
|
+
"sourcesContent": ["// adapted from radix-ui popover\n\nimport '@tamagui/polyfill-dev'\n\nimport { AnimatePresence } from '@tamagui/animate-presence'\nimport { hideOthers } from '@tamagui/aria-hidden'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport {\n MediaQueryKey,\n SizeTokens,\n Theme,\n composeEventHandlers,\n isWeb,\n useEvent,\n useGet,\n useId,\n useMedia,\n useThemeName,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { DismissableProps } from '@tamagui/dismissable'\nimport { FocusScope, FocusScopeProps } from '@tamagui/focus-scope'\nimport {\n FloatingOverrideContext,\n Popper,\n PopperAnchor,\n PopperArrow,\n PopperArrowProps,\n PopperContent,\n PopperContentProps,\n PopperProps,\n createPopperScope,\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 { ScrollView, ScrollViewProps, View } from 'react-native'\n\nimport type { UseFloatingProps } from './floating'\nimport { useDismiss, useFloating, useFocus, useInteractions, useRole } from './floating'\n\nconst POPOVER_NAME = 'Popover'\n\ntype ScopedProps<P> = P & { __scopePopover?: Scope }\ntype NonNull<A> = Exclude<A, void | null>\n\nexport type PopoverProps = PopperProps & {\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n sheetBreakpoint?: MediaQueryKey | false\n}\n\ntype PopoverContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>\n contentId?: string\n open: boolean\n onOpenChange(open: boolean): void\n onOpenToggle(): void\n hasCustomAnchor: boolean\n onCustomAnchorAdd(): void\n onCustomAnchorRemove(): void\n size?: SizeTokens\n sheetBreakpoint: NonNull<PopoverProps['sheetBreakpoint']>\n scopeKey: string\n}\n\nconst [createPopoverContext, createPopoverScopeInternal] = createContextScope(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<PopoverTriggerElement, PopoverTriggerProps>(\n (props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {\n const { __scopePopover, ...triggerProps } = props\n const context = usePopoverInternalContext(TRIGGER_NAME, __scopePopover)\n const popperScope = usePopoverScope(__scopePopover)\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef)\n\n const trigger = (\n <YStack\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n // 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)\n\nPopoverTrigger.displayName = TRIGGER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'PopoverContent'\n\nexport type PopoverContentProps = PopoverContentTypeProps\n\ntype PopoverContentTypeElement = PopoverContentImplElement\n\nexport interface PopoverContentTypeProps\n extends Omit<PopoverContentImplProps, 'disableOutsidePointerEvents'> {\n /**\n * @see https://github.com/theKashey/react-remove-scroll#usage\n */\n allowPinchZoom?: RemoveScrollProps['allowPinchZoom']\n}\n\nexport const PopoverContent = React.forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(\n (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {\n const { allowPinchZoom, trapFocus, disableRemoveScroll = true, ...contentModalProps } = props\n const context = usePopoverInternalContext(CONTENT_NAME, props.__scopePopover)\n const contentRef = React.useRef<HTMLDivElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, contentRef)\n const isRightClickOutsideRef = React.useRef(false)\n const themeName = useThemeName()\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n if (!context.open) return\n const content = contentRef.current\n if (content) return hideOthers(content)\n }, [context.open])\n\n return (\n <Portal zIndex={props.zIndex ?? 1000}>\n <Theme name={themeName}>\n <PopoverContentImpl\n {...contentModalProps}\n disableRemoveScroll={disableRemoveScroll}\n ref={composedRefs}\n // we make sure we're not trapping once it's been closed\n // (closed !== unmounted when animating out)\n trapFocus={trapFocus ?? context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault()\n if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus()\n })}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick\n isRightClickOutsideRef.current = isRightClick\n },\n { checkDefaultPrevented: false }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(\n props.onFocusOutside,\n (event) => event.preventDefault(),\n { checkDefaultPrevented: false }\n )}\n />\n </Theme>\n </Portal>\n )\n }\n)\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PopoverContentImplElement = React.ElementRef<typeof PopperContent>\n\nexport interface PopoverContentImplProps\n extends PopperContentProps,\n Omit<DismissableProps, 'onDismiss' | 'children'> {\n /**\n * Whether focus should be trapped within the `Popover`\n * (default: false)\n */\n trapFocus?: FocusScopeProps['trapped']\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus']\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus']\n\n disableRemoveScroll?: boolean\n}\n\nconst PopoverContentImpl = React.forwardRef<PopoverContentImplElement, PopoverContentImplProps>(\n (props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {\n const {\n __scopePopover,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n disableOutsidePointerEvents,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n children,\n disableRemoveScroll,\n ...contentProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const context = usePopoverInternalContext(CONTENT_NAME, popperScope.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n // const popperContext = usePopperContext(CONTENT_NAME, popperScope.__scopePopper)\n\n if (showSheet) {\n // unwrap the PopoverScrollView if used, as it will use the SheetScrollView if that exists\n const childrenWithoutScrollView = React.Children.toArray(children).map((child) => {\n if (React.isValidElement(child)) {\n if (child.type === PopoverScrollView) {\n return child.props.children\n }\n }\n return child\n })\n\n // doesn't show as popover yet on native, must use as sheet\n return (\n <PortalItem hostName={`${context.scopeKey}SheetContents`}>\n {childrenWithoutScrollView}\n </PortalItem>\n )\n }\n\n // const handleDismiss = React.useCallback(() => context.onOpenChange(false), [])\n // <Dismissable\n // disableOutsidePointerEvents={disableOutsidePointerEvents}\n // // onInteractOutside={onInteractOutside}\n // onEscapeKeyDown={onEscapeKeyDown}\n // // onPointerDownOutside={onPointerDownOutside}\n // // onFocusOutside={onFocusOutside}\n // onDismiss={handleDismiss}\n // >\n\n return (\n <AnimatePresence>\n {!!context.open && (\n <PopperContent\n key=\"popper-content\"\n data-state={getState(context.open)}\n id={context.contentId}\n pointerEvents=\"auto\"\n {...popperScope}\n {...contentProps}\n ref={forwardedRef}\n >\n <RemoveScroll\n enabled={disableRemoveScroll ? false : context.open}\n allowPinchZoom\n // causes lots of bugs on touch web on site\n removeScrollBar={false}\n style={{\n display: 'contents',\n }}\n >\n {trapFocus === false ? (\n children\n ) : (\n <FocusScope\n loop\n trapped={trapFocus ?? context.open}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <div style={{ display: 'contents' }}>{children}</div>\n </FocusScope>\n )}\n </RemoveScroll>\n </PopperContent>\n )}\n </AnimatePresence>\n )\n }\n)\n\n/* -------------------------------------------------------------------------------------------------\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, () => context.onOpenChange(false))}\n />\n )\n }\n)\n\nPopoverClose.displayName = CLOSE_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverArrow\n * -----------------------------------------------------------------------------------------------*/\n\nconst ARROW_NAME = 'PopoverArrow'\n\ntype PopoverArrowElement = HTMLElement | View\nexport type PopoverArrowProps = PopperArrowProps\n\nexport const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(\n (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {\n const { __scopePopover, ...arrowProps } = props\n const popperScope = usePopoverScope(__scopePopover)\n return <PopperArrow {...popperScope} {...arrowProps} ref={forwardedRef} />\n }\n)\n\nPopoverArrow.displayName = ARROW_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverSheetContents\n * -----------------------------------------------------------------------------------------------*/\n\nconst SHEET_CONTENTS_NAME = 'PopoverSheetContents'\n\nexport const PopoverSheetContents = ({ __scopePopover }: ScopedProps<{}>) => {\n const context = usePopoverInternalContext(SHEET_CONTENTS_NAME, __scopePopover)\n return <PortalHost name={`${context.scopeKey}SheetContents`}></PortalHost>\n}\n\nPopoverSheetContents.displayName = SHEET_CONTENTS_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * PopoverScrollView\n * -----------------------------------------------------------------------------------------------*/\n\nconst PopoverScrollView = React.forwardRef<ScrollView, ScrollViewProps>((props, ref) => {\n return <ScrollView ref={ref} {...props} />\n})\n\n/* -------------------------------------------------------------------------------------------------\n * Popover\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Popover = withStaticProperties(\n ((props: ScopedProps<PopoverProps>) => {\n const {\n __scopePopover,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n sheetBreakpoint = false,\n ...restProps\n } = props\n const popperScope = usePopoverScope(__scopePopover)\n const triggerRef = React.useRef<HTMLButtonElement>(null)\n const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false)\n const [open, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen || false,\n onChange: onOpenChange,\n })\n\n const breakpointActive = useSheetBreakpointActive(sheetBreakpoint)\n\n const useFloatingContext = React.useCallback(\n (props: UseFloatingProps) => {\n const floating = useFloating({\n ...props,\n open,\n onOpenChange: setOpen,\n })\n const { getReferenceProps, getFloatingProps } = useInteractions([\n // useFocus(floating.context, {\n // enabled: !breakpointActive,\n // keyboardOnly: true,\n // }),\n useRole(floating.context, { role: 'dialog' }),\n useDismiss(floating.context, {\n enabled: !breakpointActive,\n }),\n ])\n return {\n ...floating,\n getReferenceProps,\n getFloatingProps,\n }\n },\n [breakpointActive, open, setOpen]\n )\n\n return (\n <FloatingOverrideContext.Provider value={useFloatingContext as any}>\n <Popper {...popperScope} stayInFrame {...restProps}>\n <PopoverProviderInternal\n scope={__scopePopover}\n scopeKey={__scopePopover ? Object.keys(__scopePopover)[0] : ''}\n sheetBreakpoint={sheetBreakpoint}\n contentId={useId()}\n triggerRef={triggerRef}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={useEvent(() => {\n if (open && breakpointActive) {\n return\n }\n setOpen(!open)\n })}\n hasCustomAnchor={hasCustomAnchor}\n onCustomAnchorAdd={React.useCallback(() => setHasCustomAnchor(true), [])}\n onCustomAnchorRemove={React.useCallback(() => setHasCustomAnchor(false), [])}\n >\n <PopoverSheetController onOpenChange={setOpen} __scopePopover={__scopePopover}>\n {children}\n </PopoverSheetController>\n </PopoverProviderInternal>\n </Popper>\n </FloatingOverrideContext.Provider>\n )\n }) as React.FC<PopoverProps>,\n {\n Anchor: PopoverAnchor,\n Arrow: PopoverArrow,\n Trigger: PopoverTrigger,\n Content: PopoverContent,\n Close: PopoverClose,\n SheetContents: PopoverSheetContents,\n ScrollView: PopoverScrollView,\n Sheet: ControlledSheet,\n }\n)\n\nPopover.displayName = POPOVER_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed'\n}\n\nconst PopoverSheetController = (\n props: ScopedProps<{\n children: React.ReactNode\n onOpenChange: React.Dispatch<React.SetStateAction<boolean>>\n }>\n) => {\n const context = usePopoverInternalContext('PopoverSheetController', props.__scopePopover)\n const showSheet = useShowPopoverSheet(context)\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n const getShowSheet = useGet(showSheet)\n return (\n <SheetController\n onOpenChange={(val) => {\n if (getShowSheet()) {\n props.onOpenChange(val)\n }\n }}\n open={context.open}\n hidden={breakpointActive === false}\n >\n {props.children}\n </SheetController>\n )\n}\n\nconst useSheetBreakpointActive = (breakpoint?: MediaQueryKey | false) => {\n const media = useMedia()\n return breakpoint ? media[breakpoint] : false\n}\n\nconst useShowPopoverSheet = (context: PopoverContextValue) => {\n // for now always show as sheet on native\n if (!isWeb) return true\n const breakpointActive = useSheetBreakpointActive(context.sheetBreakpoint)\n return context.open === false ? false : breakpointActive\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["props"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/popover",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.223",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -24,20 +24,20 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/react-dom-interactions": "^0.10.3",
|
|
27
|
-
"@tamagui/animate-presence": "^1.0.1-beta.
|
|
28
|
-
"@tamagui/aria-hidden": "^1.0.1-beta.
|
|
29
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
30
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/create-context": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/dismissable": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/focus-scope": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/polyfill-dev": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/popper": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/portal": "^1.0.1-beta.
|
|
37
|
-
"@tamagui/scroll-view": "^1.0.1-beta.
|
|
38
|
-
"@tamagui/sheet": "^1.0.1-beta.
|
|
39
|
-
"@tamagui/stacks": "^1.0.1-beta.
|
|
40
|
-
"@tamagui/use-controllable-state": "^1.0.1-beta.
|
|
27
|
+
"@tamagui/animate-presence": "^1.0.1-beta.223",
|
|
28
|
+
"@tamagui/aria-hidden": "^1.0.1-beta.223",
|
|
29
|
+
"@tamagui/compose-refs": "^1.0.1-beta.223",
|
|
30
|
+
"@tamagui/core": "^1.0.1-beta.223",
|
|
31
|
+
"@tamagui/create-context": "^1.0.1-beta.223",
|
|
32
|
+
"@tamagui/dismissable": "^1.0.1-beta.223",
|
|
33
|
+
"@tamagui/focus-scope": "^1.0.1-beta.223",
|
|
34
|
+
"@tamagui/polyfill-dev": "^1.0.1-beta.223",
|
|
35
|
+
"@tamagui/popper": "^1.0.1-beta.223",
|
|
36
|
+
"@tamagui/portal": "^1.0.1-beta.223",
|
|
37
|
+
"@tamagui/scroll-view": "^1.0.1-beta.223",
|
|
38
|
+
"@tamagui/sheet": "^1.0.1-beta.223",
|
|
39
|
+
"@tamagui/stacks": "^1.0.1-beta.223",
|
|
40
|
+
"@tamagui/use-controllable-state": "^1.0.1-beta.223"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": ">=18",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-native": "*"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
48
|
+
"@tamagui/build": "^1.0.1-beta.223",
|
|
49
49
|
"@types/react-dom": "^18.0.3",
|
|
50
50
|
"@types/react-native": "^0.69.2",
|
|
51
51
|
"react": ">=18",
|
package/src/Popover.tsx
CHANGED
|
@@ -133,7 +133,7 @@ export const PopoverTrigger = React.forwardRef<PopoverTriggerElement, PopoverTri
|
|
|
133
133
|
data-state={getState(context.open)}
|
|
134
134
|
{...triggerProps}
|
|
135
135
|
ref={composedTriggerRef}
|
|
136
|
-
onPress={composeEventHandlers(props.onPress, context.onOpenToggle)}
|
|
136
|
+
onPress={composeEventHandlers(props.onPress as any, context.onOpenToggle)}
|
|
137
137
|
/>
|
|
138
138
|
)
|
|
139
139
|
|
|
@@ -358,7 +358,7 @@ export const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverClosePr
|
|
|
358
358
|
<YStack
|
|
359
359
|
{...closeProps}
|
|
360
360
|
ref={forwardedRef}
|
|
361
|
-
onPress={composeEventHandlers(props.onPress, () => context.onOpenChange(false))}
|
|
361
|
+
onPress={composeEventHandlers(props.onPress as any, () => context.onOpenChange(false))}
|
|
362
362
|
/>
|
|
363
363
|
)
|
|
364
364
|
}
|
|
@@ -440,9 +440,10 @@ export const Popover = withStaticProperties(
|
|
|
440
440
|
onOpenChange: setOpen,
|
|
441
441
|
})
|
|
442
442
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
443
|
-
useFocus(floating.context, {
|
|
444
|
-
|
|
445
|
-
|
|
443
|
+
// useFocus(floating.context, {
|
|
444
|
+
// enabled: !breakpointActive,
|
|
445
|
+
// keyboardOnly: true,
|
|
446
|
+
// }),
|
|
446
447
|
useRole(floating.context, { role: 'dialog' }),
|
|
447
448
|
useDismiss(floating.context, {
|
|
448
449
|
enabled: !breakpointActive,
|