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

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

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

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

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

@@ -0,0 +1,77 @@
+"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();
+	if (!playbackRate) return children;
+	const { state, options, value } = playbackRate;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "playback-rate",
+			label: options.find((option) => option.value === value)?.label ?? "",
+			availability: state.availability
+		},
+		children
+	});
+}
+function CaptionsMenuItemSettingProvider({ children }) {
+	const captions = useCaptionsOptions();
+	const t = useTranslator();
+	if (!captions) return children;
+	const { state, options, value } = captions;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "captions",
+			label: value === CAPTIONS_OFF_VALUE ? translateText(offText, t) : options.find((option) => option.value === value)?.label ?? translateText(offText, t),
+			availability: state.availability
+		},
+		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 ?? translateText(autoText, t),
+			availability: state.availability
+		},
+		children
+	});
+}
+function AudioTrackMenuItemSettingProvider({ children }) {
+	const audioTrack = useAudioTrackOptions();
+	if (!audioTrack) return children;
+	const { state, options, value } = audioTrack;
+	return /* @__PURE__ */ jsx(MenuItemSettingContextProvider, {
+		value: {
+			type: "audio-track",
+			label: options.find((option) => option.value === value)?.label ?? "",
+			availability: state.availability
+		},
+		children
+	});
+}
+function MenuItemSettingProvider({ type, children }) {
+	if (type === "playback-rate") return /* @__PURE__ */ jsx(PlaybackRateMenuItemSettingProvider, { children });
+	if (type === "quality") return /* @__PURE__ */ jsx(QualityMenuItemSettingProvider, { children });
+	if (type === "audio-track") return /* @__PURE__ */ jsx(AudioTrackMenuItemSettingProvider, { children });
+	if (type === "captions") return /* @__PURE__ */ jsx(CaptionsMenuItemSettingProvider, { children });
+	return children;
+}
+//#endregion
+export { MenuItemSettingProvider };
+
+//# sourceMappingURL=menu-item-setting-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-setting-provider.js","names":[],"sources":["../../../../src/ui/menu/menu-item-setting-provider.tsx"],"sourcesContent":["'use client';\n\nimport { CAPTIONS_OFF_VALUE } from '@videojs/core';\nimport { 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/dev/ui/menu/menu-item-type.d.ts

@@ -0,0 +1,5 @@
+//#region src/ui/menu/menu-item-type.d.ts
+type MenuItemSettingType = 'playback-rate' | 'quality' | 'audio-track' | 'captions';
+//#endregion
+export { MenuItemSettingType };
+//# sourceMappingURL=menu-item-type.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-type.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-type.ts"],"mappings":";KAAY"}

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

