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

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

@@ -2,9 +2,10 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext, useSubMenuContext } from "./context.js";
-import { createMenuViewTransition, getAnchorPositionStyle, getMenuViewTransitionAttrs, getMenuViewportAttrs, getMenuViewportElement, getPopupPositionRect, getPositioningBoundaryRect, getRootPositionOptions, isEventWithinElement, isMenuNavigationKey, resolveOffsets, resolvePositioningBoundary, syncMenuViewRoot, syncMenuViewTransition } from "@videojs/core/dom";
+import { createMenuViewTransition, getAnchorPositionStyle, getMenuViewTransitionAttrs, getMenuViewportAttrs, getMenuViewportElement, getPopupPositionRect, getPositioningBoundaryRect, getRootPositionOptions, isEventWithinElement, isMenuNavigationKey, observeMenuViewContent, resolveOffsets, resolvePositioningBoundary, syncMenuViewRoot, syncMenuViewTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { PopoverCSSVars } from "@videojs/core";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/menu-content.tsx
@@ -85,6 +86,8 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 	const menuViewTransitionState = useSnapshot(menuViewTransition.input);
 	const menuViewElementRef = useRef(null);
 	const parentContentElementRef = useRef(null);
+	const activeSubMenuIdRef = useRef(activeSubMenuId);
+	activeSubMenuIdRef.current = activeSubMenuId;
 	useLayoutEffect(() => {
 		return () => menuViewTransition.destroy();
 	}, [menuViewTransition]);
@@ -161,6 +164,11 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		if (isSubmenu) return;
 		if (!state.open) return;
 		syncMenuViewRoot(internalRef.current, activeSubMenuId !== null);
+		const contentElement = internalRef.current;
+		if (!contentElement) return;
+		return observeMenuViewContent(contentElement, () => {
+			syncMenuViewRoot(contentElement, activeSubMenuId !== null);
+		});
 	}, [
 		isSubmenu,
 		state.open,
@@ -174,11 +182,14 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 	});
 	useLayoutEffect(() => {
 		if (isSubmenu) return;
-		if (!positionOptions) return;
 		if (!state.open) {
 			setManualStyle(null);
 			return;
 		}
+		if (!positionOptions) {
+			syncMenuViewRoot(internalRef.current, activeSubMenuIdRef.current !== null);
+			return;
+		}
 		const rootPositionOptions = positionOptions;
 		function measure() {
 			const triggerElement = menu.triggerElement;
@@ -189,8 +200,16 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 				container,
 				root: contentElement.getRootNode()
 			});
-			const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, rootPositionOptions, triggerRect, supportsAnchorPositioning() ? void 0 : getPopupPositionRect(contentElement), getPositioningBoundaryRect(boundaryElement), resolveOffsets(contentElement));
-			setManualStyle(nextStyle);
+			const anchorSupported = supportsAnchorPositioning();
+			const contentRect = anchorSupported ? void 0 : getPopupPositionRect(contentElement);
+			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+			const offsets = resolveOffsets(contentElement);
+			let nextStyle = getAnchorPositionStyle(anchorName, rootPositionOptions, triggerRect, contentRect, boundaryRect, offsets);
+			const availableWidth = nextStyle[PopoverCSSVars.availableWidth];
+			syncMenuViewRoot(contentElement, activeSubMenuIdRef.current !== null, availableWidth ? { availableWidth } : void 0);
+			if (!anchorSupported) nextStyle = getAnchorPositionStyle(anchorName, rootPositionOptions, triggerRect, getPopupPositionRect(contentElement), boundaryRect, offsets);
+			const { positionAnchor: _, ...rootStyle } = nextStyle;
+			setManualStyle(rootStyle);
 		}
 		measure();
 		const triggerElement = menu.triggerElement;
