@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 9.78 kB
Source Map (JSON)
{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n PopoverArrow,\n PopoverPopup,\n PopoverPortal,\n PopoverPositioner,\n PopoverRoot,\n PopoverTriggerElement,\n PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport { shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { type PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n ({\n children,\n content,\n arrow = false,\n trigger = 'hover',\n placement = 'top',\n styles: styleProps,\n classNames,\n className,\n open,\n onOpenChange,\n defaultOpen = false,\n mouseEnterDelay = 0.1,\n mouseLeaveDelay = 0.1,\n openDelay,\n closeDelay,\n getPopupContainer,\n disabled = false,\n zIndex,\n nativeButton,\n ref: refProp,\n positionerProps,\n triggerProps,\n popupProps,\n backdropProps,\n portalProps,\n }) => {\n const isClient = useIsClient();\n const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n const close = useCallback(() => {\n popoverHandle.close();\n }, [popoverHandle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const mergedOpen = open ?? uncontrolledOpen;\n const resolvedOpen = disabled ? false : mergedOpen;\n\n // Parse trigger mode\n const { openOnClick, openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, eventDetails?: { cancel?: () => void; reason?: string }) => {\n if (disabled && nextOpen) return;\n\n if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n eventDetails?.cancel?.();\n return;\n }\n\n onOpenChange?.(nextOpen);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open, disabled, openOnClick],\n );\n\n // Calculate delays (milliseconds take precedence over seconds)\n const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n // Get placement configuration\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const resolvedSideOffset = arrow ? 10 : 6;\n\n // Determine portal container\n const portalContainer = usePopoverPortalContainer();\n\n const { resolvedNativeButton } = useNativeButton({\n children,\n nativeButton,\n });\n\n const resolvedClassNames = useMemo(\n () => ({\n arrow: classNames?.arrow,\n popup: className,\n positioner: classNames?.root,\n trigger: classNames?.trigger,\n viewport: classNames?.content,\n }),\n [className, classNames?.arrow, classNames?.content, classNames?.root, classNames?.trigger],\n );\n\n // Render trigger element\n const triggerElement = useMemo(() => {\n const baseTriggerProps = {\n closeDelay: resolvedCloseDelay,\n delay: resolvedOpenDelay,\n disabled,\n openOnHover: openOnHover && !disabled,\n ...triggerProps,\n };\n\n return (\n <PopoverTriggerElement\n handle={popoverHandle}\n {...baseTriggerProps}\n className={resolvedClassNames.trigger}\n nativeButton={resolvedNativeButton}\n ref={refProp as any}\n >\n {children}\n </PopoverTriggerElement>\n );\n }, [\n children,\n disabled,\n openOnHover,\n popoverHandle,\n refProp,\n resolvedClassNames.trigger,\n resolvedNativeButton,\n resolvedOpenDelay,\n resolvedCloseDelay,\n triggerProps,\n ]);\n\n // Custom container from getPopupContainer\n const customContainer = useMemo(() => {\n if (!getPopupContainer || !isClient) return undefined;\n // We need a reference element, but we don't have it until render\n // This will be handled by the portal container logic\n return undefined;\n }, [getPopupContainer, isClient]);\n\n const resolvedStyles = useMemo(\n () => ({\n arrow: styleProps?.arrow,\n positioner: {\n ...styleProps?.root,\n ...(zIndex !== undefined ? { zIndex } : {}),\n },\n viewport: styleProps?.content,\n }),\n [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n );\n\n const popup = useMemo(\n () => (\n <PopoverPositioner\n align={placementConfig.align}\n className={resolvedClassNames.positioner}\n hoverTrigger={openOnHover}\n placement={placement}\n side={placementConfig.side}\n sideOffset={resolvedSideOffset}\n style={resolvedStyles.positioner}\n {...positionerProps}\n >\n <PopoverPopup className={resolvedClassNames.popup} {...popupProps}>\n {arrow && (\n <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n {PopoverArrowIcon}\n </PopoverArrow>\n )}\n <PopoverViewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n </PopoverViewport>\n </PopoverPopup>\n </PopoverPositioner>\n ),\n [\n arrow,\n content,\n contextValue,\n openOnHover,\n placement,\n placementConfig.align,\n placementConfig.side,\n popupProps,\n positionerProps,\n resolvedClassNames,\n resolvedSideOffset,\n resolvedStyles,\n ],\n );\n\n // Don't render popup if no content\n if (!content) {\n return children;\n }\n\n const resolvedPortalContainer = customContainer ?? portalContainer;\n\n return (\n <PopoverRoot\n defaultOpen={defaultOpen}\n handle={popoverHandle}\n open={resolvedOpen}\n onOpenChange={handleOpenChange}\n >\n {triggerElement}\n {backdropProps && <BasePopover.Backdrop {...backdropProps} />}\n {resolvedPortalContainer ? (\n <PopoverPortal container={resolvedPortalContainer} {...portalProps}>\n {popup}\n </PopoverPortal>\n ) : null}\n </PopoverRoot>\n );\n },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":"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"}