@videojs/react 0.1.0-preview.5 → 0.1.0-preview.7

package/README.md

@@ -24,5 +24,5 @@ members:
 
 [package]: https://www.npmjs.com/package/@videojs/react
 [package-badge]: https://img.shields.io/npm/v/@videojs/react/next?label=@videojs/react@next
-[discord]: https://discord.gg/zdrCwByt
+[discord]: https://discord.gg/JBqHh485uF
 [gh-discussions]: https://github.com/videojs/v10/discussions

package/dist/{VolumeSlider-DoR6idnJ.js → VolumeSlider-B8x0_k2f.js}

@@ -1,10 +1,10 @@
-import { a as useMediaStore, i as useMediaSelector } from "./store-DpQF8Ges.js";
+import { a as useMediaStore, i as useMediaSelector } from "./store-hGO5HE2A.js";
 import { currentTimeDisplayStateDefinition, durationDisplayStateDefinition, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition, previewTimeDisplayStateDefinition, timeSliderStateDefinition, volumeSliderStateDefinition } from "@videojs/core/store";
 import { formatDisplayTime, shallowEqual } from "@videojs/utils";
 import * as React$1 from "react";
 import { Children, cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingPortal, arrow, autoUpdate, flip, offset, safePolygon, shift, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, useTransitionStatus } from "@floating-ui/react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { contains, getBoundingClientRectWithoutTransform, getInBoundsAdjustments, safePolygon } from "@videojs/utils/dom";
 import { TimeSlider, VolumeSlider } from "@videojs/core";
 
 //#region src/utils/component-factory.tsx
@@ -237,26 +237,21 @@ function useMediaContainerRef() {
 *   </MediaContainer>
 * );
 */
-const MediaContainer = forwardRef(({ children, portalId = "@default_portal_id",...props }, ref) => {
+const MediaContainer = forwardRef(({ children,...props }, ref) => {
 	const composedRef = useComposedRefs(ref, useMediaContainerRef());
 	const mediaStore = useMediaStore();
 	const mediaState = useMediaSelector(playButtonStateDefinition.stateTransform, shallowEqual);
 	const methods = useMemo(() => playButtonStateDefinition.createRequestMethods(mediaStore.dispatch), [mediaStore]);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		ref: composedRef,
 		onClick: useCallback((event) => {
 			if (!["video", "audio"].includes(event.target.localName || "")) return;
 			if (mediaState.paused) methods.requestPlay();
 			else methods.requestPause();
 		}, [mediaState.paused, methods]),
+		"data-media-container": true,
 		...props,
-		children: [children, /* @__PURE__ */ jsx("div", {
-			id: portalId,
-			style: {
-				position: "absolute",
-				zIndex: 10
-			}
-		})]
+		children
 	});
 });
 
@@ -348,62 +343,134 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 	const [open, setOpen] = useState(false);
 	const [placement, setPlacement] = useState("top");
 	const [sideOffset, setSideOffset] = useState(5);
-	const [openReason, setOpenReason] = useState(null);
-	const { refs, floatingStyles, context } = useFloating({
-		open,
-		onOpenChange: (open$1, _event, reason) => {
-			setOpen(open$1);
-			setOpenReason(reason || null);
-		},
-		placement,
-		middleware: [
-			offset(sideOffset),
-			flip(),
-			shift()
-		],
-		whileElementsMounted: autoUpdate
-	});
-	const { status: transitionStatus } = useTransitionStatus(context);
-	const { getReferenceProps, getFloatingProps } = useInteractions([
-		useHover(context, {
-			enabled: openOnHover,
-			mouseOnly: true,
-			move: false,
-			delay: {
-				open: delay,
-				close: closeDelay
-			},
-			handleClose: safePolygon({ blockPointerEvents: true })
-		}),
-		useFocus(context),
-		useDismiss(context),
-		useRole(context)
-	]);
+	const [transitionStatus, setTransitionStatus] = useState("initial");
+	const popupRef = useRef(null);
+	const triggerRef = useRef(null);
+	const hoverTimeoutRef = useRef(null);
+	const pointerMoveHandlerRef = useRef(null);
+	const clearHoverTimeout = useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+	}, []);
+	const setOpenState = useCallback((newOpen) => {
+		if (open === newOpen) return;
+		setOpen(newOpen);
+		if (newOpen) {
+			setTransitionStatus("initial");
+			if (popupRef.current) popupRef.current.showPopover();
+			requestAnimationFrame(() => {
+				setTransitionStatus("open");
+			});
+		} else setTransitionStatus("close");
+	}, [open]);
+	useEffect(() => {
+		if (!popupRef.current || open) return;
+		const transitions = popupRef.current.getAnimations().filter((anim) => anim instanceof CSSTransition);
+		if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => popupRef.current?.hidePopover()).catch(() => popupRef.current?.hidePopover());
+		else popupRef.current.hidePopover();
+	}, [open, transitionStatus]);
 	const updatePositioning = useCallback((newPlacement, newSideOffset) => {
 		setPlacement(newPlacement);
 		setSideOffset(newSideOffset);
 	}, []);