@@ -0,0 +1,12 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/menu-item-value.d.ts
+interface MenuItemValueProps extends UIComponentProps<'span', MenuState> {}
+/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */
+declare const MenuItemValue: import("react").ForwardRefExoticComponent<Omit<MenuItemValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace MenuItemValue {
+  type Props = MenuItemValueProps;
+}
+//#endregion
+export { MenuItemValue, MenuItemValueProps };
+//# sourceMappingURL=menu-item-value.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-value.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-value.tsx"],"mappings":";;;UASiB,2BAA2B,yBAAyB;;cAGxD,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAoBT;OACH,QAAQ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-value.js","names":[],"sources":["../../../../src/ui/menu/menu-item-value.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuItemSettingContext } from './context';\n\nexport interface MenuItemValueProps extends UIComponentProps<'span', MenuState> {}\n\n/** Displays the current value for a settings menu item from `Menu.Item` or `Menu.Trigger` context. */\nexport const MenuItemValue = forwardRef<HTMLSpanElement, MenuItemValueProps>(function MenuItemValue(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n  const setting = useOptionalMenuItemSettingContext();\n  if (!setting) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off' as const, children: setting.label }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemValue {\n  export type Props = MenuItemValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAAgD,SAAS,cACpF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,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/dev/ui/menu/menu-item.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"mappings":";;;;;UAUiB,aAAA,SAAsB,gBAAA,QAAwB,SAAA;;EAE7D,QAAA;EAFe;EAIf,QAAA;AAAA;;cAIW,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,aAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAmDJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"mappings":";;;;UAYiB,sBAAsB,wBAAwB;;EAE7D;;EAEA;;EAEA,OAAO;;;cAII,0BAAQ,0BAAA,KAAA,wCAAA,cAAA;kBAmGJ;OACH,QAAQ;OACR,QAAQ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useSubMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n  /** Called when the item is selected. */\n  onSelect?: () => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { render, className, style, onSelect, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state, stateAttrMap } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onSelect?.();\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onSelect, menu, parentMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,OAAO,iBAAiB,gBAAgB;CAEtD,MAAM,aADa,mBAAmB,EACP,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,KAAK;AAE/C,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,KAAK,aAAa,QAAQ;IAChC,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,aACjB,UAA4C;AAC3C,MAAI,SAAU;AACd,YAAU,MAAM;AAChB,cAAY;AACZ,4BAA0B,MAAM,WAAW;IAE7C;EAAC;EAAU;EAAS;EAAU;EAAM;EAAW,CAChD;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,SAAU;AAC1B,OAAK,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACxC,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;GACjB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n  /** Called when the item is selected. */\n  onSelect?: () => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */\n  type?: MenuItemSettingType | undefined;\n}\n\n/** A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { render, className, style, onSelect, disabled, type, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onSelect?.();\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onSelect, menu, parentMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  const item = (\n    <MenuItemContent\n      disabled={disabled}\n      elementProps={elementProps}\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      render={render}\n      className={className}\n      style={style}\n      state={state}\n      forwardedRef={forwardedRef}\n      elementRef={elementRef}\n    />\n  );\n\n  if (!type) return item;\n\n  return <MenuItemSettingProvider type={type}>{item}</MenuItemSettingProvider>;\n});\n\ninterface MenuItemContentProps {\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n  render: MenuItemProps['render'];\n  className: MenuItemProps['className'];\n  style: MenuItemProps['style'];\n  state: MenuState;\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n  elementRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction MenuItemContent({\n  disabled,\n  elementProps,\n  onClick,\n  onPointerEnter,\n  render,\n  className,\n  style,\n  state,\n  forwardedRef,\n  elementRef,\n}: MenuItemContentProps) {\n  const setting = useOptionalMenuItemSettingContext();\n  const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick,\n          onPointerEnter,\n          ...settingAttrs,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;AAsBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,MAAM,SAAS,GAAG,gBAClE,cACA;CACA,MAAM,EAAE,MAAM,UAAU,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/dev/ui/menu/menu-radio-group.d.ts

@@ -1,18 +1,14 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { MenuState } from "@videojs/core";
-
 //#region src/ui/menu/menu-radio-group.d.ts
 interface MenuRadioGroupProps extends UIComponentProps<'div', MenuState> {
   /** The currently selected value. */
   value: string;
   /** Called when the user selects a radio item. */
   onValueChange: (value: string) => void;
-  /** Accessible label for the group. */
-  label?: string;
 }
 /** A group of mutually exclusive radio items. Renders a `<div>` with `role="group"`. */
