npm - @videojs/react - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.32 - Mend

@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

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 (1563) hide show

package/dist/dev/ui/menu/menu-content.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext } from "./context.js";
-import { usePopupPosition } from "../popover/use-popup-position.js";
+import { useMenuContext, useMenuPopupContext } from "./context.js";
 import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
-import { MenuPositioningCSSVars, getRootPositionOptions, isMenuNavigationKey, observeMenuSize, syncMenuSizeChain } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { MenuContentDataAttrs } from "@videojs/core";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/menu-content.tsx
-/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */
+/** Accessible item and focus scope for exactly one root or nested menu page. */
 const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
-	const { core, menu, parent, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, contentId, boundary, container } = useMenuContext();
-	const isSubmenu = state.isSubmenu;
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const { popup, element: popupElement } = useMenuPopupContext();
+	const isSubmenu = parent !== null;
 	const isActive = isSubmenu && state.open;
 	const wasActiveRef = useRef(false);
+	const cleanupRegistrationRef = useRef(null);
 	useLayoutEffect(() => {
 		if (!isSubmenu) return void 0;
 		const wasActive = wasActiveRef.current;
@@ -26,130 +28,66 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		isSubmenu,
 		menu
 	]);
-	const setSubmenuContentElement = useCallback((element) => {
-		menu.setContentElement(element);
-		if (!element) requestAnimationFrame(() => {
-			syncMenuSizeChain(parent?.menu.contentElement ?? null);
-			if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });
+	const setContentElement = useCallback((element) => {
+		cleanupRegistrationRef.current?.();
+		cleanupRegistrationRef.current = null;
+		if (!element) {
+			if (isSubmenu) menu.setPopupElement(null);
+			return;
+		}
+		if (isSubmenu) menu.setPopupElement(element);
+		cleanupRegistrationRef.current = popup.registerContent({
+			menu,
+			parent: parent?.menu ?? null,
+			element
 		});
-	}, [menu, parent]);
-	const handleSubMenuKeyDown = useCallback((event) => {
+	}, [
+		isSubmenu,
+		menu,
+		parent?.menu,
+		popup
+	]);
+	const composedRef = useComposedRefs(forwardedRef, setContentElement);
+	const handleKeyDown = useCallback((event) => {
 		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
 		const isNavigationKey = isMenuNavigationKey(event);
 		menu.contentProps.onKeyDown(event);
-		if ((event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
+		if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
 			event.preventDefault();
 			menu.close("escape");
 		}
-		if (isNavigationKey) event.stopPropagation();
-	}, [onKeyDown, menu]);
-	const handleRootMenuKeyDown = useCallback((event) => {
-		onKeyDown?.(event);
-		menu.contentProps.onKeyDown(event);
-		if (event.key === "Escape") return;
-		if (isMenuNavigationKey(event)) event.stopPropagation();
-	}, [onKeyDown, menu]);
-	const handleRootMenuBlur = useCallback((event) => {
-		onBlur?.(event);
-		menu.contentProps.onFocusOut(event);
-	}, [onBlur, menu]);
-	const handleSubMenuBlur = useCallback((event) => {
-		onBlur?.(event);
-		menu.contentProps.onFocusOut(event);
-	}, [onBlur, menu]);
-	const internalRef = useRef(null);
-	const rootComposedRef = useComposedRefs(forwardedRef, useCallback((element) => {
-		if (!isSubmenu) menu.setContentElement(element);
-	}, [isSubmenu, menu]), internalRef);
-	const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);
-	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open && !isSubmenu,
-		anchorName,
-		position: positionOptions,
-		triggerSource: menu,
-		popupRef: internalRef,
-		boundary,
-		container,
-		cssVars: MenuPositioningCSSVars,
-		onSideChange: setPositionedSide
-	});
-	useLayoutEffect(() => {
-		if (isSubmenu || !state.open) return;
-		const contentElement = internalRef.current;
-		if (!contentElement) return;
-		const sync = () => syncMenuSizeChain(contentElement);
-		sync();
-		const frame = requestAnimationFrame(sync);
-		const stopObserving = observeMenuSize(contentElement, sync);
-		return () => {
-			cancelAnimationFrame(frame);
-			stopObserving();
-		};
-	}, [isSubmenu, state.open]);
-	useLayoutEffect(() => {
-		if (!isSubmenu) return;
-		const isEnding = state.status === "ending";
-		const parentContentElement = parent?.menu.contentElement ?? null;
-		const sync = () => syncMenuSizeChain(parentContentElement);
-		sync();
-		const frame = requestAnimationFrame(sync);
-		const stopObserving = state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;
-		return () => {
-			cancelAnimationFrame(frame);
-			stopObserving?.();
-		};
+		if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
 	}, [
 		isSubmenu,
-		parent,
-		state.open,
-		state.status
+		menu,
+		onKeyDown
 	]);
-	if (isSubmenu) {
-		if (!isActive && state.status !== "ending") return null;
-		const subMenuContent = renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap,
-			ref: submenuComposedRef,
-			props: [{
-				id: contentId,
-				role: "menu",
-				tabIndex: -1,
-				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: handleSubMenuKeyDown,
-				onBlur: handleSubMenuBlur
-			}, elementProps]
-		});
-		const parentContentElement = parent?.menu.contentElement ?? null;
-		return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;
-	}
-	if (!state.open && state.status !== "ending") return null;
-	return renderElement("div", {
+	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	const contentNode = renderElement("div", {
 		render,
 		className,
 		style
 	}, {
 		state,
-		stateAttrMap,
-		ref: rootComposedRef,
+		stateAttrMap: MenuContentDataAttrs,
+		ref: composedRef,
 		props: [
 			{
 				id: contentId,
-				style: positioningStyle,
-				...core.getContentAttrs(state)
+				...core.getContentAttrs()
 			},
 			{
 				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: handleRootMenuKeyDown,
-				onBlur: handleRootMenuBlur
+				onKeyDown: handleKeyDown,
+				onBlur: (event) => {
+					onBlur?.(event);
+					if (isSubmenu) menu.contentProps.onFocusOut(event);
+				}
 			},
 			elementProps
 		]
 	});
+	return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;
 });
 //#endregion
 export { MenuContent };