@@ -238,7 +257,6 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 			style
 		}, {
 			state,
-			stateAttrMap,
 			ref: menuViewComposedRef,
 			props: [{
 				...getMenuViewTransitionAttrs(menuViewTransitionState),

package/dist/default/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 } from '@videojs/core';\nimport {\n  createMenuViewTransition,\n  getAnchorPositionStyle,\n  getMenuViewportAttrs,\n  getMenuViewportElement,\n  getMenuViewTransitionAttrs,\n  getPopupPositionRect,\n  getPositioningBoundaryRect,\n  getRootPositionOptions,\n  isEventWithinElement,\n  isMenuNavigationKey,\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 { core, menu, state, stateAttrMap, anchorName, contentId, boundary, container, 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\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(() => getRootPositionOptions(state.side, state.align), [state.side, state.align]);\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 [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (isSubmenu) return;\n    if (!state.open) return;\n\n    syncMenuViewRoot(internalRef.current, activeSubMenuId !== null);\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 (!positionOptions) return;\n    if (!state.open) {\n      setManualStyle(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 contentRect = supportsAnchorPositioning() ? undefined : getPopupPositionRect(contentElement);\n      const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n      const offsets = resolveOffsets(contentElement);\n\n      const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(\n        anchorName,\n        rootPositionOptions,\n        triggerRect,\n        contentRect,\n        boundaryRect,\n        offsets\n      );\n\n      setManualStyle(nextStyle as CSSProperties);\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]);\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        stateAttrMap,\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 = manualStyle ?? 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, PopoverCSSVars } from '@videojs/core';\nimport {\n  createMenuViewTransition,\n  getAnchorPositionStyle,\n  getMenuViewportAttrs,\n  getMenuViewportElement,\n  getMenuViewTransitionAttrs,\n  getPopupPositionRect,\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 { core, menu, state, stateAttrMap, anchorName, contentId, boundary, container, 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(() => getRootPositionOptions(state.side, state.align), [state.side, state.align]);\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 [manualStyle, setManualStyle] = 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      setManualStyle(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      const contentRect = anchorSupported ? undefined : getPopupPositionRect(contentElement);\n      const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n      const offsets = resolveOffsets(contentElement);\n\n      let nextStyle = getAnchorPositionStyle(\n        anchorName,\n        rootPositionOptions,\n        triggerRect,\n        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        nextStyle = getAnchorPositionStyle(\n          anchorName,\n          rootPositionOptions,\n          triggerRect,\n          getPopupPositionRect(contentElement),\n          boundaryRect,\n          offsets\n        );\n      }\n\n      const { positionAnchor: _, ...rootStyle } = nextStyle;\n\n      setManualStyle(rootStyle as CSSProperties);\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]);\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 = manualStyle ?? 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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"}

package/dist/default/ui/menu/menu-group-label.js

@@ -0,0 +1,29 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useMenuGroupContext } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { forwardRef, useLayoutEffect } from "react";
+//#region src/ui/menu/menu-group-label.tsx
+/** Non-interactive label for a group of items. Renders a `<div>`. */
+const MenuGroupLabel = forwardRef(function MenuGroupLabel({ render, className, style, id: idProp, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	const group = useMenuGroupContext();
+	const generatedId = useSafeId("menu-group-label");
+	const id = idProp ?? generatedId;
+	useLayoutEffect(() => {
+		return group?.registerLabel(id);
+	}, [group, id]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef],
+		props: [{ id }, elementProps]
+	});
+});
+//#endregion
+export { MenuGroupLabel };
+
+//# sourceMappingURL=menu-group-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label.js","names":[],"sources":["../../../../src/ui/menu/menu-group-label.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useLayoutEffect } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useMenuGroupContext } from './context';\n\nexport interface MenuGroupLabelProps extends UIComponentProps<'div', MenuState> {}\n\n/** Non-interactive label for a group of items. Renders a `<div>`. */\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(function MenuGroupLabel(\n  { render, className, style, id: idProp, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const group = useMenuGroupContext();\n  const generatedId = useSafeId('menu-group-label');\n  const id = idProp ?? generatedId;\n\n  useLayoutEffect(() => {\n    return group?.registerLabel(id);\n  }, [group, id]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ id }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroupLabel {\n  export type Props = MenuGroupLabelProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,IAAI,QAAQ,GAAG,gBAC3C,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,QAAQ,qBAAqB;CACnC,MAAM,cAAc,UAAU,mBAAmB;CACjD,MAAM,KAAK,UAAU;AAErB,uBAAsB;AACpB,SAAO,OAAO,cAAc,GAAG;IAC9B,CAAC,OAAO,GAAG,CAAC;AAEf,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,IAAI,EAAE,aAAa;EAC9B,CACF;EACD"}

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

@@ -1,24 +1,22 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } from "./context.js";
+import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-group.tsx
 /** Groups related menu items. Renders a `<div>` with `role="group"`. */
-const MenuGroup = forwardRef(function MenuGroup({ render, className, style, label, ...elementProps }, forwardedRef) {
-	const { state, stateAttrMap } = useMenuContext();
-	return renderElement("div", {
+const MenuGroup = forwardRef(function MenuGroup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	return /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => renderElement("div", {
 		render,
 		className,
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef],
-		props: [{
-			role: "group",
-			"aria-label": label
-		}, elementProps]
-	});
+		props: [getMenuGroupProps(labelId, elementProps), elementProps]
+	}) });
 });
 //#endregion
 export { MenuGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-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 { useMenuContext } from './context';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {\n  /** Accessible label for the group. */\n  label?: string;\n}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, label, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'group' as const, 'aria-label': label }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAeA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,gBACtC,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;AAEhD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,MAAM;GAAkB,cAAc;GAAO,EAAE,aAAa;EACvE,CACF;EACD"}
