@videojs/react 10.0.0-beta.25 → 10.0.0-beta.27

package/dist/default/ui/menu/menu-keyboard.js

@@ -0,0 +1,31 @@
+import { isMenuNavigationKey } from "@videojs/core/dom";
+//#region src/ui/menu/menu-keyboard.ts
+const preventedEvents = /* @__PURE__ */ new WeakSet();
+const canceledEvents = /* @__PURE__ */ new WeakSet();
+function preventMenuKeyDefault(event) {
+	if (event.key !== "Escape" && isMenuNavigationKey(event) && !event.defaultPrevented) {
+		event.preventDefault();
+		preventedEvents.add(event.nativeEvent);
+	}
+}
+function callKeyDownHandler(handler, event) {
+	const defaultPreventedBeforeHandler = event.defaultPrevented && (!preventedEvents.has(event.nativeEvent) || canceledEvents.has(event.nativeEvent));
+	if (!handler) return defaultPreventedBeforeHandler;
+	let defaultPreventedByHandler = false;
+	const preventDefault = event.preventDefault;
+	event.preventDefault = () => {
+		defaultPreventedByHandler = true;
+		preventDefault.call(event);
+	};
+	try {
+		handler(event);
+	} finally {
+		event.preventDefault = preventDefault;
+	}
+	if (defaultPreventedByHandler) canceledEvents.add(event.nativeEvent);
+	return defaultPreventedBeforeHandler || defaultPreventedByHandler;
+}
+//#endregion
+export { callKeyDownHandler, preventMenuKeyDefault };
+
+//# sourceMappingURL=menu-keyboard.js.map

package/dist/default/ui/menu/menu-keyboard.js.map

@@ -0,0 +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"}