+	useEffect(() => {
+		const trigger = triggerRef.current;
+		const popup = popupRef.current;
+		if (!trigger || !popup) return;
+		const abortController = new AbortController();
+		const { signal } = abortController;
+		const addPointerMoveListener = () => {
+			if (!globalThis.matchMedia?.("(hover: hover)")?.matches) return;
+			if (!pointerMoveHandlerRef.current) pointerMoveHandlerRef.current = safePolygon({ blockPointerEvents: true })({
+				placement,
+				elements: {
+					domReference: trigger,
+					floating: popup
+				},
+				x: 0,
+				y: 0,
+				onClose: () => {
+					if (pointerMoveHandlerRef.current) document.documentElement.removeEventListener("pointermove", pointerMoveHandlerRef.current);
+					clearHoverTimeout();
+					hoverTimeoutRef.current = setTimeout(() => {
+						setOpenState(false);
+					}, closeDelay);
+				}
+			});
+			document.documentElement.addEventListener("pointermove", pointerMoveHandlerRef.current, { signal });
+		};
+		const handlePointerEnter = (event) => {
+			if (!openOnHover) return;
+			clearHoverTimeout();
+			if (event.currentTarget === popup) addPointerMoveListener();
+			if (open) return;
+			hoverTimeoutRef.current = setTimeout(() => {
+				setOpenState(true);
+			}, delay);
+		};
+		const handlePointerLeave = () => {
+			if (!openOnHover) return;
+			addPointerMoveListener();
+		};
+		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+			trigger.addEventListener("pointerenter", handlePointerEnter, { signal });
+			trigger.addEventListener("pointerleave", handlePointerLeave, { signal });
+			popup.addEventListener("pointerenter", handlePointerEnter, { signal });
+		}
+		const handleFocusIn = () => {
+			setOpenState(true);
+		};
+		const handleFocusOut = (event) => {
+			const relatedTarget = event.relatedTarget;
+			if (relatedTarget && popup && contains(popup, relatedTarget)) return;
+			setOpenState(false);
+		};
+		trigger.addEventListener("focusin", handleFocusIn, { signal });
+		trigger.addEventListener("focusout", handleFocusOut, { signal });
+		popup.addEventListener("focusout", handleFocusOut, { signal });
+		return () => {
+			abortController.abort();
+			clearHoverTimeout();
+			if (pointerMoveHandlerRef.current) document.documentElement.removeEventListener("pointermove", pointerMoveHandlerRef.current);
+			pointerMoveHandlerRef.current = null;
+		};
+	}, [
+		openOnHover,
+		delay,
+		closeDelay,
+		open,
+		placement,
+		setOpenState,
+		clearHoverTimeout
+	]);
+	useEffect(() => {
+		if (!popupRef.current || !triggerRef.current) return;
+		const popup = popupRef.current;
+		const popupId = popup.id;
+		if (popupId) popup.style.setProperty("position-anchor", `--${popupId}`);
+		const [side, alignment] = placement.split("-");
+		popup.style.setProperty("top", `calc(anchor(${side}) - ${sideOffset}px)`);
+		popup.style.setProperty("translate", `0 -100%`);
+		popup.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
+	}, [placement, sideOffset]);
 	const value = useMemo(() => ({
 		open,
-		setOpen,
-		openReason,
-		refs,
-		floatingStyles,
-		getReferenceProps,
-		getFloatingProps,
-		context,
+		setOpen: setOpenState,
+		popupRef,
+		triggerRef,
 		updatePositioning,
-		transitionStatus
+		transitionStatus,
+		placement,
+		sideOffset
 	}), [
 		open,
-		openReason,
-		refs,
-		floatingStyles,
-		getReferenceProps,
-		getFloatingProps,
-		context,
+		setOpenState,
 		updatePositioning,
-		transitionStatus
+		transitionStatus,
+		placement,
+		sideOffset
 	]);
 	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
 		value,