+{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-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 { useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) =>\n        renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            ref: [forwardedRef],\n            props: [getMenuGroupProps(labelId, elementProps), elementProps],\n          }\n        )\n      }\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QACE,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,kBAAkB,SAAS,aAAa,EAAE,aAAa;EAChE,CACF,EAEe,CAAA;EAEtB"}

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

@@ -5,7 +5,7 @@ import { forwardRef } from "react";
 //#region src/ui/menu/menu-item-indicator.tsx
 /** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */
 const MenuItemIndicator = forwardRef(function MenuItemIndicator({ render, className, style, checked, forceMount = false, ...elementProps }, forwardedRef) {
-	const { state, stateAttrMap } = useMenuContext();
+	const { state } = useMenuContext();
 	if (!checked && !forceMount) return null;
 	return renderElement("span", {
 		render,
@@ -13,7 +13,6 @@ const MenuItemIndicator = forwardRef(function MenuItemIndicator({ render, classN
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef],
 		props: [{ "aria-hidden": true }, elementProps]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.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 MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */\n  checked?: boolean;\n  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */\n  forceMount?: boolean;\n}\n\n/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n  { render, className, style, checked, forceMount = false, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n\n  if (!checked && !forceMount) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemIndicator {\n  export type Props = MenuItemIndicatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAiBA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;AAEhD,KAAI,CAAC,WAAW,CAAC,WAAY,QAAO;AAEpC,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,eAAe,MAAM,EAAE,aAAa;EAC/C,CACF;EACD"}
+{"version":3,"file":"menu-item-indicator.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.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 MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */\n  checked?: boolean;\n  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */\n  forceMount?: boolean;\n}\n\n/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n  { render, className, style, checked, forceMount = false, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  if (!checked && !forceMount) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemIndicator {\n  export type Props = MenuItemIndicatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAiBA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,KAAI,CAAC,WAAW,CAAC,WAAY,QAAO;AAEpC,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,eAAe,MAAM,EAAE,aAAa;EAC/C,CACF;EACD"}

package/dist/default/ui/menu/menu-item-setting-provider.js

@@ -0,0 +1,72 @@
+"use client";
+import { MenuItemSettingContextProvider } from "./context.js";
+import { useAudioTrackOptions } from "../audio-track/use-audio-track-options.js";
+import { useCaptionsOptions } from "../captions-radio-group/use-captions-options.js";
+import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
+import { useQualityOptions } from "../quality/use-quality-options.js";
+import { jsx } from "react/jsx-runtime";
+import { CAPTIONS_OFF_VALUE } from "@videojs/core";
+//#region src/ui/menu/menu-item-setting-provider.tsx
+function PlaybackRateMenuItemSettingProvider({ children }) {
+	const playbackRate = usePlaybackRateOptions();
+	if (!playbackRate) return children;
+	const { state, options, value } = playbackRate;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "playback-rate",
+			label: options.find((option) => option.value === value)?.label ?? "",
+			availability: state.availability
+		},
+		children
+	});
+}
+function CaptionsMenuItemSettingProvider({ children }) {
+	const captions = useCaptionsOptions();
+	if (!captions) return children;
+	const { state, options, value } = captions;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "captions",
+			label: value === CAPTIONS_OFF_VALUE ? "Off" : options.find((option) => option.value === value)?.label ?? "Off",
+			availability: state.availability
+		},
+		children
+	});
+}
+function QualityMenuItemSettingProvider({ children }) {
+	const quality = useQualityOptions();
+	if (!quality) return children;
+	const { state, options, value } = quality;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "quality",
+			label: options.find((option) => option.value === value)?.label ?? "Auto",
+			availability: state.availability
+		},
+		children
+	});
+}
+function AudioTrackMenuItemSettingProvider({ children }) {
+	const audioTrack = useAudioTrackOptions();
+	if (!audioTrack) return children;
+	const { state, options, value } = audioTrack;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "audio-track",
+			label: options.find((option) => option.value === value)?.label ?? "",
+			availability: state.availability
+		},
+		children
+	});
+}
+function MenuItemSettingProvider({ type, children }) {
+	if (type === "playback-rate") return /* @__PURE__ */ jsx(PlaybackRateMenuItemSettingProvider, { children });
+	if (type === "quality") return /* @__PURE__ */ jsx(QualityMenuItemSettingProvider, { children });
+	if (type === "audio-track") return /* @__PURE__ */ jsx(AudioTrackMenuItemSettingProvider, { children });
+	if (type === "captions") return /* @__PURE__ */ jsx(CaptionsMenuItemSettingProvider, { children });
+	return children;
+}
+//#endregion
+export { MenuItemSettingProvider };
+
+//# sourceMappingURL=menu-item-setting-provider.js.map