package/dist/dev/ui/menu/menu-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport {\n getRootPositionOptions,\n isMenuNavigationKey,\n MenuPositioningCSSVars,\n observeMenuSize,\n syncMenuSizeChain,\n} from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\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 { useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n { render, className, style, onKeyDown, onBlur, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n menu,\n parent,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n contentId,\n boundary,\n container,\n } = useMenuContext();\n const isSubmenu = state.isSubmenu;\n const isActive = isSubmenu && state.open;\n const wasActiveRef = useRef(false);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return undefined;\n\n const wasActive = wasActiveRef.current;\n wasActiveRef.current = isActive;\n\n if (isActive && !wasActive) {\n const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n return () => cancelAnimationFrame(frame);\n }\n\n return undefined;\n }, [isActive, isSubmenu, menu]);\n\n const setSubmenuContentElement = useCallback(\n (element: HTMLDivElement \| null) => {\n menu.setContentElement(element);\n if (!element) {\n requestAnimationFrame(() => {\n syncMenuSizeChain(parent?.menu.contentElement ?? null);\n if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });\n });\n }\n },\n [menu, parent]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(\n onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined,\n event\n );\n const isNavigationKey = isMenuNavigationKey(event);\n menu.contentProps.onKeyDown(event);\n const isBackNavigationKey = event.key === 'ArrowLeft' \|\| event.key === 'Escape';\n\n if (isBackNavigationKey && !defaultPreventedByUser) {\n event.preventDefault();\n menu.close('escape');\n }\n\n if (isNavigationKey) event.stopPropagation();\n },\n [onKeyDown, menu]\n );\n\n const handleRootMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onKeyDown(event);\n if (event.key === 'Escape') return;\n if (isMenuNavigationKey(event)) event.stopPropagation();\n },\n [onKeyDown, menu]\n );\n\n const handleRootMenuBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n (onBlur as React.FocusEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onFocusOut(event);\n },\n [onBlur, menu]\n );\n\n const handleSubMenuBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n (onBlur as React.FocusEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onFocusOut(event);\n },\n [onBlur, menu]\n );\n\n const internalRef = useRef<HTMLDivElement>(null);\n const contentRef = useCallback(\n (element: HTMLDivElement \| null) => {\n if (!isSubmenu) menu.setContentElement(element);\n },\n [isSubmenu, menu]\n );\n const rootComposedRef = useComposedRefs(forwardedRef, contentRef, internalRef);\n const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);\n const positionOptions = useMemo(\n () => getRootPositionOptions(preferredSide, state.align),\n [preferredSide, state.align]\n );\n const positioningStyle = usePopupPosition({\n open: state.open && !isSubmenu,\n anchorName,\n position: positionOptions,\n triggerSource: menu,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: MenuPositioningCSSVars,\n onSideChange: setPositionedSide,\n });\n\n useLayoutEffect(() => {\n if (isSubmenu \|\| !state.open) return;\n\n const contentElement = internalRef.current;\n if (!contentElement) return;\n\n const sync = () => syncMenuSizeChain(contentElement);\n sync();\n const frame = requestAnimationFrame(sync);\n const stopObserving = observeMenuSize(contentElement, sync);\n\n return () => {\n cancelAnimationFrame(frame);\n stopObserving();\n };\n }, [isSubmenu, state.open]);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return;\n\n const isEnding = state.status === 'ending';\n const parentContentElement = parent?.menu.contentElement ?? null;\n const sync = () => syncMenuSizeChain(parentContentElement);\n sync();\n const frame = requestAnimationFrame(sync);\n const stopObserving =\n state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;\n\n return () => {\n cancelAnimationFrame(frame);\n stopObserving?.();\n };\n }, [isSubmenu, parent, state.open, state.status]);\n\n if (isSubmenu) {\n if (!isActive && state.status !== 'ending') return null;\n\n const subMenuContent = renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: submenuComposedRef,\n props: [\n {\n id: contentId,\n role: 'menu' as const,\n tabIndex: -1,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: handleSubMenuKeyDown,\n onBlur: handleSubMenuBlur,\n },\n elementProps,\n ],\n }\n );\n\n const parentContentElement = parent?.menu.contentElement ?? null;\n return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;\n }\n\n if (!state.open && state.status !== 'ending') return null;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: rootComposedRef,\n props: [\n {\n id: contentId,\n style: positioningStyle,\n ...core.getContentAttrs(state),\n },\n { onKeyDownCapture: preventMenuKeyDefault, onKeyDown: handleRootMenuKeyDown, onBlur: handleRootMenuBlur },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace MenuContent {\n export type Props = MenuContentProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EACJ,MACA,MACA,QACA,OACA,eACA,mBACA,cACA,YACA,WACA,UACA,cACE,eAAe;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CAEjC,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAC/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAC1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,2BAA2B,aAC9B,YAAmC;EAClC,KAAK,kBAAkB,OAAO;EAC9B,IAAI,CAAC,SACH,4BAA4B;GAC1B,kBAAkB,QAAQ,KAAK,kBAAkB,IAAI;GACrD,IAAI,CAAC,KAAK,MAAM,QAAQ,QAAQ,KAAK,aAAa,EAAE,eAAe,KAAK,CAAC;EAC3E,CAAC;CAEL,GACA,CAAC,MAAM,MAAM,CACf;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EACjD,KAAK,aAAa,UAAU,KAAK;EAGjC,KAF4B,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAE5C,CAAC,wBAAwB;GAClD,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,iBAAiB,MAAM,gBAAgB;CAC7C,GACA,CAAC,WAAW,IAAI,CAClB;CAEA,MAAM,wBAAwB,aAC3B,UAA+C;EAC9C,YAAwE,KAAK;EAC7E,KAAK,aAAa,UAAU,KAAK;EACjC,IAAI,MAAM,QAAQ,UAAU;EAC5B,IAAI,oBAAoB,KAAK,GAAG,MAAM,gBAAgB;CACxD,GACA,CAAC,WAAW,IAAI,CAClB;CAEA,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,SAAkE,KAAK;EACvE,KAAK,aAAa,WAAW,KAAK;CACpC,GACA,CAAC,QAAQ,IAAI,CACf;CAEA,MAAM,oBAAoB,aACvB,UAA4C;EAC3C,SAAkE,KAAK;EACvE,KAAK,aAAa,WAAW,KAAK;CACpC,GACA,CAAC,QAAQ,IAAI,CACf;CAEA,MAAM,cAAc,OAAuB,IAAI;CAO/C,MAAM,kBAAkB,gBAAgB,cANrB,aAChB,YAAmC;EAClC,IAAI,CAAC,WAAW,KAAK,kBAAkB,OAAO;CAChD,GACA,CAAC,WAAW,IAAI,CAE6C,GAAG,WAAW;CAC7E,MAAM,qBAAqB,gBAAgB,cAAc,wBAAwB;CACjF,MAAM,kBAAkB,cAChB,uBAAuB,eAAe,MAAM,KAAK,GACvD,CAAC,eAAe,MAAM,KAAK,CAC7B;CACA,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM,QAAQ,CAAC;EACrB;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAED,sBAAsB;EACpB,IAAI,aAAa,CAAC,MAAM,MAAM;EAE9B,MAAM,iBAAiB,YAAY;EACnC,IAAI,CAAC,gBAAgB;EAErB,MAAM,aAAa,kBAAkB,cAAc;EACnD,KAAK;EACL,MAAM,QAAQ,sBAAsB,IAAI;EACxC,MAAM,gBAAgB,gBAAgB,gBAAgB,IAAI;EAE1D,aAAa;GACX,qBAAqB,KAAK;GAC1B,cAAc;EAChB;CACF,GAAG,CAAC,WAAW,MAAM,IAAI,CAAC;CAE1B,sBAAsB;EACpB,IAAI,CAAC,WAAW;EAEhB,MAAM,WAAW,MAAM,WAAW;EAClC,MAAM,uBAAuB,QAAQ,KAAK,kBAAkB;EAC5D,MAAM,aAAa,kBAAkB,oBAAoB;EACzD,KAAK;EACL,MAAM,QAAQ,sBAAsB,IAAI;EACxC,MAAM,gBACJ,MAAM,QAAQ,CAAC,YAAY,uBAAuB,gBAAgB,sBAAsB,IAAI,IAAI;EAElG,aAAa;GACX,qBAAqB,KAAK;GAC1B,gBAAgB;EAClB;CACF,GAAG;EAAC;EAAW;EAAQ,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,IAAI,WAAW;EACb,IAAI,CAAC,YAAY,MAAM,WAAW,UAAU,OAAO;EAEnD,MAAM,iBAAiB,cACrB,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA;GACA,KAAK;GACL,OAAO,CACL;IACE,IAAI;IACJ,MAAM;IACN,UAAU;IACV,kBAAkB;IAClB,WAAW;IACX,QAAQ;GACV,GACA,YACF;EACF,CACF;EAEA,MAAM,uBAAuB,QAAQ,KAAK,kBAAkB;EAC5D,OAAO,uBAAuB,aAAa,gBAAgB,oBAAoB,IAAI;CACrF;CAEA,IAAI,CAAC,MAAM,QAAQ,MAAM,WAAW,UAAU,OAAO;CAErD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,gBAAgB,KAAK;GAC/B;GACA;IAAE,kBAAkB;IAAuB,WAAW;IAAuB,QAAQ;GAAmB;GACxG;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n { render, className, style, onKeyDown, onBlur, ...elementProps },\n forwardedRef\n) {\n const { core, menu, parent, state, contentId } = useMenuContext();\n const { popup, element: popupElement } = useMenuPopupContext();\n const isSubmenu = parent !== null;\n const isActive = isSubmenu && state.open;\n const wasActiveRef = useRef(false);\n const cleanupRegistrationRef = useRef<(() => void) \| null>(null);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return undefined;\n\n const wasActive = wasActiveRef.current;\n\n wasActiveRef.current = isActive;\n\n if (isActive && !wasActive) {\n const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n\n return () => cancelAnimationFrame(frame);\n }\n\n return undefined;\n }, [isActive, isSubmenu, menu]);\n\n const setContentElement = useCallback(\n (element: HTMLDivElement \| null) => {\n cleanupRegistrationRef.current?.();\n cleanupRegistrationRef.current = null;\n\n if (!element) {\n if (isSubmenu) menu.setPopupElement(null);\n\n return;\n }\n\n if (isSubmenu) menu.setPopupElement(element);\n\n cleanupRegistrationRef.current = popup.registerContent({\n menu,\n parent: parent?.menu ?? null,\n element,\n });\n },\n [isSubmenu, menu, parent?.menu, popup]\n );\n const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(\n onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined,\n event\n );\n const isNavigationKey = isMenuNavigationKey(event);\n\n menu.contentProps.onKeyDown(event);\n\n if (isSubmenu && (event.key === 'ArrowLeft' \|\| event.key === 'Escape') && !defaultPreventedByUser) {\n event.preventDefault();\n menu.close('escape');\n }\n\n if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n },\n [isSubmenu, menu, onKeyDown]\n );\n\n if (isSubmenu && !isActive && state.status !== 'ending') return null;\n\n const contentNode = renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: MenuContentDataAttrs,\n ref: composedRef,\n props: [\n { id: contentId, ...core.getContentAttrs() },\n {\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: handleKeyDown,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n\n if (isSubmenu) menu.contentProps.onFocusOut(event);\n },\n },\n elementProps,\n ],\n }\n );\n\n return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n export type Props = MenuContentProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAE/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAE1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,oBAAoB,aACvB,YAAmC;EAClC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAEjC,IAAI,CAAC,SAAS;GACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;GAExC;EACF;EAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;EAE3C,uBAAuB,UAAU,MAAM,gBAAgB;GACrD;GACA,QAAQ,QAAQ,QAAQ;GACxB;EACF,CAAC;CACH,GACA;EAAC;EAAW;EAAM,QAAQ;EAAM;CAAK,CACvC;CACA,MAAM,cAAc,gBAAgB,cAAc,iBAAiB;CAEnE,MAAM,gBAAgB,aACnB,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EAEjD,KAAK,aAAa,UAAU,KAAK;EAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;GACjG,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;CACvE,GACA;EAAC;EAAW;EAAM;CAAS,CAC7B;CAEA,IAAI,aAAa,CAAC,YAAY,MAAM,WAAW,UAAU,OAAO;CAEhE,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,UAA4C;KACnD,SAAS,KAAK;KAEd,IAAI,WAAW,KAAK,aAAa,WAAW,KAAK;IACnD;GACF;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}

