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

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

@@ -1,9 +1,11 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useButton } from "../hooks/use-button.js";
 import { useOptionalTooltipContext } from "../tooltip/context.js";
 import { selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useLayoutEffect, useState } from "react";
 import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
 //#region src/ui/live-button/live-button.tsx
@@ -18,8 +20,7 @@ const DISPLAY_NAME = "LiveButton";
 * itself rather than going through `createMediaButton`, since the LiveButton
 * needs three feature slices to detect the live edge and seek.
 *
-* Falls back to `LiveButtonCore.defaultText` (`'Live'` by default) when no
-* children are provided. Override the static field globally for i18n.
+* Displays the translated live badge when no children are provided.
 *
 * @example
 * ```tsx
@@ -41,6 +42,7 @@ const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef)
 		targetLiveWindow: live.targetLiveWindow
 	} : null;
 	const tooltipCtx = useOptionalTooltipContext();
+	const translator = useTranslator();
 	const [core] = useState(() => new LiveButtonCore());
 	core.setProps({
 		label,
@@ -55,7 +57,7 @@ const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef)
 	});
 	if (media) core.setMedia(media);
 	const state = media ? core.getState() : null;
-	const labelText = state ? core.getLabel(state) : void 0;
+	const labelText = state ? translateText(core.getLabel(state), translator) : void 0;
 	useLayoutEffect(() => {
 		if (!tooltipCtx) return;
 		tooltipCtx.setContent(labelText ? { label: labelText } : void 0);
@@ -63,7 +65,8 @@ const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef)
 	}, [tooltipCtx, labelText]);
 	if (!media || !state) return null;
 	const attrs = core.getAttrs(state);
-	const content = children ?? LiveButtonCore.defaultText;
+	const labelAttr = attrs["aria-label"];
+	const content = children ?? translateText(LiveButtonCore.defaultText, translator);
 	return renderElement("button", {
 		render,
 		className,
@@ -76,7 +79,8 @@ const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef)
 			attrs,
 			{
 				children: content,
-				...elementProps
+				...elementProps,
+				"aria-label": labelAttr ? translateText(labelAttr, translator) : labelAttr
 			},
 			getButtonProps()
 		]

package/dist/default/ui/live-button/live-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["'use client';\n\nimport { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when\n * pressed. Exposes `data-live` while the stream is live (or DVR) and\n * `data-live-edge` while playing at the live edge so skins can style a\n * red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them\n * itself rather than going through `createMediaButton`, since the LiveButton\n * needs three feature slices to detect the live edge and seek.\n *\n * Falls back to `LiveButtonCore.defaultText` (`'Live'` by default) when no\n * children are provided. Override the static field globally for i18n.\n *\n * @example\n * ```tsx\n * <LiveButton />\n * ```\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const [core] = useState(() => new LiveButtonCore());\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n    const state = media ? core.getState() : null;\n    const labelText = state ? core.getLabel(state) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const content = children ?? LiveButtonCore.defaultText;\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [attrs, { children: content, ...elementProps }, getButtonProps()],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;AAYA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;AAwBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;EACxB,GACD;CAEN,MAAM,aAAa,2BAA2B;CAC9C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;AAChB,OAAI,MAAO,MAAK,WAAW,MAAM;;EAEnC,kBAAkB,CAAC,CAAC,YAAY,CAAC;EAClC,CAAC;AAEF,KAAI,MAAO,MAAK,SAAS,MAAM;CAC/B,MAAM,QAAQ,QAAQ,KAAK,UAAU,GAAG;CACxC,MAAM,YAAY,QAAQ,KAAK,SAAS,MAAM,GAAG,KAAA;AAEjD,uBAAsB;AACpB,MAAI,CAAC,WAAY;AACjB,aAAW,WAAW,YAAY,EAAE,OAAO,WAAW,GAAG,KAAA,EAAU;AACnE,eAAa,WAAW,WAAW,KAAA,EAAU;IAC5C,CAAC,YAAY,UAAU,CAAC;AAE3B,KAAI,CAAC,SAAS,CAAC,MAEb,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,MAAM;CAClC,MAAM,UAAU,YAAY,eAAe;AAE3C,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;GAAO;IAAE,UAAU;IAAS,GAAG;IAAc;GAAE,gBAAgB;GAAC;EACzE,CACF;EAEJ;AAED,WAAW,cAAc"}
+{"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["'use client';\n\nimport { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when\n * pressed. Exposes `data-live` while the stream is live (or DVR) and\n * `data-live-edge` while playing at the live edge so skins can style a\n * red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them\n * itself rather than going through `createMediaButton`, since the LiveButton\n * needs three feature slices to detect the live edge and seek.\n *\n * Displays the translated live badge when no children are provided.\n *\n * @example\n * ```tsx\n * <LiveButton />\n * ```\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const translator = useTranslator();\n    const [core] = useState(() => new LiveButtonCore());\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n    const state = media ? core.getState() : null;\n    const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const labelAttr = attrs['aria-label'];\n    const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [\n          attrs,\n          {\n            children: content,\n            ...elementProps,\n            'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n          },\n          getButtonProps(),\n        ],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;AAuBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAC9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EACjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAEb,OAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}

package/dist/default/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  state: MenuState;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  /** ID of the currently visible submenu, or null when at root view. */\n  activeSubMenuId: string | null;\n  /** Triggerer ID of the active submenu entry (for focus restoration on pop). */\n  activeSubMenuTriggerId: string | null;\n  /** Direction of the most recent navigation. */\n  navigationDirection: 'forward' | 'back';\n  /** Push a submenu onto the navigation stack. */\n  push: (menuId: string, triggerId: string) => void;\n  /** Pop the current submenu from the navigation stack. */\n  pop: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-menu identity context — provided by a nested Menu.Root so child parts\n// (Trigger, Content) can read the submenu ID and access the parent menu for\n// push/pop and item registration.\n// ---------------------------------------------------------------------------\n\nexport interface SubMenuContextValue {\n  /** Stable ID for this submenu (matches the contentId of the nested Root). */\n  subMenuId: string;\n  /** The parent menu's context — used by Trigger to register and push. */\n  parentMenu: MenuContextValue;\n}\n\nconst SubMenuContext = createContext<SubMenuContextValue | null>(null);\n\nexport const SubMenuContextProvider = SubMenuContext.Provider;\n\nexport function useSubMenuContext(): SubMenuContextValue | null {\n  return useContext(SubMenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n\n// ---------------------------------------------------------------------------\n// Menu item setting context — provided by Menu.Item or Menu.Trigger when `type`\n// is set; consumed by Menu.ItemValue.\n// ---------------------------------------------------------------------------\n\nexport interface MenuItemSettingContextValue {\n  type: MenuItemSettingType;\n  label: string;\n  availability: 'available' | 'unavailable';\n}\n\nconst MenuItemSettingContext = createContext<MenuItemSettingContextValue | null>(null);\n\nexport const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;\n\nexport function useMenuItemSettingContext(): MenuItemSettingContextValue {\n  const ctx = useContext(MenuItemSettingContext);\n  if (!ctx) throw new Error('Menu.ItemValue must be used within a Menu.Item or Menu.Trigger with `type` set');\n  return ctx;\n}\n\nexport function useOptionalMenuItemSettingContext(): MenuItemSettingContextValue | null {\n  return useContext(MenuItemSettingContext);\n}\n"],"mappings":";;;AA6BA,MAAM,cAAc,cAAuC,KAAK;AAEhE,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,YAAY;AACnC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,QAAO;;AAGT,SAAgB,yBAAkD;AAChE,QAAO,WAAW,YAAY;;AAgBhC,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAgD;AAC9D,QAAO,WAAW,eAAe;;AAWnC,MAAM,mBAAmB,cAA4C,KAAK;AAE1E,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;AAClE,QAAO,WAAW,iBAAiB;;AAYrC,MAAM,wBAAwB,cAAiD,KAAK;AAEpF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,sBAAsB;AAC7C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,uDAAuD;AACjF,QAAO;;AAOT,MAAM,0BAA0B,cAAc,MAAM;AAEpD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;AAC5D,QAAO,WAAW,wBAAwB;;AAc5C,MAAM,yBAAyB,cAAkD,KAAK;AAEtF,MAAa,iCAAiC,uBAAuB;AAQrE,SAAgB,oCAAwE;AACtF,QAAO,WAAW,uBAAuB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  stateAttrMap: StateAttrMap<MenuState>;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  /** ID of the currently visible submenu, or null when at root view. */\n  activeSubMenuId: string | null;\n  /** Triggerer ID of the active submenu entry (for focus restoration on pop). */\n  activeSubMenuTriggerId: string | null;\n  /** Direction of the most recent navigation. */\n  navigationDirection: 'forward' | 'back';\n  /** Push a submenu onto the navigation stack. */\n  push: (menuId: string, triggerId: string) => void;\n  /** Pop the current submenu from the navigation stack. */\n  pop: () => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n  return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Sub-menu identity context — provided by a nested Menu.Root so child parts\n// (Trigger, Content) can read the submenu ID and access the parent menu for\n// push/pop and item registration.\n// ---------------------------------------------------------------------------\n\nexport interface SubMenuContextValue {\n  /** Stable ID for this submenu (matches the contentId of the nested Root). */\n  subMenuId: string;\n  /** The parent menu's context — used by Trigger to register and push. */\n  parentMenu: MenuContextValue;\n}\n\nconst SubMenuContext = createContext<SubMenuContextValue | null>(null);\n\nexport const SubMenuContextProvider = SubMenuContext.Provider;\n\nexport function useSubMenuContext(): SubMenuContextValue | null {\n  return useContext(SubMenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n\n// ---------------------------------------------------------------------------\n// Menu item setting context — provided by Menu.Item or Menu.Trigger when `type`\n// is set; consumed by Menu.ItemValue.\n// ---------------------------------------------------------------------------\n\nexport interface MenuItemSettingContextValue {\n  type: MenuItemSettingType;\n  label: string;\n  availability: 'available' | 'unavailable';\n}\n\nconst MenuItemSettingContext = createContext<MenuItemSettingContextValue | null>(null);\n\nexport const MenuItemSettingContextProvider = MenuItemSettingContext.Provider;\n\nexport function useMenuItemSettingContext(): MenuItemSettingContextValue {\n  const ctx = useContext(MenuItemSettingContext);\n  if (!ctx) throw new Error('Menu.ItemValue must be used within a Menu.Item or Menu.Trigger with `type` set');\n  return ctx;\n}\n\nexport function useOptionalMenuItemSettingContext(): MenuItemSettingContextValue | null {\n  return useContext(MenuItemSettingContext);\n}\n"],"mappings":";;;AA+BA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;AAE/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CACpF,OAAO;AACT;AAEA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAeA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAgD;CAC9D,OAAO,WAAW,cAAc;AAClC;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAChF,OAAO;AACT;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C;AAaA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,MAAa,iCAAiC,uBAAuB;AAQrE,SAAgB,oCAAwE;CACtF,OAAO,WAAW,sBAAsB;AAC1C"}

package/dist/default/ui/menu/index.parts.js

@@ -31,6 +31,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	View: () => MenuView
 });
 //#endregion
-export { index_parts_exports };
+export { MenuBack as Back, MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemValue as ItemValue, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, MenuView as View, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1,10 +1,14 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSubMenuContext } from "./context.js";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useCallback } from "react";
+import { backText } from "@videojs/core/i18n/text/menu";
 //#region src/ui/menu/menu-back.tsx
 /** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */
-const MenuBack = forwardRef(function MenuBack({ render, className, style, label = "Back", onClick, ...elementProps }, forwardedRef) {
+const MenuBack = forwardRef(function MenuBack({ render, className, style, label = backText, onClick, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
 	const parentMenu = useSubMenuContext()?.parentMenu ?? null;
 	const handleClick = useCallback((event) => {
 		onClick?.(event);
@@ -19,7 +23,7 @@ const MenuBack = forwardRef(function MenuBack({ render, className, style, label
 		ref: forwardedRef,
 		props: [{
 			type: "button",
-			"aria-label": label,
+			"aria-label": translateText(label, t),
 			onClick: handleClick
 		}, elementProps]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"menu-back.js","names":[],"sources":["../../../../src/ui/menu/menu-back.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSubMenuContext } from './context';\n\nexport interface MenuBackProps extends UIComponentProps<'button', MenuState> {\n  /** Accessible label for the back button. */\n  label?: string;\n}\n\n/** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */\nexport const MenuBack = forwardRef<HTMLButtonElement, MenuBackProps>(function MenuBack(\n  { render, className, style, label = 'Back', onClick, ...elementProps },\n  forwardedRef\n) {\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      parentMenu?.pop();\n    },\n    [onClick, parentMenu]\n  );\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: parentMenu?.state ?? ({} as MenuState),\n      ref: forwardedRef,\n      props: [\n        {\n          type: 'button' as const,\n          'aria-label': label,\n          onClick: handleClick,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuBack {\n  export type Props = MenuBackProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAeA,MAAa,WAAW,WAA6C,SAAS,SAC5E,EAAE,QAAQ,WAAW,OAAO,QAAQ,QAAQ,SAAS,GAAG,gBACxD,cACA;CAEA,MAAM,aADa,mBAAmB,EACP,cAAc;CAE7C,MAAM,cAAc,aACjB,UAA+C;AAC9C,YAAU,MAAM;AAChB,cAAY,KAAK;IAEnB,CAAC,SAAS,WAAW,CACtB;AAED,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,YAAY,SAAU,EAAE;EAC/B,KAAK;EACL,OAAO,CACL;GACE,MAAM;GACN,cAAc;GACd,SAAS;GACV,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"menu-back.js","names":[],"sources":["../../../../src/ui/menu/menu-back.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { backText } from '@videojs/core/i18n/text/menu';\nimport { forwardRef, useCallback } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSubMenuContext } from './context';\n\nexport interface MenuBackProps extends UIComponentProps<'button', MenuState> {\n  /** Accessible label for the back button. */\n  label?: Text | string;\n}\n\n/** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */\nexport const MenuBack = forwardRef<HTMLButtonElement, MenuBackProps>(function MenuBack(\n  { render, className, style, label = backText, onClick, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      parentMenu?.pop();\n    },\n    [onClick, parentMenu]\n  );\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state: parentMenu?.state ?? ({} as MenuState),\n      ref: forwardedRef,\n      props: [\n        {\n          type: 'button' as const,\n          'aria-label': translateText(label, t),\n          onClick: handleClick,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuBack {\n  export type Props = MenuBackProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,WAAW,WAA6C,SAAS,SAC5E,EAAE,QAAQ,WAAW,OAAO,QAAQ,UAAU,SAAS,GAAG,gBAC1D,cACA;CACA,MAAM,IAAI,cAAc;CAExB,MAAM,aADa,kBACS,CAAC,EAAE,cAAc;CAE7C,MAAM,cAAc,aACjB,UAA+C;EAC9C,UAAU,KAAK;EACf,YAAY,IAAI;CAClB,GACA,CAAC,SAAS,UAAU,CACtB;CAEA,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO,YAAY,SAAU,CAAC;EAC9B,KAAK;EACL,OAAO,CACL;GACE,MAAM;GACN,cAAc,cAAc,OAAO,CAAC;GACpC,SAAS;EACX,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\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 MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, 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      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\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: 'menuitemcheckbox' 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 MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,gBAAgB;CACxC,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,kBAAgB,CAAC,QAAQ;IAE3B;EAAC;EAAU;EAAS;EAAiB;EAAQ,CAC9C;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,SAAU;AAC1B,OAAK,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACxC,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;GACjB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"menu-checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\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 MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, 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      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\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: 'menuitemcheckbox' 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 MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAmBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,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;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;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"}

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

@@ -2,11 +2,11 @@
 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, observeMenuViewContent, resolveOffsets, resolvePositioningBoundary, syncMenuViewRoot, syncMenuViewTransition } from "@videojs/core/dom";
+import { createMenuViewTransition, getAnchorPositionStyle, getMenuViewTransitionAttrs, getMenuViewportAttrs, getMenuViewportElement, getPopupPositionRect, getPositionedSide, 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 { PopoverCSSVars } from "@videojs/core";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/menu-content.tsx
 const POPOVER_RESET = {
@@ -69,7 +69,7 @@ function callKeyDownHandler(handler, event) {
 }
 /** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */
 const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
-	const { core, menu, state, stateAttrMap, anchorName, contentId, boundary, container, activeSubMenuId } = useMenuContext();
+	const { core, menu, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, contentId, boundary, container, activeSubMenuId } = useMenuContext();
 	const subMenuCtx = useSubMenuContext();
 	const isSubmenu = state.isSubmenu;
 	const parentMenu = subMenuCtx?.parentMenu ?? null;
@@ -149,7 +149,7 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		anchorName
 	]), internalRef);
 	const menuViewComposedRef = useComposedRefs(forwardedRef, setMenuViewElement);
-	const positionOptions = useMemo(() => getRootPositionOptions(state.side, state.align), [state.side, state.align]);
+	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
 	const anchorStyle = useMemo(() => {
 		if (isSubmenu || !positionOptions || !supportsAnchorPositioning()) return null;
 		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, positionOptions);
@@ -159,7 +159,7 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		anchorName,
 		positionOptions
 	]);
-	const [manualStyle, setManualStyle] = useState(null);
+	const [position, setPosition] = useState(null);
 	useLayoutEffect(() => {
 		if (isSubmenu) return;
 		if (!state.open) return;
@@ -183,7 +183,7 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 	useLayoutEffect(() => {
 		if (isSubmenu) return;
 		if (!state.open) {
-			setManualStyle(null);
+			setPosition(null);
 			return;
 		}
 		if (!positionOptions) {
@@ -196,20 +196,33 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 			const contentElement = internalRef.current;
 			if (!triggerElement || !contentElement) return;
 			const triggerRect = triggerElement.getBoundingClientRect();
+			const root = contentElement.getRootNode();
 			const boundaryElement = resolvePositioningBoundary(boundary, {
 				container,
-				root: contentElement.getRootNode()
+				root
 			});
 			const anchorSupported = supportsAnchorPositioning();
-			const contentRect = anchorSupported ? void 0 : getPopupPositionRect(contentElement);
+			let contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);
 			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
 			const offsets = resolveOffsets(contentElement);
-			let nextStyle = getAnchorPositionStyle(anchorName, rootPositionOptions, triggerRect, contentRect, boundaryRect, offsets);
+			let side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);
+			let nextStyle = getAnchorPositionStyle(anchorName, {
+				...rootPositionOptions,
+				side
+			}, triggerRect, anchorSupported ? void 0 : 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);
+			if (!anchorSupported) {
+				contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);
+				side = getPositionedSide(triggerRect, contentRect, boundaryRect, rootPositionOptions, offsets);
+				nextStyle = getAnchorPositionStyle(anchorName, {
+					...rootPositionOptions,
+					side
+				}, triggerRect, contentRect, boundaryRect, offsets);
+			}
 			const { positionAnchor: _, ...rootStyle } = nextStyle;
-			setManualStyle(rootStyle);
+			setPosition(rootStyle);
+			setPositionedSide(side);
 		}
 		measure();
 		const triggerElement = menu.triggerElement;
@@ -247,7 +260,8 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		positionOptions,
 		menu,
 		boundary,
-		container
+		container,
+		setPositionedSide
 	]);
 	if (isSubmenu) {
 		if (menuViewTransitionState.phase === "hidden") return null;
@@ -283,7 +297,7 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		props: [
 			{
 				id: contentId,
-				style: manualStyle ?? anchorStyle ?? POPOVER_RESET,
+				style: position ?? anchorStyle ?? POPOVER_RESET,
 				...core.getContentAttrs(state),
 				...getMenuViewportAttrs()
 			},

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, 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":";;;;;;;;;;;AAmCA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;AACpF,MAAM,4CAA4B,IAAI,SAAgB;AAEtD,SAAS,kBAAkB,OAA6D;AACtF,QAAO;EACL,IAAI,mBAAmB;AACrB,UAAO,MAAM;;EAEf,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ,MAAM,kBAAkB,OAAO,MAAM,SAAS,MAAM;EAC5D,eAAe,MAAM;EACrB,sBAAsB,MAAM,gBAAgB;EAC5C,uBAAuB,MAAM,iBAAiB;EAC/C;;AAGH,SAAS,eAAe,OAAuD;AAC7E,QAAO;EACL,IAAI,mBAAmB;AACrB,UAAO,MAAM;;EAEf,eAAe,MAAM;EACrB,sBAAsB,MAAM,gBAAgB;EAC5C,uBAAuB,MAAM,iBAAiB;EAC/C;;AAGH,SAAS,sBAAsB,OAAkD;CAC/E,MAAM,gBAAgB,kBAAkB,MAAM;AAE9C,KAAI,MAAM,QAAQ,YAAY,oBAAoB,cAAc,IAAI,CAAC,MAAM,kBAAkB;AAC3F,QAAM,gBAAgB;AACtB,4BAA0B,IAAI,MAAM,YAAY;;;AAIpD,SAAS,0BAA0B,OAAqD;AACtF,QAAO,0BAA0B,IAAI,MAAM,YAAY;;AAGzD,SAAS,mBACP,SACA,OACS;CACT,MAAM,gCAAgC,MAAM,oBAAoB,CAAC,0BAA0B,MAAM;AAEjG,KAAI,CAAC,QAAS,QAAO;CAErB,IAAI,4BAA4B;CAChC,MAAM,iBAAiB,MAAM;AAI7B,OAAM,uBAAuB;AAC3B,8BAA4B;AAC5B,iBAAe,KAAK,MAAM;;AAG5B,KAAI;AACF,UAAQ,MAAM;WACN;AACR,QAAM,iBAAiB;;AAGzB,QAAO,iCAAiC;;;AAI1C,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,OAAO,cAAc,YAAY,WAAW,UAAU,WAAW,oBACnF,gBAAgB;CAClB,MAAM,aAAa,mBAAmB;CACtC,MAAM,YAAY,MAAM;CAExB,MAAM,aAAa,YAAY,cAAc;CAC7C,MAAM,YAAY,YAAY,aAAa;CAE3C,MAAM,WACJ,aAAa,eAAe,QAAQ,cAAc,OAAO,WAAW,oBAAoB,YAAY;CAEtG,MAAM,CAAC,sBAAsB,eAC3B,yBAAyB;EACvB,iBAAiB;AACf,QAAK,mBAAmB,EAAE,eAAe,MAAM,CAAC;;EAElD,aAAa,WAAW;AACtB,OAAI,UACF,UAAS,eAAe,UAAU,EAAE,MAAM,EAAE,eAAe,MAAM,CAAC;;EAGvE,CAAC,CACH;CACD,MAAM,0BAA0B,YAAY,mBAAmB,MAAM;CACrE,MAAM,qBAAqB,OAA8B,KAAK;CAC9D,MAAM,0BAA0B,OAA2B,KAAK;CAChE,MAAM,qBAAqB,OAAO,gBAAgB;AAElD,oBAAmB,UAAU;AAE7B,uBAAsB;AACpB,eAAa,mBAAmB,SAAS;IACxC,CAAC,mBAAmB,CAAC;AAExB,uBAAsB;AACpB,MAAI,CAAC,UAAW;AAEhB,qBAAmB,KAAK;GACtB,QAAQ;GACR,WAAW,YAAY,uBAAuB;GAC9C,WAAW,YAAY,0BAA0B;GAClD,CAAC;IACD;EAAC;EAAU;EAAW;EAAY;EAAmB,CAAC;CAEzD,MAAM,qBAAqB,aACxB,YAAmC;AAClC,qBAAmB,UAAU;AAC7B,OAAK,kBAAkB,QAAQ;AAC/B,qBAAmB,WAAW,QAAQ;IAExC,CAAC,MAAM,mBAAmB,CAC3B;CAED,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,MACD;EACD,MAAM,gBAAgB,kBAAkB,MAAM;EAC9C,MAAM,kBAAkB,oBAAoB,cAAc;AAC1D,OAAK,aAAa,UAAU,cAAc;EAC1C,MAAM,sBAAsB,MAAM,QAAQ,eAAe,MAAM,QAAQ;EAEvE,MAAM,oBACJ,eAAe,QACf,cAAc,QACd,WAAW,KAAK,gBAAgB,QAAQ,MAAM,WAAW,KAAK,gBAAgB,QAAQ,MAAM,SAAS,IACjG,WAAW;AAEjB,MAAI,uBAAuB,qBAAqB,CAAC,wBAAwB;AACvE,SAAM,gBAAgB;AACtB,cAAW,KAAK;;AAGlB,MAAI,oBAAoB,CAAC,uBAAuB,mBAC9C,OAAM,iBAAiB;IAG3B;EAAC;EAAW;EAAY;EAAW;EAAK,CACzC;CAED,MAAM,wBAAwB,aAC3B,UAA+C;AAC7C,cAAuE,MAAM;EAC9E,MAAM,gBAAgB,kBAAkB,MAAM;AAC9C,OAAK,aAAa,UAAU,cAAc;AAC1C,MAAI,MAAM,QAAQ,SAAU;AAC5B,MAAI,oBAAoB,cAAc,CACpC,OAAM,iBAAiB;IAG3B,CAAC,WAAW,KAAK,CAClB;CAED,MAAM,qBAAqB,aACxB,UAA4C;AAC1C,WAAiE,MAAM;AACxE,OAAK,aAAa,WAAW,eAAe,MAAM,CAAC;IAErD,CAAC,QAAQ,KAAK,CACf;CAGD,MAAM,cAAc,OAAuB,KAAK;CAahD,MAAM,kBAAkB,gBAAgB,cAXrB,aAChB,YAAmC;AAClC,MAAI,UAAW;AACf,OAAK,kBAAkB,QAAQ;AAC/B,MAAI,WAAW,2BAA2B,CACxC,SAAQ,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAGnE;EAAC;EAAW;EAAM;EAAW,CAC9B,EAEiE,YAAY;CAC9E,MAAM,sBAAsB,gBAAgB,cAAc,mBAAmB;CAE7E,MAAM,kBAAkB,cAAc,uBAAuB,MAAM,MAAM,MAAM,MAAM,EAAE,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAEjH,MAAM,cAAc,cAAc;AAChC,MAAI,aAAa,CAAC,mBAAmB,CAAC,2BAA2B,CAAE,QAAO;EAC1E,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,gBAAgB;AAC1F,SAAO;IACN;EAAC;EAAW;EAAY;EAAgB,CAAC;CAE5C,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,UAAW;AACf,MAAI,CAAC,MAAM,KAAM;AAEjB,mBAAiB,YAAY,SAAS,oBAAoB,KAAK;EAE/D,MAAM,iBAAiB,YAAY;AACnC,MAAI,CAAC,eAAgB;AAErB,SAAO,uBAAuB,sBAAsB;AAClD,oBAAiB,gBAAgB,oBAAoB,KAAK;IAC1D;IACD;EAAC;EAAW,MAAM;EAAM;EAAgB,CAAC;AAE5C,uBAAsB;AACpB,MAAI,CAAC,UAAW;EAEhB,MAAM,uBAAuB,YAAY,KAAK,kBAAkB,wBAAwB;AACxF,0BAAwB,UAAU;AAClC,yBAAuB,sBAAsB,mBAAmB,SAAS,wBAAwB;GACjG;AAEF,uBAAsB;AACpB,MAAI,UAAW;AACf,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;AAGF,MAAI,CAAC,iBAAiB;AACpB,oBAAiB,YAAY,SAAS,mBAAmB,YAAY,KAAK;AAC1E;;EAGF,MAAM,sBAAsB;EAE5B,SAAS,UAAgB;GACvB,MAAM,iBAAiB,KAAK;GAC5B,MAAM,iBAAiB,YAAY;AACnC,OAAI,CAAC,kBAAkB,CAAC,eAAgB;GAExC,MAAM,cAAc,eAAe,uBAAuB;GAE1D,MAAM,kBAAkB,2BAA2B,UAAU;IAAE;IAAW,MAD7D,eAAe,aAAa;IACuC,CAAC;GACjF,MAAM,kBAAkB,2BAA2B;GACnD,MAAM,cAAc,kBAAkB,KAAA,IAAY,qBAAqB,eAAe;GACtF,MAAM,eAAe,2BAA2B,gBAAgB;GAChE,MAAM,UAAU,eAAe,eAAe;GAE9C,IAAI,YAAY,uBACd,YACA,qBACA,aACA,aACA,cACA,QACD;GAED,MAAM,iBAAiB,UAAU,eAAe;AAChD,oBACE,gBACA,mBAAmB,YAAY,MAC/B,iBAAiB,EAAE,gBAAgB,GAAG,KAAA,EACvC;AAED,OAAI,CAAC,gBACH,aAAY,uBACV,YACA,qBACA,aACA,qBAAqB,eAAe,EACpC,cACA,QACD;GAGH,MAAM,EAAE,gBAAgB,GAAG,GAAG,cAAc;AAE5C,kBAAe,UAA2B;;AAG5C,WAAS;EAET,MAAM,iBAAiB,KAAK;EAC5B,MAAM,iBAAiB,YAAY;EACnC,MAAM,kBAAkB,iBACpB,2BAA2B,UAAU;GACnC;GACA,MAAM,eAAe,aAAa;GACnC,CAAC,GACF;EAEJ,IAAI,mBAAmB;EACvB,SAAS,WAAW,OAAqB;AACvC,OAAI,SAAS,qBAAqB,OAAO,YAAY,QAAQ,CAAE;AAE/D,wBAAqB,iBAAiB;AACtC,sBAAmB,sBAAsB,QAAQ;;AAGnD,cAAY;EAEZ,MAAM,iBAAiB,OAAO,mBAAmB,aAAa,IAAI,qBAAqB,YAAY,CAAC,GAAG;AAEvG,MAAI,kBAAkB,eAAgB,gBAAe,QAAQ,eAAe;AAC5E,MAAI,kBAAkB,eAAgB,gBAAe,QAAQ,eAAe;AAC5E,MAAI,mBAAmB,eAAgB,gBAAe,QAAQ,gBAAgB;AAE9E,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,iBAAiB;AACtC,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC;EAAW,MAAM;EAAM;EAAY;EAAiB;EAAM;EAAU;EAAU,CAAC;AAInF,KAAI,WAAW;AACb,MAAI,wBAAwB,UAAU,SAAU,QAAO;EAEvD,MAAM,iBAAiB,cACrB,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,KAAK;GACL,OAAO,CACL;IACE,GAAG,2BAA2B,wBAAwB;IACtD,MAAM;IACN,UAAU;IACV,gBAAgB;IAChB,kBAAkB;IAClB,WAAW;IACX;IACD,EACD,aACD;GACF,CACF;EAID,MAAM,wBAAwB,uBAFD,YAAY,KAAK,kBAAkB,wBAAwB,QAEd;AAE1E,SAAO,wBAAwB,aAAa,gBAAgB,sBAAsB,GAAG;;AAGvF,KAAI,CAAC,MAAM,KAAM,QAAO;AAIxB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAZiB,eAAe,eAAe;IAa/C,GAAG,KAAK,gBAAgB,MAAM;IAC9B,GAAG,sBAAsB;IAC1B;GACD;IAAE,kBAAkB;IAAuB,WAAW;IAAuB,QAAQ;IAAoB;GACzG;GACD;EACF,CACF;EACD"}
+{"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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"}

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

@@ -1 +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"}
+{"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,eAAe;CACjC,MAAM,QAAQ,oBAAoB;CAClC,MAAM,cAAc,UAAU,kBAAkB;CAChD,MAAM,KAAK,UAAU;CAErB,sBAAsB;EACpB,OAAO,OAAO,cAAc,EAAE;CAChC,GAAG,CAAC,OAAO,EAAE,CAAC;CAEd,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,GAAG,GAAG,YAAY;CAC9B,CACF;AACF,CAAC"}

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';\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"}
+{"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,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;CAChE,CACF,EAEe,CAAA;AAEvB,CAAC"}

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 } = 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"}
+{"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,eAAe;CAEjC,IAAI,CAAC,WAAW,CAAC,YAAY,OAAO;CAEpC,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}

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

@@ -1,11 +1,14 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 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 { translateText } from "@videojs/core/i18n";
 import { jsx } from "react/jsx-runtime";
 import { CAPTIONS_OFF_VALUE } from "@videojs/core";
+import { autoText, offText } from "@videojs/core/i18n/text/menu";
 //#region src/ui/menu/menu-item-setting-provider.tsx
 function PlaybackRateMenuItemSettingProvider({ children }) {
 	const playbackRate = usePlaybackRateOptions();
@@ -22,12 +25,13 @@ function PlaybackRateMenuItemSettingProvider({ children }) {
 }
 function CaptionsMenuItemSettingProvider({ children }) {
 	const captions = useCaptionsOptions();
+	const t = useTranslator();
 	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",
+			label: value === CAPTIONS_OFF_VALUE ? translateText(offText, t) : options.find((option) => option.value === value)?.label ?? translateText(offText, t),
 			availability: state.availability
 		},
 		children
@@ -35,12 +39,13 @@ function CaptionsMenuItemSettingProvider({ children }) {
 }
 function QualityMenuItemSettingProvider({ children }) {
 	const quality = useQualityOptions();
+	const t = useTranslator();
 	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",
+			label: options.find((option) => option.value === value)?.label ?? translateText(autoText, t),
 			availability: state.availability
 		},
 		children

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

@@ -1 +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"}
+{"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 { translateText } from '@videojs/core/i18n';\nimport { autoText, offText } from '@videojs/core/i18n/text/menu';\nimport type { ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\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  const t = useTranslator();\n  if (!captions) return children;\n\n  const { state, options, value } = captions;\n  const label =\n    value === CAPTIONS_OFF_VALUE\n      ? translateText(offText, t)\n      : (options.find((option) => option.value === value)?.label ?? translateText(offText, t));\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  const t = useTranslator();\n  if (!quality) return children;\n\n  const { state, options, value } = quality;\n  const label = options.find((option) => option.value === value)?.label ?? translateText(autoText, t);\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":";;;;;;;;;;;;AAoBA,SAAS,oCAAoC,EAAE,YAAgD;CAC7F,MAAM,eAAe,uBAAuB;CAC5C,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,SAAS,UAAU;CAGlC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAiB,OAHpD,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,CAAC,EAAE,SAAS;GAGA,cAAc,MAAM;EAAa;EACrG;CAC6B,CAAA;AAEpC;AAEA,SAAS,gCAAgC,EAAE,YAAgD;CACzF,MAAM,WAAW,mBAAmB;CACpC,MAAM,IAAI,cAAc;CACxB,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,SAAS,UAAU;CAMlC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAY,OAL3D,UAAU,qBACN,cAAc,SAAS,CAAC,IACvB,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,CAAC,EAAE,SAAS,cAAc,SAAS,CAAC;GAGtB,cAAc,MAAM;EAAa;EAChG;CAC6B,CAAA;AAEpC;AAEA,SAAS,+BAA+B,EAAE,YAAgD;CACxF,MAAM,UAAU,kBAAkB;CAClC,MAAM,IAAI,cAAc;CACxB,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,SAAS,UAAU;CAGlC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAW,OAH9C,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,CAAC,EAAE,SAAS,cAAc,UAAU,CAAC;GAG/B,cAAc,MAAM;EAAa;EAC/F;CAC6B,CAAA;AAEpC;AAEA,SAAS,kCAAkC,EAAE,YAAgD;CAC3F,MAAM,aAAa,qBAAqB;CACxC,IAAI,CAAC,YAAY,OAAO;CAExB,MAAM,EAAE,OAAO,SAAS,UAAU;CAGlC,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE,MAAM;GAAe,OAHlD,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,CAAC,EAAE,SAAS;GAGF,cAAc,MAAM;EAAa;EACnG;CAC6B,CAAA;AAEpC;AAEA,SAAgB,wBAAwB,EAAE,MAAM,YAAqD;CACnG,IAAI,SAAS,iBACX,OAAO,oBAAC,qCAAD,EAAsC,SAA8C,CAAA;CAC7F,IAAI,SAAS,WAAW,OAAO,oBAAC,gCAAD,EAAiC,SAAyC,CAAA;CACzG,IAAI,SAAS,eAAe,OAAO,oBAAC,mCAAD,EAAoC,SAA4C,CAAA;CACnH,IAAI,SAAS,YAAY,OAAO,oBAAC,iCAAD,EAAkC,SAA0C,CAAA;CAC5G,OAAO;AACT"}

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

@@ -1 +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"}
+{"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,eAAe;CAC/C,MAAM,UAAU,kCAAkC;CAClD,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAgB,UAAU,QAAQ;EAAM,GAAG,YAAY;CAChF,CACF;AACF,CAAC"}

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

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

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