package/dist/default/ui/menu/menu-item-setting-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-setting-provider.js","names":[],"sources":["../../../../src/ui/menu/menu-item-setting-provider.tsx"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { useAudioTrackOptions } from '../audio-track/use-audio-track-options';\nimport { useCaptionsOptions } from '../captions-radio-group/use-captions-options';\nimport { usePlaybackRateOptions } from '../playback-rate/use-playback-rate-options';\nimport { useQualityOptions } from '../quality/use-quality-options';\nimport { MenuItemSettingContextProvider } from './context';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuItemSettingProviderProps {\n  type: MenuItemSettingType;\n  children: ReactNode;\n}\n\nfunction PlaybackRateMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const playbackRate = usePlaybackRateOptions();\n  if (!playbackRate) return children;\n\n  const { state, options, value } = playbackRate;\n  const label = options.find((option) => option.value === value)?.label ?? '';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'playback-rate', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction CaptionsMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const captions = useCaptionsOptions();\n  if (!captions) return children;\n\n  const { state, options, value } = captions;\n  const label =\n    value === CAPTIONS_OFF_VALUE ? 'Off' : (options.find((option) => option.value === value)?.label ?? 'Off');\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'captions', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction QualityMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const quality = useQualityOptions();\n  if (!quality) return children;\n\n  const { state, options, value } = quality;\n  const label = options.find((option) => option.value === value)?.label ?? 'Auto';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'quality', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nfunction AudioTrackMenuItemSettingProvider({ children }: { children: ReactNode }): ReactNode {\n  const audioTrack = useAudioTrackOptions();\n  if (!audioTrack) return children;\n\n  const { state, options, value } = audioTrack;\n  const label = options.find((option) => option.value === value)?.label ?? '';\n\n  return (\n    <MenuItemSettingContextProvider value={{ type: 'audio-track', label, availability: state.availability }}>\n      {children}\n    </MenuItemSettingContextProvider>\n  );\n}\n\nexport function MenuItemSettingProvider({ type, children }: MenuItemSettingProviderProps): ReactNode {\n  if (type === 'playback-rate')\n    return <PlaybackRateMenuItemSettingProvider>{children}</PlaybackRateMenuItemSettingProvider>;\n  if (type === 'quality') return <QualityMenuItemSettingProvider>{children}</QualityMenuItemSettingProvider>;\n  if (type === 'audio-track') return <AudioTrackMenuItemSettingProvider>{children}</AudioTrackMenuItemSettingProvider>;\n  if (type === 'captions') return <CaptionsMenuItemSettingProvider>{children}</CaptionsMenuItemSettingProvider>;\n  return children;\n}\n"],"mappings":";;;;;;;;;AAiBA,SAAS,oCAAoC,EAAE,YAAgD;CAC7F,MAAM,eAAe,wBAAwB;AAC7C,KAAI,CAAC,aAAc,QAAO;CAE1B,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAiB,OAHpD,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGA,cAAc,MAAM;GAAc;EACtG;EAC8B,CAAA;;AAIrC,SAAS,gCAAgC,EAAE,YAAgD;CACzF,MAAM,WAAW,oBAAoB;AACrC,KAAI,CAAC,SAAU,QAAO;CAEtB,MAAM,EAAE,OAAO,SAAS,UAAU;AAIlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAY,OAH3D,UAAU,qBAAqB,QAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGjC,cAAc,MAAM;GAAc;EACjG;EAC8B,CAAA;;AAIrC,SAAS,+BAA+B,EAAE,YAAgD;CACxF,MAAM,UAAU,mBAAmB;AACnC,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAW,OAH9C,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGN,cAAc,MAAM;GAAc;EAChG;EAC8B,CAAA;;AAIrC,SAAS,kCAAkC,EAAE,YAAgD;CAC3F,MAAM,aAAa,sBAAsB;AACzC,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,EAAE,OAAO,SAAS,UAAU;AAGlC,QACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAe,OAHlD,QAAQ,MAAM,WAAW,OAAO,UAAU,MAAM,EAAE,SAAS;GAGF,cAAc,MAAM;GAAc;EACpG;EAC8B,CAAA;;AAIrC,SAAgB,wBAAwB,EAAE,MAAM,YAAqD;AACnG,KAAI,SAAS,gBACX,QAAO,oBAAC,qCAAD,EAAsC,UAA+C,CAAA;AAC9F,KAAI,SAAS,UAAW,QAAO,oBAAC,gCAAD,EAAiC,UAA0C,CAAA;AAC1G,KAAI,SAAS,cAAe,QAAO,oBAAC,mCAAD,EAAoC,UAA6C,CAAA;AACpH,KAAI,SAAS,WAAY,QAAO,oBAAC,iCAAD,EAAkC,UAA2C,CAAA;AAC7G,QAAO"}

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