package/dist/dev/ui/menu/menu-item-indicator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item-indicator.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"mappings":";;;UAOiB,+BAA+B,yBAAyB;;EAEvE;;EAEA;;;cAIW,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;~~kBAqBb~~;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"menu-item-indicator.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"mappings":";;;UAOiB,+BAA+B,yBAAyB;;EAEvE;;EAEA;;;cAIW,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAoBb;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-item-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuRadioItemContext } from './context';\n\nexport interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. /\n checked?: boolean;\n /* When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. /\n forceMount?: boolean;\n}\n\n/* Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n { render, className, style, checked, forceMount = false, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n const itemChecked = useOptionalMenuRadioItemContext();\n const resolvedChecked = checked ?? itemChecked;\n\n if (!resolvedChecked && !forceMount) return null;\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [{ 'aria-hidden': true }, elementProps],\n }\n );\n});\n\nexport namespace MenuItemIndicator {\n export type Props = MenuItemIndicatorProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;AAeA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,cAAc,gCAAgC;~~CAGpD~~,IAAI,~~EAFoB~~,WAAW,~~gBAEX~~,CAAC,YAAY,OAAO;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuRadioItemContext } from './context';\n\nexport interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. /\n checked?: boolean;\n /* When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. /\n forceMount?: boolean;\n}\n\n/* Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n { render, className, style, checked, forceMount = false, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n const itemChecked = useOptionalMenuRadioItemContext();\n const resolvedChecked = checked ?? itemChecked;\n if (!resolvedChecked && !forceMount) return null;\n\n return renderElement(\n 'span',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [{ 'aria-hidden': true }, elementProps],\n }\n );\n});\n\nexport namespace MenuItemIndicator {\n export type Props = MenuItemIndicatorProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;AAeA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,cAAc,gCAAgC;CAEpD,IAAI,EADoB,WAAW,gBACX,CAAC,YAAY,OAAO;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}

