@lobehub/ui 4.12.1 → 4.13.0

package/es/Tooltip/TooltipStandalone.mjs

@@ -1,101 +1,167 @@
 'use client';
 
-import { useTooltipTrigger } from "./useTooltipTrigger.mjs";
-import TooltipFloating_default from "./TooltipFloating.mjs";
-import TooltipPortal_default from "./TooltipPortal.mjs";
-import { useTooltipFloating } from "./useTooltipFloating.mjs";
-import { isElementHidden, observeElementVisibility } from "./utils.mjs";
-import { useTooltipReference } from "./useTooltipReference.mjs";
-import { useCallback, useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useNativeButton } from "../hooks/useNativeButton.mjs";
+import { useIsClient } from "../hooks/useIsClient.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 { cloneElement, isValidElement, memo, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Tooltip } from "@base-ui/react/tooltip";
+import { mergeRefs } from "react-merge-refs";
 
 //#region src/Tooltip/TooltipStandalone.tsx
-const TooltipStandalone = ({ ref, hotkey, className, arrow = false, title, hotkeyProps, children, placement = "top", openDelay, closeDelay, mouseEnterDelay, mouseLeaveDelay, open, defaultOpen, onOpenChange, disabled, classNames, styles: styleProps, zIndex, portalled = true, getPopupContainer }) => {
+const DEFAULT_OPEN_DELAY = 400;
+const DEFAULT_CLOSE_DELAY = 100;
+/**
+* Tooltip component - displays small contextual hints on hover/focus
+* Compatible with Ant Design Tooltip-like API (subset)
+*/
+const TooltipStandalone = memo(({ children, title, arrow = true, className, classNames, closeDelay, defaultOpen = false, disabled = false, getPopupContainer, hotkey, hotkeyProps, mouseEnterDelay, mouseLeaveDelay, onOpenChange, open, openDelay, placement = "top", portalled = true, styles: styleProps, zIndex, ref: refProp }) => {
+	const isClient = useIsClient();
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
-	const [referenceVisible, setReferenceVisible] = useState(true);
-	const mergedOpen = open ?? uncontrolledOpen;
-	const setOpen = useCallback((next) => {
-		if (open === void 0) setUncontrolledOpen(next);
-		onOpenChange?.(next);
-	}, [onOpenChange, open]);
-	const trigger = useTooltipTrigger(children);
-	const floatingHookResult = useTooltipFloating({
-		arrow,
-		closeDelay,
+	const resolvedOpen = disabled ? false : open ?? uncontrolledOpen;
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (disabled && nextOpen) return;
+		onOpenChange?.(nextOpen);
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+	}, [
 		disabled,
-		mouseEnterDelay,
-		mouseLeaveDelay,
-		onOpenChange: setOpen,
-		open: mergedOpen,
-		openDelay,
-		placement
-	});
-	const { referenceConnected, referenceEl, referenceNode } = useTooltipReference({
-		getReferenceProps: floatingHookResult.getReferenceProps,
-		mergedOpen,
-		ref,
-		setOpen,
-		setReference: floatingHookResult.refs.setReference,
-		trigger
-	});
-	const connectedOpen = !disabled && mergedOpen && referenceConnected && referenceVisible;
-	const { arrowRef, context, floatingPlacement, floatingStyles, getFloatingProps, refs } = floatingHookResult;
-	useEffect(() => {
-		if (!mergedOpen) return;
-		if (!referenceEl) {
-			setReferenceVisible(false);
-			setOpen(false);
-			return;
-		}
-		let lastVisible = true;
-		const handleVisibilityChange = (visible) => {
-			setReferenceVisible(visible);
-			if (!visible && lastVisible) setOpen(false);
-			lastVisible = visible;
+		onOpenChange,
+		open
+	]);
+	const resolvedOpenDelay = useMemo(() => {
+		if (openDelay !== void 0) return openDelay;
+		if (mouseEnterDelay !== void 0) return mouseEnterDelay * 1e3;
+		return DEFAULT_OPEN_DELAY;
+	}, [mouseEnterDelay, openDelay]);
+	const resolvedCloseDelay = useMemo(() => {
+		if (closeDelay !== void 0) return closeDelay;
+		if (mouseLeaveDelay !== void 0) return mouseLeaveDelay * 1e3;
+		return DEFAULT_CLOSE_DELAY;
+	}, [closeDelay, mouseLeaveDelay]);
+	const placementConfig = placementMap[placement] ?? placementMap.top;
+	const baseSideOffset = arrow ? 8 : 6;
+	const portalContainer = useTooltipPortalContainer();
+	const { isNativeButtonTriggerElement } = useNativeButton({ children });
+	const resolvedClassNames = useMemo(() => ({
+		arrow: cx(styles.arrow, classNames?.arrow),
+		popup: cx(styles.popup, className, classNames?.root, classNames?.container),
+		positioner: styles.positioner,
+		viewport: cx(styles.viewport, classNames?.content)
+	}), [
+		className,
+		classNames?.arrow,
+		classNames?.container,
+		classNames?.content,
+		classNames?.root
+	]);
+	const resolvedStyleProps = useMemo(() => {
+		if (typeof styleProps === "function") return void 0;
+		return styleProps;
+	}, [styleProps]);
+	const resolvedStyles = useMemo(() => ({
+		arrow: resolvedStyleProps?.arrow,
+		popup: {
+			...resolvedStyleProps?.root,
+			...resolvedStyleProps?.container
+		},
+		positioner: { zIndex: zIndex ?? 1100 },
+		viewport: resolvedStyleProps?.content
+	}), [resolvedStyleProps, zIndex]);
+	const triggerElement = useMemo(() => {
+		const triggerProps = {
+			closeDelay: resolvedCloseDelay,
+			delay: resolvedOpenDelay,
+			disabled
 		};
-		const stopVisibilityObserver = observeElementVisibility(referenceEl, handleVisibilityChange);
-		const root = referenceEl.getRootNode?.();
-		const observeTarget = typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : referenceEl.ownerDocument ?? document;
-		const observer = new MutationObserver(() => {
-			if (isElementHidden(referenceEl)) handleVisibilityChange(false);
+		if (isValidElement(children)) return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			...triggerProps,
+			render: (props) => {
+				const resolvedProps = (() => {
+					if (isNativeButtonTriggerElement) return props;
+					const { type, ref: triggerRef, ...restProps } = props;
+					return restProps;
+				})();
+				return cloneElement(children, {
+					...mergeProps(children.props, resolvedProps),
+					ref: mergeRefs([
+						children.ref,
+						props.ref,
+						refProp
+					])
+				});
+			}
 		});
-		observer.observe(observeTarget, {
-			childList: true,
-			subtree: true
+		return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			...triggerProps,
+			ref: refProp,
+			children
 		});
-		return () => {
-			observer.disconnect();
-			stopVisibilityObserver?.();
-		};
 	}, [
-		mergedOpen,
-		referenceEl,
-		setOpen
+		children,
+		disabled,
+		isNativeButtonTriggerElement,
+		refProp,
+		resolvedCloseDelay,
+		resolvedOpenDelay
 	]);
-	const portalRoot = getPopupContainer && referenceEl && referenceConnected && referenceVisible ? getPopupContainer(referenceEl) : void 0;
-	const floatingNode = /* @__PURE__ */ jsx(TooltipFloating_default, {
+	const customContainer = useMemo(() => {
+		if (!getPopupContainer || !isClient) return void 0;
+	}, [getPopupContainer, isClient]);
+	const popup = useMemo(() => /* @__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
+			}), /* @__PURE__ */ jsx("div", {
+				className: resolvedClassNames.viewport,
+				style: resolvedStyles.viewport,
+				children: /* @__PURE__ */ jsx(TooltipContent_default, {
+					hotkey,
+					hotkeyProps,
+					title
+				})
+			})]
+		})
+	}), [
 		arrow,
-		arrowRef,
-		className,
-		classNames,
-		context,
-		floatingProps: getFloatingProps(),
-		floatingStyles,
+		baseSideOffset,
 		hotkey,
 		hotkeyProps,
-		isInitialShow: true,
-		open: connectedOpen,
-		placement: floatingPlacement,
-		setFloating: refs.setFloating,
-		styles: styleProps,
-		title,
-		zIndex
+		placement,
+		placementConfig.align,
+		placementConfig.side,
+		resolvedClassNames,
+		resolvedStyles,
+		title
+	]);
+	if (title == null && !hotkey) return children;
+	const resolvedPortalContainer = customContainer ?? portalContainer;
+	return /* @__PURE__ */ jsxs(Tooltip.Root, {
+		defaultOpen,
+		disabled,
+		onOpenChange: handleOpenChange,
+		open: resolvedOpen,
+		children: [triggerElement, portalled ? resolvedPortalContainer ? /* @__PURE__ */ jsx(Tooltip.Portal, {
+			container: resolvedPortalContainer,
+			children: popup
+		}) : null : popup]
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [referenceNode, !disabled && title && (portalled ? /* @__PURE__ */ jsx(TooltipPortal_default, {
-		root: portalRoot,
-		children: floatingNode
-	}) : floatingNode)] });
-};
+});
 TooltipStandalone.displayName = "TooltipStandalone";
 
 //#endregion