@@ -0,0 +1,28 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useOptionalMenuItemSettingContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/menu/menu-item-value.tsx
+/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */
+const MenuItemValue = forwardRef(function MenuItemValue({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useMenuContext();
+	const setting = useOptionalMenuItemSettingContext();
+	if (!setting) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			"aria-live": "off",
+			children: setting.label
+		}, elementProps]
+	});
+});
+//#endregion
+export { MenuItemValue };
+
+//# sourceMappingURL=menu-item-value.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-value.js","names":[],"sources":["../../../../src/ui/menu/menu-item-value.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, useOptionalMenuItemSettingContext } from './context';\n\nexport interface MenuItemValueProps extends UIComponentProps<'span', MenuState> {}\n\n/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */\nexport const MenuItemValue = forwardRef<HTMLSpanElement, MenuItemValueProps>(function MenuItemValue(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n  const setting = useOptionalMenuItemSettingContext();\n  if (!setting) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off' as const, children: setting.label }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemValue {\n  export type Props = MenuItemValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAAgD,SAAS,cACpF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;CAChD,MAAM,UAAU,mCAAmC;AACnD,KAAI,CAAC,QAAS,QAAO;AAErB,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAgB,UAAU,QAAQ;GAAO,EAAE,aAAa;EAChF,CACF;EACD"}

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