package/dist/default/ui/menu/menu-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-group.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioGroupContextProvider, useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuRadioGroupProps extends UIComponentProps<'div', MenuState> {\n  /** The currently selected value. */\n  value: string;\n  /** Called when the user selects a radio item. */\n  onValueChange: (value: string) => void;\n}\n\n/** A group of mutually exclusive radio items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioGroup(\n  { render, className, style, value, onValueChange, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) => (\n        <MenuRadioGroupContextProvider value={{ value, onValueChange }}>\n          {renderElement(\n            'div',\n            { render, className, style },\n            {\n              state,\n              ref: [forwardedRef],\n              props: [getMenuGroupProps(labelId, elementProps), elementProps],\n            }\n          )}\n        </MenuRadioGroupContextProvider>\n      )}\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuRadioGroup {\n  export type Props = MenuRadioGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,OAAO,eAAe,GAAG,gBACrD,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QACE,oBAAC,mBAAD,EAAA,WACI,YACA,oBAAC,+BAAD;EAA+B,OAAO;GAAE;GAAO;GAAe;YAC3D,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,KAAK,CAAC,aAAa;GACnB,OAAO,CAAC,kBAAkB,SAAS,aAAa,EAAE,aAAa;GAChE,CACF;EAC6B,CAAA,EAEhB,CAAA;EAEtB"}
+{"version":3,"file":"menu-radio-group.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioGroupContextProvider, useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuRadioGroupProps extends UIComponentProps<'div', MenuState> {\n  /** The currently selected value. */\n  value: string;\n  /** Called when the user selects a radio item. */\n  onValueChange: (value: string) => void;\n}\n\n/** A group of mutually exclusive radio items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuRadioGroup = forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioGroup(\n  { render, className, style, value, onValueChange, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) => (\n        <MenuRadioGroupContextProvider value={{ value, onValueChange }}>\n          {renderElement(\n            'div',\n            { render, className, style },\n            {\n              state,\n              ref: [forwardedRef],\n              props: [getMenuGroupProps(labelId, elementProps), elementProps],\n            }\n          )}\n        </MenuRadioGroupContextProvider>\n      )}\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuRadioGroup {\n  export type Props = MenuRadioGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,OAAO,eAAe,GAAG,gBACrD,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,oBAAC,+BAAD;EAA+B,OAAO;GAAE;GAAO;EAAc;EAC1D,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,YAAY;GAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;EAChE,CACF;CAC6B,CAAA,EAEhB,CAAA;AAEvB,CAAC"}

package/dist/default/ui/menu/menu-radio-item.js

@@ -1,6 +1,6 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useMenuRadioGroupContext, useSubMenuContext } from "./context.js";
+import { useMenuContext, useMenuRadioGroupContext } from "./context.js";
 import { completeMenuItemSelection } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
 //#region src/ui/menu/menu-radio-item.tsx
@@ -8,7 +8,6 @@ import { forwardRef, useCallback, useEffect, useRef } from "react";
 const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, style, value, disabled, onClick, ...elementProps }, forwardedRef) {
 	const { menu, state } = useMenuContext();
 	const { value: groupValue, onValueChange } = useMenuRadioGroupContext();
-	const parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
 	const elementRef = useRef(null);
 	const checked = groupValue === value;
 	useEffect(() => {
@@ -19,20 +18,23 @@ const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, sty
 	const handleClick = useCallback((event) => {
 		if (disabled) return;
 		onClick?.(event);
+		if (event.defaultPrevented) return;
 		onValueChange(value);
-		completeMenuItemSelection(menu, parentMenu);
+		completeMenuItemSelection(menu);
 	}, [
 		disabled,
 		onClick,
 		onValueChange,
 		value,
-		menu,
-		parentMenu
+		menu
 	]);
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled) return;
-		menu.highlight(element, { focus: false });
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [menu, disabled]);
 	return renderElement("div", {
 		render,

package/dist/default/ui/menu/menu-radio-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport 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, useMenuRadioGroupContext, useSubMenuContext } 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 subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\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      onValueChange(value);\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onValueChange, value, menu, parentMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return 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});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,gBAAgB;CACxC,MAAM,EAAE,OAAO,YAAY,kBAAkB,0BAA0B;CAEvE,MAAM,aADa,mBAAmB,EACP,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,UAAU,eAAe;AAE/B,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,KAAK,aAAa,QAAQ;IAChC,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,aACjB,UAA4C;AAC3C,MAAI,SAAU;AACd,YAAU,MAAM;AAChB,gBAAc,MAAM;AACpB,4BAA0B,MAAM,WAAW;IAE7C;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;EAAW,CAC5D;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,SAAU;AAC1B,OAAK,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACxC,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;GACjB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport 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, 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 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});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,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,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-root.js

@@ -1,19 +1,22 @@
 "use client";
-import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
+import { useOptionalContainer, useOptionalPlayer } 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 { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
+import { MenuContextProvider, useOptionalMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { useOptionalControlsContext } from "../controls/context.js";
-import { createMenu, createTransition } from "@videojs/core/dom";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { createMenu, createTransition, selectControls } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { MenuCore, MenuDataAttrs } 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();
 	const controls = useOptionalControlsContext();
+	const controlsState = useOptionalPlayer(selectControls);
 	const container = useOptionalContainer();
 	const popupGroup = useOptionalPopupGroup();
 	const isSubmenu = parentMenu !== null;
@@ -23,6 +26,8 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		isSubmenu
 	}));
 	const isControlled = controlledOpen !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const resolvedOpen = controlledOpen ?? uncontrolledOpen;
 	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
 	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
 	const closeOnEscapeRef = useLatestRef(closeOnEscape);
@@ -30,9 +35,10 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	const popupGroupRef = useLatestRef(popupGroup);
 	const isSubmenuRef = useLatestRef(isSubmenu);
 	const [menu] = useState(() => {
-		const instance = createMenu({
+		return createMenu({
 			transition: createTransition(),
 			onOpenChange(nextOpen, details) {
+				if (!isControlled) setUncontrolledOpen(nextOpen);
 				onOpenChangeRef.current?.(nextOpen, details);
 			},
 			onOpenChangeComplete(nextOpen) {
@@ -42,18 +48,13 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,
 			group: () => isSubmenuRef.current ? void 0 : popupGroupRef.current
 		});
-		if (!isControlled && defaultOpen) instance.open();
-		return instance;
 	});
 	const anchorName = useSafeId();
 	const contentId = useSafeId("menu");
-	useEffect(() => {
-		if (controlledOpen === void 0) return;
-		const { active: inputOpen } = menu.input.current;
-		if (controlledOpen === inputOpen) return;
-		if (controlledOpen) menu.open("click");
-		else menu.close("click");
-	}, [controlledOpen, menu]);
+	useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);
+	useLayoutEffect(() => {
+		menu.syncOpen(resolvedOpen);
+	}, [menu, resolvedOpen]);
 	useEffect(() => {
 		if (isSubmenu || controls?.state.visible !== false) return;
 		menu.close("imperative-action");
@@ -64,7 +65,15 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	]);
 	useDestroy(menu);
 	const input = useSnapshot(menu.input);
-	const state = useMemo(() => {
+	useEffect(() => {
+		if (!input.active || isSubmenu) return;
+		return controlsState?.requestControlsLock();
+	}, [
+		controlsState?.requestControlsLock,
+		input.active,
+		isSubmenu
+	]);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
 		core.setProps({
 			side,
 			align,
@@ -82,51 +91,32 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		closeOnEscape,
 		closeOnOutsideClick,
 		isSubmenu
-	]);
-	const navigationInput = useSnapshot(menu.navigationInput);
-	const topEntry = navigationInput.stack[navigationInput.stack.length - 1];
-	const activeSubMenuId = topEntry?.menuId ?? null;
-	const activeSubMenuTriggerId = topEntry?.triggerId ?? null;
-	const navigationDirection = navigationInput.direction;
-	const contextValue = useMemo(() => ({
-		core,
-		menu,
-		state,
-		stateAttrMap: MenuDataAttrs,
-		contentId,
-		anchorName,
-		boundary,
-		container,
-		activeSubMenuId,
-		activeSubMenuTriggerId,
-		navigationDirection,
-		push: menu.push,
-		pop: menu.pop
-	}), [
-		core,
-		menu,
-		state,
-		contentId,
-		anchorName,
-		boundary,
-		container,
-		activeSubMenuId,
-		activeSubMenuTriggerId,
-		navigationDirection
-	]);
-	const subMenuContextValue = useMemo(() => parentMenu ? {
-		subMenuId: contentId,
-		parentMenu
-	} : null, [contentId, parentMenu]);
-	if (subMenuContextValue) return /* @__PURE__ */ jsx(MenuContextProvider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(SubMenuContextProvider, {
-			value: subMenuContextValue,
-			children
-		})
-	});
+	]));
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
-		value: contextValue,
+		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
+		]),
 		children
 	});
 }