package/dist/dev/ui/menu/menu-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"mappings":";;;UAQiB,sBAAsB,wBAAwB;;EAE7D;;EAEA;;;cAIW,0BAAQ,0BAAA,KAAA,wCAAA,cAAA;~~kBA0FJ~~;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"menu-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"mappings":";;;UAQiB,sBAAsB,wBAAwB;;EAE7D;;EAEA;;;cAIW,0BAAQ,0BAAA,KAAA,wCAAA,cAAA;kBA+FJ;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-item.js CHANGED Viewed

@@ -13,29 +13,31 @@ const MenuItem = forwardRef(function MenuItem({ render, className, style, onSele
 		if (!element) return;
 		return menu.registerItem(element);
 	}, [menu]);
+	const handleClick = useCallback((event) => {
+		if (disabled) return;
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.();
+		completeMenuItemSelection(menu);
+	}, [
+		disabled,
+		onClick,
+		onSelect,
+		menu
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
+	}, [menu, disabled]);
 	return /* @__PURE__ */ jsx(MenuItemContent, {
 		disabled,
 		elementProps,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick?.(event);
-			if (event.defaultPrevented) return;
-			onSelect?.();
-			completeMenuItemSelection(menu);
-		}, [
-			disabled,
-			onClick,
-			onSelect,
-			menu
-		]),
-		onPointerEnter: useCallback(() => {
-			const element = elementRef.current;
-			if (!element || disabled) return;
-			menu.highlight(element, {
-				focus: false,
-				pointer: true
-			});
-		}, [menu, disabled]),
+		onClick: handleClick,
+		onPointerEnter: handlePointerEnter,
 		render,
 		className,
 		style,

package/dist/dev/ui/menu/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n /** Called when the item is selected. /\n onSelect?: () => void;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n { render, className, style, onSelect, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const elementRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n onClick?.(event);\n if (event.defaultPrevented) return;\n onSelect?.();\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onSelect, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuItemContent\n disabled={disabled}\n elementProps={elementProps}\n onClick={handleClick}\n onPointerEnter={handlePointerEnter}\n render={render}\n className={className}\n style={style}\n state={state}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n />\n );\n});\n\ninterface MenuItemContentProps {\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n render: MenuItemProps['render'];\n className: MenuItemProps['className'];\n style: MenuItemProps['style'];\n state: MenuState;\n forwardedRef: React.ForwardedRef<HTMLDivElement>;\n elementRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nfunction MenuItemContent({\n disabled,\n elementProps,\n onClick,\n onPointerEnter,\n render,\n className,\n style,\n state,\n forwardedRef,\n elementRef,\n}: MenuItemContentProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitem' as const,\n 'aria-disabled': disabled ? true : undefined,\n onClick,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n\nexport namespace MenuItem {\n export type Props = MenuItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;~~EACd~~,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;~~CAmBT~~,~~OACE~~,~~oBAAC~~,~~iBAAD;EACY;EACI;EACd,SArBgB,~~aACjB,UAA4C;~~GAC3C~~,IAAI,UAAU;~~GACd~~,UAAU,KAAK;~~GACf~~,IAAI,MAAM,kBAAkB;~~GAC5B~~,WAAW;~~GACX~~,0BAA0B,IAAI;~~EAChC~~,GACA;~~GAAC~~;~~GAAU~~;~~GAAS~~;~~GAAU~~;~~EAAI~~,~~CAab~~;~~EACnB~~,~~gBAXuB~~,kBAAkB;~~GAC3C~~,MAAM,UAAU,WAAW;~~GAC3B~~,IAAI,CAAC,WAAW,UAAU;~~GAC1B~~,KAAK,UAAU,SAAS;~~IAAE~~,OAAO;~~IAAO~~,SAAS;~~GAAK~~,CAAC;~~EACzD~~,GAAG,CAAC,MAAM,QAAQ,~~CAOmB~~;~~EACzB~~;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}
1	+ {"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n /** Called when the item is selected. /\n onSelect?: () => void;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n { render, className, style, onSelect, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const elementRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n\n onClick?.(event);\n\n if (event.defaultPrevented) return;\n\n onSelect?.();\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onSelect, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuItemContent\n disabled={disabled}\n elementProps={elementProps}\n onClick={handleClick}\n onPointerEnter={handlePointerEnter}\n render={render}\n className={className}\n style={style}\n state={state}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n />\n );\n});\n\ninterface MenuItemContentProps {\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n render: MenuItemProps['render'];\n className: MenuItemProps['className'];\n style: MenuItemProps['style'];\n state: MenuState;\n forwardedRef: React.ForwardedRef<HTMLDivElement>;\n elementRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nfunction MenuItemContent({\n disabled,\n elementProps,\n onClick,\n onPointerEnter,\n render,\n className,\n style,\n state,\n forwardedRef,\n elementRef,\n}: MenuItemContentProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitem' as const,\n 'aria-disabled': disabled ? true : undefined,\n onClick,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n\nexport namespace MenuItem {\n export type Props = MenuItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,WAAW;EACX,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAU;CAAI,CACpC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,iBAAD;EACY;EACI;EACd,SAAS;EACT,gBAAgB;EACR;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}

package/dist/dev/ui/menu/menu-keyboard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-keyboard.js","names":[],"sources":["../../../../src/ui/menu/menu-keyboard.ts"],"sourcesContent":["import { isMenuNavigationKey } from '@videojs/core/dom';\n\nconst preventedEvents = new WeakSet<Event>();\nconst canceledEvents = new WeakSet<Event>();\n\n// Menu keys are prevented during capture before native player hotkeys run.\n// Track that internal prevention so bubble handlers can still honor a consumer\n// that calls preventDefault() to opt out of the built-in menu behavior.\nexport function preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n if (event.key !== 'Escape' && isMenuNavigationKey(event) && !event.defaultPrevented) {\n event.preventDefault();\n preventedEvents.add(event.nativeEvent);\n }\n}\n\nexport function callKeyDownHandler<T extends HTMLElement>(\n handler: React.KeyboardEventHandler<T> \| undefined,\n event: React.KeyboardEvent<T>\n): boolean {\n const defaultPreventedBeforeHandler =\n event.defaultPrevented && (!preventedEvents.has(event.nativeEvent) \|\| canceledEvents.has(event.nativeEvent));\n\n if (!handler) return defaultPreventedBeforeHandler;\n\n let defaultPreventedByHandler = false;\n const preventDefault = event.preventDefault;\n event.preventDefault = () => {\n defaultPreventedByHandler = true;\n preventDefault.call(event);\n };\n\n try {\n handler(event);\n } finally {\n event.preventDefault = preventDefault;\n }\n\n if (defaultPreventedByHandler) canceledEvents.add(event.nativeEvent);\n\n return defaultPreventedBeforeHandler \|\| defaultPreventedByHandler;\n}\n"],"mappings":";;AAEA,MAAM,kCAAkB,IAAI,QAAe;AAC3C,MAAM,iCAAiB,IAAI,QAAe;AAK1C,SAAgB,sBAAsB,OAA+C;CACnF,IAAI,MAAM,QAAQ,YAAY,oBAAoB,KAAK,KAAK,CAAC,MAAM,kBAAkB;EACnF,MAAM,eAAe;EACrB,gBAAgB,IAAI,MAAM,WAAW;CACvC;AACF;AAEA,SAAgB,mBACd,SACA,OACS;CACT,MAAM,gCACJ,MAAM,qBAAqB,CAAC,gBAAgB,IAAI,MAAM,WAAW,KAAK,eAAe,IAAI,MAAM,WAAW;CAE5G,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI,4BAA4B;CAChC,MAAM,iBAAiB,MAAM;~~CAC7B~~,MAAM,uBAAuB;EAC3B,4BAA4B;EAC5B,eAAe,KAAK,KAAK;CAC3B;CAEA,IAAI;EACF,QAAQ,KAAK;CACf,UAAU;EACR,MAAM,iBAAiB;CACzB;CAEA,IAAI,2BAA2B,eAAe,IAAI,MAAM,WAAW;CAEnE,OAAO,iCAAiC;AAC1C"}
1	+ {"version":3,"file":"menu-keyboard.js","names":[],"sources":["../../../../src/ui/menu/menu-keyboard.ts"],"sourcesContent":["import { isMenuNavigationKey } from '@videojs/core/dom';\n\nconst preventedEvents = new WeakSet<Event>();\nconst canceledEvents = new WeakSet<Event>();\n\n// Menu keys are prevented during capture before native player hotkeys run.\n// Track that internal prevention so bubble handlers can still honor a consumer\n// that calls preventDefault() to opt out of the built-in menu behavior.\nexport function preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n if (event.key !== 'Escape' && isMenuNavigationKey(event) && !event.defaultPrevented) {\n event.preventDefault();\n preventedEvents.add(event.nativeEvent);\n }\n}\n\nexport function callKeyDownHandler<T extends HTMLElement>(\n handler: React.KeyboardEventHandler<T> \| undefined,\n event: React.KeyboardEvent<T>\n): boolean {\n const defaultPreventedBeforeHandler =\n event.defaultPrevented && (!preventedEvents.has(event.nativeEvent) \|\| canceledEvents.has(event.nativeEvent));\n\n if (!handler) return defaultPreventedBeforeHandler;\n\n let defaultPreventedByHandler = false;\n const preventDefault = event.preventDefault;\n\n event.preventDefault = () => {\n defaultPreventedByHandler = true;\n preventDefault.call(event);\n };\n\n try {\n handler(event);\n } finally {\n event.preventDefault = preventDefault;\n }\n\n if (defaultPreventedByHandler) canceledEvents.add(event.nativeEvent);\n\n return defaultPreventedBeforeHandler \|\| defaultPreventedByHandler;\n}\n"],"mappings":";;AAEA,MAAM,kCAAkB,IAAI,QAAe;AAC3C,MAAM,iCAAiB,IAAI,QAAe;AAK1C,SAAgB,sBAAsB,OAA+C;CACnF,IAAI,MAAM,QAAQ,YAAY,oBAAoB,KAAK,KAAK,CAAC,MAAM,kBAAkB;EACnF,MAAM,eAAe;EACrB,gBAAgB,IAAI,MAAM,WAAW;CACvC;AACF;AAEA,SAAgB,mBACd,SACA,OACS;CACT,MAAM,gCACJ,MAAM,qBAAqB,CAAC,gBAAgB,IAAI,MAAM,WAAW,KAAK,eAAe,IAAI,MAAM,WAAW;CAE5G,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI,4BAA4B;CAChC,MAAM,iBAAiB,MAAM;CAE7B,MAAM,uBAAuB;EAC3B,4BAA4B;EAC5B,eAAe,KAAK,KAAK;CAC3B;CAEA,IAAI;EACF,QAAQ,KAAK;CACf,UAAU;EACR,MAAM,iBAAiB;CACzB;CAEA,IAAI,2BAA2B,eAAe,IAAI,MAAM,WAAW;CAEnE,OAAO,iCAAiC;AAC1C"}

package/dist/dev/ui/menu/menu-popup.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/menu-popup.d.ts
+interface MenuPopupProps extends UIComponentProps<'div', MenuState> {}
+/** Positioned menu surface that contains one or more sibling Content pages. */
+declare const MenuPopup: import("react").ForwardRefExoticComponent<Omit<MenuPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuPopup {
+  type Props = MenuPopupProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuPopup, MenuPopupProps };
+//# sourceMappingURL=menu-popup.d.ts.map

package/dist/dev/ui/menu/menu-popup.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"menu-popup.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-popup.tsx"],"mappings":";;;UAWiB,uBAAuB,wBAAwB;;cAGnD,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBAgEL;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-popup.js ADDED Viewed

