@lobehub/ui 4.12.2 → 4.13.1

package/es/Tooltip/TooltipGroup.mjs

@@ -1,194 +1,106 @@
 'use client';
 
-import { TooltipGroupApiContext, TooltipGroupPropsContext } from "./groupContext.mjs";
-import TooltipFloating_default from "./TooltipFloating.mjs";
-import TooltipPortal_default from "./TooltipPortal.mjs";
-import { toFloatingUIPlacement } from "../utils/placement.mjs";
-import { isElementHidden, observeElementVisibility } from "./utils.mjs";
+import { TooltipGroupHandleContext, TooltipGroupPropsContext } from "./groupContext.mjs";
+import { placementMap } from "../utils/placement.mjs";
+import { TooltipArrowIcon } from "./ArrowIcon.mjs";
+import TooltipContent_default from "./TooltipContent.mjs";
+import { useTooltipPortalContainer } from "./TooltipPortal.mjs";
+import { styles } from "./style.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
+import { cx } from "antd-style";
+import { Tooltip } from "@base-ui/react/tooltip";
 
 //#region src/Tooltip/TooltipGroup.tsx
-const TooltipGroup = ({ children, layoutAnimation = true, ...sharedProps }) => {
-	const arrowRef = useRef(null);
-	const openTimerRef = useRef(null);
-	const closeTimerRef = useRef(null);
-	const [active, setActive] = useState(null);
-	const [open, setOpen] = useState(false);
-	const activeRef = useRef(null);
+const TooltipGroup = ({ children, layoutAnimation = false, ...sharedProps }) => {
+	const handle = useMemo(() => Tooltip.createHandle(), []);
+	const activeItemRef = useRef(null);
+	const [updateKey, setUpdateKey] = useState(0);
 	useEffect(() => {
-		activeRef.current = active;
-	}, [active]);
-	const floatingPlacement = useMemo(() => toFloatingUIPlacement(active?.item.placement), [active?.item.placement]);
-	const { context, floatingStyles, refs } = useFloating({
-		middleware: useMemo(() => {
-			const base = [
-				offset(8),
-				flip(),
-				shift({ padding: 8 })
-			];
-			if (active?.item.arrow) base.push(arrow({ element: arrowRef }));
-			return base;
-		}, [active?.item.arrow]),
-		open,
-		placement: floatingPlacement,
-		whileElementsMounted: autoUpdate
-	});
-	useEffect(() => {
-		if (!active?.triggerEl) return;
-		refs.setReference(active.triggerEl);
-	}, [active?.triggerEl, refs]);
-	const clearTimers = useCallback(() => {
-		if (openTimerRef.current) window.clearTimeout(openTimerRef.current);
-		if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);
-		openTimerRef.current = null;
-		closeTimerRef.current = null;
+		setUpdateKey((prev) => prev + 1);
+	}, [handle]);
+	const handleOpenChange = useCallback((open) => {
+		activeItemRef.current?.onOpenChange?.(open);
 	}, []);
-	const closeImmediately = useCallback(() => {
-		clearTimers();
-		setOpen(false);
-		activeRef.current?.item.onOpenChange?.(false);
-	}, [clearTimers]);
-	const destroyActive = useCallback(() => {
-		clearTimers();
-		setOpen(false);
-		activeRef.current?.item.onOpenChange?.(false);
-		setActive(null);
-	}, [clearTimers]);
-	const isActiveTrigger = useCallback((triggerEl) => {
-		return Boolean(activeRef.current && activeRef.current.triggerEl === triggerEl);
-	}, []);
-	const closeFromTrigger = useCallback((triggerEl, item) => {
-		if (!activeRef.current || activeRef.current.triggerEl !== triggerEl) return;
-		clearTimers();
-		const delayMs = item.closeDelay ?? (item.mouseLeaveDelay !== void 0 ? item.mouseLeaveDelay * 1e3 : 100);
-		if (delayMs <= 0) {
-			setOpen(false);
-			item.onOpenChange?.(false);
-			return;
-		}
-		closeTimerRef.current = window.setTimeout(() => {
-			setOpen(false);
-			item.onOpenChange?.(false);
-		}, delayMs);
-	}, [clearTimers]);
-	const openFromTrigger = useCallback((triggerEl, item) => {
-		if (!triggerEl) return;
-		if (!item.title) return;
-		if (item.disabled) return;
-		clearTimers();
-		if (isElementHidden(triggerEl)) {
-			if (isActiveTrigger(triggerEl)) destroyActive();
-			return;
-		}
-		setActive({
-			item,
-			triggerEl
-		});
-		const delayMs = item.openDelay ?? (item.mouseEnterDelay !== void 0 ? item.mouseEnterDelay * 1e3 : 400);
-		if (delayMs <= 0) {
-			if (isElementHidden(triggerEl)) {
-				destroyActive();
-				return;
-			}
-			setOpen(true);
-			item.onOpenChange?.(true);
-			return;
-		}
-		openTimerRef.current = window.setTimeout(() => {
-			if (isElementHidden(triggerEl)) {
-				destroyActive();
-				return;
-			}
-			setOpen(true);
-			item.onOpenChange?.(true);
-		}, delayMs);
-	}, [
-		clearTimers,
-		destroyActive,
-		isActiveTrigger
-	]);
-	const groupApi = useMemo(() => ({
-		closeFromTrigger,
-		closeImmediately,
-		isActiveTrigger,
-		openFromTrigger
-	}), [
-		closeFromTrigger,
-		closeImmediately,
-		isActiveTrigger,
-		openFromTrigger
-	]);
-	useEffect(() => {
-		if (!open) return;
-		const triggerEl = active?.triggerEl;
-		if (!triggerEl) return;
-		if (isElementHidden(triggerEl)) {
-			destroyActive();
-			return;
-		}
-		const stopVisibilityObserver = observeElementVisibility(triggerEl, (visible) => {
-			if (!visible) destroyActive();
-		});
-		const root = triggerEl.getRootNode?.();
-		const observeTarget = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : triggerEl.ownerDocument ?? document;
-		const observer = new MutationObserver(() => {
-			if (isElementHidden(triggerEl)) destroyActive();
-		});
-		observer.observe(observeTarget, {
-			childList: true,
-			subtree: true
-		});
-		return () => {
-			observer.disconnect();
-			stopVisibilityObserver?.();
-		};
-	}, [
-		active?.triggerEl,
-		destroyActive,
-		open
-	]);
-	useEffect(() => {
-		return () => {
-			clearTimers();
-		};
-	}, [clearTimers]);
-	const portalRoot = active?.item.getPopupContainer && active?.triggerEl ? active.item.getPopupContainer(active.triggerEl) : void 0;
-	const openRef = useRef(open);
-	useEffect(() => {
-		openRef.current = open;
-	}, [open]);
-	const isInitialShow = !openRef.current && open;
-	const floatingNode = /* @__PURE__ */ jsx(TooltipFloating_default, {
-		arrow: active?.item.arrow,
-		arrowRef,
-		className: active?.item.className,
-		classNames: active?.item.classNames,
-		context,
-		floatingStyles,
-		hotkey: active?.item.hotkey,
-		hotkeyProps: active?.item.hotkeyProps,
-		isInitialShow,
-		layoutAnimation,
-		open,
-		placement: floatingPlacement,
-		setFloating: refs.setFloating,
-		styles: active?.item.styles,
-		title: active?.item.title,
-		zIndex: active?.item.zIndex
-	});
-	return /* @__PURE__ */ jsx(TooltipGroupApiContext.Provider, {
-		value: groupApi,
+	const portalContainer = useTooltipPortalContainer();
+	return /* @__PURE__ */ jsx(TooltipGroupHandleContext.Provider, {
+		value: handle,
 		children: /* @__PURE__ */ jsxs(TooltipGroupPropsContext.Provider, {
 			value: sharedProps,
-			children: [children, active?.item.title && !active.item.disabled && (active.item.portalled ?? true ? /* @__PURE__ */ jsx(TooltipPortal_default, {
-				root: portalRoot,
-				children: floatingNode
-			}) : floatingNode)]
+			children: [children, /* @__PURE__ */ jsx(Tooltip.Root, {
+				handle,
+				onOpenChange: handleOpenChange,
+				children: ({ payload }) => {
+					const item = payload ?? null;
+					activeItemRef.current = item;
+					if (!item || item.title == null && !item.hotkey) return null;
+					const arrow = item.arrow ?? true;
+					const placement = item.placement ?? "top";
+					const placementConfig = placementMap[placement] ?? placementMap.top;
+					const baseSideOffset = arrow ? 8 : 6;
+					const resolvedClassNames = {
+						arrow: cx(styles.arrow, item.classNames?.arrow),
+						popup: cx(styles.popup, item.className, item.classNames?.root, item.classNames?.container),
+						positioner: styles.positioner,
+						viewport: cx(styles.viewport, item.classNames?.content)
+					};
+					const resolvedStyleProps = (() => {
+						if (typeof item.styles === "function") return void 0;
+						return item.styles;
+					})();
+					const resolvedStyles = {
+						arrow: resolvedStyleProps?.arrow,
+						popup: {
+							...resolvedStyleProps?.root,
+							...resolvedStyleProps?.container
+						},
+						positioner: { zIndex: item.zIndex ?? 1100 },
+						viewport: resolvedStyleProps?.content
+					};
+					const body = layoutAnimation ? /* @__PURE__ */ jsx(Tooltip.Viewport, {
+						className: resolvedClassNames.viewport,
+						style: resolvedStyles.viewport,
+						children: /* @__PURE__ */ jsx(TooltipContent_default, {
+							hotkey: item.hotkey,
+							hotkeyProps: item.hotkeyProps,
+							title: item.title
+						})
+					}) : /* @__PURE__ */ jsx("div", {
+						className: resolvedClassNames.viewport,
+						style: resolvedStyles.viewport,
+						children: /* @__PURE__ */ jsx(TooltipContent_default, {
+							hotkey: item.hotkey,
+							hotkeyProps: item.hotkeyProps,
+							title: item.title
+						})
+					});
+					const popup = /* @__PURE__ */ jsx(Tooltip.Positioner, {
+						align: placementConfig.align,
+						className: resolvedClassNames.positioner,
+						"data-placement": placement,
+						side: placementConfig.side,
+						sideOffset: baseSideOffset,
+						style: resolvedStyles.positioner,
+						children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
+							className: resolvedClassNames.popup,
+							style: resolvedStyles.popup,
+							children: [arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, {
+								className: resolvedClassNames.arrow,
+								style: resolvedStyles.arrow,
+								children: TooltipArrowIcon
+							}), body]
+						})
+					});
+					return item.portalled ?? true ? portalContainer ? /* @__PURE__ */ jsx(Tooltip.Portal, {
+						container: portalContainer,
+						children: popup
+					}) : null : popup;
+				}
+			}, updateKey)]
 		})
 	});
 };