package/dist/default/ui/menu/menu-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport { createMenu, createTransition, type MenuChangeDetails, type PositioningBoundary } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } 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 { MenuContextProvider, SubMenuContextProvider, 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 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, isSubmenu }));\n\n  const isControlled = controlledOpen !== undefined;\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        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    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  // Sync controlled open prop → internal state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = menu.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      menu.open('click');\n    } else {\n      menu.close('click');\n    }\n  }, [controlledOpen, menu]);\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  const state = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n    core.setInput(input);\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n\n  // Subscribe to navigation state — used by Content/Trigger when this is a root menu.\n  const navigationInput = useSnapshot(menu.navigationInput);\n  const topEntry = navigationInput.stack[navigationInput.stack.length - 1];\n  const activeSubMenuId = topEntry?.menuId ?? null;\n  const activeSubMenuTriggerId = topEntry?.triggerId ?? null;\n  const navigationDirection = navigationInput.direction;\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      state,\n      stateAttrMap: MenuDataAttrs,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n      push: menu.push,\n      pop: menu.pop,\n    }),\n    [\n      core,\n      menu,\n      state,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n    ]\n  );\n\n  const subMenuContextValue = useMemo(\n    () => (parentMenu ? { subMenuId: contentId, parentMenu } : null),\n    [contentId, parentMenu]\n  );\n\n  // When acting as a submenu, expose its content ID and the parent menu context\n  // through SubMenuContext so Trigger can register/push and Content can show/hide.\n  if (subMenuContextValue) {\n    return (\n      <MenuContextProvider value={contextValue}>\n        <SubMenuContextProvider value={subMenuContextValue}>{children}</SubMenuContextProvider>\n      </MenuContextProvider>\n    );\n  }\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,wBAAwB;CAC3C,MAAM,WAAW,4BAA4B;CAC7C,MAAM,YAAY,sBAAsB;CACxC,MAAM,aAAa,uBAAuB;CAC1C,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;EAAW,CAAC,CAAC;CAExE,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,cAAc;CACpD,MAAM,yBAAyB,aAAa,oBAAoB;CAChE,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,eAAe,aAAa,UAAU;CAE5C,MAAM,CAAC,QAAQ,eAAe;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,kBAAkB;GAC9B,aAAa,UAAU,SAAS;AAC9B,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,qBAAqB,UAAU;AAC7B,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;GAChE,CAAC;AAEF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,UAAU,OAAO;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,KAAA,EAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;AACzC,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,MAAK,KAAK,QAAQ;MAElB,MAAK,MAAM,QAAQ;IAEpB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,iBAAgB;AACd,MAAI,aAAa,UAAU,MAAM,YAAY,MAAO;AAEpD,OAAK,MAAM,oBAAoB;IAC9B;EAAC,UAAU,MAAM;EAAS;EAAW;EAAK,CAAC;AAE9C,YAAW,KAAK;CAEhB,MAAM,QAAQ,YAAY,KAAK,MAAM;CACrC,MAAM,QAAQ,cAAc;AAC1B,OAAK,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;GAAW,CAAC;AAC7E,OAAK,SAAS,MAAM;AACpB,SAAO,KAAK,UAAU;IACrB;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;EAAU,CAAC;CAG7E,MAAM,kBAAkB,YAAY,KAAK,gBAAgB;CACzD,MAAM,WAAW,gBAAgB,MAAM,gBAAgB,MAAM,SAAS;CACtE,MAAM,kBAAkB,UAAU,UAAU;CAC5C,MAAM,yBAAyB,UAAU,aAAa;CACtD,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;EAAY,GAAG,MAC3D,CAAC,WAAW,WAAW,CACxB;AAID,KAAI,oBACF,QACE,oBAAC,qBAAD;EAAqB,OAAO;YAC1B,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;GAAkC,CAAA;EACnE,CAAA;AAI1B,QAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;EAA+B,CAAA"}
+{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { 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, isSubmenu }));\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, isSubmenu });\n    core.setInput(input);\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":";;;;;;;;;;;;;;;AAgCA,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;EAAE,GAAG;EAAW;CAAU,CAAC,CAAC;CAEvE,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;GAAqB;EAAU,CAAC;EAC5E,KAAK,SAAS,KAAK;EACnB,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"}