@@ -1,12 +1,14 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext, useSubMenuContext } from "./context.js";
+import { useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from "./context.js";
+import { MenuItemSettingProvider } from "./menu-item-setting-provider.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, onClick, ...elementProps }, forwardedRef) {
-	const { menu, state, stateAttrMap } = useMenuContext();
+const MenuItem = forwardRef(function MenuItem({ render, className, style, onSelect, disabled, type, onClick, ...elementProps }, forwardedRef) {
+	const { menu, state } = useMenuContext();
 	const parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
 	const elementRef = useRef(null);
 	useEffect(() => {
@@ -14,39 +16,58 @@ const MenuItem = forwardRef(function MenuItem({ render, className, style, onSele
 		if (!element) return;
 		return menu.registerItem(element);
 	}, [menu]);
-	const handleClick = useCallback((event) => {
-		if (disabled) return;
-		onClick?.(event);
-		onSelect?.();
-		completeMenuItemSelection(menu, parentMenu);
-	}, [
+	const item = /* @__PURE__ */ jsx(MenuItemContent, {
 		disabled,
-		onClick,
-		onSelect,
-		menu,
-		parentMenu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || disabled) return;
-		menu.highlight(element, { focus: false });
-	}, [menu, disabled]);
+		elementProps,
+		onClick: useCallback((event) => {
+			if (disabled) return;
+			onClick?.(event);
+			onSelect?.();
+			completeMenuItemSelection(menu, parentMenu);
+		}, [
+			disabled,
+			onClick,
+			onSelect,
+			menu,
+			parentMenu
+		]),
+		onPointerEnter: useCallback(() => {
+			const element = elementRef.current;
+			if (!element || disabled) return;
+			menu.highlight(element, { focus: false });
+		}, [menu, disabled]),
+		render,
+		className,
+		style,
+		state,
+		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,
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			role: "menuitem",
 			"aria-disabled": disabled ? true : void 0,
-			onClick: handleClick,
-			onPointerEnter: handlePointerEnter
+			onClick,
+			onPointerEnter,
+			...settingAttrs
 		}, elementProps]
 	});
-});
+}
 //#endregion
 export { MenuItem };
 