@@ -411,15 +478,14 @@ function PopoverRoot({ openOnHover = false, delay = 0, closeDelay = 0, children
 	});
 }
 function PopoverTrigger({ children }) {
-	const { refs, getReferenceProps, open } = usePopoverContext();
+	const { triggerRef, open } = usePopoverContext();
 	return cloneElement(Children.only(children), {
-		ref: refs.setReference,
-		...getReferenceProps(),
+		ref: triggerRef,
 		"data-popup-open": open ? "" : void 0
 	});
 }
 function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
-	const { refs, floatingStyles, updatePositioning } = usePopoverContext();
+	const { updatePositioning } = usePopoverContext();
 	useEffect(() => {
 		updatePositioning(side, sideOffset);
 	}, [
@@ -427,39 +493,37 @@ function PopoverPositioner({ side = "top", sideOffset = 5, children }) {
 		sideOffset,
 		updatePositioning
 	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref: refs.setFloating,
-		style: floatingStyles,
-		children
-	});
-}
-function PopoverPopup({ className, children }) {
-	const { getFloatingProps, context, transitionStatus } = usePopoverContext();
-	const { refs, placement } = context;
-	const triggerElement = refs.reference.current;
-	const dataAttributes = triggerElement?.attributes ? Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value])) : {};
-	return /* @__PURE__ */ jsx(FloatingFocusManager, {
-		context,
-		modal: false,
-		initialFocus: -1,
-		returnFocus: false,
-		children: /* @__PURE__ */ jsx("div", {
-			className,
-			...getFloatingProps(),
-			...dataAttributes,
-			"data-side": placement,
-			"data-starting-style": transitionStatus === "initial" ? "" : void 0,
-			"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
-			"data-ending-style": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-			"data-closed": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
-			children
-		})
-	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function PopoverPortal({ children, root, rootId = "@default_portal_id" }) {
-	return /* @__PURE__ */ jsx(FloatingPortal, {
-		root,
-		id: rootId,
+function PopoverPopup({ id, className, children }) {
+	const { popupRef, triggerRef, transitionStatus, placement } = usePopoverContext();
+	const triggerElement = triggerRef.current;
+	const popupId = useMemo(() => id ?? `popover-${Math.random().toString(36).substring(2, 9)}`, [id]);
+	useEffect(() => {
+		if (!popupRef.current || !triggerRef.current) return;
+		const popup = popupRef.current;
+		const trigger = triggerRef.current;
+		popup.setAttribute("popover", "manual");
+		trigger.setAttribute("commandfor", popupId);
+		trigger.style.setProperty("anchor-name", `--${popupId}`);
+	}, [
+		popupId,
+		popupRef,
+		triggerRef
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: popupRef,
+		id: popupId,
+		className,
+		...useMemo(() => {
+			if (!triggerElement?.attributes) return {};
+			return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
+		}, [triggerElement]),
+		"data-side": placement,
+		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
+		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
+		"data-ending-style": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
+		"data-closed": transitionStatus === "close" || transitionStatus === "unmounted" ? "" : void 0,
 		children
 	});
 }
@@ -467,8 +531,7 @@ const Popover = {
 	Root: PopoverRoot,
 	Trigger: PopoverTrigger,
 	Positioner: PopoverPositioner,
-	Popup: PopoverPopup,
-	Portal: PopoverPortal
+	Popup: PopoverPopup
 };
 var Popover_default = Popover;
 
@@ -621,79 +684,177 @@ const TimeSlider$1 = Object.assign({}, {
 //#endregion
 //#region src/components/Tooltip.tsx
 const TooltipContext = createContext(null);
-const TooltipPositionerContext = createContext(null);
 function useTooltipContext() {
 	const context = useContext(TooltipContext);
 	if (!context) throw new Error("Tooltip components must be used within TooltipRoot");
 	return context;
 }
-function useTooltipPositionerContext() {
-	const context = useContext(TooltipPositionerContext);
-	if (!context) throw new Error("TooltipArrow must be used within TooltipPositioner");
-	return context;
-}
 function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 	const [open, setOpen] = useState(false);
 	const [placement, setPlacement] = useState("top");
 	const [sideOffset, setSideOffset] = useState(0);
 	const [collisionPadding, setCollisionPadding] = useState(0);
-	const arrowRef = useRef(null);
-	const { context } = useFloating({
-		open,
-		onOpenChange: setOpen,
-		placement,
-		middleware: [
-			offset(sideOffset),
-			flip(),
-			shift({ padding: collisionPadding }),
-			arrow({ element: arrowRef })
-		],
-		whileElementsMounted: autoUpdate
-	});
-	const { status: transitionStatus } = useTransitionStatus(context);
-	const hover = useHover(context, { delay: {
-		open: delay,
-		close: closeDelay
-	} });
-	const focus = useFocus(context);
-	const dismiss = useDismiss(context);
-	const role = useRole(context, { role: "tooltip" });
-	const clientPoint = useClientPoint(context, {
-		axis: trackCursorAxis || "both",
-		enabled: !!trackCursorAxis
+	const [transitionStatus, setTransitionStatus] = useState("initial");
+	const popupRef = useRef(null);
+	const triggerRef = useRef(null);
+	const hoverTimeoutRef = useRef(null);
+	const pointerPositionRef = useRef({
+		x: 0,
+		y: 0
 	});
-	const { getReferenceProps, getFloatingProps } = useInteractions(trackCursorAxis ? [
-		hover,
-		focus,
-		dismiss,
-		role,
-		clientPoint
-	] : [
-		hover,
-		focus,
-		dismiss,
-		role
-	]);
 	const updatePositioning = useCallback(({ side, sideOffset: sideOffset$1, collisionPadding: collisionPadding$1 }) => {
 		setPlacement(side);
 		setSideOffset(sideOffset$1);
 		setCollisionPadding(collisionPadding$1);
 	}, []);
+	const clearHoverTimeout = useCallback(() => {
+		if (hoverTimeoutRef.current) {
+			clearTimeout(hoverTimeoutRef.current);
+			hoverTimeoutRef.current = null;
+		}
+	}, []);
+	const checkCollision = useCallback(() => {
+		if (!popupRef.current || !triggerRef.current || !open) return;
+		const mediaContainer = popupRef.current.closest("[data-media-container]");
+		if (!mediaContainer) return;
+		const { x } = getInBoundsAdjustments(getBoundingClientRectWithoutTransform(popupRef.current), getBoundingClientRectWithoutTransform(mediaContainer), collisionPadding);
+		if (x !== 0) if (trackCursorAxis) {
+			const currentLeft = Number.parseFloat(popupRef.current.style.left || "0");
+			popupRef.current.style.setProperty("left", `${currentLeft + x}px`);
+		} else popupRef.current.style.setProperty("translate", `${x}px -100%`);
+		else if (trackCursorAxis) popupRef.current.style.setProperty("translate", "-50% -100%");
+		else popupRef.current.style.setProperty("translate", "0 -100%");
+	}, [
+		open,
+		collisionPadding,
+		trackCursorAxis
+	]);
+	const updatePosition = useCallback(() => {
+		if (open && trackCursorAxis && popupRef.current) {
+			popupRef.current.style.setProperty("left", `${pointerPositionRef.current.x}px`);
+			checkCollision();
+		}
+	}, [
+		open,
+		trackCursorAxis,
+		checkCollision
+	]);
+	const setOpenState = useCallback((newOpen) => {
+		if (open === newOpen) return;
+		setOpen(newOpen);
+		if (newOpen) {
+			setTransitionStatus("initial");
+			if (popupRef.current) popupRef.current.showPopover();
+			requestAnimationFrame(() => {
+				setTransitionStatus("open");
+				checkCollision();
+			});
+		} else setTransitionStatus("close");
+	}, [open, checkCollision]);
+	useEffect(() => {
+		if (!popupRef.current || open) return;
+		const transitions = popupRef.current.getAnimations().filter((anim) => anim instanceof CSSTransition);
+		if (transitions.length > 0) Promise.all(transitions.map((t) => t.finished)).then(() => popupRef.current?.hidePopover()).catch(() => popupRef.current?.hidePopover());
+		else popupRef.current.hidePopover();
+	}, [open, transitionStatus]);
+	useEffect(() => {
+		const trigger = triggerRef.current;
+		const popup = popupRef.current;
+		if (!trigger || !popup) return;
+		const abortController = new AbortController();
+		const { signal } = abortController;
+		const handlePointerEnter = () => {
+			clearHoverTimeout();
+			hoverTimeoutRef.current = setTimeout(() => {
+				setOpenState(true);
+			}, delay);
+		};
+		const handlePointerLeave = () => {
+			clearHoverTimeout();
+			hoverTimeoutRef.current = setTimeout(() => {
+				setOpenState(false);
+			}, closeDelay);
+		};
+		const handlePointerMove = (event) => {
+			if (trackCursorAxis) {
+				pointerPositionRef.current = {
+					x: event.clientX,
+					y: event.clientY
+				};
+				if (open) updatePosition();
+			}
+		};
+		const handleFocusIn = () => {
+			setOpenState(true);
+		};
+		const handleFocusOut = (event) => {
+			const relatedTarget = event.relatedTarget;
+			if (relatedTarget && popup && contains(popup, relatedTarget)) return;
+			setOpenState(false);
+		};
+		if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
+			trigger.addEventListener("pointerenter", handlePointerEnter, { signal });
+			trigger.addEventListener("pointerleave", handlePointerLeave, { signal });
+			if (trackCursorAxis) trigger.addEventListener("pointermove", handlePointerMove, { signal });
+		}
+		trigger.addEventListener("focusin", handleFocusIn, { signal });
+		trigger.addEventListener("focusout", handleFocusOut, { signal });
+		return () => {
+			abortController.abort();
+			clearHoverTimeout();
+		};
+	}, [
+		delay,
+		closeDelay,
+		trackCursorAxis,
+		open,
+		setOpenState,
+		clearHoverTimeout,
+		updatePosition
+	]);
+	useEffect(() => {
+		if (!popupRef.current || !triggerRef.current) return;
+		const popup = popupRef.current;
+		const popupId = popup.id;
+		if (popupId) popup.style.setProperty("position-anchor", `--${popupId}`);
+		const [side, alignment] = placement.split("-");
+		popup.style.setProperty("top", `calc(anchor(${side}) - ${sideOffset}px)`);
+		if (trackCursorAxis) popup.style.setProperty("translate", `-50% -100%`);
+		else {
+			popup.style.setProperty("translate", `0 -100%`);
+			popup.style.setProperty("justify-self", alignment === "start" ? "anchor-start" : alignment === "end" ? "anchor-end" : "anchor-center");
+		}
+	}, [
+		placement,
+		sideOffset,
+		trackCursorAxis
+	]);
+	useEffect(() => {
+		if (!popupRef.current) return;
+		const resizeObserver = new ResizeObserver(checkCollision);
+		resizeObserver.observe(popupRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [checkCollision]);
 	const value = useMemo(() => ({
-		getReferenceProps,
-		getFloatingProps,
-		context,
-		updatePositioning,
-		arrowRef,
+		popupRef,
+		triggerRef,
+		open,
 		transitionStatus,
-		trackCursorAxis
-	}), [
-		getReferenceProps,
-		getFloatingProps,
-		context,
 		updatePositioning,
+		trackCursorAxis,
+		placement,
+		sideOffset,
+		collisionPadding
+	}), [
+		open,
 		transitionStatus,
-		trackCursorAxis
+		updatePositioning,
+		trackCursorAxis,
+		placement,
+		sideOffset,
+		collisionPadding
 	]);
 	return /* @__PURE__ */ jsx(TooltipContext.Provider, {
 		value,
@@ -701,17 +862,14 @@ function TooltipRoot({ delay = 0, closeDelay = 0, trackCursorAxis, children }) {
 	});
 }
 function TooltipTrigger({ children }) {
-	const { context, getReferenceProps } = useTooltipContext();
-	const { refs, open } = context;
+	const { triggerRef, open } = useTooltipContext();
 	return cloneElement(Children.only(children), {
-		ref: refs.setReference,
-		...getReferenceProps(),
+		ref: triggerRef,
 		"data-popup-open": open ? "" : void 0
 	});
 }
 function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0, children }) {
-	const { context, updatePositioning, trackCursorAxis } = useTooltipContext();
-	const { refs, floatingStyles } = context;
+	const { updatePositioning } = useTooltipContext();
 	useEffect(() => {
 		updatePositioning({
 			side,
@@ -724,28 +882,33 @@ function TooltipPositioner({ side = "top", sideOffset = 0, collisionPadding = 0,
 		collisionPadding,
 		updatePositioning
 	]);
-	const positionerContextValue = useMemo(() => ({ side }), [side]);
-	return /* @__PURE__ */ jsx(TooltipPositionerContext.Provider, {
-		value: positionerContextValue,
-		children: /* @__PURE__ */ jsx("div", {
-			ref: refs.setFloating,
-			style: {
-				...floatingStyles,
-				pointerEvents: trackCursorAxis ? "none" : void 0
-			},
-			children
-		})
-	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function TooltipPopup({ className = "", children }) {
-	const { context, getFloatingProps, transitionStatus } = useTooltipContext();
-	const { refs, placement } = context;
-	const triggerElement = refs.reference.current;
-	const dataAttributes = triggerElement?.attributes ? Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value])) : {};
+function TooltipPopup({ id, className = "", children }) {
+	const { popupRef, triggerRef, transitionStatus, placement } = useTooltipContext();
+	const triggerElement = triggerRef.current;
+	const popupId = useMemo(() => id ?? `tooltip-${Math.random().toString(36).substring(2, 9)}`, [id]);
+	useEffect(() => {
+		if (!popupRef.current || !triggerRef.current) return;
+		const popup = popupRef.current;
+		const trigger = triggerRef.current;
+		popup.setAttribute("popover", "manual");
+		trigger.setAttribute("commandfor", popupId);
+		trigger.style.setProperty("anchor-name", `--${popupId}`);
+	}, [
+		popupId,
+		popupRef,
+		triggerRef
+	]);
 	return /* @__PURE__ */ jsx("div", {
+		ref: popupRef,
+		id: popupId,
 		className,
-		...getFloatingProps(),
-		...dataAttributes,
+		role: "tooltip",
+		...useMemo(() => {
+			if (!triggerElement?.attributes) return {};
+			return Object.fromEntries(Array.from(triggerElement.attributes).filter((attr) => attr.name.startsWith("data-")).map((attr) => [attr.name, attr.value]));
+		}, [triggerElement]),
 		"data-side": placement,
 		"data-starting-style": transitionStatus === "initial" ? "" : void 0,
 		"data-open": transitionStatus === "initial" || transitionStatus === "open" ? "" : void 0,
@@ -754,39 +917,11 @@ function TooltipPopup({ className = "", children }) {
 		children
 	});
 }
-function TooltipArrow({ className = "", children }) {
-	const { arrowRef, context } = useTooltipContext();
-	const { side } = useTooltipPositionerContext();
-	const { x: arrowX, y: arrowY } = context.middlewareData.arrow || {
-		x: 0,
-		y: 0
-	};
-	return /* @__PURE__ */ jsx("div", {
-		ref: arrowRef,
-		className,
-		"aria-hidden": "true",
-		"data-side": side,
-		style: {
-			left: arrowX != null ? `${arrowX}px` : void 0,
-			top: arrowY != null ? `${arrowY}px` : void 0
-		},
-		children
-	});
-}
-function TooltipPortal({ children, root, rootId = "@default_portal_id" }) {
-	return /* @__PURE__ */ jsx(FloatingPortal, {
-		root,
-		id: rootId,
-		children
-	});
-}
 const Tooltip = {
 	Root: TooltipRoot,
 	Trigger: TooltipTrigger,
 	Positioner: TooltipPositioner,
-	Popup: TooltipPopup,
-	Arrow: TooltipArrow,
-	Portal: TooltipPortal
+	Popup: TooltipPopup
 };
 var Tooltip_default = Tooltip;
 
@@ -902,4 +1037,4 @@ var VolumeSlider_default = VolumeSlider$1;
 
 //#endregion
 export { DurationDisplay as _, TimeSlider$1 as a, Popover as c, PlayButton_default as d, MuteButton as f, FullscreenButton as g, useMediaContainerRef as h, Tooltip_default as i, Popover_default as l, MediaContainer as m, VolumeSlider_default as n, PreviewTimeDisplay as o, MuteButton_default as p, Tooltip as r, PreviewTimeDisplay_default as s, VolumeSlider$1 as t, PlayButton as u, CurrentTimeDisplay as v };
-//# sourceMappingURL=VolumeSlider-DoR6idnJ.js.map
+//# sourceMappingURL=VolumeSlider-B8x0_k2f.js.map