package/dist/default/ui/menu/menu-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,MAAM,aAAsB,EAAE,aAAa;EACtD,CACF;EACD"}
+{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,MAAM,YAAqB,GAAG,YAAY;CACtD,CACF;AACF,CAAC"}

package/dist/default/ui/menu/menu-trigger.js

@@ -1,72 +1,50 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { MenuTriggerChildContextProvider, useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from "./context.js";
+import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
-import { MenuItemSettingProvider } from "./menu-item-setting-provider.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
 //#region src/ui/menu/menu-trigger.tsx
-function toUIKeyboardEvent(event) {
-	return {
-		get defaultPrevented() {
-			return event.defaultPrevented;
-		},
-		key: event.key,
-		shiftKey: event.shiftKey,
-		ctrlKey: event.ctrlKey,
-		altKey: event.altKey,
-		metaKey: event.metaKey,
-		target: event.target instanceof Node ? event.target : event.currentTarget,
-		currentTarget: event.currentTarget,
-		preventDefault: () => event.preventDefault(),
-		stopPropagation: () => event.stopPropagation()
-	};
-}
-function preventMenuKeyDefault(event) {
-	const keyboardEvent = toUIKeyboardEvent(event);
-	if (event.key !== "Escape" && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) event.preventDefault();
-}
 /**
 * 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 pushes the submenu on click or ArrowRight.
+* that opens the submenu on click or ArrowRight.
 */
-const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, type, onClick, onKeyDown, ...elementProps }, forwardedRef) {
-	const { core, menu, state, anchorName, contentId } = useMenuContext();
-	const subMenuCtx = useSubMenuContext();
-	const isSubMenuTrigger = subMenuCtx !== null;
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const isSubMenuTrigger = parent !== null;
+	const controlledId = state.open || state.status === "ending" ? contentId : void 0;
 	const elementRef = useRef(null);
 	const triggerId = useSafeId("sub-trigger");
-	const parentMenu = subMenuCtx?.parentMenu ?? null;
-	const parentMenuApi = parentMenu?.menu ?? null;
-	const parentState = parentMenu?.state ?? state;
-	const parentPush = parentMenu?.push ?? null;
-	const subMenuId = subMenuCtx?.subMenuId ?? null;
-	const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;
+	const parentMenuApi = parent?.menu ?? null;
 	useEffect(() => {
 		if (!isSubMenuTrigger || !parentMenuApi) return;
 		const element = elementRef.current;
 		if (!element) return;
-		return parentMenuApi.registerItem(element);
-	}, [isSubMenuTrigger, parentMenuApi]);
-	const openSubMenu = useCallback(() => {
-		if (disabled || !parentPush || !subMenuId) return;
-		parentPush(subMenuId, triggerId);
+		menu.setTriggerElement(element);
+		const unregister = parentMenuApi.registerItem(element);
+		return () => {
+			unregister();
+			menu.setTriggerElement(null);
+		};
 	}, [
-		disabled,
-		parentPush,
-		subMenuId,
-		triggerId
+		isSubMenuTrigger,
+		menu,
+		parentMenuApi
 	]);
+	const openSubMenu = useCallback(() => {
+		if (!disabled) menu.open("click");
+	}, [disabled, menu]);
 	const handleSubMenuClick = useCallback((event) => {
 		onClick?.(event);
+		if (event.defaultPrevented) return;
 		openSubMenu();
 	}, [onClick, openSubMenu]);
 	const handleSubMenuKeyDown = useCallback((event) => {
-		onKeyDown?.(event);
-		if (disabled) return;
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (disabled || defaultPreventedByUser) return;
 		if (event.key === "ArrowRight") {
 			event.preventDefault();
 			openSubMenu();
@@ -79,12 +57,14 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled || !parentMenuApi) return;
-		parentMenuApi.highlight(element, { focus: false });
+		parentMenuApi.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [disabled, parentMenuApi]);
 	const triggerRef = useCallback((element) => {
 		menu.setTriggerElement(element);
-		if (element && supportsAnchorPositioning()) element.style.setProperty("anchor-name", `--${anchorName}`);
-	}, [menu, anchorName]);
+	}, [menu]);
 	const rootTriggerProps = useMemo(() => {
 		if (!disabled) return menu.triggerProps;
 		return {
@@ -92,34 +72,26 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 				event.preventDefault();
 			},
 			onKeyDown: (event) => {
-				const keyboardEvent = toUIKeyboardEvent(event);
-				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(keyboardEvent)) event.preventDefault();
+				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(event)) event.preventDefault();
 			}
 		};
 	}, [disabled, menu.triggerProps]);