package/dist/default/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, useSubMenuContext } 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, stateAttrMap } = 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  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\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,OAAO,iBAAiB,gBAAgB;CAEtD,MAAM,aADa,mBAAmB,EACP,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,KAAK;AAE/C,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,cAAY;AACZ,4BAA0B,MAAM,WAAW;IAE7C;EAAC;EAAU;EAAS;EAAU;EAAM;EAAW,CAChD;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;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;GACjB,EACD,aACD;EACF,CACF;EACD"}
+{"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,gBAAgB;CAExC,MAAM,aADa,mBAAmB,EACP,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,KAAK,aAAa,QAAQ;IAChC,CAAC,KAAK,CAAC;CAkBV,MAAM,OACJ,oBAAC,iBAAD;EACY;EACI;EACd,SApBgB,aACjB,UAA4C;AAC3C,OAAI,SAAU;AACd,aAAU,MAAM;AAChB,eAAY;AACZ,6BAA0B,MAAM,WAAW;KAE7C;GAAC;GAAU;GAAS;GAAU;GAAM;GAAW,CAChD;EAaG,gBAXuB,kBAAkB;GAC3C,MAAM,UAAU,WAAW;AAC3B,OAAI,CAAC,WAAW,SAAU;AAC1B,QAAK,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;KACxC,CAAC,MAAM,SAAS,CAAC;EAQR;EACG;EACJ;EACA;EACO;EACF;EACZ,CAAA;AAGJ,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO,oBAAC,yBAAD;EAA+B;YAAO;EAA+B,CAAA;EAC5E;AAeF,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,MAAM,UAAU,mCAAmC;CACnD,MAAM,eAAe,UAAU,EAAE,qBAAqB,QAAQ,cAAc,GAAG,KAAA;AAE/E,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;GACA,GAAG;GACJ,EACD,aACD;EACF,CACF"}

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

@@ -1,13 +1,14 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
 import { MenuRadioGroupContextProvider, useMenuContext } from "./context.js";
+import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-radio-group.tsx
 /** A group of mutually exclusive radio items. Renders a `<div>` with `role="group"`. */
-const MenuRadioGroup = forwardRef(function MenuRadioGroup({ render, className, style, value, onValueChange, label, ...elementProps }, forwardedRef) {
-	const { state, stateAttrMap } = useMenuContext();
-	return /* @__PURE__ */ jsx(MenuRadioGroupContextProvider, {
+const MenuRadioGroup = forwardRef(function MenuRadioGroup({ render, className, style, value, onValueChange, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	return /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => /* @__PURE__ */ jsx(MenuRadioGroupContextProvider, {
 		value: {
 			value,
 			onValueChange
@@ -18,14 +19,10 @@ const MenuRadioGroup = forwardRef(function MenuRadioGroup({ render, className, s
 			style
 		}, {
 			state,
-			stateAttrMap,
 			ref: [forwardedRef],
-			props: [{
-				role: "group",
-				"aria-label": label
-			}, elementProps]
+			props: [getMenuGroupProps(labelId, elementProps), elementProps]
 		})
-	});
+	}) });
 });
 //#endregion
 export { MenuRadioGroup };

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';\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  /** Accessible label for the group. */\n  label?: string;\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, label, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n\n  return (\n    <MenuRadioGroupContextProvider value={{ value, onValueChange }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap,\n          ref: [forwardedRef],\n          props: [{ role: 'group' as const, 'aria-label': label }, elementProps],\n        }\n      )}\n    </MenuRadioGroupContextProvider>\n  );\n});\n\nexport namespace MenuRadioGroup {\n  export type Props = MenuRadioGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAmBA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,OAAO,eAAe,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;AAEhD,QACE,oBAAC,+BAAD;EAA+B,OAAO;GAAE;GAAO;GAAe;YAC3D,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,aAAa;GACnB,OAAO,CAAC;IAAE,MAAM;IAAkB,cAAc;IAAO,EAAE,aAAa;GACvE,CACF;EAC6B,CAAA;EAElC"}
+{"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"}

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

@@ -6,7 +6,7 @@ import { forwardRef, useCallback, useEffect, useRef } from "react";
 //#region src/ui/menu/menu-radio-item.tsx
 /** A radio-style menu item. Renders a `<div>` with `role="menuitemradio"`. */
 const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, style, value, disabled, onClick, ...elementProps }, forwardedRef) {
-	const { menu, state, stateAttrMap } = useMenuContext();
+	const { menu, state } = useMenuContext();
 	const { value: groupValue, onValueChange } = useMenuRadioGroupContext();
 	const parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
 	const elementRef = useRef(null);
@@ -40,7 +40,6 @@ const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, sty
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			role: "menuitemradio",

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, stateAttrMap } = 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      stateAttrMap,\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,OAAO,iBAAiB,gBAAgB;CACtD,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;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, 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"}