@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 7.78 kB
Source Map (JSON)
{"version":3,"file":"PopoverGroup.mjs","names":["PopoverGroup: FC<PopoverGroupProps>","BasePopover"],"sources":["../../src/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { Side } from '@base-ui/react/utils/useAnchorPositioning';\nimport { cx } from 'antd-style';\nimport { type FC, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { PopoverProvider } from './context';\nimport {\n PopoverGroupHandleContext,\n type PopoverGroupItem,\n PopoverGroupPropsContext,\n type PopoverGroupSharedProps,\n} from './groupContext';\nimport { parseTrigger } from './parseTrigger';\nimport { styles } from './style';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n children,\n contentLayoutAnimation = false,\n ...sharedProps\n}) => {\n const handle = useMemo(() => BasePopover.createHandle<PopoverGroupItem>(), []);\n const activeItemRef = useRef<PopoverGroupItem | null>(null);\n const close = useCallback(() => {\n handle.close();\n }, [handle]);\n const contextValue = useMemo(() => ({ close }), [close]);\n\n const handleOpenChange = useCallback((open: boolean) => {\n activeItemRef.current?.onOpenChange?.(open);\n }, []);\n\n const [updateKey, setUpdateKey] = useState(0);\n useEffect(() => {\n setUpdateKey((prev) => prev + 1);\n }, [handle]);\n\n const portalContainer = usePopoverPortalContainer();\n\n return (\n <PopoverGroupHandleContext.Provider value={handle}>\n <PopoverGroupPropsContext.Provider value={sharedProps}>\n {children}\n <BasePopover.Root handle={handle} key={updateKey} onOpenChange={handleOpenChange}>\n {({ payload }) => {\n const item = (payload as PopoverGroupItem | null) ?? null;\n activeItemRef.current = item;\n\n if (!item?.content) return null;\n\n const arrow = item.inset ? false : (item.arrow ?? false);\n const placement = item.placement ?? 'top';\n const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n const placementConfig = placementMap[placement] ?? placementMap.top;\n const baseSideOffset = arrow ? 10 : 6;\n const resolvedSideOffset = item.inset\n ? ({\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;\n\n const resolvedClassNames = {\n arrow: cx(styles.arrow, item.classNames?.arrow),\n popup: cx(styles.popup, item.className),\n positioner: cx(styles.positioner, item.classNames?.root),\n viewport: cx(styles.viewport, item.classNames?.content),\n };\n\n const resolvedStyles = {\n arrow: item.styles?.arrow,\n positioner: {\n ...item.styles?.root,\n zIndex: item.zIndex ?? 1100,\n },\n viewport: item.styles?.content,\n };\n\n const contentNode = (\n <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n );\n\n const popup = (\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\n className={resolvedClassNames.arrow}\n style={resolvedStyles.arrow}\n >\n {PopoverArrowIcon}\n </BasePopover.Arrow>\n )}\n {contentLayoutAnimation ? (\n <BasePopover.Viewport\n className={resolvedClassNames.viewport}\n style={resolvedStyles.viewport}\n >\n {contentNode}\n </BasePopover.Viewport>\n ) : (\n <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n {contentNode}\n </div>\n )}\n </BasePopover.Popup>\n </BasePopover.Positioner>\n );\n\n const resolvedPortalContainer = portalContainer;\n const portalled = item.portalled ?? true;\n\n return portalled ? (\n resolvedPortalContainer ? (\n <BasePopover.Portal container={resolvedPortalContainer}>{popup}</BasePopover.Portal>\n ) : null\n ) : (\n popup\n );\n }}\n </BasePopover.Root>\n </PopoverGroupPropsContext.Provider>\n </PopoverGroupHandleContext.Provider>\n );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAMA,gBAAuC,EAC3C,UACA,yBAAyB,OACzB,GAAG,kBACC;CACJ,MAAM,SAAS,cAAcC,QAAY,cAAgC,EAAE,EAAE,CAAC;CAC9E,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,QAAQ,kBAAkB;AAC9B,SAAO,OAAO;IACb,CAAC,OAAO,CAAC;CACZ,MAAM,eAAe,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CAExD,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;CAEN,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;AAC7C,iBAAgB;AACd,gBAAc,SAAS,OAAO,EAAE;IAC/B,CAAC,OAAO,CAAC;CAEZ,MAAM,kBAAkB,2BAA2B;AAEnD,QACE,oBAAC,0BAA0B;EAAS,OAAO;YACzC,qBAAC,yBAAyB;GAAS,OAAO;cACvC,UACD,oBAACA,QAAY;IAAa;IAAwB,cAAc;eAC5D,EAAE,cAAc;KAChB,MAAM,OAAQ,WAAuC;AACrD,mBAAc,UAAU;AAExB,SAAI,CAAC,MAAM,QAAS,QAAO;KAE3B,MAAM,QAAQ,KAAK,QAAQ,QAAS,KAAK,SAAS;KAClD,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,EAAE,gBAAgB,aAAa,KAAK,WAAW,QAAQ;KAE7D,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,iBAAiB,QAAQ,KAAK;KACpC,MAAM,qBAAqB,KAAK,SAC3B,EACC,MACA,iBAII;AACJ,UACE,SAAS,UACT,SAAS,WACT,SAAS,kBACT,SAAS,aAET,QAAO,CAAC,WAAW;AAErB,aAAO,CAAC,WAAW;SAErB;KAEJ,MAAM,qBAAqB;MACzB,OAAO,GAAG,OAAO,OAAO,KAAK,YAAY,MAAM;MAC/C,OAAO,GAAG,OAAO,OAAO,KAAK,UAAU;MACvC,YAAY,GAAG,OAAO,YAAY,KAAK,YAAY,KAAK;MACxD,UAAU,GAAG,OAAO,UAAU,KAAK,YAAY,QAAQ;MACxD;KAED,MAAM,iBAAiB;MACrB,OAAO,KAAK,QAAQ;MACpB,YAAY;OACV,GAAG,KAAK,QAAQ;OAChB,QAAQ,KAAK,UAAU;OACxB;MACD,UAAU,KAAK,QAAQ;MACxB;KAED,MAAM,cACJ,oBAAC;MAAgB,OAAO;gBAAe,KAAK;OAA0B;KAGxE,MAAM,QACJ,oBAACA,QAAY;MACX,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,sBAAoB,eAAe;MACnC,kBAAgB;MAChB,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;gBAEtB,qBAACA,QAAY;OAAM,WAAW,mBAAmB;kBAC9C,SACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;SACiB,EAErB,yBACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;SACoB,GAEvB,oBAAC;QAAI,WAAW,mBAAmB;QAAU,OAAO,eAAe;kBAChE;SACG;QAEU;OACG;KAG3B,MAAM,0BAA0B;AAGhC,YAFkB,KAAK,aAAa,OAGlC,0BACE,oBAACA,QAAY;MAAO,WAAW;gBAA0B;OAA2B,GAClF,OAEJ;;MAhGiC,UAmGpB;IACe;GACD;;AAIzC,aAAa,cAAc;AAE3B,2BAAe"}