-	if (isSubMenuTrigger) {
-		const trigger = /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
-			render,
-			className,
-			style,
-			disabled,
-			elementProps,
-			forwardedRef,
-			elementRef,
-			triggerId,
-			parentState,
-			isExpanded,
-			onSubMenuClick: handleSubMenuClick,
-			onSubMenuKeyDown: handleSubMenuKeyDown,
-			onPointerEnter: handlePointerEnter
-		});
-		if (!type) return trigger;
-		return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
-			type,
-			children: trigger
-		});
-	}
-	const rootTrigger = /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
+	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+		render,
+		className,
+		style,
+		disabled,
+		elementProps,
+		forwardedRef,
+		elementRef,
+		triggerId,
+		triggerAttrs: core.getTriggerAttrs(state, controlledId),
+		state,
+		onSubMenuClick: handleSubMenuClick,
+		onSubMenuKeyDown: handleSubMenuKeyDown,
+		onPointerEnter: handlePointerEnter
+	});
+	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
 		value: true,
 		children: renderElement("button", {
 			render,
@@ -131,7 +103,7 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 			props: [
 				{
 					type: "button",
-					...core.getTriggerAttrs(state, contentId)
+					...core.getTriggerAttrs(state, controlledId)
 				},
 				disabled ? {
 					disabled: true,
@@ -143,34 +115,25 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 			]
 		})
 	});
