npm - @videojs/react - Versions diffs - 10.0.0-beta.26 → 10.0.0-beta.28 - Mend

@videojs/react 10.0.0-beta.26 → 10.0.0-beta.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1415) hide show

package/dist/default/ui/tooltip/tooltip-popup.js CHANGED Viewed

@@ -1,107 +1,37 @@
-"use client";
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
 import { TooltipLabel } from "./tooltip-label.js";
 import { TooltipShortcut } from "./tooltip-shortcut.js";
-import { getAnchorPositionStyle, getPopupPositionRect, getPositionedSide, getPositioningBoundaryRect, isEventWithinElement, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { TooltipCSSVars } from "@videojs/core";
 //#region src/ui/tooltip/tooltip-popup.tsx
-const POPUP_RESET = {
-	position: "fixed",
-	inset: "auto",
-	margin: 0
-};
 /** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
 const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, children, ...elementProps }, forwardedRef) {
 	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
 		tooltip.setPopupElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
-	}, [tooltip, anchorName]), internalRef);
+	}, [tooltip]), internalRef);
 	const posOpts = useMemo(() => ({
 		side: preferredSide,
 		align: state.align
 	}), [preferredSide, state.align]);
-	const anchorStyle = useMemo(() => {
-		if (!supportsAnchorPositioning()) return null;
-		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars);
-		return rest;
-	}, [anchorName, posOpts]);
-	const [position, setPosition] = useState(null);
-	useLayoutEffect(() => {
-		if (!state.open) {
-			setPosition(null);
-			return;
-		}
-		function measure() {
-			const triggerEl = tooltip.triggerElement;
-			const popupEl = internalRef.current;
-			if (!triggerEl || !popupEl) return;
-			const triggerRect = triggerEl.getBoundingClientRect();
-			const root = popupEl.getRootNode();
-			const boundaryElement = resolvePositioningBoundary(boundary, {
-				container,
-				root
-			});
-			const popupRect = getPopupPositionRect(popupEl, posOpts.side);
-			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
-			const offsets = resolveOffsets(popupEl, TooltipCSSVars);
-			const side = getPositionedSide(triggerRect, popupRect, boundaryRect, posOpts, offsets);
-			const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, {
-				...posOpts,
-				side
-			}, triggerRect, supportsAnchorPositioning() ? void 0 : popupRect, boundaryRect, offsets, TooltipCSSVars);
-			setPosition(nextStyle);
-			setPositionedSide(side);
-		}
-		measure();
-		const triggerEl = tooltip.triggerElement;
-		const popupEl = internalRef.current;
-		const boundaryElement = popupEl ? resolvePositioningBoundary(boundary, {
-			container,
-			root: popupEl.getRootNode()
-		}) : null;
-		let rafId = 0;
-		function reposition(event) {
-			if (event && isEventWithinElement(event, internalRef.current)) return;
-			cancelAnimationFrame(rafId);
-			rafId = requestAnimationFrame(measure);
-		}
-		reposition();
-		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
-			reposition();
-		}) : null;
-		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
-		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
-		if (boundaryElement && resizeObserver) resizeObserver.observe(boundaryElement);
-		window.addEventListener("scroll", reposition, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", reposition);
-		return () => {
-			cancelAnimationFrame(rafId);
-			resizeObserver?.disconnect();
-			window.removeEventListener("scroll", reposition, true);
-			window.removeEventListener("resize", reposition);
-		};
-	}, [
-		state.open,
+	const positioningStyle = usePopupPosition({
+		open: state.open,
 		anchorName,
-		posOpts,
-		tooltip,
+		position: posOpts,
+		triggerSource: tooltip,
+		popupRef: internalRef,
 		boundary,
 		container,
-		setPositionedSide
-	]);
-	const positioningStyle = position ?? anchorStyle ?? POPUP_RESET;
+		cssVars: TooltipCSSVars,
+		onSideChange: setPositionedSide
+	});
 	if (!state.open) return null;
-	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+	const body = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
 	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
 	return renderElement("div", {
 		render,

package/dist/default/ui/tooltip/tooltip-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport {~~\n getAnchorPositionStyle,\n getPopupPositionRect,\n getPositionedSide,\n getPositioningBoundaryRect,\n isEventWithinElement,\n resolveOffsets,\n resolvePositioningBoundary,\n}~~ ~~from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport {~~ forwardRef, useCallback, ~~useLayoutEffect,~~ useMemo, useRef, ~~useState~~ } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './tooltip-label';\nimport { TooltipShortcut } from './tooltip-shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\~~nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\~~n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n ~~if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n~~ },\n [tooltip~~, anchorName~~]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognized CSS properties.\n const ~~anchorStyle~~ = ~~useMemo~~(~~() =>~~ {\n ~~if (!supportsAnchorPositioning()) return null;\n const { positionAnchor~~: _, ...rest } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n undefined,\n undefined,\n undefined,\n undefined,\n TooltipCSSVars\n );\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Measure rects after layout, before paint.\n const [position, setPosition] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (!state.open~~) {\~~n ~~setPosition(null);\n return;\n~~ }\n\n ~~function measure()~~: void {\n const triggerEl = tooltip.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const root = popupEl.getRootNode() as Document \| ShadowRoot;\n const boundaryElement = resolvePositioningBoundary(boundary, { container, root });\n const popupRect = getPopupPositionRect(popupEl, posOpts.side);\n const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n const side = getPositionedSide(triggerRect, popupRect, boundaryRect, posOpts, offsets);\n\n const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(\n anchorName,\n ~~{ ...posOpts, side },\n triggerRect,\n supportsAnchorPositioning() ? undefined~~ : ~~popupRect~~,\n ~~boundaryRect,\n offsets,\n TooltipCSSVars\n );\n\n setPosition(nextStyle as CSSProperties);\n setPositionedSide(side);\n~~ ~~}\n\n measure();\n const~~ ~~triggerEl = tooltip.triggerElement;\n const popupEl =~~ internalRef~~.current;\~~n ~~const boundaryElement = popupEl\n ? resolvePositioningBoundary(~~boundary~~, {\~~n container,\n ~~root~~: ~~popupEl.getRootNode() as Document \| ShadowRoot~~,\n ~~})\n : null;\n\n~~ ~~let rafId = 0;\n function reposition(event?: Event)~~: ~~void {\~~n if (event && isEventWithinElement(event, internalRef.current)) return;\n\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the tooltip has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n if (boundaryElement && resizeObserver) {\n resizeObserver.observe(boundaryElement);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }~~, [state.open, anchorName, posOpts, tooltip, boundary, container, setPositionedSide]~~);\n\n // ~~Use measured styles once available; reset UA [popover] defaults until then.\n const positioningStyle = position ?? anchorStyle ?? POPUP_RESET;\n\n //~~ --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n const body =\n children !== undefined ? (\n children\n ) : (\n <>\n <TooltipLabel />\n <TooltipShortcut />\n </>\n );\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { children: body },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":"~~;;;;;;;;;;;;AAyBA~~,~~MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;;AAGjF,~~MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;~~CAY~~/C,MAAM,cAAc,gBAAgB,~~cAVnB~~,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;~~EAC1B~~,~~IAAI,MAAM,0BAA0B,GAClC,GAAG,MAAM,YAAY,mBAAmB,KAAK,YAAY;CAE7D,~~GACA,CAAC,~~SAAS~~,~~UAAU~~,~~CAGmC,~~GAAG,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;~~CAKzG~~,MAAM,~~cAAc~~,~~cAAc~~;~~EAChC~~,~~IAAI,CAAC,0BAA0B,GAAG,OAAO;EACzC,~~MAAM,~~EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,KAAA,GACA,KAAA,GACA,KAAA,GACA,KAAA,GACA,cACF;EACA,OAAO;CACT,GAAG,CAAC,YAAY,OAAO,CAAC;CAGxB,~~MAAM~~,CAAC,UAAU,eAAe,SAA+B,IAAI~~;~~CAEnE,sBAAsB~~;~~EACpB~~,~~IAAI,CAAC,MAAM,MAAM;GACf,YAAY,IAAI;GAChB;EACF;EAEA,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,~~UAAU~~,YAAY~~;~~GAC5B~~,~~IAAI,CAAC,aAAa,CAAC,SAAS~~;~~GAE5B~~,~~MAAM,cAAc,~~UAAU~~,sBAAsB~~;~~GACpD,MAAM,OAAO,QAAQ,YAAY~~;~~GACjC,MAAM,kBAAkB,2BAA2B,UAAU~~;~~IAAE;IAAW;GAAK~~,~~CAAC;GAChF,MAAM,YAAY,qBAAqB,~~SAAS~~,QAAQ,IAAI~~;~~GAC5D~~,~~MAAM,eAAe,2BAA2B,eAAe;GAC/D,MAAM,UAAU,eAAe,SAAS,~~cAAc;~~GACtD~~,MAAM,OAAO,kBAAkB,aAAa,WAAW,cAAc,SAAS,OAAO;GAErF,MAAM,EAAE,gBAAgB,GAAG,GAAG,cAAc,uBAC1C,YACA;IAAE,GAAG;IAAS;GAAK,GACnB,aACA,0BAA0B,IAAI,KAAA,IAAY,WAC1C,cACA,SACA,cACF;GAEA,YAAY,SAA0B;GACtC,kBAAkB,IAAI;EACxB;EAEA,QAAQ;EACR,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAC5B,MAAM,kBAAkB,UACpB,2BAA2B,UAAU;GACnC;GACA,MAAM,QAAQ,YAAY;EAC5B,CAAC~~,IACD~~;~~EAEJ~~,IAAI,~~QAAQ;EACZ,SAAS,WAAW,OAAqB;GACvC,IAAI,SAAS,qBAAqB,OAAO,YAAY,OAAO,GAAG;GAE/D,qBAAqB,KAAK;GAC1B,QAAQ,sBAAsB,OAAO;EACvC;EAIA,WAAW;EAEX,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;GACvB,WAAW;EACb,~~CAAC,IACD;EAEN,IAAI,aAAa,gBACf,eAAe,QAAQ,SAAS;EAGlC,IAAI,WAAW,gBACb,eAAe,QAAQ,OAAO;EAEhC,IAAI,mBAAmB,gBACrB,eAAe,QAAQ,eAAe;EAGxC,OAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;EAAK,CAAC;EAC9E,OAAO,iBAAiB,UAAU,UAAU;EAE5C,aAAa;GACX,qBAAqB,KAAK;GAC1B,gBAAgB,WAAW;GAC3B,OAAO,oBAAoB,UAAU,YAAY,IAAI;GACrD,OAAO,oBAAoB,UAAU,UAAU;EACjD;CACF,GAAG;EAAC,MAAM~~;EAAM;EAAY;EAAS;EAAS;EAAU;EAAW;CAAiB~~,~~CAAC;CAGrF,MAAM,mBAAmB,YAAY,eAAe;CAIpD,IAAI,CAAC,MAAM,~~MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,~~UAAA~~,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './tooltip-label';\nimport { TooltipShortcut } from './tooltip-shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = useTooltipContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n tooltip.setPopupElement(el);\n },\n [tooltip]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: posOpts,\n triggerSource: tooltip,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: TooltipCSSVars,\n onSideChange: setPositionedSide,\n });\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n const body =\n children !== undefined ? (\n children\n ) : (\n <>\n <TooltipLabel />\n <TooltipShortcut />\n </>\n );\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { children: body },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipPopup {\n export type Props = TooltipPopupProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAS/C,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CAG+C,GAAG,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAGT,MAAM,OACJ,aAAa,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;CAIN,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/tooltip/tooltip-provider.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { TooltipGroupContextProvider } from "./group-context.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/default/ui/tooltip/tooltip-provider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n group.setProps({ delay, closeDelay, timeout });\n\n return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n export type Props = TooltipProviderProps;\n}\n"],"mappings":"~~;;;;;;AAYA~~,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;CACnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}
1	+ {"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n group.setProps({ delay, closeDelay, timeout });\n\n return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;AAUA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;CAAQ,CAAC,CAAC;CACnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAE7C,OAAO,oBAAC,6BAAD;EAA6B,OAAO,EAAE,MAAM;EAAI;CAAsC,CAAA;AAC/F"}

package/dist/default/ui/tooltip/tooltip-root.js CHANGED Viewed

@@ -1,5 +1,5 @@
-"use client";
 import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { TooltipContextProvider } from "./context.js";
@@ -16,6 +16,7 @@ import { TooltipCore, TooltipDataAttrs } from "@videojs/core";
 //#region src/ui/tooltip/tooltip-root.tsx
 function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, boundary = "container", children, ...coreProps }) {
 	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
 	const controls = useOptionalControlsContext();
 	const [core] = useState(() => new TooltipCore(coreProps));
 	core.setProps(coreProps);
@@ -28,6 +29,7 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 	const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);
 	const disabledRef = useLatestRef(disabled);
 	const groupRef = useLatestRef(groupFromContext);
+	const popupGroupRef = useLatestRef(popupGroup);
 	const [tooltip] = useState(() => {
 		const instance = createTooltip({
 			transition: createTransition(),
@@ -41,7 +43,8 @@ function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultPr
 			closeDelay: () => closeDelayRef.current,
 			disableHoverablePopup: () => disableHoverablePopupRef.current,
 			disabled: () => disabledRef.current,
-			group: () => groupRef.current
+			group: () => groupRef.current,
+			popupGroup: () => popupGroupRef.current
 		});
 		if (!isControlled && defaultOpen) instance.open();
 		return instance;

package/dist/default/ui/tooltip/tooltip-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const groupRef = useLatestRef(groupFromContext);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n group: () => groupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;~~AAgCA~~,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CACxD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,gBAAgB;~~CAE9C~~,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;~~EACxB~~,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAC1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CACvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}
1	+ {"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n createTooltip,\n createTransition,\n type PositioningBoundary,\n type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the tooltip open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function TooltipRoot({\n open: controlledOpen,\n defaultOpen = TooltipCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n delay = TooltipCore.defaultProps.delay,\n closeDelay = TooltipCore.defaultProps.closeDelay,\n disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n disabled = TooltipCore.defaultProps.disabled,\n boundary = 'container',\n children,\n ...coreProps\n}: TooltipRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new TooltipCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n const groupFromContext = useTooltipGroup();\n\n // Keep refs that always point to the latest values so the\n // createTooltip closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n const disabledRef = useLatestRef(disabled);\n const groupRef = useLatestRef(groupFromContext);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [tooltip] = useState(() => {\n const instance = createTooltip({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n disableHoverablePopup: () => disableHoverablePopupRef.current,\n disabled: () => disabledRef.current,\n group: () => groupRef.current,\n popupGroup: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const [content, setContent] = useState<TooltipContent \| undefined>();\n\n const anchorName = useSafeId();\n const popupId = useSafeId('tooltip');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = tooltip.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n tooltip.open();\n } else {\n tooltip.close();\n }\n }, [controlledOpen, tooltip]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n tooltip.close('imperative-action');\n }, [controls?.state.visible, tooltip]);\n\n useDestroy(tooltip);\n\n const input = useSnapshot(tooltip.input);\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <TooltipContextProvider\n value={{\n core,\n tooltip,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: TooltipDataAttrs,\n anchorName,\n popupId,\n content,\n setContent,\n boundary,\n container,\n }}\n >\n {children}\n </TooltipContextProvider>\n );\n}\n\nexport namespace TooltipRoot {\n export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CACxD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAC1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CACvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

package/dist/default/ui/tooltip/tooltip-shortcut.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
 import { forwardRef } from "react";

package/dist/default/ui/tooltip/tooltip-shortcut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n\n if (!shortcut) {\n return null;\n }\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":"~~;;;;;;AAYA~~,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAEhG,IAAI,CAAC,UACH,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n { render, className, style, children, ...elementProps },\n forwardedRef\n) {\n const { state, stateAttrMap, content } = useTooltipContext();\n const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n\n if (!shortcut) {\n return null;\n }\n\n return renderElement(\n 'kbd',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: forwardedRef,\n props: [elementProps, { children: shortcut }],\n }\n );\n});\n\nexport namespace TooltipShortcut {\n export type Props = TooltipShortcutProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAEhG,IAAI,CAAC,UACH,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}

package/dist/default/ui/tooltip/tooltip-trigger.js CHANGED Viewed

@@ -1,16 +1,13 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useTooltipContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
 //#region src/ui/tooltip/tooltip-trigger.tsx
 /** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
 const TooltipTrigger = forwardRef(function TooltipTrigger({ render, className, style, ...elementProps }, forwardedRef) {
-	const { tooltip, state, stateAttrMap, anchorName } = useTooltipContext();
+	const { tooltip, state, stateAttrMap } = useTooltipContext();
 	const triggerRef = useCallback((el) => {
 		tooltip.setTriggerElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
-	}, [tooltip, anchorName]);
+	}, [tooltip]);
 	const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;
 	return renderElement("button", {
 		render,

package/dist/default/ui/tooltip/tooltip-trigger.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-trigger.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { TooltipState } from '@videojs/core';\nimport { ~~supportsAnchorPositioning } from '@videojs/utils/dom';\nimport {~~ forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}\n\n/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(function TooltipTrigger(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { tooltip, state, stateAttrMap, ~~anchorName~~ } = useTooltipContext();\n\n const triggerRef = useCallback(\n (el: HTMLButtonElement \| null) => {\n tooltip.setTriggerElement(el);\n ~~if (el && supportsAnchorPositioning()) {\n el.style.setProperty('anchor-name', `--${anchorName}`);\n }\n~~ },\n [tooltip~~, anchorName~~]\n );\n\n // Remap DOM focus events to React synthetic event names.\n // createTooltip() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n // but React maps those to onFocus/onBlur.\n const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, triggerRef],\n props: [\n {\n type: 'button' as const,\n },\n { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipTrigger {\n export type Props = TooltipTriggerProps;\n export type State = TooltipState;\n}\n"],"mappings":"~~;;;;;;;AAaA~~,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,SAAS,OAAO,~~cAAc~~,~~eAAe,~~kBAAkB;~~CAEvE~~,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;~~EAC5B~~,~~IAAI,MAAM,0BAA0B,GAClC,GAAG,MAAM,YAAY,eAAe,KAAK,YAAY;CAEzD,~~GACA,CAAC,~~SAAS~~,~~UAAU,CACtB~~;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL,EACE,MAAM,SACR;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"tooltip-trigger.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}\n\n/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(function TooltipTrigger(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { tooltip, state, stateAttrMap } = useTooltipContext();\n\n const triggerRef = useCallback(\n (el: HTMLButtonElement \| null) => {\n tooltip.setTriggerElement(el);\n },\n [tooltip]\n );\n\n // Remap DOM focus events to React synthetic event names.\n // createTooltip() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n // but React maps those to onFocus/onBlur.\n const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, triggerRef],\n props: [\n {\n type: 'button' as const,\n },\n { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace TooltipTrigger {\n export type Props = TooltipTriggerProps;\n export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,SAAS,OAAO,iBAAiB,kBAAkB;CAE3D,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL,EACE,MAAM,SACR;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/volume-indicator/context.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-indicator/context.tsx

package/dist/default/ui/volume-indicator/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue \| null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n const ctx = useContext(VolumeIndicatorContext);\n if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n return ctx;\n}\n"],"mappings":"~~;;;;AASA~~,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CACtG,OAAO;AACT"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue \| null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n const ctx = useContext(VolumeIndicatorContext);\n if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CACtG,OAAO;AACT"}

package/dist/default/ui/volume-indicator/volume-indicator-fill.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useVolumeIndicatorContext } from "./context.js";
 import { forwardRef } from "react";

package/dist/default/ui/volume-indicator/volume-indicator-fill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":"~~;;;;;;;AAaA~~,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAG5C,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAJL,4BAA4B,OAAO,KAIf;CAAE,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;CAEJ,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}
1	+ {"version":3,"file":"volume-indicator-fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n componentProps: VolumeIndicatorFillProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n return renderElement(\n 'div',\n { render, className, style: fillStyle },\n {\n state,\n ref: forwardedRef,\n props: [elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorFill {\n export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n state: VolumeIndicatorCore.State,\n style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n const vars = state.fill\n ? ({\n [VolumeIndicatorCSSVars.fill]: state.fill,\n } as CSSProperties)\n : undefined;\n\n if (!vars) return style;\n\n if (isFunction(style)) {\n return (nextState) => ({\n ...style(nextState),\n ...vars,\n });\n }\n\n return {\n ...style,\n ...vars,\n };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAG5C,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAJL,4BAA4B,OAAO,KAIf;CAAE,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;CAEJ,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}

package/dist/default/ui/volume-indicator/volume-indicator-root.js CHANGED Viewed

@@ -1,7 +1,6 @@
-"use client";
 import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { VolumeIndicatorProvider } from "./context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/default/ui/volume-indicator/volume-indicator-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-~~indicators~~/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n extends UIComponentProps<'div', VolumeIndicatorCore.State>,\n Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n componentProps: VolumeIndicatorRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, ...elementProps } = componentProps;\n const translator = useTranslator();\n const { elementRef, present, state } = useInputIndicatorRoot(\n () => new VolumeIndicatorCore(),\n {\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\n );\n\n if (!present) return null;\n\n return (\n <VolumeIndicatorProvider value={{ state }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeIndicatorDataAttrs,\n ref: [forwardedRef, elementRef],\n props: [elementProps],\n }\n )}\n </VolumeIndicatorProvider>\n );\n});\n\nexport namespace VolumeIndicatorRoot {\n export type Props = VolumeIndicatorRootProps;\n export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":"~~;;;;;;;;;AAgBA~~,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAElE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,2BALO,cAK6B,CAAC;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CAEA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}
1	+ {"version":3,"file":"volume-indicator-root.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n extends UIComponentProps<'div', VolumeIndicatorCore.State>,\n Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n componentProps: VolumeIndicatorRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, ...elementProps } = componentProps;\n const translator = useTranslator();\n const { elementRef, present, state } = useInputIndicatorRoot(\n () => new VolumeIndicatorCore(),\n {\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\n );\n\n if (!present) return null;\n\n return (\n <VolumeIndicatorProvider value={{ state }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeIndicatorDataAttrs,\n ref: [forwardedRef, elementRef],\n props: [elementProps],\n }\n )}\n </VolumeIndicatorProvider>\n );\n});\n\nexport namespace VolumeIndicatorRoot {\n export type Props = VolumeIndicatorRootProps;\n export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAcA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAElE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,2BALO,cAK6B,CAAC;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CAEA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/default/ui/volume-indicator/volume-indicator-value.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useVolumeIndicatorContext } from "./context.js";
 import { forwardRef } from "react";

package/dist/default/ui/volume-indicator/volume-indicator-value.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n componentProps: VolumeIndicatorValueProps,\n forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n ref: forwardedRef,\n props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorValue {\n export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":"~~;;;;;;AAYA~~,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"volume-indicator-value.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value.tsx"],"sourcesContent":["import { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n componentProps: VolumeIndicatorValueProps,\n forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n const { state } = useVolumeIndicatorContext();\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n ref: forwardedRef,\n props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n }\n );\n});\n\nexport namespace VolumeIndicatorValue {\n export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

package/dist/default/ui/volume-slider/volume-slider-root.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
@@ -16,6 +15,7 @@ const noopVolume = {
 	volume: 0,
 	muted: false,
 	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
 	setVolume: () => 0,
 	toggleMuted: () => false
 };
@@ -24,6 +24,8 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 	const volume = usePlayer(selectVolume);
 	const translator = useTranslator();
 	const locale = useLocale();
+	const isUnavailable = volume?.volumeAvailability !== "available";
+	const isDisabled = Boolean(disabled) || isUnavailable;
 	const [core] = useState(() => new VolumeSliderCore());
 	core.setProps({
 		label,
@@ -36,11 +38,11 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 	});
 	core.setFormatLocale(locale);
 	const volumeRef = useLatestRef(volume);
-	const disabledRef = useLatestRef(disabled);
+	const disabledRef = useLatestRef(isDisabled);
 	const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;
 	const getStepPercent = () => core.getStepPercent();
 	const setVolume = (percent) => volumeRef.current?.setVolume(percent / 100);
-	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			core.setMedia(volume ?? noopVolume);
@@ -50,7 +52,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		getStepPercent,
 		getLargeStepPercent: () => core.getLargeStepPercent(),
 		orientation,
-		disabled,
+		disabled: isDisabled,
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getSliderCSSVars,
 		onValueChange: setVolume,
@@ -59,7 +61,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		onDragEnd
 	});
 	const [wheelHandler] = useState(() => createWheelStep({
-		isDisabled: () => !!disabledRef.current || !volumeRef.current,
+		isDisabled: () => disabledRef.current,
 		getPercent: () => (volumeRef.current?.volume ?? 0) * 100,
 		getStepPercent: () => core.getWheelStepPercent(),
 		onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100)
@@ -71,10 +73,13 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		if (element) wheelCleanupRef.current = listen(element, "wheel", wheelHandler.onWheel, { passive: false });
 	}, [wheelHandler]);
 	if (!volume) return null;
+	if (state.hidden) return null;
 	return /* @__PURE__ */ jsx(SliderProvider, {
 		value: {
 			state,
 			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
 			thumbRef,
 			thumbProps,
 			stateAttrMap: VolumeSliderDataAttrs,

package/dist/default/ui/volume-slider/volume-slider-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n const translator = useTranslator();\n const locale = useLocale();\n\n const [core] = useState(() => new VolumeSliderCore());\n core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n core.setFormatLocale(locale);\n\n // Keep refs to the latest dynamic values for stable closures.\n const volumeRef = useLatestRef(volume);\n const disabledRef = useLatestRef(~~disabled~~);\n\n const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n const getStepPercent = () => core.getStepPercent();\n const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent,\n getStepPercent,\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: setVolume,\n onValueCommit: setVolume,\n onDragStart,\n onDragEnd,\n });\n\n const [wheelHandler] = useState(() =>\n createWheelStep({\n isDisabled: () => !!disabledRef.current ~~\|\| !volumeRef.current~~,\n getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n getStepPercent: () => core.getWheelStepPercent(),\n onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n })\n );\n\n // Attach non-passive wheel listener via callback ref so it covers\n // late-mounted elements (null → mounted after volume appears).\n const wheelCleanupRef = useRef<(() => void) \| null>(null);\n const wheelRef = useCallback(\n (element: HTMLDivElement \| null) => {\n wheelCleanupRef.current?.();\n wheelCleanupRef.current = null;\n if (element) {\n wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n }\n },\n [wheelHandler]\n );\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n return null;\n }\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n thumbRef,\n thumbProps,\n stateAttrMap: VolumeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as VolumeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeSliderDataAttrs,\n ref: [forwardedRef, rootRef, wheelRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;AAgBA~~,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;AACrB;AAOA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;~~CAEzB~~,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CACpD,KAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAW;EAAU;CAAe,CAAC;CAC1F,KAAK,gBAAgB,MAAM;CAG3B,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,cAAc,aAAa,~~QAAQ~~;~~CAEzC~~,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,eAAe;CACjD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,GAAG;CAEjF,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,~~eAAe~~,UAAkC;~~EAChH~~,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,KAAK,SAAS,UAAU,UAAU;GAClC,OAAO,KAAK,SAAS;EACvB;EACA;EACA;EACA,2BAA2B,KAAK,oBAAoB;EACpD;EACA;~~EACA~~,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;CACF,CAAC;~~CAED~~,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,~~CAAC,CAAC,~~YAAY~~,WAAW,CAAC,UAAU~~;~~EACtD~~,mBAAmB,UAAU,SAAS,UAAU,KAAK;EACrD,sBAAsB,KAAK,oBAAoB;EAC/C,gBAAgB,YAAY,UAAU,SAAS,UAAU,UAAU,GAAG;CACxE,CAAC,CACH;CAIA,MAAM,kBAAkB,OAA4B,IAAI;CACxD,MAAM,WAAW,aACd,YAAmC;EAClC,gBAAgB,UAAU;EAC1B,gBAAgB,UAAU;EAC1B,IAAI,SACF,gBAAgB,UAAU,OAAO,SAAS,SAAS,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC;CAE/F,GACA,CAAC,YAAY,CACf;CAEA,IAAI,CAAC,QAEH,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAqC;IACjE,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAqC,CAC/D;IACF;GACF;GACA,cAAc,UAAU,GAAG,KAAK,MAAM,KAAK,EAAE;EAC/C;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;IAAC;IAAc;IAAS;GAAQ;GACrC,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}
1	+ {"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n volume: 0,\n muted: false,\n volumeAvailability: 'unsupported' as const,\n mutedAvailability: 'unsupported' as const,\n setVolume: () => 0,\n toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n onDragStart?: (() => void) \| undefined;\n onDragEnd?: (() => void) \| undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n function VolumeSliderRoot(componentProps, forwardedRef) {\n const {\n render,\n className,\n style,\n label,\n orientation,\n step = VolumeSliderCore.defaultProps.step,\n largeStep = VolumeSliderCore.defaultProps.largeStep,\n wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n disabled,\n thumbAlignment,\n onDragStart,\n onDragEnd,\n ...elementProps\n } = componentProps;\n\n const volume = usePlayer(selectVolume);\n const translator = useTranslator();\n const locale = useLocale();\n const isUnavailable = volume?.volumeAvailability !== 'available';\n const isDisabled = Boolean(disabled) \|\| isUnavailable;\n\n const [core] = useState(() => new VolumeSliderCore());\n core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n core.setFormatLocale(locale);\n\n // Keep refs to the latest dynamic values for stable closures.\n const volumeRef = useLatestRef(volume);\n const disabledRef = useLatestRef(isDisabled);\n\n const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n const getStepPercent = () => core.getStepPercent();\n const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n useSlider<VolumeSliderCore.State>({\n computeState: (input) => {\n core.setInput(input);\n core.setMedia(volume ?? noopVolume);\n return core.getState();\n },\n getPercent,\n getStepPercent,\n getLargeStepPercent: () => core.getLargeStepPercent(),\n orientation,\n disabled: isDisabled,\n adjustPercent: (rawPercent, thumbSize, trackSize) =>\n core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n getCSSVars: getSliderCSSVars,\n onValueChange: setVolume,\n onValueCommit: setVolume,\n onDragStart,\n onDragEnd,\n });\n\n const [wheelHandler] = useState(() =>\n createWheelStep({\n isDisabled: () => disabledRef.current,\n getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n getStepPercent: () => core.getWheelStepPercent(),\n onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n })\n );\n\n // Attach non-passive wheel listener via callback ref so it covers\n // late-mounted elements (null → mounted after volume appears).\n const wheelCleanupRef = useRef<(() => void) \| null>(null);\n const wheelRef = useCallback(\n (element: HTMLDivElement \| null) => {\n wheelCleanupRef.current?.();\n wheelCleanupRef.current = null;\n if (element) {\n wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n }\n },\n [wheelHandler]\n );\n\n if (!volume) {\n if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n return null;\n }\n\n if (state.hidden) return null;\n\n return (\n <SliderProvider\n value={{\n state,\n pointerValue: core.valueFromPercent(state.pointerPercent),\n input,\n getPointerValue: (percent) => core.valueFromPercent(percent),\n thumbRef,\n thumbProps,\n stateAttrMap: VolumeSliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n return {\n ...attrs,\n 'aria-label': translateText(attrs['aria-label'], translator),\n 'aria-valuetext': translateText(\n attrs['aria-valuetext'],\n translator,\n core.getValueTextParams(sliderState as VolumeSliderCore.State)\n ),\n };\n },\n formatValue: (value) => `${Math.round(value)}%`,\n }}\n >\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: VolumeSliderDataAttrs,\n ref: [forwardedRef, rootRef, wheelRef],\n props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n }\n )}\n </SliderProvider>\n );\n }\n);\n\nexport namespace VolumeSliderRoot {\n export type Props = VolumeSliderRootProps;\n export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;AAOA,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CACzB,MAAM,gBAAgB,QAAQ,uBAAuB;CACrD,MAAM,aAAa,QAAQ,QAAQ,KAAK;CAExC,MAAM,CAAC,QAAQ,eAAe,IAAI,iBAAiB,CAAC;CACpD,KAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAW;EAAU;CAAe,CAAC;CAC1F,KAAK,gBAAgB,MAAM;CAG3B,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,cAAc,aAAa,UAAU;CAE3C,MAAM,oBAAoB,UAAU,SAAS,UAAU,KAAK;CAC5D,MAAM,uBAAuB,KAAK,eAAe;CACjD,MAAM,aAAa,YAAoB,UAAU,SAAS,UAAU,UAAU,GAAG;CAEjF,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAkC;EAChC,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,KAAK,SAAS,UAAU,UAAU;GAClC,OAAO,KAAK,SAAS;EACvB;EACA;EACA;EACA,2BAA2B,KAAK,oBAAoB;EACpD;EACA,UAAU;EACV,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,eAAe;EACf,eAAe;EACf;EACA;CACF,CAAC;CAEH,MAAM,CAAC,gBAAgB,eACrB,gBAAgB;EACd,kBAAkB,YAAY;EAC9B,mBAAmB,UAAU,SAAS,UAAU,KAAK;EACrD,sBAAsB,KAAK,oBAAoB;EAC/C,gBAAgB,YAAY,UAAU,SAAS,UAAU,UAAU,GAAG;CACxE,CAAC,CACH;CAIA,MAAM,kBAAkB,OAA4B,IAAI;CACxD,MAAM,WAAW,aACd,YAAmC;EAClC,gBAAgB,UAAU;EAC1B,gBAAgB,UAAU;EAC1B,IAAI,SACF,gBAAgB,UAAU,OAAO,SAAS,SAAS,aAAa,SAAS,EAAE,SAAS,MAAM,CAAC;CAE/F,GACA,CAAC,YAAY,CACf;CAEA,IAAI,CAAC,QAEH,OAAO;CAGT,IAAI,MAAM,QAAQ,OAAO;CAEzB,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAqC;IACjE,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAqC,CAC/D;IACF;GACF;GACA,cAAc,UAAU,GAAG,KAAK,MAAM,KAAK,EAAE;EAC/C;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;IAAC;IAAc;IAAS;GAAQ;GACrC,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}

package/dist/default/utils/merge-props.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 //#region src/utils/merge-props.ts
 /**
 * Check if a key is an event handler key (on* with capital letter).

package/dist/default/utils/merge-props.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/*\n Check if a key is an event handler key (on* with capital letter).\n /\nfunction isEventHandlerKey(key: string): boolean {\n return (\n key.charCodeAt(0) === 111 / o / &&\n key.charCodeAt(1) === 110 / n / &&\n key.charCodeAt(2) >= 65 / A / &&\n key.charCodeAt(2) <= 90 / Z /\n );\n}\n\n/\n Check if a key/value pair is an event handler (includes undefined values).\n /\nfunction isEventHandler(key: string, value: unknown): boolean {\n return isEventHandlerKey(key) && (typeof value === 'function' \|\| typeof value === 'undefined');\n}\n\n/\n Merge two event handlers - external runs first, ours runs second.\n /\nfunction mergeEventHandlers(\n ours: ((event: SyntheticEvent) => void) \| undefined,\n theirs: ((event: SyntheticEvent) => void) \| undefined\n): ((event: SyntheticEvent) => void) \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n\n return (event: SyntheticEvent) => {\n theirs(event);\n ours(event);\n };\n}\n\n/\n Merge two className values - concatenate strings.\n /\nfunction mergeClassNames(ours: string \| undefined, theirs: string \| undefined): string \| undefined {\n if (theirs && ours) return `${theirs} ${ours}`;\n return theirs \|\| ours;\n}\n\n/\n Merge two style objects - theirs overwrites conflicts.\n /\nfunction mergeStyles(ours: CSSProperties \| undefined, theirs: CSSProperties \| undefined): CSSProperties \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n return { ...ours, ...theirs };\n}\n\n/\n Merge a single props object into accumulated result.\n /\nfunction mergeOne<T extends ElementType>(\n merged: Record<string, unknown>,\n props: Props<T> \| undefined\n): Record<string, unknown> {\n if (!props) return merged;\n\n for (const key in props) {\n const value = props[key as keyof typeof props];\n\n if (key === 'className') {\n merged.className = mergeClassNames(merged.className as string \| undefined, value as string);\n } else if (key === 'style') {\n merged.style = mergeStyles(merged.style as CSSProperties \| undefined, value as CSSProperties);\n } else if (isEventHandler(key, value)) {\n merged[key] = mergeEventHandlers(\n merged[key] as ((event: SyntheticEvent) => void) \| undefined,\n value as (event: SyntheticEvent) => void\n );\n } else {\n merged[key] = value;\n }\n }\n\n return merged;\n}\n\n/\n Merge multiple props objects.\n \n - Event handlers (on): chained - external first, ours second\n - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n \n @public\n * @example\n * ```ts\n * const merged = mergeProps(\n * { onClick: ourHandler, className: 'base' },\n * { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> \| undefined)[]): Props<T> {\n let merged: Record<string, unknown> = {};\n\n for (const props of propSets) {\n merged = mergeOne(merged, props);\n }\n\n return merged as Props<T>;\n}\n"],"mappings":"~~;;;;;AASA~~,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;;;AAKA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;;;AAKA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;;;AAKA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CACxC,OAAO,UAAU;AACnB;;;;AAKA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;;;AAKA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}
1	+ {"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/*\n Check if a key is an event handler key (on* with capital letter).\n /\nfunction isEventHandlerKey(key: string): boolean {\n return (\n key.charCodeAt(0) === 111 / o / &&\n key.charCodeAt(1) === 110 / n / &&\n key.charCodeAt(2) >= 65 / A / &&\n key.charCodeAt(2) <= 90 / Z /\n );\n}\n\n/\n Check if a key/value pair is an event handler (includes undefined values).\n /\nfunction isEventHandler(key: string, value: unknown): boolean {\n return isEventHandlerKey(key) && (typeof value === 'function' \|\| typeof value === 'undefined');\n}\n\n/\n Merge two event handlers - external runs first, ours runs second.\n /\nfunction mergeEventHandlers(\n ours: ((event: SyntheticEvent) => void) \| undefined,\n theirs: ((event: SyntheticEvent) => void) \| undefined\n): ((event: SyntheticEvent) => void) \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n\n return (event: SyntheticEvent) => {\n theirs(event);\n ours(event);\n };\n}\n\n/\n Merge two className values - concatenate strings.\n /\nfunction mergeClassNames(ours: string \| undefined, theirs: string \| undefined): string \| undefined {\n if (theirs && ours) return `${theirs} ${ours}`;\n return theirs \|\| ours;\n}\n\n/\n Merge two style objects - theirs overwrites conflicts.\n /\nfunction mergeStyles(ours: CSSProperties \| undefined, theirs: CSSProperties \| undefined): CSSProperties \| undefined {\n if (!theirs) return ours;\n if (!ours) return theirs;\n return { ...ours, ...theirs };\n}\n\n/\n Merge a single props object into accumulated result.\n /\nfunction mergeOne<T extends ElementType>(\n merged: Record<string, unknown>,\n props: Props<T> \| undefined\n): Record<string, unknown> {\n if (!props) return merged;\n\n for (const key in props) {\n const value = props[key as keyof typeof props];\n\n if (key === 'className') {\n merged.className = mergeClassNames(merged.className as string \| undefined, value as string);\n } else if (key === 'style') {\n merged.style = mergeStyles(merged.style as CSSProperties \| undefined, value as CSSProperties);\n } else if (isEventHandler(key, value)) {\n merged[key] = mergeEventHandlers(\n merged[key] as ((event: SyntheticEvent) => void) \| undefined,\n value as (event: SyntheticEvent) => void\n );\n } else {\n merged[key] = value;\n }\n }\n\n return merged;\n}\n\n/\n Merge multiple props objects.\n \n - Event handlers (on): chained - external first, ours second\n - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n \n @public\n * @example\n * ```ts\n * const merged = mergeProps(\n * { onClick: ourHandler, className: 'base' },\n * { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> \| undefined)[]): Props<T> {\n let merged: Record<string, unknown> = {};\n\n for (const props of propSets) {\n merged = mergeOne(merged, props);\n }\n\n return merged as Props<T>;\n}\n"],"mappings":";;;;AAOA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;;;AAKA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;;;AAKA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;;;AAKA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CACxC,OAAO,UAAU;AACnB;;;;AAKA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;;;AAKA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}

package/dist/default/utils/use-attach-iframe.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-iframe.ts
 function useAttachIframe(media) {

package/dist/default/utils/use-attach-iframe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":"~~;;;AAMA~~,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
1	+ {"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAwC;CACnG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/default/utils/use-attach-media.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
 function useAttachMedia(media) {

package/dist/default/utils/use-attach-media.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":"~~;;;AAMA~~,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
1	+ {"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n return useCallback(\n (element: T \| null) => {\n if (element) media.attach?.(element);\n else media.detach?.();\n return () => media.detach?.();\n },\n [media]\n );\n}\n"],"mappings":";;AAIA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/default/utils/use-composed-refs.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 import { isFunction } from "@videojs/utils/predicate";
 //#region src/utils/use-composed-refs.ts

package/dist/default/utils/use-composed-refs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value.\n \n Handles both callback refs and RefObject(s).\n \n @returns Cleanup function if the ref callback returned one (React 19+)\n /\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) \| void \| undefined {\n if (isFunction(ref)) {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n ref.current = value;\n }\n}\n\n/\n Compose multiple refs into a single callback ref.\n \n @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n /\nexport function composeRefs<T>(...refs: (OptionalRef<T> \| OptionalRef<T>[])[]): RefCallback<T> {\n const flatRefs = refs.flat();\n\n return (node): (() => void) \| void => {\n const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n // Only return cleanup if any refs returned one (React 19+).\n // React 18 handles cleanup by calling the ref callback with null.\n if (cleanups.some(isFunction)) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n if (isFunction(cleanup)) {\n cleanup();\n } else {\n setRef(flatRefs[i], null);\n }\n }\n };\n }\n };\n}\n\n/\n Hook that composes multiple refs into a single callback ref.\n \n Memoized for stable reference.\n \n @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":"~~;;;;;;;;;;;AAgBA~~,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}
1	+ {"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> \| undefined;\n\n/*\n Set a given ref to a given value.\n \n Handles both callback refs and RefObject(s).\n \n @returns Cleanup function if the ref callback returned one (React 19+)\n /\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) \| void \| undefined {\n if (isFunction(ref)) {\n return ref(value);\n } else if (ref !== null && ref !== undefined) {\n ref.current = value;\n }\n}\n\n/\n Compose multiple refs into a single callback ref.\n \n @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n /\nexport function composeRefs<T>(...refs: (OptionalRef<T> \| OptionalRef<T>[])[]): RefCallback<T> {\n const flatRefs = refs.flat();\n\n return (node): (() => void) \| void => {\n const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n // Only return cleanup if any refs returned one (React 19+).\n // React 18 handles cleanup by calling the ref callback with null.\n if (cleanups.some(isFunction)) {\n return () => {\n for (let i = 0; i < cleanups.length; i++) {\n const cleanup = cleanups[i];\n if (isFunction(cleanup)) {\n cleanup();\n } else {\n setRef(flatRefs[i], null);\n }\n }\n };\n }\n };\n}\n\n/\n Hook that composes multiple refs into a single callback ref.\n \n Memoized for stable reference.\n \n @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IACzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}

package/dist/default/utils/use-destroy.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
 //#region src/utils/use-destroy.ts

package/dist/default/utils/use-destroy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n destroy(): void;\n}\n\n/*\n Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n \n StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n \n @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n * re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n * unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n const pendingRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const setupRef = useLatestRef(setup);\n const teardownRef = useLatestRef(teardown);\n\n useEffect(() => {\n if (pendingRef.current !== null) {\n clearTimeout(pendingRef.current);\n pendingRef.current = null;\n } else {\n setupRef.current?.();\n }\n\n return () => {\n pendingRef.current = setTimeout(() => {\n teardownRef.current?.();\n instance.destroy();\n }, 0);\n };\n }, [instance]);\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAwBA~~,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}
1	+ {"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n destroy(): void;\n}\n\n/*\n Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n \n StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n \n @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n * re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n * unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n const pendingRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const setupRef = useLatestRef(setup);\n const teardownRef = useLatestRef(teardown);\n\n useEffect(() => {\n if (pendingRef.current !== null) {\n clearTimeout(pendingRef.current);\n pendingRef.current = null;\n } else {\n setupRef.current?.();\n }\n\n return () => {\n pendingRef.current = setTimeout(() => {\n teardownRef.current?.();\n instance.destroy();\n }, 0);\n };\n }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,cAAc,aAAa,QAAQ;CAEzC,gBAAgB;EACd,IAAI,WAAW,YAAY,MAAM;GAC/B,aAAa,WAAW,OAAO;GAC/B,WAAW,UAAU;EACvB,OACE,SAAS,UAAU;EAGrB,aAAa;GACX,WAAW,UAAU,iBAAiB;IACpC,YAAY,UAAU;IACtB,SAAS,QAAQ;GACnB,GAAG,CAAC;EACN;CACF,GAAG,CAAC,QAAQ,CAAC;AACf"}

package/dist/default/utils/use-force-render.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { useReducer } from "react";
 //#region src/utils/use-force-render.ts
 function useForceRender() {

package/dist/default/utils/use-force-render.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { useReducer } from 'react';\n\nexport function useForceRender() {\n const [, forceRender] = useReducer((c: number) => c + 1, 0);\n return forceRender;\n}\n\nexport namespace useForceRender {\n export type Result = () => void;\n}\n"],"mappings":"~~;;;AAIA~~,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}
1	+ {"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["import { useReducer } from 'react';\n\nexport function useForceRender() {\n const [, forceRender] = useReducer((c: number) => c + 1, 0);\n return forceRender;\n}\n\nexport namespace useForceRender {\n export type Result = () => void;\n}\n"],"mappings":";;AAEA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,CAAC;CAC1D,OAAO;AACT"}