package/es/Tooltip/TooltipStandalone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipStandalone.mjs","names":["TooltipStandalone: FC<TooltipProps>","TooltipFloating","TooltipPortal"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useCallback, useEffect, useState } from 'react';\n\nimport TooltipFloating from './TooltipFloating';\nimport TooltipPortal from './TooltipPortal';\nimport type { TooltipProps } from './type';\nimport { useTooltipFloating } from './useTooltipFloating';\nimport { useTooltipReference } from './useTooltipReference';\nimport { useTooltipTrigger } from './useTooltipTrigger';\nimport { isElementHidden, observeElementVisibility } from './utils';\n\nexport const TooltipStandalone: FC<TooltipProps> = ({\n  ref,\n  hotkey,\n  className,\n  arrow = false,\n  title,\n  hotkeyProps,\n  children,\n  placement = 'top',\n  openDelay,\n  closeDelay,\n  mouseEnterDelay,\n  mouseLeaveDelay,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  classNames,\n  styles: styleProps,\n  zIndex,\n  portalled = true,\n  getPopupContainer,\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n  const [referenceVisible, setReferenceVisible] = useState(true);\n\n  const mergedOpen = open ?? uncontrolledOpen;\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (open === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [onOpenChange, open],\n  );\n\n  const trigger = useTooltipTrigger(children);\n\n  // We need to initialize floating first to get getReferenceProps\n  // But we'll use a temporary mergedOpen, then update to connectedOpen\n  const floatingHookResult = useTooltipFloating({\n    arrow,\n    closeDelay,\n    disabled,\n    mouseEnterDelay,\n    mouseLeaveDelay,\n    onOpenChange: setOpen,\n    open: mergedOpen,\n    openDelay,\n    placement,\n  });\n\n  const { referenceConnected, referenceEl, referenceNode } = useTooltipReference({\n    getReferenceProps: floatingHookResult.getReferenceProps,\n    mergedOpen,\n    ref,\n    setOpen,\n    setReference: floatingHookResult.refs.setReference,\n    trigger,\n  });\n\n  const connectedOpen = !disabled && mergedOpen && referenceConnected && referenceVisible;\n\n  // Use the first hook result\n  // Note: useFloating inside uses mergedOpen, but TooltipFloating component uses connectedOpen for display\n  const { arrowRef, context, floatingPlacement, floatingStyles, getFloatingProps, refs } =\n    floatingHookResult;\n\n  // Watch for trigger removal or display:none via MutationObserver\n  useEffect(() => {\n    if (!mergedOpen) return;\n    if (!referenceEl) {\n      setReferenceVisible(false);\n      setOpen(false);\n      return;\n    }\n\n    let lastVisible = true;\n    const handleVisibilityChange = (visible: boolean) => {\n      setReferenceVisible(visible);\n      if (!visible && lastVisible) setOpen(false);\n      lastVisible = visible;\n    };\n\n    const stopVisibilityObserver = observeElementVisibility(referenceEl, handleVisibilityChange);\n\n    const root = referenceEl.getRootNode?.();\n    const observeTarget =\n      typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot\n        ? root\n        : (referenceEl.ownerDocument ?? document);\n\n    const observer = new MutationObserver(() => {\n      if (isElementHidden(referenceEl)) handleVisibilityChange(false);\n    });\n\n    observer.observe(observeTarget, { childList: true, subtree: true });\n\n    return () => {\n      observer.disconnect();\n      stopVisibilityObserver?.();\n    };\n  }, [mergedOpen, referenceEl, setOpen]);\n\n  const portalRoot =\n    getPopupContainer && referenceEl && referenceConnected && referenceVisible\n      ? getPopupContainer(referenceEl as any)\n      : undefined;\n\n  const floatingNode = (\n    <TooltipFloating\n      arrow={arrow}\n      arrowRef={arrowRef}\n      className={className}\n      classNames={classNames}\n      context={context}\n      floatingProps={getFloatingProps()}\n      floatingStyles={floatingStyles}\n      hotkey={hotkey}\n      hotkeyProps={hotkeyProps}\n      isInitialShow\n      open={connectedOpen}\n      placement={floatingPlacement}\n      setFloating={refs.setFloating}\n      styles={styleProps}\n      title={title}\n      zIndex={zIndex}\n    />\n  );\n\n  return (\n    <>\n      {referenceNode}\n      {!disabled &&\n        title &&\n        (portalled ? (\n          <TooltipPortal root={portalRoot}>{floatingNode}</TooltipPortal>\n        ) : (\n          floatingNode\n        ))}\n    </>\n  );\n};\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":";;;;;;;;;;;;AAYA,MAAaA,qBAAuC,EAClD,KACA,QACA,WACA,QAAQ,OACR,OACA,aACA,UACA,YAAY,OACZ,WACA,YACA,iBACA,iBACA,MACA,aACA,cACA,UACA,YACA,QAAQ,YACR,QACA,YAAY,MACZ,wBACI;CACJ,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;CAC9E,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,KAAK;CAE9D,MAAM,aAAa,QAAQ;CAC3B,MAAM,UAAU,aACb,SAAkB;AACjB,MAAI,SAAS,OAAW,qBAAoB,KAAK;AACjD,iBAAe,KAAK;IAEtB,CAAC,cAAc,KAAK,CACrB;CAED,MAAM,UAAU,kBAAkB,SAAS;CAI3C,MAAM,qBAAqB,mBAAmB;EAC5C;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,MAAM;EACN;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,aAAa,kBAAkB,oBAAoB;EAC7E,mBAAmB,mBAAmB;EACtC;EACA;EACA;EACA,cAAc,mBAAmB,KAAK;EACtC;EACD,CAAC;CAEF,MAAM,gBAAgB,CAAC,YAAY,cAAc,sBAAsB;CAIvE,MAAM,EAAE,UAAU,SAAS,mBAAmB,gBAAgB,kBAAkB,SAC9E;AAGF,iBAAgB;AACd,MAAI,CAAC,WAAY;AACjB,MAAI,CAAC,aAAa;AAChB,uBAAoB,MAAM;AAC1B,WAAQ,MAAM;AACd;;EAGF,IAAI,cAAc;EAClB,MAAM,0BAA0B,YAAqB;AACnD,uBAAoB,QAAQ;AAC5B,OAAI,CAAC,WAAW,YAAa,SAAQ,MAAM;AAC3C,iBAAc;;EAGhB,MAAM,yBAAyB,yBAAyB,aAAa,uBAAuB;EAE5F,MAAM,OAAO,YAAY,eAAe;EACxC,MAAM,gBACJ,OAAO,eAAe,eAAe,gBAAgB,aACjD,OACC,YAAY,iBAAiB;EAEpC,MAAM,WAAW,IAAI,uBAAuB;AAC1C,OAAI,gBAAgB,YAAY,CAAE,wBAAuB,MAAM;IAC/D;AAEF,WAAS,QAAQ,eAAe;GAAE,WAAW;GAAM,SAAS;GAAM,CAAC;AAEnE,eAAa;AACX,YAAS,YAAY;AACrB,6BAA0B;;IAE3B;EAAC;EAAY;EAAa;EAAQ,CAAC;CAEtC,MAAM,aACJ,qBAAqB,eAAe,sBAAsB,mBACtD,kBAAkB,YAAmB,GACrC;CAEN,MAAM,eACJ,oBAACC;EACQ;EACG;EACC;EACC;EACH;EACT,eAAe,kBAAkB;EACjB;EACR;EACK;EACb;EACA,MAAM;EACN,WAAW;EACX,aAAa,KAAK;EAClB,QAAQ;EACD;EACC;GACR;AAGJ,QACE,8CACG,eACA,CAAC,YACA,UACC,YACC,oBAACC;EAAc,MAAM;YAAa;GAA6B,GAE/D,iBAEH;;AAIP,kBAAkB,cAAc"}
+{"version":3,"file":"TooltipStandalone.mjs","names":["BaseTooltip","TooltipContent"],"sources":["../../src/Tooltip/TooltipStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\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 { TooltipArrowIcon } from './ArrowIcon';\nimport TooltipContent from './TooltipContent';\nimport { useTooltipPortalContainer } from './TooltipPortal';\nimport { styles } from './style';\nimport type { TooltipProps } from './type';\n\nconst DEFAULT_OPEN_DELAY = 400;\nconst DEFAULT_CLOSE_DELAY = 100;\n\n/**\n * Tooltip component - displays small contextual hints on hover/focus\n * Compatible with Ant Design Tooltip-like API (subset)\n */\nexport const TooltipStandalone = memo<TooltipProps>(\n  ({\n    children,\n    title,\n    arrow = true,\n    className,\n    classNames,\n    closeDelay,\n    defaultOpen = false,\n    disabled = false,\n    getPopupContainer,\n    hotkey,\n    hotkeyProps,\n    mouseEnterDelay,\n    mouseLeaveDelay,\n    onOpenChange,\n    open,\n    openDelay,\n    placement = 'top',\n    portalled = true,\n    styles: styleProps,\n    zIndex,\n    ref: refProp,\n  }) => {\n    const isClient = useIsClient();\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        if (disabled && nextOpen) return;\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [disabled, onOpenChange, open],\n    );\n\n    const resolvedOpenDelay = useMemo(() => {\n      if (openDelay !== undefined) return openDelay;\n      if (mouseEnterDelay !== undefined) return mouseEnterDelay * 1000;\n      return DEFAULT_OPEN_DELAY;\n    }, [mouseEnterDelay, openDelay]);\n\n    const resolvedCloseDelay = useMemo(() => {\n      if (closeDelay !== undefined) return closeDelay;\n      if (mouseLeaveDelay !== undefined) return mouseLeaveDelay * 1000;\n      return DEFAULT_CLOSE_DELAY;\n    }, [closeDelay, mouseLeaveDelay]);\n\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const baseSideOffset = arrow ? 8 : 6;\n\n    const portalContainer = useTooltipPortalContainer();\n\n    const { isNativeButtonTriggerElement } = useNativeButton({\n      children,\n    });\n\n    const resolvedClassNames = useMemo(\n      () => ({\n        arrow: cx(styles.arrow, classNames?.arrow),\n        popup: cx(styles.popup, className, classNames?.root, classNames?.container),\n        positioner: styles.positioner,\n        viewport: cx(styles.viewport, classNames?.content),\n      }),\n      [className, classNames?.arrow, classNames?.container, classNames?.content, classNames?.root],\n    );\n\n    const resolvedStyleProps = useMemo(() => {\n      if (typeof styleProps === 'function') return undefined;\n      return styleProps;\n    }, [styleProps]);\n\n    const resolvedStyles = useMemo(\n      () => ({\n        arrow: resolvedStyleProps?.arrow,\n        popup: {\n          ...resolvedStyleProps?.root,\n          ...resolvedStyleProps?.container,\n        },\n        positioner: {\n          zIndex: zIndex ?? 1100,\n        },\n        viewport: resolvedStyleProps?.content,\n      }),\n      [resolvedStyleProps, zIndex],\n    );\n\n    const triggerElement = useMemo(() => {\n      const triggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n      };\n\n      if (isValidElement(children)) {\n        return (\n          <BaseTooltip.Trigger\n            {...triggerProps}\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                ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n              });\n            }}\n          />\n        );\n      }\n\n      return (\n        <BaseTooltip.Trigger {...triggerProps} ref={refProp}>\n          {children}\n        </BaseTooltip.Trigger>\n      );\n    }, [\n      children,\n      disabled,\n      isNativeButtonTriggerElement,\n      refProp,\n      resolvedCloseDelay,\n      resolvedOpenDelay,\n    ]);\n\n    const customContainer = useMemo(() => {\n      if (!getPopupContainer || !isClient) return undefined;\n      return undefined;\n    }, [getPopupContainer, isClient]);\n\n    const popup = useMemo(\n      () => (\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 className={resolvedClassNames.popup} style={resolvedStyles.popup}>\n            {arrow && (\n              <BaseTooltip.Arrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                {TooltipArrowIcon}\n              </BaseTooltip.Arrow>\n            )}\n            <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n              <TooltipContent hotkey={hotkey} hotkeyProps={hotkeyProps} title={title} />\n            </div>\n          </BaseTooltip.Popup>\n        </BaseTooltip.Positioner>\n      ),\n      [\n        arrow,\n        baseSideOffset,\n        hotkey,\n        hotkeyProps,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        resolvedClassNames,\n        resolvedStyles,\n        title,\n      ],\n    );\n\n    // eslint-disable-next-line eqeqeq\n    if (title == null && !hotkey) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <BaseTooltip.Root\n        defaultOpen={defaultOpen}\n        disabled={disabled}\n        onOpenChange={handleOpenChange}\n        open={resolvedOpen}\n      >\n        {triggerElement}\n        {portalled ? (\n          resolvedPortalContainer ? (\n            <BaseTooltip.Portal container={resolvedPortalContainer}>{popup}</BaseTooltip.Portal>\n          ) : null\n        ) : (\n          popup\n        )}\n      </BaseTooltip.Root>\n    );\n  },\n);\n\nTooltipStandalone.displayName = 'TooltipStandalone';\n"],"mappings":"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"}