-	if (!type) return rootTrigger;
-	return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
-		type,
-		children: rootTrigger
-	});
 });
-function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, parentState, isExpanded, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
-	const setting = useOptionalMenuItemSettingContext();
-	const settingAttrs = setting ? { "data-availability": setting.availability } : void 0;
+function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
 	return renderElement("div", {
 		render,
 		className,
 		style
 	}, {
-		state: parentState,
+		state,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			id: triggerId,
 			role: "menuitem",
-			"aria-haspopup": "menu",
-			"aria-expanded": isExpanded,
+			...triggerAttrs,
 			"aria-disabled": disabled ? true : void 0,
 			"data-has-submenu": "",
 			onClick: onSubMenuClick,
 			onKeyDownCapture: preventMenuKeyDefault,
 			onKeyDown: onSubMenuKeyDown,
-			onPointerEnter,
-			...settingAttrs
+			onPointerEnter
 		}, elementProps]
 	});
 }

package/dist/default/ui/menu/menu-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport {\n  MenuTriggerChildContextProvider,\n  useMenuContext,\n  useOptionalMenuItemSettingContext,\n  useSubMenuContext,\n} from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */\n  type?: MenuItemSettingType | undefined;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n  return {\n    get defaultPrevented() {\n      return event.defaultPrevented;\n    },\n    key: event.key,\n    shiftKey: event.shiftKey,\n    ctrlKey: event.ctrlKey,\n    altKey: event.altKey,\n    metaKey: event.metaKey,\n    target: event.target instanceof Node ? event.target : event.currentTarget,\n    currentTarget: event.currentTarget,\n    preventDefault: () => event.preventDefault(),\n    stopPropagation: () => event.stopPropagation(),\n  };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n  }\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, type, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, anchorName, contentId } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubMenuTrigger = subMenuCtx !== null;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const parentMenuApi = parentMenu?.menu ?? null;\n  const parentState = parentMenu?.state ?? state;\n  const parentPush = parentMenu?.push ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n  const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    return parentMenuApi.registerItem(element);\n  }, [isSubMenuTrigger, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (disabled || !parentPush || !subMenuId) return;\n    parentPush(subMenuId, triggerId);\n  }, [disabled, parentPush, subMenuId, triggerId]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(event);\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      if (disabled) return;\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [disabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [menu, anchorName]\n  );\n\n  const rootTriggerProps = useMemo(() => {\n    if (!disabled) return menu.triggerProps;\n\n    return {\n      onClick: (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n      },\n      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n        const keyboardEvent = toUIKeyboardEvent(event);\n        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(keyboardEvent)) {\n          event.preventDefault();\n        }\n      },\n    };\n  }, [disabled, menu.triggerProps]);\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    const trigger = (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={disabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        parentState={parentState}\n        isExpanded={isExpanded}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n\n    if (!type) return trigger;\n\n    return <MenuItemSettingProvider type={type}>{trigger}</MenuItemSettingProvider>;\n  }\n\n  const rootTrigger = (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n            disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n\n  if (!type) return rootTrigger;\n\n  return <MenuItemSettingProvider type={type}>{rootTrigger}</MenuItemSettingProvider>;\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  parentState: MenuState;\n  isExpanded: boolean;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  parentState,\n  isExpanded,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  const setting = useOptionalMenuItemSettingContext();\n  const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state: parentState,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          'aria-haspopup': 'menu' as const,\n          'aria-expanded': isExpanded,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n          ...settingAttrs,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,kBAAkB,OAA0D;AACnF,QAAO;EACL,IAAI,mBAAmB;AACrB,UAAO,MAAM;;EAEf,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ,MAAM,kBAAkB,OAAO,MAAM,SAAS,MAAM;EAC5D,eAAe,MAAM;EACrB,sBAAsB,MAAM,gBAAgB;EAC5C,uBAAuB,MAAM,iBAAiB;EAC/C;;AAGH,SAAS,sBAAsB,OAA+C;CAC5E,MAAM,gBAAgB,kBAAkB,MAAM;AAE9C,KAAI,MAAM,QAAQ,YAAY,oBAAoB,cAAc,IAAI,CAAC,MAAM,iBACzE,OAAM,gBAAgB;;;;;;;AAS1B,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,MAAM,SAAS,WAAW,GAAG,gBACnE,cACA;CACA,MAAM,EAAE,MAAM,MAAM,OAAO,YAAY,cAAc,gBAAgB;CACrE,MAAM,aAAa,mBAAmB;CACtC,MAAM,mBAAmB,eAAe;CAExC,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,YAAY,UAAU,cAAc;CAE1C,MAAM,aAAa,YAAY,cAAc;CAC7C,MAAM,gBAAgB,YAAY,QAAQ;CAC1C,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,aAAa,YAAY,QAAQ;CACvC,MAAM,YAAY,YAAY,aAAa;CAC3C,MAAM,aAAa,mBAAmB,YAAY,oBAAoB,YAAY,MAAM;AAGxF,iBAAgB;AACd,MAAI,CAAC,oBAAoB,CAAC,cAAe;EACzC,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,cAAc,aAAa,QAAQ;IACzC,CAAC,kBAAkB,cAAc,CAAC;CAErC,MAAM,cAAc,kBAAkB;AACpC,MAAI,YAAY,CAAC,cAAc,CAAC,UAAW;AAC3C,aAAW,WAAW,UAAU;IAC/B;EAAC;EAAU;EAAY;EAAW;EAAU,CAAC;CAEhD,MAAM,qBAAqB,aACxB,UAA4C;AAC1C,YAAkE,MAAM;AACzE,eAAa;IAEf,CAAC,SAAS,YAAY,CACvB;CAED,MAAM,uBAAuB,aAC1B,UAA+C;AAC7C,cAAuE,MAAM;AAC9E,MAAI,SAAU;AACd,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,gBAAa;;IAGjB;EAAC;EAAU;EAAW;EAAY,CACnC;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,YAAY,CAAC,cAAe;AAC5C,gBAAc,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACjD,CAAC,UAAU,cAAc,CAAC;CAG7B,MAAM,aAAa,aAChB,YAAsC;AACrC,OAAK,kBAAkB,QAAQ;AAC/B,MAAI,WAAW,2BAA2B,CACxC,SAAQ,MAAM,YAAY,eAAe,KAAK,aAAa;IAG/D,CAAC,MAAM,WAAW,CACnB;CAED,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,SAAU,QAAO,KAAK;AAE3B,SAAO;GACL,UAAU,UAAyC;AACjD,UAAM,gBAAgB;;GAExB,YAAY,UAA4C;IACtD,MAAM,gBAAgB,kBAAkB,MAAM;AAC9C,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,oBAAoB,cAAc,CAClF,OAAM,gBAAgB;;GAG3B;IACA,CAAC,UAAU,KAAK,aAAa,CAAC;AAGjC,KAAI,kBAAkB;EACpB,MAAM,UACJ,oBAAC,oBAAD;GACU;GACG;GACJ;GACG;GACI;GACA;GACF;GACD;GACE;GACD;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,gBAAgB;GAChB,CAAA;AAGJ,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO,oBAAC,yBAAD;GAA+B;aAAO;GAAkC,CAAA;;CAGjF,MAAM,cACJ,oBAAC,iCAAD;EAAiC,OAAA;YAC9B,cACC,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,KAAK,CAAC,cAA8C,WAAW;GAC/D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,UAAU;KAAE;IACtE,WAAW;KAAE,UAAU;KAAM,iBAAiB;KAAiB,GAAG,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,uBAAuB,GAAG,KAAA;IAC3D;IACA;IACD;GACF,CACF;EAC+B,CAAA;AAGpC,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO,oBAAC,yBAAD;EAA+B;YAAO;EAAsC,CAAA;EACnF;AAuBF,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,aACA,YACA,gBACA,kBACA,kBAC0B;CAC1B,MAAM,UAAU,mCAAmC;CACnD,MAAM,eAAe,UAAU,EAAE,qBAAqB,QAAQ,cAAc,GAAG,KAAA;AAE/E,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO;EACP,KAAK,CAAC,cAAc,WAAwC;EAC5D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;GACA,GAAG;GACJ,EACD,aACD;EACF,CACF"}
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps\n  extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!disabled) menu.open('click');\n  }, [disabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (disabled || defaultPreventedByUser) return;\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [disabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    },\n    [menu]\n  );\n\n  const rootTriggerProps = useMemo(() => {\n    if (!disabled) return menu.triggerProps;\n\n    return {\n      onClick: (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n      },\n      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(event)) {\n          event.preventDefault();\n        }\n      },\n    };\n  }, [disabled, menu.triggerProps]);\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={disabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  state: MenuState;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  triggerAttrs,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}