@@ -0,0 +1,70 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { MenuPopupContextProvider, useMenuContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { MenuPositioningCSSVars, createMenuPopup, getRootPositionOptions } from "@videojs/core/dom";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MenuPopupDataAttrs } from "@videojs/core";
+//#region src/ui/menu/menu-popup.tsx
+/** Positioned menu surface that contains one or more sibling Content pages. */
+const MenuPopup = forwardRef(function MenuPopup({ render, className, style, onBlur, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, preferredSide, setPositionedSide, anchorName, boundary, container } = useMenuContext();
+	if (parent) throw new Error("Menu.Popup must be a direct child of a root Menu.Root");
+	const [popup] = useState(createMenuPopup);
+	const [popupElement, setPopupElement] = useState(null);
+	const internalRef = useRef(null);
+	const setInternalElement = useCallback((element) => {
+		menu.setPopupElement(element);
+		popup.setElement(element);
+		setPopupElement(element);
+	}, [menu, popup]);
+	const composedRef = useComposedRefs(forwardedRef, internalRef, setInternalElement);
+	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
+	const positioningStyle = usePopupPosition({
+		open: state.open,
+		anchorName,
+		position: positionOptions,
+		triggerSource: menu,
+		popupRef: internalRef,
+		boundary,
+		container,
+		cssVars: MenuPositioningCSSVars,
+		trackResize: false,
+		onSideChange: setPositionedSide
+	});
+	useDestroy(popup);
+	if (!state.open && state.status !== "ending") return null;
+	const popupNode = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MenuPopupDataAttrs,
+		ref: composedRef,
+		props: [
+			{
+				style: positioningStyle,
+				...core.getPopupAttrs()
+			},
+			{ onBlur: (event) => {
+				onBlur?.(event);
+				menu.contentProps.onFocusOut(event);
+			} },
+			elementProps
+		]
+	});
+	return /* @__PURE__ */ jsx(MenuPopupContextProvider, {
+		value: {
+			popup,
+			element: popupElement
+		},
+		children: popupNode
+	});
+});
+//#endregion
+export { MenuPopup };
+//# sourceMappingURL=menu-popup.js.map