package/es/Tooltip/groupContext.mjs

@@ -1,9 +1,11 @@
+'use client';
+
 import { createContext } from "react";
 
 //#region src/Tooltip/groupContext.ts
-const TooltipGroupApiContext = createContext(null);
+const TooltipGroupHandleContext = createContext(null);
 const TooltipGroupPropsContext = createContext(null);
 
 //#endregion
-export { TooltipGroupApiContext, TooltipGroupPropsContext };
+export { TooltipGroupHandleContext, TooltipGroupPropsContext };
 //# sourceMappingURL=groupContext.mjs.map

package/es/Tooltip/groupContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../src/Tooltip/groupContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport type { TooltipProps } from './type';\n\nexport type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen'>;\n\nexport type TooltipGroupSharedProps = Omit<\n  TooltipProps,\n  'children' | 'defaultOpen' | 'open' | 'ref' | 'title'\n> & {\n  /**\n   * @description Whether to enable layout animation when switching between tooltips\n   * @default true\n   */\n  layoutAnimation?: boolean;\n};\n\nexport type TooltipGroupApi = {\n  closeFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;\n  closeImmediately: () => void;\n  isActiveTrigger: (triggerEl: HTMLElement) => boolean;\n  openFromTrigger: (triggerEl: HTMLElement, item: TooltipGroupItem) => void;\n};\n\nexport const TooltipGroupApiContext = createContext<TooltipGroupApi | null>(null);\nexport const TooltipGroupPropsContext = createContext<TooltipGroupSharedProps | null>(null);\n"],"mappings":";;;AAwBA,MAAa,yBAAyB,cAAsC,KAAK;AACjF,MAAa,2BAA2B,cAA8C,KAAK"}
+{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../src/Tooltip/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { TooltipHandle } from '@base-ui/react/tooltip/store/TooltipHandle';\nimport { createContext } from 'react';\n\nimport type { TooltipProps } from './type';\n\nexport type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type TooltipGroupSharedProps = Omit<\n  TooltipProps,\n  'children' | 'defaultOpen' | 'open' | 'ref' | 'title'\n> & {\n  /**\n   * @description Whether to enable content layout animation when switching triggers\n   * @default false\n   */\n  layoutAnimation?: boolean;\n};\n\nexport const TooltipGroupHandleContext = createContext<TooltipHandle<TooltipGroupItem> | null>(\n  null,\n);\nexport const TooltipGroupPropsContext = createContext<TooltipGroupSharedProps | null>(null);\n"],"mappings":";;;;;AAoBA,MAAa,4BAA4B,cACvC,KACD;AACD,MAAa,2BAA2B,cAA8C,KAAK"}

package/es/Tooltip/index.d.mts

@@ -1,3 +1,3 @@
-import { TooltipPlacement, TooltipProps } from "./type.mjs";
+import { TooltipGroupProps, TooltipPlacement, TooltipProps } from "./type.mjs";
 import { Tooltip } from "./Tooltip.mjs";
 import { TooltipGroup } from "./TooltipGroup.mjs";

package/es/Tooltip/style.mjs

@@ -1,42 +1,213 @@
 import { createStaticStyles } from "antd-style";
 
 //#region src/Tooltip/style.ts
-const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
-	return {
-		arrow: css$1`
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	arrow: css$1`
+    --lobe-tooltip-arrow-offset-block: 4px;
+    --lobe-tooltip-arrow-offset-inline: 6px;
+
+    pointer-events: none;
+
+    position: absolute;
+    transform-origin: center;
+
+    display: flex;
+
+    width: 8px;
+    height: 4px;
+
+    & > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
       fill: ${cssVar$1.colorText};
-    `,
-		content: css$1`
-      position: relative;
+    }
+
+    & [data-role='stroke'] {
+      stroke: none;
+    }
+
+    &[data-side='top'] {
+      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);
+      transform: rotate(180deg);
+    }
+
+    &[data-side='left'] {
+      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);
+      transform: rotate(90deg);
+    }
+
+    &[data-side='right'] {
+      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);
+      transform: rotate(-90deg);
+    }
+
+    &[data-side='bottom'] {
+      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);
+    }
+  `,
+	popup: css$1`
+    user-select: none;
+
+    position: relative;
+    transform-origin: var(--transform-origin);
+
+    max-width: min(320px, var(--available-width));
+    border-radius: ${cssVar$1.borderRadiusSM};
+
+    font-size: 12px;
+    line-height: 1.2;
+    color: ${cssVar$1.colorBgLayout};
+
+    background: ${cssVar$1.colorText};
+
+    transition-timing-function: var(--lobe-tooltip-animation-ease-out);
+    transition-duration: var(--lobe-tooltip-animation-duration);
+    transition-property: opacity, transform;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)
+        scale(var(--lobe-tooltip-animation-scale));
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      transition-timing-function: var(--lobe-tooltip-animation-ease-in);
+      transition-duration: var(--lobe-tooltip-animation-duration-exit);
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+  `,
+	positioner: css$1`
+    --lobe-tooltip-animation-duration: 120ms;
+    --lobe-tooltip-animation-duration-exit: 80ms;
+    --lobe-tooltip-animation-translate: 4px;
+    --lobe-tooltip-animation-scale: 0.96;
+    --lobe-tooltip-animation-ease-in: ease-in;
+    --lobe-tooltip-animation-ease-out: ${cssVar$1.motionEaseOut};
+    --lobe-tooltip-translate-x: 0;
+    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);
+
+    z-index: 1100;
+
+    width: var(--positioner-width);
+    max-width: var(--available-width);
+    height: var(--positioner-height);
+
+    transition-timing-function: var(--lobe-tooltip-animation-ease-out);
+    transition-duration: var(--lobe-tooltip-animation-duration);
+    transition-property:
+      inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
+
+    &[data-instant] {
+      transition: none;
+    }
+
+    &[data-placement='top'],
+    &[data-placement='topLeft'],
+    &[data-placement='topRight'] {
+      --lobe-tooltip-translate-x: 0;
+      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);
+    }
+
+    &[data-placement='bottom'],
+    &[data-placement='bottomLeft'],
+    &[data-placement='bottomRight'] {
+      --lobe-tooltip-translate-x: 0;
+      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);
+    }
+
+    &[data-placement='left'],
+    &[data-placement='leftTop'],
+    &[data-placement='leftBottom'] {
+      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);
+      --lobe-tooltip-translate-y: 0;
+    }
+
+    &[data-placement='right'],
+    &[data-placement='rightTop'],
+    &[data-placement='rightBottom'] {
+      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);
+      --lobe-tooltip-translate-y: 0;
+    }
+  `,
+	viewport: css$1`
+    --lobe-tooltip-viewport-inline-padding: 8px;
+
+    position: relative;
+
+    overflow: clip;
+    display: flex;
+    gap: 6px;
+    align-items: center;
+
+    max-width: min(320px, var(--available-width));
+    padding-block: 4px;
+    padding-inline: var(--lobe-tooltip-viewport-inline-padding);
+
+    word-break: break-word;
+    white-space: normal;
+
+    [data-previous],
+    [data-current] {
+      transform: translateX(0);
 
-      overflow: hidden;
       display: flex;
+      gap: 6px;
       align-items: center;
-      justify-content: center;
-
-      min-height: unset;
-      padding-block: 6px;
-      padding-inline: 10px;
-      border-radius: ${cssVar$1.borderRadiusSM};
-
-      color: ${cssVar$1.colorBgLayout};
-      word-break: normal;
-
-      background-color: ${cssVar$1.colorTextBase};
-    `,
-		tooltip: css$1`
-      user-select: none;
-
-      /* Keep the class name for backwards compatibility and user overrides */
-      position: relative;
-      z-index: 114514;
-      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));
-    `,
-		tooltipLayout: css$1`
-      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
-    `
-	};
-});
+
+      opacity: 1;
+
+      transition:
+        transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),
+        opacity calc(var(--lobe-tooltip-animation-duration) / 2)
+          var(--lobe-tooltip-animation-ease-out);
+    }
+
+    &[data-activation-direction~='right'] [data-previous][data-ending-style] {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='right'] [data-current][data-starting-style] {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='left'] [data-previous][data-ending-style] {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='left'] [data-current][data-starting-style] {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='down'] [data-previous][data-ending-style] {
+      transform: translateY(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='down'] [data-current][data-starting-style] {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='up'] [data-previous][data-ending-style] {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='up'] [data-current][data-starting-style] {
+      transform: translateY(-50%);
+      opacity: 0;
+    }
+  `
+}));
 
 //#endregion
 export { styles };