+TooltipGroup.displayName = "TooltipGroup";
 var TooltipGroup_default = TooltipGroup;
 
 //#endregion

package/es/Tooltip/TooltipGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipGroup.mjs","names":["TooltipGroup: FC<TooltipGroupProps>","arrowMiddleware","TooltipFloating","TooltipPortal"],"sources":["../../src/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport {\n  arrow as arrowMiddleware,\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useFloating,\n} from '@floating-ui/react';\nimport { type FC, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { toFloatingUIPlacement } from '@/utils/placement';\n\nimport TooltipFloating from './TooltipFloating';\nimport TooltipPortal from './TooltipPortal';\nimport {\n  TooltipGroupApiContext,\n  type TooltipGroupItem,\n  TooltipGroupPropsContext,\n  type TooltipGroupSharedProps,\n} from './groupContext';\nimport { isElementHidden, observeElementVisibility } from './utils';\n\ntype TooltipGroupProps = TooltipGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n  children,\n  layoutAnimation = true,\n  ...sharedProps\n}) => {\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const [active, setActive] = useState<{\n    item: TooltipGroupItem;\n    triggerEl: HTMLElement;\n  } | null>(null);\n  const [open, setOpen] = useState(false);\n  const activeRef = useRef<typeof active>(null);\n\n  useEffect(() => {\n    activeRef.current = active;\n  }, [active]);\n\n  const floatingPlacement = useMemo(\n    () => toFloatingUIPlacement(active?.item.placement),\n    [active?.item.placement],\n  );\n\n  const middleware = useMemo(() => {\n    const base = [offset(8), flip(), shift({ padding: 8 })];\n    if (active?.item.arrow) base.push(arrowMiddleware({ element: arrowRef }));\n    return base;\n  }, [active?.item.arrow]);\n\n  const { context, floatingStyles, refs } = useFloating({\n    middleware,\n    open,\n    placement: floatingPlacement,\n    whileElementsMounted: autoUpdate,\n  });\n\n  useEffect(() => {\n    if (!active?.triggerEl) return;\n    refs.setReference(active.triggerEl);\n  }, [active?.triggerEl, refs]);\n\n  const clearTimers = useCallback(() => {\n    if (openTimerRef.current) window.clearTimeout(openTimerRef.current);\n    if (closeTimerRef.current) window.clearTimeout(closeTimerRef.current);\n    openTimerRef.current = null;\n    closeTimerRef.current = null;\n  }, []);\n\n  const closeImmediately = useCallback(() => {\n    clearTimers();\n    setOpen(false);\n    activeRef.current?.item.onOpenChange?.(false);\n  }, [clearTimers]);\n\n  const destroyActive = useCallback(() => {\n    clearTimers();\n    setOpen(false);\n    activeRef.current?.item.onOpenChange?.(false);\n    setActive(null);\n  }, [clearTimers]);\n\n  const isActiveTrigger = useCallback((triggerEl: HTMLElement) => {\n    return Boolean(activeRef.current && activeRef.current.triggerEl === triggerEl);\n  }, []);\n\n  const closeFromTrigger = useCallback(\n    (triggerEl: HTMLElement, item: TooltipGroupItem) => {\n      if (!activeRef.current || activeRef.current.triggerEl !== triggerEl) return;\n\n      clearTimers();\n\n      const delayMs =\n        item.closeDelay ?? (item.mouseLeaveDelay !== undefined ? item.mouseLeaveDelay * 1000 : 100);\n      if (delayMs <= 0) {\n        setOpen(false);\n        item.onOpenChange?.(false);\n        return;\n      }\n\n      closeTimerRef.current = window.setTimeout(() => {\n        setOpen(false);\n        item.onOpenChange?.(false);\n      }, delayMs);\n    },\n    [clearTimers],\n  );\n\n  const openFromTrigger = useCallback(\n    (triggerEl: HTMLElement, item: TooltipGroupItem) => {\n      if (!triggerEl) return;\n      if (!item.title) return;\n      if (item.disabled) return;\n\n      clearTimers();\n\n      if (isElementHidden(triggerEl)) {\n        if (isActiveTrigger(triggerEl)) destroyActive();\n        return;\n      }\n\n      setActive({ item, triggerEl });\n\n      const delayMs =\n        item.openDelay ?? (item.mouseEnterDelay !== undefined ? item.mouseEnterDelay * 1000 : 400);\n      if (delayMs <= 0) {\n        if (isElementHidden(triggerEl)) {\n          destroyActive();\n          return;\n        }\n        setOpen(true);\n        item.onOpenChange?.(true);\n        return;\n      }\n\n      openTimerRef.current = window.setTimeout(() => {\n        if (isElementHidden(triggerEl)) {\n          destroyActive();\n          return;\n        }\n        setOpen(true);\n        item.onOpenChange?.(true);\n      }, delayMs);\n    },\n    [clearTimers, destroyActive, isActiveTrigger],\n  );\n\n  const groupApi = useMemo(\n    () => ({ closeFromTrigger, closeImmediately, isActiveTrigger, openFromTrigger }),\n    [closeFromTrigger, closeImmediately, isActiveTrigger, openFromTrigger],\n  );\n\n  useEffect(() => {\n    if (!open) return;\n    const triggerEl = active?.triggerEl;\n    if (!triggerEl) return;\n\n    if (isElementHidden(triggerEl)) {\n      destroyActive();\n      return;\n    }\n\n    const stopVisibilityObserver = observeElementVisibility(triggerEl, (visible) => {\n      if (!visible) destroyActive();\n    });\n\n    const root = triggerEl.getRootNode?.();\n    const observeTarget =\n      typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot\n        ? root\n        : (triggerEl.ownerDocument ?? document);\n\n    const observer = new MutationObserver(() => {\n      if (isElementHidden(triggerEl)) destroyActive();\n    });\n\n    observer.observe(observeTarget, { childList: true, subtree: true });\n\n    return () => {\n      observer.disconnect();\n      stopVisibilityObserver?.();\n    };\n  }, [active?.triggerEl, destroyActive, open]);\n\n  useEffect(() => {\n    return () => {\n      clearTimers();\n    };\n  }, [clearTimers]);\n\n  const portalRoot =\n    active?.item.getPopupContainer && active?.triggerEl\n      ? active.item.getPopupContainer(active.triggerEl)\n      : undefined;\n\n  const openRef = useRef(open);\n  useEffect(() => {\n    openRef.current = open;\n  }, [open]);\n\n  const isInitialShow = !openRef.current && open;\n\n  const floatingNode = (\n    <TooltipFloating\n      arrow={active?.item.arrow}\n      arrowRef={arrowRef}\n      className={active?.item.className}\n      classNames={active?.item.classNames}\n      context={context}\n      floatingStyles={floatingStyles}\n      hotkey={active?.item.hotkey}\n      hotkeyProps={active?.item.hotkeyProps}\n      isInitialShow={isInitialShow}\n      layoutAnimation={layoutAnimation}\n      open={open}\n      placement={floatingPlacement}\n      setFloating={refs.setFloating}\n      styles={active?.item.styles}\n      title={active?.item.title}\n      zIndex={active?.item.zIndex}\n    />\n  );\n\n  return (\n    <TooltipGroupApiContext.Provider value={groupApi}>\n      <TooltipGroupPropsContext.Provider value={sharedProps}>\n        {children}\n        {active?.item.title &&\n          !active.item.disabled &&\n          ((active.item.portalled ?? true) ? (\n            <TooltipPortal root={portalRoot}>{floatingNode}</TooltipPortal>\n          ) : (\n            floatingNode\n          ))}\n      </TooltipGroupPropsContext.Provider>\n    </TooltipGroupApiContext.Provider>\n  );\n};\n\nexport default TooltipGroup;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipGroup.mjs","names":["TooltipGroup: FC<TooltipGroupProps>","BaseTooltip","TooltipContent"],"sources":["../../src/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { type FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport TooltipContent from './TooltipContent';\nimport { useTooltipPortalContainer } from './TooltipPortal';\nimport {\n  TooltipGroupHandleContext,\n  type TooltipGroupItem,\n  TooltipGroupPropsContext,\n} from './groupContext';\nimport { styles } from './style';\nimport type { TooltipGroupProps } from './type';\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n  children,\n  layoutAnimation = false,\n  ...sharedProps\n}) => {\n  const handle = useMemo(() => BaseTooltip.createHandle<TooltipGroupItem>(), []);\n  const activeItemRef = useRef<TooltipGroupItem | null>(null);\n\n  const [updateKey, setUpdateKey] = useState(0);\n  useEffect(() => {\n    setUpdateKey((prev) => prev + 1);\n  }, [handle]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  const portalContainer = useTooltipPortalContainer();\n\n  return (\n    <TooltipGroupHandleContext.Provider value={handle}>\n      <TooltipGroupPropsContext.Provider value={sharedProps}>\n        {children}\n        <BaseTooltip.Root handle={handle} key={updateKey} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as TooltipGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            // eslint-disable-next-line eqeqeq\n            if (!item || (item.title == null && !item.hotkey)) return null;\n\n            const arrow = item.arrow ?? true;\n            const placement = item.placement ?? 'top';\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const baseSideOffset = arrow ? 8 : 6;\n\n            const resolvedClassNames = {\n              arrow: cx(styles.arrow, item.classNames?.arrow),\n              popup: cx(\n                styles.popup,\n                item.className,\n                item.classNames?.root,\n                item.classNames?.container,\n              ),\n              positioner: styles.positioner,\n              viewport: cx(styles.viewport, item.classNames?.content),\n            };\n\n            const resolvedStyleProps = (() => {\n              if (typeof item.styles === 'function') return undefined;\n              return item.styles;\n            })();\n\n            const resolvedStyles = {\n              arrow: resolvedStyleProps?.arrow,\n              popup: {\n                ...resolvedStyleProps?.root,\n                ...resolvedStyleProps?.container,\n              },\n              positioner: {\n                zIndex: item.zIndex ?? 1100,\n              },\n              viewport: resolvedStyleProps?.content,\n            };\n\n            const body = layoutAnimation ? (\n              <BaseTooltip.Viewport\n                className={resolvedClassNames.viewport}\n                style={resolvedStyles.viewport}\n              >\n                <TooltipContent\n                  hotkey={item.hotkey}\n                  hotkeyProps={item.hotkeyProps}\n                  title={item.title}\n                />\n              </BaseTooltip.Viewport>\n            ) : (\n              <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n                <TooltipContent\n                  hotkey={item.hotkey}\n                  hotkeyProps={item.hotkeyProps}\n                  title={item.title}\n                />\n              </div>\n            );\n\n            const popup = (\n              <BaseTooltip.Positioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-placement={placement}\n                side={placementConfig.side}\n                sideOffset={baseSideOffset}\n                style={resolvedStyles.positioner}\n              >\n                <BaseTooltip.Popup\n                  className={resolvedClassNames.popup}\n                  style={resolvedStyles.popup}\n                >\n                  {arrow && (\n                    <BaseTooltip.Arrow\n                      className={resolvedClassNames.arrow}\n                      style={resolvedStyles.arrow}\n                    >\n                      {TooltipArrowIcon}\n                    </BaseTooltip.Arrow>\n                  )}\n                  {body}\n                </BaseTooltip.Popup>\n              </BaseTooltip.Positioner>\n            );\n\n            const portalled = item.portalled ?? true;\n\n            return portalled ? (\n              portalContainer ? (\n                <BaseTooltip.Portal container={portalContainer}>{popup}</BaseTooltip.Portal>\n              ) : null\n            ) : (\n              popup\n            );\n          }}\n        </BaseTooltip.Root>\n      </TooltipGroupPropsContext.Provider>\n    </TooltipGroupHandleContext.Provider>\n  );\n};\n\nTooltipGroup.displayName = 'TooltipGroup';\n\nexport default TooltipGroup;\n"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAMA,gBAAuC,EAC3C,UACA,kBAAkB,OAClB,GAAG,kBACC;CACJ,MAAM,SAAS,cAAcC,QAAY,cAAgC,EAAE,EAAE,CAAC;CAC9E,MAAM,gBAAgB,OAAgC,KAAK;CAE3D,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;AAC7C,iBAAgB;AACd,gBAAc,SAAS,OAAO,EAAE;IAC/B,CAAC,OAAO,CAAC;CAEZ,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;CAEN,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;AAGxB,SAAI,CAAC,QAAS,KAAK,SAAS,QAAQ,CAAC,KAAK,OAAS,QAAO;KAE1D,MAAM,QAAQ,KAAK,SAAS;KAC5B,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,iBAAiB,QAAQ,IAAI;KAEnC,MAAM,qBAAqB;MACzB,OAAO,GAAG,OAAO,OAAO,KAAK,YAAY,MAAM;MAC/C,OAAO,GACL,OAAO,OACP,KAAK,WACL,KAAK,YAAY,MACjB,KAAK,YAAY,UAClB;MACD,YAAY,OAAO;MACnB,UAAU,GAAG,OAAO,UAAU,KAAK,YAAY,QAAQ;MACxD;KAED,MAAM,4BAA4B;AAChC,UAAI,OAAO,KAAK,WAAW,WAAY,QAAO;AAC9C,aAAO,KAAK;SACV;KAEJ,MAAM,iBAAiB;MACrB,OAAO,oBAAoB;MAC3B,OAAO;OACL,GAAG,oBAAoB;OACvB,GAAG,oBAAoB;OACxB;MACD,YAAY,EACV,QAAQ,KAAK,UAAU,MACxB;MACD,UAAU,oBAAoB;MAC/B;KAED,MAAM,OAAO,kBACX,oBAACA,QAAY;MACX,WAAW,mBAAmB;MAC9B,OAAO,eAAe;gBAEtB,oBAACC;OACC,QAAQ,KAAK;OACb,aAAa,KAAK;OAClB,OAAO,KAAK;QACZ;OACmB,GAEvB,oBAAC;MAAI,WAAW,mBAAmB;MAAU,OAAO,eAAe;gBACjE,oBAACA;OACC,QAAQ,KAAK;OACb,aAAa,KAAK;OAClB,OAAO,KAAK;QACZ;OACE;KAGR,MAAM,QACJ,oBAACD,QAAY;MACX,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,kBAAgB;MAChB,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;gBAEtB,qBAACA,QAAY;OACX,WAAW,mBAAmB;OAC9B,OAAO,eAAe;kBAErB,SACC,oBAACA,QAAY;QACX,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;SACiB,EAErB;QACiB;OACG;AAK3B,YAFkB,KAAK,aAAa,OAGlC,kBACE,oBAACA,QAAY;MAAO,WAAW;gBAAkB;OAA2B,GAC1E,OAEJ;;MAhGiC,UAmGpB;IACe;GACD;;AAIzC,aAAa,cAAc;AAE3B,2BAAe"}

package/es/Tooltip/TooltipInGroup.mjs

@@ -1,62 +1,64 @@
 'use client';
 
-import { composeEventHandlers } from "../utils/composeEventHandlers.mjs";
-import { TooltipGroupApiContext } from "./groupContext.mjs";
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { TooltipGroupHandleContext } from "./groupContext.mjs";
 import { useMergedTooltipProps } from "./useMergedTooltipProps.mjs";
-import { useTooltipTrigger } from "./useTooltipTrigger.mjs";
-import { cloneElement, isValidElement, useContext, useEffect, useMemo, useRef } from "react";
+import { cloneElement, isValidElement, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Tooltip } from "@base-ui/react/tooltip";
 import { mergeRefs } from "react-merge-refs";
 
 //#region src/Tooltip/TooltipInGroup.tsx
-const TooltipInGroup = ({ ref, children, ...props }) => {
-	const group = useContext(TooltipGroupApiContext);
-	const triggerElRef = useRef(null);
+const DEFAULT_OPEN_DELAY = 400;
+const DEFAULT_CLOSE_DELAY = 100;
+const TooltipInGroup = ({ children, ref: refProp, ...props }) => {
+	const group = useContext(TooltipGroupHandleContext);
 	const item = useMergedTooltipProps(props);
-	const trigger = useTooltipTrigger(children);
-	const referenceNode = useMemo(() => {
-		if (!isValidElement(trigger)) return trigger;
-		const originalRef = trigger.ref;
-		const triggerProps = trigger.props || {};
-		const setTriggerEl = (node) => {
-			triggerElRef.current = node instanceof HTMLElement ? node : null;
-		};
-		return cloneElement(trigger, {
-			...triggerProps,
-			onBlur: composeEventHandlers(triggerProps.onBlur, (e) => {
-				group?.closeFromTrigger(e.currentTarget, item);
-			}),
-			onFocus: composeEventHandlers(triggerProps.onFocus, (e) => {
-				group?.openFromTrigger(e.currentTarget, item);
-			}),
-			onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (e) => {
-				if (e?.key === "Escape") group?.closeImmediately();
-			}),
-			onPointerEnter: composeEventHandlers(triggerProps.onPointerEnter, (e) => {
-				group?.openFromTrigger(e.currentTarget, item);
-			}),
-			onPointerLeave: composeEventHandlers(triggerProps.onPointerLeave, (e) => {
-				group?.closeFromTrigger(e.currentTarget, item);
-			}),
-			ref: mergeRefs([
-				originalRef,
-				setTriggerEl,
-				ref
-			])
-		});
-	}, [
-		group,
-		item,
-		ref,
-		trigger
-	]);
-	useEffect(() => {
-		return () => {
-			if (!group) return;
-			const el = triggerElRef.current;
-			if (el && group.isActiveTrigger(el)) group.closeImmediately();
-		};
-	}, [group]);
-	return referenceNode;
+	const resolvedOpenDelay = useMemo(() => {
+		if (item.openDelay !== void 0) return item.openDelay;
+		if (item.mouseEnterDelay !== void 0) return item.mouseEnterDelay * 1e3;
+		return DEFAULT_OPEN_DELAY;
+	}, [item.mouseEnterDelay, item.openDelay]);
+	const resolvedCloseDelay = useMemo(() => {
+		if (item.closeDelay !== void 0) return item.closeDelay;
+		if (item.mouseLeaveDelay !== void 0) return item.mouseLeaveDelay * 1e3;
+		return DEFAULT_CLOSE_DELAY;
+	}, [item.closeDelay, item.mouseLeaveDelay]);
+	const disabled = Boolean(item.disabled);
+	const { isNativeButtonTriggerElement } = useNativeButton({ children });
+	if (item.title == null && !item.hotkey) return children;
+	const triggerProps = {
+		closeDelay: resolvedCloseDelay,
+		delay: resolvedOpenDelay,
+		disabled,
+		payload: item
+	};
+	if (isValidElement(children)) return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		handle: group ?? void 0,
+		...triggerProps,
+		render: (renderProps) => {
+			const resolvedProps = (() => {
+				if (isNativeButtonTriggerElement) return renderProps;
+				const { type, ref: triggerRef, ...restProps } = renderProps;
+				return restProps;
+			})();
+			return cloneElement(children, {
+				...mergeProps(children.props, resolvedProps),
+				ref: mergeRefs([
+					children.ref,
+					renderProps.ref,
+					refProp
+				])
+			});
+		}
+	});
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		handle: group ?? void 0,
+		...triggerProps,
+		ref: refProp,
+		children
+	});
 };
 TooltipInGroup.displayName = "TooltipInGroup";
 