package/dist/dev/ui/menu/menu-popup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"menu-popup.js","names":[],"sources":["../../../../src/ui/menu/menu-popup.tsx"],"sourcesContent":["import { MenuPopupDataAttrs, type MenuState } from '@videojs/core';\nimport { createMenuPopup, getRootPositionOptions, MenuPositioningCSSVars } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { MenuPopupContextProvider, useMenuContext } from './context';\n\nexport interface MenuPopupProps extends UIComponentProps<'div', MenuState> {}\n\n/** Positioned menu surface that contains one or more sibling Content pages. */\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n { render, className, style, onBlur, ...elementProps },\n forwardedRef\n) {\n const { core, menu, parent, state, preferredSide, setPositionedSide, anchorName, boundary, container } =\n useMenuContext();\n if (__DEV__ && parent) throw new Error('Menu.Popup must be a direct child of a root Menu.Root');\n\n const [popup] = useState(createMenuPopup);\n const [popupElement, setPopupElement] = useState<HTMLElement | null>(null);\n const internalRef = useRef<HTMLDivElement>(null);\n const setInternalElement = useCallback(\n (element: HTMLDivElement | null) => {\n menu.setPopupElement(element);\n popup.setElement(element);\n setPopupElement(element);\n },\n [menu, popup]\n );\n const composedRef = useComposedRefs(forwardedRef, internalRef, setInternalElement);\n const positionOptions = useMemo(\n () => getRootPositionOptions(preferredSide, state.align),\n [preferredSide, state.align]\n );\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: positionOptions,\n triggerSource: menu,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: MenuPositioningCSSVars,\n trackResize: false,\n onSideChange: setPositionedSide,\n });\n\n useDestroy(popup);\n\n if (!state.open && state.status !== 'ending') return null;\n\n const popupNode = renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: MenuPopupDataAttrs,\n ref: composedRef,\n props: [\n { style: positioningStyle, ...core.getPopupAttrs() },\n {\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n menu.contentProps.onFocusOut(event);\n },\n },\n elementProps,\n ],\n }\n );\n\n return <MenuPopupContextProvider value={{ popup, element: popupElement }}>{popupNode}</MenuPopupContextProvider>;\n});\n\nexport namespace MenuPopup {\n export type Props = MenuPopupProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,QAAQ,GAAG,gBACvC,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,eAAe,mBAAmB,YAAY,UAAU,cACzF,eAAe;CACjB,IAAe,QAAQ,MAAM,IAAI,MAAM,uDAAuD;CAE9F,MAAM,CAAC,SAAS,SAAS,eAAe;CACxC,MAAM,CAAC,cAAc,mBAAmB,SAA6B,IAAI;CACzE,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,qBAAqB,aACxB,YAAmC;EAClC,KAAK,gBAAgB,OAAO;EAC5B,MAAM,WAAW,OAAO;EACxB,gBAAgB,OAAO;CACzB,GACA,CAAC,MAAM,KAAK,CACd;CACA,MAAM,cAAc,gBAAgB,cAAc,aAAa,kBAAkB;CACjF,MAAM,kBAAkB,cAChB,uBAAuB,eAAe,MAAM,KAAK,GACvD,CAAC,eAAe,MAAM,KAAK,CAC7B;CACA,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,aAAa;EACb,cAAc;CAChB,CAAC;CAED,WAAW,KAAK;CAEhB,IAAI,CAAC,MAAM,QAAQ,MAAM,WAAW,UAAU,OAAO;CAErD,MAAM,YAAY,cAChB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,OAAO;IAAkB,GAAG,KAAK,cAAc;GAAE;GACnD,EACE,SAAS,UAA4C;IACnD,SAAS,KAAK;IACd,KAAK,aAAa,WAAW,KAAK;GACpC,EACF;GACA;EACF;CACF,CACF;CAEA,OAAO,oBAAC,0BAAD;EAA0B,OAAO;GAAE;GAAO,SAAS;EAAa;EAAI,UAAA;CAAoC,CAAA;AACjH,CAAC"}