package/dist/default/ui/menu/use-menu-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n  children: (labelId: string | undefined) => ReactElement | null;\n}\n\ninterface MenuGroupElementProps {\n  'aria-label'?: unknown;\n  'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n  return elementProps['aria-label'] !== undefined || elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n  labelId: string | undefined,\n  elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string | undefined } {\n  return {\n    role: 'group',\n    'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n  };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement | null {\n  const [labelId, setLabelId] = useState<string>();\n\n  const registerLabel = useCallback((id: string) => {\n    setLabelId(id);\n\n    return () => {\n      setLabelId((current) => (current === id ? undefined : current));\n    };\n  }, []);\n\n  const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n  return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;;AAeA,SAAS,iBAAiB,cAA8C;AACtE,QAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;;AAGzF,SAAgB,kBACd,SACA,cAC2D;AAC3D,QAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,aAAa,GAAG,KAAA,IAAY;EACjE;;AAGH,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,UAAkB;CAEhD,MAAM,gBAAgB,aAAa,OAAe;AAChD,aAAW,GAAG;AAEd,eAAa;AACX,eAAY,YAAa,YAAY,KAAK,KAAA,IAAY,QAAS;;IAEhE,EAAE,CAAC;AAIN,QAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,eAAe,GAAG,CAAC,cAAc,CAAC;YAEjB,SAAS,QAAQ;EAA4B,CAAA"}
+{"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n  children: (labelId: string | undefined) => ReactElement | null;\n}\n\ninterface MenuGroupElementProps {\n  'aria-label'?: unknown;\n  'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n  return elementProps['aria-label'] !== undefined || elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n  labelId: string | undefined,\n  elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string | undefined } {\n  return {\n    role: 'group',\n    'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n  };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement | null {\n  const [labelId, setLabelId] = useState<string>();\n\n  const registerLabel = useCallback((id: string) => {\n    setLabelId(id);\n\n    return () => {\n      setLabelId((current) => (current === id ? undefined : current));\n    };\n  }, []);\n\n  const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n  return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;;AAeA,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAIL,OAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAEnB;EAAI,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}

package/dist/default/ui/mute-button/mute-button.js

@@ -10,7 +10,8 @@ const MuteButton = createMediaButton({
 	stateAttrMap: MuteButtonDataAttrs,
 	selector: selectVolume,
 	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleMuted"
+	hotkeyAction: "toggleMuted",
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { MuteButton };