package/es/Tooltip/TooltipInGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipInGroup.mjs","names":["TooltipInGroup: FC<TooltipProps>","triggerProps: any"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { composeEventHandlers } from '@/utils/composeEventHandlers';\n\nimport { TooltipGroupApiContext } from './groupContext';\nimport type { TooltipProps } from './type';\nimport { useMergedTooltipProps } from './useMergedTooltipProps';\nimport { useTooltipTrigger } from './useTooltipTrigger';\n\nexport const TooltipInGroup: FC<TooltipProps> = ({ ref, children, ...props }) => {\n  const group = useContext(TooltipGroupApiContext);\n  const triggerElRef = useRef<HTMLElement | null>(null);\n  const item = useMergedTooltipProps(props);\n  const trigger = useTooltipTrigger(children);\n\n  const referenceNode = useMemo(() => {\n    if (!isValidElement(trigger)) return trigger;\n\n    const originalRef = (trigger as any).ref;\n    const triggerProps: any = trigger.props || {};\n\n    const setTriggerEl = (node: any) => {\n      triggerElRef.current = node instanceof HTMLElement ? node : null;\n    };\n\n    return cloneElement(trigger as any, {\n      ...triggerProps,\n      onBlur: composeEventHandlers(triggerProps.onBlur, (e: any) => {\n        group?.closeFromTrigger(e.currentTarget as HTMLElement, item);\n      }),\n      onFocus: composeEventHandlers(triggerProps.onFocus, (e: any) => {\n        group?.openFromTrigger(e.currentTarget as HTMLElement, item);\n      }),\n      onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (e: any) => {\n        if (e?.key === 'Escape') group?.closeImmediately();\n      }),\n      onPointerEnter: composeEventHandlers(triggerProps.onPointerEnter, (e: any) => {\n        group?.openFromTrigger(e.currentTarget as HTMLElement, item);\n      }),\n      onPointerLeave: composeEventHandlers(triggerProps.onPointerLeave, (e: any) => {\n        group?.closeFromTrigger(e.currentTarget as HTMLElement, item);\n      }),\n      ref: mergeRefs([originalRef, setTriggerEl, ref]),\n    });\n  }, [group, item, ref, trigger]);\n\n  // Close when the trigger is swapped out or disconnected.\n  useEffect(() => {\n    return () => {\n      if (!group) return;\n      const el = triggerElRef.current;\n      if (el && group.isActiveTrigger(el)) group.closeImmediately();\n    };\n  }, [group]);\n\n  return referenceNode as ReactNode;\n};\n\nTooltipInGroup.displayName = 'TooltipInGroup';\n"],"mappings":";;;;;;;;;;AAqBA,MAAaA,kBAAoC,EAAE,KAAK,UAAU,GAAG,YAAY;CAC/E,MAAM,QAAQ,WAAW,uBAAuB;CAChD,MAAM,eAAe,OAA2B,KAAK;CACrD,MAAM,OAAO,sBAAsB,MAAM;CACzC,MAAM,UAAU,kBAAkB,SAAS;CAE3C,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,eAAe,QAAQ,CAAE,QAAO;EAErC,MAAM,cAAe,QAAgB;EACrC,MAAMC,eAAoB,QAAQ,SAAS,EAAE;EAE7C,MAAM,gBAAgB,SAAc;AAClC,gBAAa,UAAU,gBAAgB,cAAc,OAAO;;AAG9D,SAAO,aAAa,SAAgB;GAClC,GAAG;GACH,QAAQ,qBAAqB,aAAa,SAAS,MAAW;AAC5D,WAAO,iBAAiB,EAAE,eAA8B,KAAK;KAC7D;GACF,SAAS,qBAAqB,aAAa,UAAU,MAAW;AAC9D,WAAO,gBAAgB,EAAE,eAA8B,KAAK;KAC5D;GACF,WAAW,qBAAqB,aAAa,YAAY,MAAW;AAClE,QAAI,GAAG,QAAQ,SAAU,QAAO,kBAAkB;KAClD;GACF,gBAAgB,qBAAqB,aAAa,iBAAiB,MAAW;AAC5E,WAAO,gBAAgB,EAAE,eAA8B,KAAK;KAC5D;GACF,gBAAgB,qBAAqB,aAAa,iBAAiB,MAAW;AAC5E,WAAO,iBAAiB,EAAE,eAA8B,KAAK;KAC7D;GACF,KAAK,UAAU;IAAC;IAAa;IAAc;IAAI,CAAC;GACjD,CAAC;IACD;EAAC;EAAO;EAAM;EAAK;EAAQ,CAAC;AAG/B,iBAAgB;AACd,eAAa;AACX,OAAI,CAAC,MAAO;GACZ,MAAM,KAAK,aAAa;AACxB,OAAI,MAAM,MAAM,gBAAgB,GAAG,CAAE,OAAM,kBAAkB;;IAE9D,CAAC,MAAM,CAAC;AAEX,QAAO;;AAGT,eAAe,cAAc"}
+{"version":3,"file":"TooltipInGroup.mjs","names":["TooltipInGroup: FC<TooltipProps>","BaseTooltip"],"sources":["../../src/Tooltip/TooltipInGroup.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { type FC, cloneElement, isValidElement, useContext, useMemo } from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\n\nimport { TooltipGroupHandleContext } from './groupContext';\nimport type { TooltipProps } from './type';\nimport { useMergedTooltipProps } from './useMergedTooltipProps';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\nexport const TooltipInGroup: FC<TooltipProps> = ({ children, ref: refProp, ...props }) => {\n  const group = useContext(TooltipGroupHandleContext);\n  const item = useMergedTooltipProps(props);\n\n  const resolvedOpenDelay = useMemo(() => {\n    if (item.openDelay !== undefined) return item.openDelay;\n    if (item.mouseEnterDelay !== undefined) return item.mouseEnterDelay * 1000;\n    return DEFAULT_OPEN_DELAY;\n  }, [item.mouseEnterDelay, item.openDelay]);\n\n  const resolvedCloseDelay = useMemo(() => {\n    if (item.closeDelay !== undefined) return item.closeDelay;\n    if (item.mouseLeaveDelay !== undefined) return item.mouseLeaveDelay * 1000;\n    return DEFAULT_CLOSE_DELAY;\n  }, [item.closeDelay, item.mouseLeaveDelay]);\n\n  const disabled = Boolean(item.disabled);\n\n  const { isNativeButtonTriggerElement } = useNativeButton({\n    children,\n  });\n\n  // Don't render trigger behavior if no content\n  // eslint-disable-next-line eqeqeq\n  if (item.title == null && !item.hotkey) {\n    return children as any;\n  }\n\n  const triggerProps = {\n    closeDelay: resolvedCloseDelay,\n    delay: resolvedOpenDelay,\n    disabled,\n    payload: item,\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <BaseTooltip.Trigger\n        handle={group ?? undefined}\n        {...triggerProps}\n        render={(renderProps) => {\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 renderProps as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = renderProps 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            ref: mergeRefs([(children as any).ref, (renderProps as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BaseTooltip.Trigger handle={group ?? undefined} {...triggerProps} ref={refProp}>\n      {children}\n    </BaseTooltip.Trigger>\n  );\n};\n\nTooltipInGroup.displayName = 'TooltipInGroup';\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAE5B,MAAaA,kBAAoC,EAAE,UAAU,KAAK,SAAS,GAAG,YAAY;CACxF,MAAM,QAAQ,WAAW,0BAA0B;CACnD,MAAM,OAAO,sBAAsB,MAAM;CAEzC,MAAM,oBAAoB,cAAc;AACtC,MAAI,KAAK,cAAc,OAAW,QAAO,KAAK;AAC9C,MAAI,KAAK,oBAAoB,OAAW,QAAO,KAAK,kBAAkB;AACtE,SAAO;IACN,CAAC,KAAK,iBAAiB,KAAK,UAAU,CAAC;CAE1C,MAAM,qBAAqB,cAAc;AACvC,MAAI,KAAK,eAAe,OAAW,QAAO,KAAK;AAC/C,MAAI,KAAK,oBAAoB,OAAW,QAAO,KAAK,kBAAkB;AACtE,SAAO;IACN,CAAC,KAAK,YAAY,KAAK,gBAAgB,CAAC;CAE3C,MAAM,WAAW,QAAQ,KAAK,SAAS;CAEvC,MAAM,EAAE,iCAAiC,gBAAgB,EACvD,UACD,CAAC;AAIF,KAAI,KAAK,SAAS,QAAQ,CAAC,KAAK,OAC9B,QAAO;CAGT,MAAM,eAAe;EACnB,YAAY;EACZ,OAAO;EACP;EACA,SAAS;EACV;AAED,KAAI,eAAe,SAAS,CAC1B,QACE,oBAACC,QAAY;EACX,QAAQ,SAAS;EACjB,GAAI;EACJ,SAAS,gBAAgB;GAGvB,MAAM,uBAAuB;AAC3B,QAAI,6BAA8B,QAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;AAChD,WAAO;OACL;AAGJ,UAAO,aAAa,UAAiB;IACnC,GAFkB,WAAY,SAAiB,OAAO,cAAc;IAGpE,KAAK,UAAU;KAAE,SAAiB;KAAM,YAAoB;KAAK;KAAQ,CAAC;IAC3E,CAAC;;GAEJ;AAIN,QACE,oBAACA,QAAY;EAAQ,QAAQ,SAAS;EAAW,GAAI;EAAc,KAAK;EACrE;GACmB;;AAI1B,eAAe,cAAc"}

package/es/Tooltip/TooltipPortal.mjs

@@ -2,7 +2,6 @@
 
 import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
 import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
 
 //#region src/Tooltip/TooltipPortal.tsx
 const PORTAL_ATTR = "data-lobe-ui-tooltip-portal";
@@ -31,18 +30,16 @@ const resolveRoot = (root) => {
 	if (root) return root;
 	return document.body;
 };
-const TooltipPortal = ({ children, root }) => {
+const useTooltipPortalContainer = (root) => {
 	const [container, setContainer] = useState(null);
 	useEffect(() => {
 		const resolved = resolveRoot(root);
 		if (!resolved) return;
 		setContainer(getOrCreateContainer(resolved));
-	}, [root]);
-	if (!container) return null;
-	return createPortal(children, container);
+	}, [root, container?.isConnected]);
+	return container;
 };