package/dist/dev/ui/menu/menu-radio-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-radio-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"mappings":";;;UAQiB,2BAA2B,wBAAwB;;EAElE;;EAEA;;;cAIW,+BAAa,0BAAA,KAAA,6CAAA,cAAA;~~kBAwDT~~;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"menu-radio-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"mappings":";;;UAQiB,2BAA2B,wBAAwB;;EAElE;;EAEA;;;cAIW,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBA6DT;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-radio-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n /** The value this item represents. /\n value: string;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n { render, className, style, value, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n const elementRef = useRef<HTMLDivElement>(null);\n const checked = groupValue === value;\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n onClick?.(event);\n if (event.defaultPrevented) return;\n onValueChange(value);\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onValueChange, value, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuRadioItemContextProvider value={checked}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitemradio' as const,\n 'aria-checked': checked,\n 'aria-disabled': disabled ? true : undefined,\n onClick: handleClick,\n onPointerEnter: handlePointerEnter,\n },\n elementProps,\n ],\n }\n )}\n </MenuRadioItemContextProvider>\n );\n});\n\nexport namespace MenuRadioItem {\n export type Props = MenuRadioItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;~~EACd~~,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;~~EACd~~,UAAU,KAAK;~~EACf~~,IAAI,MAAM,kBAAkB;~~EAC5B~~,cAAc,KAAK;EACnB,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;CAAI,CAChD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;~~EAC1B~~,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,8BAAD;EAA8B,OAAO;EAClC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CACL;IACE,MAAM;IACN,gBAAgB;IAChB,iBAAiB,WAAW,OAAO,KAAA;IACnC,SAAS;IACT,gBAAgB;GAClB,GACA,YACF;EACF,CACF;CAC4B,CAAA;AAElC,CAAC"}
1	+ {"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n /** The value this item represents. /\n value: string;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n { render, className, style, value, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n const elementRef = useRef<HTMLDivElement>(null);\n const checked = groupValue === value;\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n\n onClick?.(event);\n\n if (event.defaultPrevented) return;\n\n onValueChange(value);\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onValueChange, value, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuRadioItemContextProvider value={checked}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitemradio' as const,\n 'aria-checked': checked,\n 'aria-disabled': disabled ? true : undefined,\n onClick: handleClick,\n onPointerEnter: handlePointerEnter,\n },\n elementProps,\n ],\n }\n )}\n </MenuRadioItemContextProvider>\n );\n});\n\nexport namespace MenuRadioItem {\n export type Props = MenuRadioItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,cAAc,KAAK;EACnB,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;CAAI,CAChD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,8BAAD;EAA8B,OAAO;EAClC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CACL;IACE,MAAM;IACN,gBAAgB;IAChB,iBAAiB,WAAW,OAAO,KAAA;IACnC,SAAS;IACT,gBAAgB;GAClB,GACA,YACF;EACF,CACF;CAC4B,CAAA;AAElC,CAAC"}

package/dist/dev/ui/menu/menu-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;~~UAoBiB~~,sBAAsB,SAAS;;EAE9C,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,WACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,UACA,aACG,aACF,gBAAgB;~~kBA+FF~~;OACH,QAAQ"}
1	+ {"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;UAqBiB,sBAAsB,SAAS;;EAE9C,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,WACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,UACA,aACG,aACF,gBAAgB;kBAiGF;OACH,QAAQ"}

package/dist/dev/ui/menu/menu-root.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { createMenu, createTransition, selectControls } from "@videojs/core/dom"
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { MenuCore, MenuDataAttrs } from "@videojs/core";
+import { MenuCore } from "@videojs/core";
 //#region src/ui/menu/menu-root.tsx
 function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary = "container", children, ...coreProps }) {
 	const parentMenu = useOptionalMenuContext();
@@ -69,7 +69,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		input.active,
 		isSubmenu
 	]);
-	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
+	const preferredState = useMemo(() => {
 		core.setProps({
 			side,
 			align,
@@ -89,32 +89,33 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		closeOnEscape,
 		closeOnOutsideClick,
 		isSubmenu
-	]));
+	]);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);
+	const contextValue = useMemo(() => ({
+		core,
+		menu,
+		parent: parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container
+	}), [
+		core,
+		menu,
+		parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container
+	]);
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
-		value: useMemo(() => ({
-			core,
-			menu,
-			parent: parentMenu,
-			state,
-			preferredSide,
-			setPositionedSide,
-			stateAttrMap: MenuDataAttrs,
-			contentId,
-			anchorName,
-			boundary,
-			container
-		}), [
-			core,
-			menu,
-			parentMenu,
-			state,
-			preferredSide,
-			setPositionedSide,
-			contentId,
-			anchorName,
-			boundary,
-			container
-		]),
+		value: contextValue,
 		children
 	});
 }