package/es/Tooltip/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    arrow: css`\n      fill: ${cssVar.colorText};\n    `,\n    content: css`\n      position: relative;\n\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding-block: 6px;\n      padding-inline: 10px;\n      border-radius: ${cssVar.borderRadiusSM};\n\n      color: ${cssVar.colorBgLayout};\n      word-break: normal;\n\n      background-color: ${cssVar.colorTextBase};\n    `,\n\n    tooltip: css`\n      user-select: none;\n\n      /* Keep the class name for backwards compatibility and user overrides */\n      position: relative;\n      z-index: 114514;\n      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n    `,\n    tooltipLayout: css`\n      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,OAAO,KAAG;cACAA,SAAO,UAAU;;EAE3B,SAAS,KAAG;;;;;;;;;;;uBAWOA,SAAO,eAAe;;eAE9BA,SAAO,cAAc;;;0BAGVA,SAAO,cAAc;;EAG3C,SAAS,KAAG;;;;;;;;EAQZ,eAAe,KAAG;;;EAGnB;EACD"}
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorText};\n    }\n\n    & [data-role='stroke'] {\n      stroke: none;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    max-width: min(320px, var(--available-width));\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 12px;\n    line-height: 1.2;\n    color: ${cssVar.colorBgLayout};\n\n    background: ${cssVar.colorText};\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-tooltip-animation-duration: 120ms;\n    --lobe-tooltip-animation-duration-exit: 80ms;\n    --lobe-tooltip-animation-translate: 4px;\n    --lobe-tooltip-animation-scale: 0.96;\n    --lobe-tooltip-animation-ease-in: ease-in;\n    --lobe-tooltip-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    z-index: 1100;\n\n    width: var(--positioner-width);\n    max-width: var(--available-width);\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property:\n      inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n\n    position: relative;\n\n    overflow: clip;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    max-width: min(320px, var(--available-width));\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    word-break: break-word;\n    white-space: normal;\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n\n      transition:\n        transform var(--lobe-tooltip-animation-duration) var(--lobe-tooltip-animation-ease-out),\n        opacity calc(var(--lobe-tooltip-animation-duration) / 2)\n          var(--lobe-tooltip-animation-ease-out);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,OAAO,KAAG;;;;;;;;;;;;;;;;;;cAkBEA,SAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B7B,OAAO,KAAG;;;;;;;qBAOSA,SAAO,eAAe;;;;aAI9BA,SAAO,cAAc;;kBAEhBA,SAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;CAuBjC,YAAY,KAAG;;;;;;yCAMwBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD5D,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEd,EAAE"}