@lobehub/ui/es/Popover/PopoverStandalone.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../src/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { Side } from '@base-ui/react/utils/useAnchorPositioning';\nimport { cx } from 'antd-style';\nimport { cloneElement, isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { PopoverProvider } from './context';\nimport { parseTrigger } from './parseTrigger';\nimport { styles } from './style';\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: originArrow = false,\n    inset = 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    portalled = true,\n    getPopupContainer,\n    disabled = false,\n    zIndex,\n    nativeButton,\n    ref: refProp,\n  }) => {\n    const arrow = inset ? false : originArrow;\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    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        // Don't open if disabled\n        if (disabled && nextOpen) return;\n\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open, disabled],\n    );\n\n    // Parse trigger mode\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\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 baseSideOffset = arrow ? 10 : 6;\n    const resolvedSideOffset = useMemo(() => {\n      if (!inset) return baseSideOffset;\n      return ({\n        side,\n        positioner,\n      }: {\n        positioner: { height: number; width: number };\n        side: Side;\n      }) => {\n        if (\n          side === 'left' ||\n          side === 'right' ||\n          side === 'inline-start' ||\n          side === 'inline-end'\n        ) {\n          return -positioner.width;\n        }\n        return -positioner.height;\n      };\n    }, [baseSideOffset, inset]);\n\n    // Determine portal container\n    const portalContainer = usePopoverPortalContainer();\n\n    const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n    });\n\n    const resolvedClassNames = useMemo(\n      () => ({\n        arrow: cx(styles.arrow, classNames?.arrow),\n        popup: cx(styles.popup, className),\n        positioner: cx(styles.positioner, classNames?.root),\n        trigger: classNames?.trigger,\n        viewport: cx(styles.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 triggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        openOnHover: openOnHover && !disabled,\n      };\n\n      if (isValidElement(children)) {\n        return (\n          <BasePopover.Trigger\n            handle={popoverHandle}\n            {...triggerProps}\n            nativeButton={resolvedNativeButton}\n            render={(props) => {\n              // Base UI's trigger props include `type=\"button\"` by default.\n              // If we render into a non-<button> element, that prop is invalid and can warn.\n              const resolvedProps = (() => {\n                if (isNativeButtonTriggerElement) return props as any;\n                // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n                const { type, ref: triggerRef, ...restProps } = props as any;\n                return restProps;\n              })();\n\n              const mergedProps = mergeProps((children as any).props, resolvedProps);\n              return cloneElement(children as any, {\n                ...mergedProps,\n                className: cx(mergedProps.className, resolvedClassNames.trigger),\n                ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n              });\n            }}\n          />\n        );\n      }\n      return (\n        <BasePopover.Trigger\n          handle={popoverHandle}\n          {...triggerProps}\n          className={resolvedClassNames.trigger}\n          nativeButton={resolvedNativeButton}\n          ref={refProp}\n        >\n          {children}\n        </BasePopover.Trigger>\n      );\n    }, [\n      children,\n      disabled,\n      isNativeButtonTriggerElement,\n      openOnHover,\n      popoverHandle,\n      refProp,\n      resolvedClassNames.trigger,\n      resolvedNativeButton,\n      resolvedOpenDelay,\n      resolvedCloseDelay,\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: zIndex ?? 1100,\n        },\n        viewport: styleProps?.content,\n      }),\n      [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n    );\n\n    const popup = useMemo(\n      () => (\n        <BasePopover.Positioner\n          align={placementConfig.align}\n          className={resolvedClassNames.positioner}\n          data-hover-trigger={openOnHover || undefined}\n          data-placement={placement}\n          side={placementConfig.side}\n          sideOffset={resolvedSideOffset}\n          style={resolvedStyles.positioner}\n        >\n          <BasePopover.Popup className={resolvedClassNames.popup}>\n            {arrow && (\n              <BasePopover.Arrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                {PopoverArrowIcon}\n              </BasePopover.Arrow>\n            )}\n            <BasePopover.Viewport\n              className={resolvedClassNames.viewport}\n              style={resolvedStyles.viewport}\n            >\n              <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n            </BasePopover.Viewport>\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      ),\n      [\n        arrow,\n        content,\n        contextValue,\n        openOnHover,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\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      <BasePopover.Root\n        defaultOpen={defaultOpen}\n        handle={popoverHandle}\n        onOpenChange={handleOpenChange}\n        open={resolvedOpen}\n      >\n        {triggerElement}\n        {portalled ? (\n          resolvedPortalContainer ? (\n            <BasePopover.Portal container={resolvedPortalContainer}>{popup}</BasePopover.Portal>\n          ) : null\n        ) : (\n          popup\n        )}\n      </BasePopover.Root>\n    );\n  },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":"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"}