package/dist/dev/ui/menu/menu-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["import { MenuCore, ~~MenuDataAttrs~~ } from '@videojs/core';\nimport {\n createMenu,\n createTransition,\n type MenuChangeDetails,\n type PositioningBoundary,\n selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPlayer } 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 { MenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n /** Boundary used to constrain the root menu popup size. /\n boundary?: PositioningBoundary;\n /* Called when the menu open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function MenuRoot({\n open: controlledOpen,\n defaultOpen = MenuCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n boundary = 'container',\n children,\n ...coreProps\n}: MenuRootProps): ReactNode {\n // Detect if we are nested inside a parent Menu.Content — if so, operate as\n // a submenu: no popover positioning, Trigger acts as a parent item.\n const parentMenu = useOptionalMenuContext();\n const controls = useOptionalControlsContext();\n const controlsState = useOptionalPlayer(selectControls);\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const isSubmenu = parentMenu !== null;\n const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n const [core] = useState(() => new MenuCore(coreProps));\n\n const isControlled = controlledOpen !== undefined;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const resolvedOpen = controlledOpen ?? uncontrolledOpen;\n\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const closeOnEscapeRef = useLatestRef(closeOnEscape);\n const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n const popupGroupRef = useLatestRef(popupGroup);\n const isSubmenuRef = useLatestRef(isSubmenu);\n\n const [menu] = useState(() => {\n const instance = createMenu({\n transition: createTransition(),\n onOpenChange(nextOpen, details) {\n if (!isControlled) setUncontrolledOpen(nextOpen);\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete(nextOpen) {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n });\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const contentId = useSafeId('menu');\n\n useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);\n\n // Commit only the open state resolved by controlled/uncontrolled ownership.\n useLayoutEffect(() => {\n menu.syncOpen(resolvedOpen);\n }, [menu, resolvedOpen]);\n\n useEffect(() => {\n if (isSubmenu \|\| controls?.state.visible !== false) return;\n\n menu.close('imperative-action');\n }, [controls?.state.visible, isSubmenu, menu]);\n\n useDestroy(menu);\n\n const input = useSnapshot(menu.input);\n\n useEffect(() => {\n if (!input.active \|\| isSubmenu) return;\n\n return controlsState?.requestControlsLock();\n }, [controlsState?.requestControlsLock, input.active, isSubmenu]);\n\n const preferredState = useMemo(() => {\n core.setProps({ side, align, closeOnEscape, closeOnOutsideClick });\n core.setInput({ ...input, isSubmenu });\n return core.getState();\n }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n const contextValue = useMemo(\n () => ({\n core,\n menu,\n parent: parentMenu,\n state,\n preferredSide,\n setPositionedSide,\n ~~stateAttrMap: MenuDataAttrs,\n~~ contentId,\n anchorName,\n boundary,\n container,\n }),\n [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n );\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;~~AA8BA~~,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,SAAS,CAAC;CAErD,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;~~CACrE~~,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;~~CAC~~/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;~~EAe5B~~,~~OAdiB~~,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;~~IAC~~/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;~~CAOhE~~,MAAM,~~EAAE~~,~~OAAO,eAAe,sBAAsB,mBAL7B,~~cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;EAAoB,CAAC;EACjE,KAAK,SAAS;GAAE,GAAG;GAAO;EAAU,CAAC;EACrC,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,~~CACS,~~CAAC;~~CAmBrF~~,OAAO,~~oBAAC~~,~~qBAAD~~;~~EAAqB~~,~~OAjBP~~,eACZ;~~GACL~~;~~GACA~~;~~GACA~~,QAAQ;~~GACR~~;~~GACA~~;~~GACA~~;~~GACA,cAAc~~;~~GACd~~;~~GACA~~;~~GACA~~;~~GACA;EACF~~,IACA;~~GAAC~~;~~GAAM~~;~~GAAM~~;~~GAAY~~;~~GAAO~~;~~GAAe~~;~~GAAmB~~;~~GAAW~~;~~GAAY~~;~~GAAU~~;~~EAAS~~,~~CAGhE~~;~~EAAI~~;CAA8B,CAAA;AAClF"}
1	+ {"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["import { MenuCore } from '@videojs/core';\nimport {\n createMenu,\n createTransition,\n type MenuChangeDetails,\n type PositioningBoundary,\n selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useState } from 'react';\n\nimport { useOptionalContainer, useOptionalPlayer } 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 { MenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n /** Boundary used to constrain the root menu popup size. /\n boundary?: PositioningBoundary;\n /* Called when the menu open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function MenuRoot({\n open: controlledOpen,\n defaultOpen = MenuCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n boundary = 'container',\n children,\n ...coreProps\n}: MenuRootProps): ReactNode {\n // Detect if we are nested inside a parent Menu.Content — if so, operate as\n // a submenu: no popover positioning, Trigger acts as a parent item.\n const parentMenu = useOptionalMenuContext();\n const controls = useOptionalControlsContext();\n const controlsState = useOptionalPlayer(selectControls);\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const isSubmenu = parentMenu !== null;\n const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n const [core] = useState(() => new MenuCore(coreProps));\n\n const isControlled = controlledOpen !== undefined;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const resolvedOpen = controlledOpen ?? uncontrolledOpen;\n\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n\n const closeOnEscapeRef = useLatestRef(closeOnEscape);\n const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n\n const popupGroupRef = useLatestRef(popupGroup);\n const isSubmenuRef = useLatestRef(isSubmenu);\n\n const [menu] = useState(() => {\n const instance = createMenu({\n transition: createTransition(),\n onOpenChange(nextOpen, details) {\n if (!isControlled) setUncontrolledOpen(nextOpen);\n\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete(nextOpen) {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n });\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const contentId = useSafeId('menu');\n\n useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);\n\n // Commit only the open state resolved by controlled/uncontrolled ownership.\n useLayoutEffect(() => {\n menu.syncOpen(resolvedOpen);\n }, [menu, resolvedOpen]);\n\n useEffect(() => {\n if (isSubmenu \|\| controls?.state.visible !== false) return;\n\n menu.close('imperative-action');\n }, [controls?.state.visible, isSubmenu, menu]);\n\n useDestroy(menu);\n\n const input = useSnapshot(menu.input);\n\n useEffect(() => {\n if (!input.active \|\| isSubmenu) return;\n\n return controlsState?.requestControlsLock();\n }, [controlsState?.requestControlsLock, input.active, isSubmenu]);\n\n const preferredState = useMemo(() => {\n core.setProps({ side, align, closeOnEscape, closeOnOutsideClick });\n core.setInput({ ...input, isSubmenu });\n return core.getState();\n }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n const contextValue = useMemo(\n () => ({\n core,\n menu,\n parent: parentMenu,\n state,\n preferredSide,\n setPositionedSide,\n contentId,\n anchorName,\n boundary,\n container,\n }),\n [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n );\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,SAAS,CAAC;CAErD,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;CAE/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;EAgB5B,OAfiB,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;IAE/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;CAEhE,MAAM,iBAAiB,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;EAAoB,CAAC;EACjE,KAAK,SAAS;GAAE,GAAG;GAAO;EAAU,CAAC;EACrC,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CAAC;CAC5E,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,cAAc;CAErF,MAAM,eAAe,eACZ;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAM;EAAY;EAAO;EAAe;EAAmB;EAAW;EAAY;EAAU;CAAS,CAC9G;CAEA,OAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;CAA8B,CAAA;AAClF"}

package/dist/dev/ui/menu/menu-trigger.d.ts CHANGED Viewed

@@ -9,9 +9,8 @@ interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, '
   onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;
 }
 /**
- * Button that toggles the menu visibility. At root level renders a `<button>`.
- * When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
- * that opens the submenu on click or ArrowRight.
+ * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+ * trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
  */
 declare const MenuTrigger: import("react").ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 declare namespace MenuTrigger {

package/dist/dev/ui/menu/menu-trigger.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-trigger.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"mappings":";;;KAWK,qBAAqB,oBAAoB;UAE7B,~~yBACP~~,~~KAAK~~,2BAA2B;;~~EAExC~~;EACA,UAAU,MAAM,kBAAkB;EAClC,YAAY,MAAM,qBAAqB~~;;;;;;;cAQ5B~~,6BAAW,0BAAA,KAAA,2CAAA,cAAA,oBAAA;~~kBAuIP~~;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"menu-trigger.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"mappings":";;;KAWK,qBAAqB,oBAAoB;UAE7B,yBAAyB,KACxC,2BAA2B;;EAI3B;EACA,UAAU,MAAM,kBAAkB;EAClC,YAAY,MAAM,qBAAqB;;;;;;cAO5B,6BAAW,0BAAA,KAAA,2CAAA,cAAA,oBAAA;kBA+IP;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/menu/menu-trigger.js CHANGED Viewed

@@ -8,9 +8,8 @@ import { isInteractiveActivation } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-trigger.tsx
 /**
-* Button that toggles the menu visibility. At root level renders a `<button>`.
-* When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
-* that opens the submenu on click or ArrowRight.
+* Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+* trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
 */
 const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
 	const { core, menu, parent, state, contentId } = useMenuContext();