-declare const MenuRadioGroup: _$react.ForwardRefExoticComponent<Omit<MenuRadioGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioGroup: import("react").ForwardRefExoticComponent<Omit<MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuRadioGroup {
   type Props = MenuRadioGroupProps;
   type State = MenuState;

package/dist/dev/ui/menu/menu-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-group.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"mappings":";;;;;UASiB,mBAAA,SAA4B,gBAAA,QAAwB,SAAA;;EAEnE,KAAA;EAFe;EAIf,aAAA,GAAgB,KAAA;;EAEhB,KAAA;AAAA;;cAIW,cAAA,EAAc,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsBV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-radio-group.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-group.tsx"],"mappings":";;;UAUiB,4BAA4B,wBAAwB;;EAEnE;;EAEA,gBAAgB;;;cAIL,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAyBV;OACH,QAAQ;OACR,QAAQ"}

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

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

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

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

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { MenuState } from "@videojs/core";
-
 //#region src/ui/menu/menu-radio-item.d.ts
 interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {
   /** The value this item represents. */
@@ -10,7 +8,7 @@ interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {
   disabled?: boolean;
 }
 /** A radio-style menu item. Renders a `<div>` with `role="menuitemradio"`. */
-declare const MenuRadioItem: _$react.ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuRadioItem: import("react").ForwardRefExoticComponent<Omit<MenuRadioItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuRadioItem {
   type Props = MenuRadioItemProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"mappings":";;;;;UAUiB,kBAAA,SAA2B,gBAAA,QAAwB,SAAA;;EAElE,KAAA;EAFe;EAIf,QAAA;AAAA;;cAIW,aAAA,EAAa,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsDT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-radio-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"mappings":";;;UAUiB,2BAA2B,wBAAwB;;EAElE;;EAEA;;;cAIW,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAqDT;OACH,QAAQ;OACR,QAAQ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuRadioGroupContext, useSubMenuContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state, stateAttrMap } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onValueChange(value);\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onValueChange, value, menu, parentMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemradio' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,OAAO,iBAAiB,gBAAgB;CACtD,MAAM,EAAE,OAAO,YAAY,kBAAkB,0BAA0B;CAEvE,MAAM,aADa,mBAAmB,EACP,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,UAAU,eAAe;AAE/B,iBAAgB;EACd,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,KAAK,aAAa,QAAQ;IAChC,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,aACjB,UAA4C;AAC3C,MAAI,SAAU;AACd,YAAU,MAAM;AAChB,gBAAc,MAAM;AACpB,4BAA0B,MAAM,WAAW;IAE7C;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;EAAW,CAC5D;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,SAAU;AAC1B,OAAK,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACxC,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;GACjB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuRadioGroupContext, useSubMenuContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const subMenuCtx = useSubMenuContext();\n  const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      onClick?.(event);\n      onValueChange(value);\n      completeMenuItemSelection(menu, parentMenu);\n    },\n    [disabled, onClick, onValueChange, value, menu, parentMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n    menu.highlight(element, { focus: false });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemradio' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CAEtE,MAAM,aADa,kBACS,CAAC,EAAE,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EACd,UAAU,KAAK;EACf,cAAc,KAAK;EACnB,0BAA0B,MAAM,UAAU;CAC5C,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;CAAU,CAC5D;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CAC1C,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,7 +1,6 @@
 import { MenuChangeDetails, PositioningBoundary } from "@videojs/core/dom";
 import { ReactNode } from "react";
 import { MenuCore } from "@videojs/core";
-
 //#region src/ui/menu/menu-root.d.ts
 interface MenuRootProps extends MenuCore.Props {
   /** Boundary used to constrain the root menu popup size. */
@@ -12,15 +11,7 @@ interface MenuRootProps extends MenuCore.Props {
   onOpenChangeComplete?: (open: boolean) => void;
   children?: ReactNode;
 }
-declare function MenuRoot({
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange: onOpenChangeProp,
-  onOpenChangeComplete: onOpenChangeCompleteProp,
-  boundary,
-  children,
-  ...coreProps
-}: MenuRootProps): ReactNode;
+declare function MenuRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary, children, ...coreProps }: MenuRootProps): ReactNode;
 declare namespace MenuRoot {
   type Props = MenuRootProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;;UAciB,aAAA,SAAsB,QAAA,CAAS,KAAA;;EAE9C,QAAA,GAAW,mBAAA;EAFkB;EAI7B,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,iBAAA;EAF7B;EAIX,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,QAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,QAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,aAAA,GAAgB,SAAA;AAAA,kBAiIF,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;AAAA"}
+{"version":3,"file":"menu-root.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"mappings":";;;;UAeiB,sBAAsB,SAAS;;EAE9C,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,WACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,UACA,aACG,aACF,gBAAgB;kBAsIF;OACH,QAAQ"}

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

@@ -2,9 +2,10 @@
 import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
+import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { useOptionalControlsContext } from "../controls/context.js";
-import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
 import { createMenu, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useMemo, useState } from "react";
@@ -64,7 +65,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	]);
 	useDestroy(menu);
 	const input = useSnapshot(menu.input);
-	const state = useMemo(() => {
+	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
 		core.setProps({
 			side,
 			align,
@@ -82,7 +83,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		closeOnEscape,
 		closeOnOutsideClick,
 		isSubmenu
-	]);
+	]));
 	const navigationInput = useSnapshot(menu.navigationInput);
 	const topEntry = navigationInput.stack[navigationInput.stack.length - 1];
 	const activeSubMenuId = topEntry?.menuId ?? null;
@@ -92,6 +93,8 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		core,
 		menu,
 		state,
+		preferredSide,
+		setPositionedSide,
 		stateAttrMap: MenuDataAttrs,
 		contentId,
 		anchorName,
@@ -106,6 +109,8 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		core,
 		menu,
 		state,
+		preferredSide,
+		setPositionedSide,
 		contentId,
 		anchorName,
 		boundary,

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