-var TooltipPortal_default = TooltipPortal;
 
 //#endregion
-export { TooltipPortal_default as default };
+export { useTooltipPortalContainer };
 //# sourceMappingURL=TooltipPortal.mjs.map

package/es/Tooltip/TooltipPortal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipPortal.mjs","names":[],"sources":["../../src/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\n\ntype TooltipPortalProps = {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';\nconst TOOLTIP_CONTAINER_ATTR = 'data-lobe-ui-tooltip-container';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  // try ThemeProvider's App root\n  const resolvedRoot = (() => {\n    if (typeof document === 'undefined') return root;\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) return root;\n\n    const isBody = root === document.body;\n    if (!isBody) return root;\n    const themeApp = document.querySelector<HTMLElement>(`#${LOBE_THEME_APP_ID}`);\n    if (themeApp) return themeApp;\n    const tooltipContainer = document.querySelector<HTMLElement>(\n      `[${TOOLTIP_CONTAINER_ATTR}=\"true\"]`,\n    );\n    if (tooltipContainer) return tooltipContainer;\n\n    return root;\n  })();\n\n  const cached = containerMap.get(resolvedRoot);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  resolvedRoot.append(el);\n  containerMap.set(resolvedRoot, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  return document.body;\n};\n\nconst TooltipPortal = ({ children, root }: TooltipPortalProps) => {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  // Never mutate DOM / create portal container during render.\n  // Create it after mount to avoid SSR/hydration side effects.\n  useEffect(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return;\n    setContainer(getOrCreateContainer(resolved));\n  }, [root]);\n\n  if (!container) return null;\n  return createPortal(children, container);\n};\n\nexport default TooltipPortal;\n"],"mappings":";;;;;;;AAaA,MAAM,cAAc;AACpB,MAAM,yBAAyB;AAG/B,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAE5E,MAAM,sBAAsB;AAC1B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,OAAO,eAAe,eAAe,gBAAgB,WAAY,QAAO;AAG5E,MAAI,EADW,SAAS,SAAS,MACpB,QAAO;EACpB,MAAM,WAAW,SAAS,cAA2B,IAAI,oBAAoB;AAC7E,MAAI,SAAU,QAAO;EACrB,MAAM,mBAAmB,SAAS,cAChC,IAAI,uBAAuB,UAC5B;AACD,MAAI,iBAAkB,QAAO;AAE7B,SAAO;KACL;CAEJ,MAAM,SAAS,aAAa,IAAI,aAAa;AAC7C,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,cAAa,OAAO,GAAG;AACvB,cAAa,IAAI,cAAc,GAAG;AAClC,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,QAAO,SAAS;;AAGlB,MAAM,iBAAiB,EAAE,UAAU,WAA+B;CAChE,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAIpE,iBAAgB;EACd,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU;AACf,eAAa,qBAAqB,SAAS,CAAC;IAC3C,CAAC,KAAK,CAAC;AAEV,KAAI,CAAC,UAAW,QAAO;AACvB,QAAO,aAAa,UAAU,UAAU;;AAG1C,4BAAe"}
+{"version":3,"file":"TooltipPortal.mjs","names":[],"sources":["../../src/Tooltip/TooltipPortal.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\n\nconst PORTAL_ATTR = 'data-lobe-ui-tooltip-portal';\nexport const TOOLTIP_CONTAINER_ATTR = 'data-lobe-ui-tooltip-container';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const resolvedRoot = (() => {\n    if (typeof document === 'undefined') return root;\n    if (typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot) return root;\n\n    const isBody = root === document.body;\n    if (!isBody) return root;\n\n    const themeApp = document.querySelector<HTMLElement>(`#${LOBE_THEME_APP_ID}`);\n    if (themeApp) return themeApp;\n\n    const tooltipContainer = document.querySelector<HTMLElement>(\n      `[${TOOLTIP_CONTAINER_ATTR}=\"true\"]`,\n    );\n    if (tooltipContainer) return tooltipContainer;\n\n    return root;\n  })();\n\n  const cached = containerMap.get(resolvedRoot);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(PORTAL_ATTR, 'true');\n  resolvedRoot.append(el);\n  containerMap.set(resolvedRoot, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  return document.body;\n};\n\nexport const useTooltipPortalContainer = (\n  root?: HTMLElement | ShadowRoot | null,\n): HTMLElement | null => {\n  const [container, setContainer] = useState<HTMLElement | null>(null);\n\n  // Never mutate DOM / create portal container during render.\n  // Create it after mount to avoid SSR/hydration side effects.\n  useEffect(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return;\n    setContainer(getOrCreateContainer(resolved));\n  }, [root, container?.isConnected]);\n\n  return container;\n};\n"],"mappings":";;;;;;AAMA,MAAM,cAAc;AACpB,MAAa,yBAAyB;AAGtC,MAAM,+BAAe,IAAI,SAA8B;AAEvD,MAAM,wBAAwB,SAAgD;CAC5E,MAAM,sBAAsB;AAC1B,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,OAAO,eAAe,eAAe,gBAAgB,WAAY,QAAO;AAG5E,MAAI,EADW,SAAS,SAAS,MACpB,QAAO;EAEpB,MAAM,WAAW,SAAS,cAA2B,IAAI,oBAAoB;AAC7E,MAAI,SAAU,QAAO;EAErB,MAAM,mBAAmB,SAAS,cAChC,IAAI,uBAAuB,UAC5B;AACD,MAAI,iBAAkB,QAAO;AAE7B,SAAO;KACL;CAEJ,MAAM,SAAS,aAAa,IAAI,aAAa;AAC7C,KAAI,UAAU,OAAO,YAAa,QAAO;CAEzC,MAAM,KAAK,SAAS,cAAc,MAAM;AACxC,IAAG,aAAa,aAAa,OAAO;AACpC,cAAa,OAAO,GAAG;AACvB,cAAa,IAAI,cAAc,GAAG;AAClC,QAAO;;AAGT,MAAM,eAAe,SAA4E;AAC/F,KAAI,KAAM,QAAO;AACjB,QAAO,SAAS;;AAGlB,MAAa,6BACX,SACuB;CACvB,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AAIpE,iBAAgB;EACd,MAAM,WAAW,YAAY,KAAK;AAClC,MAAI,CAAC,SAAU;AACf,eAAa,qBAAqB,SAAS,CAAC;IAC3C,CAAC,MAAM,WAAW,YAAY,CAAC;AAElC,QAAO"}