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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["'use client';\n\nimport { type MenuState, PopoverCSSVars } from '@videojs/core';\nimport {\n  createMenuViewTransition,\n  getAnchorPositionStyle,\n  getMenuViewportAttrs,\n  getMenuViewportElement,\n  getMenuViewTransitionAttrs,\n  getPopupPositionRect,\n  getPositionedSide,\n  getPositioningBoundaryRect,\n  getRootPositionOptions,\n  isEventWithinElement,\n  isMenuNavigationKey,\n  observeMenuViewContent,\n  resolveOffsets,\n  resolvePositioningBoundary,\n  syncMenuViewRoot,\n  syncMenuViewTransition,\n  type UIFocusEvent,\n  type UIKeyboardEvent,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } 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, useSubMenuContext } from './context';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\nconst menuPreventedNativeEvents = new WeakSet<Event>();\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLDivElement>): 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 toUIFocusEvent(event: React.FocusEvent<HTMLDivElement>): UIFocusEvent {\n  return {\n    get defaultPrevented() {\n      return event.defaultPrevented;\n    },\n    relatedTarget: event.relatedTarget,\n    preventDefault: () => event.preventDefault(),\n    stopPropagation: () => event.stopPropagation(),\n  };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLDivElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n    menuPreventedNativeEvents.add(event.nativeEvent);\n  }\n}\n\nfunction wasDefaultPreventedByMenu(event: React.KeyboardEvent<HTMLDivElement>): boolean {\n  return menuPreventedNativeEvents.has(event.nativeEvent);\n}\n\nfunction callKeyDownHandler(\n  handler: React.KeyboardEventHandler<HTMLDivElement> | undefined,\n  event: React.KeyboardEvent<HTMLDivElement>\n): boolean {\n  const defaultPreventedBeforeHandler = event.defaultPrevented && !wasDefaultPreventedByMenu(event);\n\n  if (!handler) return defaultPreventedBeforeHandler;\n\n  let defaultPreventedByHandler = false;\n  const preventDefault = event.preventDefault;\n\n  // Capture-phase menu handling may have already prevented default; track\n  // whether the consumer also calls preventDefault while their handler runs.\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  return defaultPreventedBeforeHandler || defaultPreventedByHandler;\n}\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    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    contentId,\n    boundary,\n    container,\n    activeSubMenuId,\n  } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubmenu = state.isSubmenu;\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n\n  const isActive =\n    isSubmenu && parentMenu !== null && subMenuId !== null ? parentMenu.activeSubMenuId === subMenuId : false;\n\n  const [menuViewTransition] = useState(() =>\n    createMenuViewTransition({\n      focusFirstItem() {\n        menu.highlightFirstItem({ preventScroll: true });\n      },\n      restoreFocus(triggerId) {\n        if (triggerId) {\n          document.getElementById(triggerId)?.focus({ preventScroll: true });\n        }\n      },\n    })\n  );\n  const menuViewTransitionState = useSnapshot(menuViewTransition.input);\n  const menuViewElementRef = useRef<HTMLDivElement | null>(null);\n  const parentContentElementRef = useRef<HTMLElement | null>(null);\n  const activeSubMenuIdRef = useRef(activeSubMenuId);\n\n  activeSubMenuIdRef.current = activeSubMenuId;\n\n  useLayoutEffect(() => {\n    return () => menuViewTransition.destroy();\n  }, [menuViewTransition]);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return;\n\n    menuViewTransition.sync({\n      active: isActive,\n      direction: parentMenu?.navigationDirection ?? 'forward',\n      triggerId: parentMenu?.activeSubMenuTriggerId ?? null,\n    });\n  }, [isActive, isSubmenu, parentMenu, menuViewTransition]);\n\n  const setMenuViewElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      menuViewElementRef.current = element;\n      menu.setContentElement(element);\n      menuViewTransition.setElement(element);\n    },\n    [menu, menuViewTransition]\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 keyboardEvent = toUIKeyboardEvent(event);\n      const isNavigationKey = isMenuNavigationKey(keyboardEvent);\n      menu.contentProps.onKeyDown(keyboardEvent);\n      const isBackNavigationKey = event.key === 'ArrowLeft' || event.key === 'Escape';\n\n      const ownsActiveSubmenu =\n        parentMenu !== null &&\n        subMenuId !== null &&\n        parentMenu.menu.navigationInput.current.stack[parentMenu.menu.navigationInput.current.stack.length - 1]\n          ?.menuId === subMenuId;\n\n      if (isBackNavigationKey && ownsActiveSubmenu && !defaultPreventedByUser) {\n        event.preventDefault();\n        parentMenu.pop();\n      }\n\n      if (isNavigationKey && (!isBackNavigationKey || ownsActiveSubmenu)) {\n        event.stopPropagation();\n      }\n    },\n    [onKeyDown, parentMenu, subMenuId, menu]\n  );\n\n  const handleRootMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      const keyboardEvent = toUIKeyboardEvent(event);\n      menu.contentProps.onKeyDown(keyboardEvent);\n      if (event.key === 'Escape') return;\n      if (isMenuNavigationKey(keyboardEvent)) {\n        event.stopPropagation();\n      }\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(toUIFocusEvent(event));\n    },\n    [onBlur, menu]\n  );\n\n  // ─── Root content state (always declared — Rules of Hooks) ───────────────\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const contentRef = useCallback(\n    (element: HTMLDivElement | null) => {\n      if (isSubmenu) return;\n      menu.setContentElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [isSubmenu, menu, anchorName]\n  );\n\n  const rootComposedRef = useComposedRefs(forwardedRef, contentRef, internalRef);\n  const menuViewComposedRef = useComposedRefs(forwardedRef, setMenuViewElement);\n\n  const positionOptions = useMemo(\n    () => getRootPositionOptions(preferredSide, state.align),\n    [preferredSide, state.align]\n  );\n\n  const anchorStyle = useMemo(() => {\n    if (isSubmenu || !positionOptions || !supportsAnchorPositioning()) return null;\n    const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, positionOptions);\n    return rest as CSSProperties;\n  }, [isSubmenu, anchorName, positionOptions]);\n\n  const [position, setPosition] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSubmenu) return;\n    if (!state.open) return;\n\n    syncMenuViewRoot(internalRef.current, activeSubMenuId !== null);\n\n    const contentElement = internalRef.current;\n    if (!contentElement) return;\n\n    return observeMenuViewContent(contentElement, () => {\n      syncMenuViewRoot(contentElement, activeSubMenuId !== null);\n    });\n  }, [isSubmenu, state.open, activeSubMenuId]);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return;\n\n    const parentContentElement = parentMenu?.menu.contentElement ?? parentContentElementRef.current;\n    parentContentElementRef.current = parentContentElement;\n    syncMenuViewTransition(parentContentElement, menuViewElementRef.current, menuViewTransitionState);\n  });\n\n  useLayoutEffect(() => {\n    if (isSubmenu) return;\n    if (!state.open) {\n      setPosition(null);\n      return;\n    }\n\n    if (!positionOptions) {\n      syncMenuViewRoot(internalRef.current, activeSubMenuIdRef.current !== null);\n      return;\n    }\n\n    const rootPositionOptions = positionOptions;\n\n    function measure(): void {\n      const triggerElement = menu.triggerElement;\n      const contentElement = internalRef.current;\n      if (!triggerElement || !contentElement) return;\n\n      const triggerRect = triggerElement.getBoundingClientRect();\n      const root = contentElement.getRootNode() as Document | ShadowRoot;\n      const boundaryElement = resolvePositioningBoundary(boundary, { container, root });\n      const anchorSupported = supportsAnchorPositioning();\n      let contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);\n      const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n      const offsets = resolveOffsets(contentElement);\n      let side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);\n\n      let nextStyle = getAnchorPositionStyle(\n        anchorName,\n        { ...rootPositionOptions, side },\n        triggerRect,\n        anchorSupported ? undefined : contentRect,\n        boundaryRect,\n        offsets\n      );\n\n      const availableWidth = nextStyle[PopoverCSSVars.availableWidth];\n      syncMenuViewRoot(\n        contentElement,\n        activeSubMenuIdRef.current !== null,\n        availableWidth ? { availableWidth } : undefined\n      );\n\n      if (!anchorSupported) {\n        contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);\n        side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);\n        nextStyle = getAnchorPositionStyle(\n          anchorName,\n          { ...rootPositionOptions, side },\n          triggerRect,\n          contentRect,\n          boundaryRect,\n          offsets\n        );\n      }\n\n      const { positionAnchor: _, ...rootStyle } = nextStyle;\n\n      setPosition(rootStyle as CSSProperties);\n      setPositionedSide(side);\n    }\n\n    measure();\n\n    const triggerElement = menu.triggerElement;\n    const contentElement = internalRef.current;\n    const boundaryElement = contentElement\n      ? resolvePositioningBoundary(boundary, {\n          container,\n          root: contentElement.getRootNode() as Document | ShadowRoot,\n        })\n      : null;\n\n    let animationFrameId = 0;\n    function reposition(event?: Event): void {\n      if (event && isEventWithinElement(event, internalRef.current)) return;\n\n      cancelAnimationFrame(animationFrameId);\n      animationFrameId = requestAnimationFrame(measure);\n    }\n\n    reposition();\n\n    const resizeObserver = typeof ResizeObserver === 'function' ? new ResizeObserver(() => reposition()) : null;\n\n    if (triggerElement && resizeObserver) resizeObserver.observe(triggerElement);\n    if (contentElement && resizeObserver) resizeObserver.observe(contentElement);\n    if (boundaryElement && resizeObserver) resizeObserver.observe(boundaryElement);\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(animationFrameId);\n      resizeObserver?.disconnect();\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [isSubmenu, state.open, anchorName, positionOptions, menu, boundary, container, setPositionedSide]);\n\n  // ─── Render ───────────────────────────────────────────────────────────────\n\n  if (isSubmenu) {\n    if (menuViewTransitionState.phase === 'hidden') return null;\n\n    const subMenuContent = renderElement(\n      'div',\n      { render, className, style },\n      {\n        state,\n        ref: menuViewComposedRef,\n        props: [\n          {\n            ...getMenuViewTransitionAttrs(menuViewTransitionState),\n            role: 'menu' as const,\n            tabIndex: -1,\n            'data-submenu': '',\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onBlur,\n          },\n          elementProps,\n        ],\n      }\n    );\n\n    const parentContentElement = parentMenu?.menu.contentElement ?? parentContentElementRef.current;\n\n    const parentViewportElement = getMenuViewportElement(parentContentElement);\n\n    return parentViewportElement ? createPortal(subMenuContent, parentViewportElement) : subMenuContent;\n  }\n\n  if (!state.open) return null;\n\n  const positioningStyle = position ?? anchorStyle ?? POPOVER_RESET;\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          ...getMenuViewportAttrs(),\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":"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"}
+{"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["'use client';\n\nimport 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":"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"}

package/dist/dev/ui/menu/menu-item.d.ts

@@ -1,5 +1,4 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { MenuItemSettingType } from "./menu-item-type.js";
 import { MenuState } from "@videojs/core";
 //#region src/ui/menu/menu-item.d.ts
 interface MenuItemProps extends UIComponentProps<'div', MenuState> {
@@ -7,8 +6,6 @@ interface MenuItemProps extends UIComponentProps<'div', MenuState> {
   onSelect?: () => void;
   /** Whether the item is disabled. */
   disabled?: boolean;
-  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */
-  type?: MenuItemSettingType | undefined;
 }
 /** A single action in the menu. Renders a `<div>` with `role="menuitem"`. */
 declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

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

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

@@ -1,40 +1,41 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from "./context.js";
-import { MenuItemSettingProvider } from "./menu-item-setting-provider.js";
+import { useMenuContext } from "./context.js";
 import { completeMenuItemSelection } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-item.tsx
 /** A single action in the menu. Renders a `<div>` with `role="menuitem"`. */
-const MenuItem = forwardRef(function MenuItem({ render, className, style, onSelect, disabled, type, onClick, ...elementProps }, forwardedRef) {
+const MenuItem = forwardRef(function MenuItem({ render, className, style, onSelect, disabled, onClick, ...elementProps }, forwardedRef) {
 	const { menu, state } = useMenuContext();
-	const parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
 	const elementRef = useRef(null);
 	useEffect(() => {
 		const element = elementRef.current;
 		if (!element) return;
 		return menu.registerItem(element);
 	}, [menu]);
-	const item = /* @__PURE__ */ jsx(MenuItemContent, {
+	return /* @__PURE__ */ jsx(MenuItemContent, {
 		disabled,
 		elementProps,
 		onClick: useCallback((event) => {
 			if (disabled) return;
 			onClick?.(event);
+			if (event.defaultPrevented) return;
 			onSelect?.();
-			completeMenuItemSelection(menu, parentMenu);
+			completeMenuItemSelection(menu);
 		}, [
 			disabled,
 			onClick,
 			onSelect,
-			menu,
-			parentMenu
+			menu
 		]),
 		onPointerEnter: useCallback(() => {
 			const element = elementRef.current;
 			if (!element || disabled) return;
-			menu.highlight(element, { focus: false });
+			menu.highlight(element, {
+				focus: false,
+				pointer: true
+			});
 		}, [menu, disabled]),
 		render,
 		className,
@@ -43,15 +44,8 @@ const MenuItem = forwardRef(function MenuItem({ render, className, style, onSele
 		forwardedRef,
 		elementRef
 	});
-	if (!type) return item;
-	return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
-		type,
-		children: item
-	});
 });
 function MenuItemContent({ disabled, elementProps, onClick, onPointerEnter, render, className, style, state, forwardedRef, elementRef }) {
-	const setting = useOptionalMenuItemSettingContext();
-	const settingAttrs = setting ? { "data-availability": setting.availability } : void 0;
 	return renderElement("div", {
 		render,
 		className,
@@ -63,8 +57,7 @@ function MenuItemContent({ disabled, elementProps, onClick, onPointerEnter, rend
 			role: "menuitem",
 			"aria-disabled": disabled ? true : void 0,
 			onClick,
-			onPointerEnter,
-			...settingAttrs
+			onPointerEnter
 		}, elementProps]
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-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, useOptionalMenuItemSettingContext, useSubMenuContext } from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\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  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */\n  type?: MenuItemSettingType | undefined;\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, type, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\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      onSelect?.();\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onSelect, 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  const item = (\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  if (!type) return item;\n\n  return <MenuItemSettingProvider type={type}>{item}</MenuItemSettingProvider>;\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  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,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick,\n          onPointerEnter,\n          ...settingAttrs,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;AAsBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,MAAM,SAAS,GAAG,gBAClE,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CAEvC,MAAM,aADa,kBACS,CAAC,EAAE,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAkBT,MAAM,OACJ,oBAAC,iBAAD;EACY;EACI;EACd,SApBgB,aACjB,UAA4C;GAC3C,IAAI,UAAU;GACd,UAAU,KAAK;GACf,WAAW;GACX,0BAA0B,MAAM,UAAU;EAC5C,GACA;GAAC;GAAU;GAAS;GAAU;GAAM;EAAU,CAazB;EACnB,gBAXuB,kBAAkB;GAC3C,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,WAAW,UAAU;GAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;EAC1C,GAAG,CAAC,MAAM,QAAQ,CAOmB;EACzB;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;CAGH,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO,oBAAC,yBAAD;EAA+B;EAAO,UAAA;CAA8B,CAAA;AAC7E,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,MAAM,UAAU,kCAAkC;CAClD,MAAM,eAAe,UAAU,EAAE,qBAAqB,QAAQ,aAAa,IAAI,KAAA;CAE/E,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;GACA,GAAG;EACL,GACA,YACF;CACF,CACF;AACF"}
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-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 } 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":";;;;;;;;AAkBA,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"}

package/dist/dev/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/dev/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/dev/ui/menu/menu-radio-item.d.ts.map

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

package/dist/dev/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/dev/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,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CAEtE,MAAM,aADa,kBACS,CAAC,EAAE,WAAW,QAAQ;CAClD,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,cAAc,KAAK;EACnB,0BAA0B,MAAM,UAAU;CAC5C,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;CAAU,CAC5D;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CAC1C,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"}
+{"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/dev/ui/menu/menu-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;UAeiB,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;kBAsIF;OACH,QAAQ"}
+{"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;UAsBiB,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"}

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

@@ -1,20 +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 { usePositionedState } from "../hooks/use-positioned-state.js";
-import { createMenu, createTransition } from "@videojs/core/dom";
+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;
@@ -24,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);
@@ -31,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) {
@@ -43,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");
@@ -65,6 +65,14 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	]);
 	useDestroy(menu);
 	const input = useSnapshot(menu.input);
+	useEffect(() => {
+		if (!input.active || isSubmenu) return;
+		return controlsState?.requestControlsLock();
+	}, [
+		controlsState?.requestControlsLock,
+		input.active,
+		isSubmenu
+	]);
 	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
 		core.setProps({
 			side,
@@ -84,54 +92,31 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		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,
-		preferredSide,
-		setPositionedSide,
-		stateAttrMap: MenuDataAttrs,
-		contentId,
-		anchorName,
-		boundary,
-		container,
-		activeSubMenuId,
-		activeSubMenuTriggerId,
-		navigationDirection,
-		push: menu.push,
-		pop: menu.pop
-	}), [
-		core,
-		menu,
-		state,
-		preferredSide,
-		setPositionedSide,
-		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/dev/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 { usePositionedState } from '../hooks/use-positioned-state';\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 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  // 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      preferredSide,\n      setPositionedSide,\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      preferredSide,\n      setPositionedSide,\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":";;;;;;;;;;;;;;AAyBA,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,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;CAExC,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;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,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,CAAC;EAED,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAGlC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;EACzC,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,KAAK,KAAK,OAAO;OAEjB,KAAK,MAAM,OAAO;CAEtB,GAAG,CAAC,gBAAgB,IAAI,CAAC;CAEzB,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;CAMpC,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;CAGrF,MAAM,kBAAkB,YAAY,KAAK,eAAe;CACxD,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;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;CACZ,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;CAAW,IAAI,MAC3D,CAAC,WAAW,UAAU,CACxB;CAIA,IAAI,qBACF,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;EAAiC,CAAA;CACnE,CAAA;CAIzB,OAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;CAA8B,CAAA;AAClF"}
+{"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/dev/ui/menu/menu-trigger.d.ts

@@ -1,17 +1,17 @@
 import { UIComponentProps } from "../../utils/types.js";
-import { MenuItemSettingType } from "./menu-item-type.js";
 import { MenuState } from "@videojs/core";
 //#region src/ui/menu/menu-trigger.d.ts
-interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {
+type MenuTriggerElement = HTMLButtonElement | HTMLDivElement;
+interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {
   /** Disables the trigger. */
   disabled?: boolean;
-  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */
-  type?: MenuItemSettingType | undefined;
+  onClick?: React.MouseEventHandler<MenuTriggerElement>;
+  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 pushes the submenu on click or ArrowRight.
+ * 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

@@ -1 +1 @@
-{"version":3,"file":"menu-trigger.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"mappings":";;;;UAmBiB,yBAAyB,KAAK,2BAA2B;;EAExE;;EAEA,OAAO;;;;;;;cAiCI,6BAAW,0BAAA,KAAA,2CAAA,cAAA,oBAAA;kBAsIP;OACH,QAAQ;OACR,QAAQ"}
+{"version":3,"file":"menu-trigger.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"mappings":";;;KAYK,qBAAqB,oBAAoB;UAE7B,yBACP,KAAK,2BAA2B;;EAExC;EACA,UAAU,MAAM,kBAAkB;EAClC,YAAY,MAAM,qBAAqB;;;;;;;cAQ5B,6BAAW,0BAAA,KAAA,2CAAA,cAAA,oBAAA;kBA0HP;OACH,QAAQ;OACR,QAAQ"}