@@ -1 +1 @@
-{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport { createMenu, createTransition, type MenuChangeDetails, type PositioningBoundary } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n  /** Boundary used to constrain the root menu popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the menu open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function MenuRoot({\n  open: controlledOpen,\n  defaultOpen = MenuCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: MenuRootProps): ReactNode {\n  // Detect if we are nested inside a parent Menu.Content — if so, operate as\n  // a submenu: no popover positioning, Trigger acts as a parent item.\n  const parentMenu = useOptionalMenuContext();\n  const controls = useOptionalControlsContext();\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const isSubmenu = parentMenu !== null;\n  const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n  const [core] = useState(() => new MenuCore({ ...coreProps, isSubmenu }));\n\n  const isControlled = controlledOpen !== undefined;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n  const popupGroupRef = useLatestRef(popupGroup);\n  const isSubmenuRef = useLatestRef(isSubmenu);\n\n  const [menu] = useState(() => {\n    const instance = createMenu({\n      transition: createTransition(),\n      onOpenChange(nextOpen, details) {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete(nextOpen) {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n      group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n    });\n\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  // Sync controlled open prop → internal state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = menu.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      menu.open('click');\n    } else {\n      menu.close('click');\n    }\n  }, [controlledOpen, menu]);\n\n  useEffect(() => {\n    if (isSubmenu || controls?.state.visible !== false) return;\n\n    menu.close('imperative-action');\n  }, [controls?.state.visible, isSubmenu, menu]);\n\n  useDestroy(menu);\n\n  const input = useSnapshot(menu.input);\n  const state = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n    core.setInput(input);\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n\n  // Subscribe to navigation state — used by Content/Trigger when this is a root menu.\n  const navigationInput = useSnapshot(menu.navigationInput);\n  const topEntry = navigationInput.stack[navigationInput.stack.length - 1];\n  const activeSubMenuId = topEntry?.menuId ?? null;\n  const activeSubMenuTriggerId = topEntry?.triggerId ?? null;\n  const navigationDirection = navigationInput.direction;\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      state,\n      stateAttrMap: MenuDataAttrs,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n      push: menu.push,\n      pop: menu.pop,\n    }),\n    [\n      core,\n      menu,\n      state,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n    ]\n  );\n\n  const subMenuContextValue = useMemo(\n    () => (parentMenu ? { subMenuId: contentId, parentMenu } : null),\n    [contentId, parentMenu]\n  );\n\n  // When acting as a submenu, expose its content ID and the parent menu context\n  // through SubMenuContext so Trigger can register/push and Content can show/hide.\n  if (subMenuContextValue) {\n    return (\n      <MenuContextProvider value={contextValue}>\n        <SubMenuContextProvider value={subMenuContextValue}>{children}</SubMenuContextProvider>\n      </MenuContextProvider>\n    );\n  }\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,wBAAwB;CAC3C,MAAM,WAAW,4BAA4B;CAC7C,MAAM,YAAY,sBAAsB;CACxC,MAAM,aAAa,uBAAuB;CAC1C,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;EAAW,CAAC,CAAC;CAExE,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,cAAc;CACpD,MAAM,yBAAyB,aAAa,oBAAoB;CAChE,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,eAAe,aAAa,UAAU;CAE5C,MAAM,CAAC,QAAQ,eAAe;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,kBAAkB;GAC9B,aAAa,UAAU,SAAS;AAC9B,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,qBAAqB,UAAU;AAC7B,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;GAChE,CAAC;AAEF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,UAAU,OAAO;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,KAAA,EAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;AACzC,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,MAAK,KAAK,QAAQ;MAElB,MAAK,MAAM,QAAQ;IAEpB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,iBAAgB;AACd,MAAI,aAAa,UAAU,MAAM,YAAY,MAAO;AAEpD,OAAK,MAAM,oBAAoB;IAC9B;EAAC,UAAU,MAAM;EAAS;EAAW;EAAK,CAAC;AAE9C,YAAW,KAAK;CAEhB,MAAM,QAAQ,YAAY,KAAK,MAAM;CACrC,MAAM,QAAQ,cAAc;AAC1B,OAAK,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;GAAW,CAAC;AAC7E,OAAK,SAAS,MAAM;AACpB,SAAO,KAAK,UAAU;IACrB;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;EAAU,CAAC;CAG7E,MAAM,kBAAkB,YAAY,KAAK,gBAAgB;CACzD,MAAM,WAAW,gBAAgB,MAAM,gBAAgB,MAAM,SAAS;CACtE,MAAM,kBAAkB,UAAU,UAAU;CAC5C,MAAM,yBAAyB,UAAU,aAAa;CACtD,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;EAAY,GAAG,MAC3D,CAAC,WAAW,WAAW,CACxB;AAID,KAAI,oBACF,QACE,oBAAC,qBAAD;EAAqB,OAAO;YAC1B,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;GAAkC,CAAA;EACnE,CAAA;AAI1B,QAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;EAA+B,CAAA"}
+{"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport { createMenu, createTransition, type MenuChangeDetails, type PositioningBoundary } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends MenuCore.Props {\n  /** Boundary used to constrain the root menu popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the menu open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function MenuRoot({\n  open: controlledOpen,\n  defaultOpen = MenuCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: MenuRootProps): ReactNode {\n  // Detect if we are nested inside a parent Menu.Content — if so, operate as\n  // a submenu: no popover positioning, Trigger acts as a parent item.\n  const parentMenu = useOptionalMenuContext();\n  const controls = useOptionalControlsContext();\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const isSubmenu = parentMenu !== null;\n  const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n  const [core] = useState(() => new MenuCore({ ...coreProps, isSubmenu }));\n\n  const isControlled = controlledOpen !== undefined;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n  const popupGroupRef = useLatestRef(popupGroup);\n  const isSubmenuRef = useLatestRef(isSubmenu);\n\n  const [menu] = useState(() => {\n    const instance = createMenu({\n      transition: createTransition(),\n      onOpenChange(nextOpen, details) {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete(nextOpen) {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n      group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n    });\n\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  // Sync controlled open prop → internal state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = menu.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      menu.open('click');\n    } else {\n      menu.close('click');\n    }\n  }, [controlledOpen, menu]);\n\n  useEffect(() => {\n    if (isSubmenu || controls?.state.visible !== false) return;\n\n    menu.close('imperative-action');\n  }, [controls?.state.visible, isSubmenu, menu]);\n\n  useDestroy(menu);\n\n  const input = useSnapshot(menu.input);\n  const preferredState = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n    core.setInput(input);\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n  // Subscribe to navigation state — used by Content/Trigger when this is a root menu.\n  const navigationInput = useSnapshot(menu.navigationInput);\n  const topEntry = navigationInput.stack[navigationInput.stack.length - 1];\n  const activeSubMenuId = topEntry?.menuId ?? null;\n  const activeSubMenuTriggerId = topEntry?.triggerId ?? null;\n  const navigationDirection = navigationInput.direction;\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      stateAttrMap: MenuDataAttrs,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n      push: menu.push,\n      pop: menu.pop,\n    }),\n    [\n      core,\n      menu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      activeSubMenuId,\n      activeSubMenuTriggerId,\n      navigationDirection,\n    ]\n  );\n\n  const subMenuContextValue = useMemo(\n    () => (parentMenu ? { subMenuId: contentId, parentMenu } : null),\n    [contentId, parentMenu]\n  );\n\n  // When acting as a submenu, expose its content ID and the parent menu context\n  // through SubMenuContext so Trigger can register/push and Content can show/hide.\n  if (subMenuContextValue) {\n    return (\n      <MenuContextProvider value={contextValue}>\n        <SubMenuContextProvider value={subMenuContextValue}>{children}</SubMenuContextProvider>\n      </MenuContextProvider>\n    );\n  }\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AAyBA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;CAAU,CAAC,CAAC;CAEvE,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;CAC/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAAC;EAED,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAGlC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;EACzC,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,KAAK,KAAK,OAAO;OAEjB,KAAK,MAAM,OAAO;CAEtB,GAAG,CAAC,gBAAgB,IAAI,CAAC;CAEzB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAMpC,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAL7B,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;EAAU,CAAC;EAC5E,KAAK,SAAS,KAAK;EACnB,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CACS,CAAC;CAGrF,MAAM,kBAAkB,YAAY,KAAK,eAAe;CACxD,MAAM,WAAW,gBAAgB,MAAM,gBAAgB,MAAM,SAAS;CACtE,MAAM,kBAAkB,UAAU,UAAU;CAC5C,MAAM,yBAAyB,UAAU,aAAa;CACtD,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;CACZ,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;CAAW,IAAI,MAC3D,CAAC,WAAW,UAAU,CACxB;CAIA,IAAI,qBACF,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;EAAiC,CAAA;CACnE,CAAA;CAIzB,OAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;CAA8B,CAAA;AAClF"}

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

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { MenuState } from "@videojs/core";
-
 //#region src/ui/menu/menu-separator.d.ts
 interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}
 /** Visual divider between groups of items. Renders a `<div>` with `role="separator"`. */
-declare const MenuSeparator: _$react.ForwardRefExoticComponent<Omit<MenuSeparatorProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuSeparator: import("react").ForwardRefExoticComponent<Omit<MenuSeparatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuSeparator {
   type Props = MenuSeparatorProps;
   type State = MenuState;