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

package/dist/dev/ui/menu/index.parts.d.ts

@@ -2,20 +2,19 @@ import { MenuBack, MenuBackProps } from "./menu-back.js";
 import { MenuCheckboxItem, MenuCheckboxItemProps } from "./menu-checkbox-item.js";
 import { MenuContent, MenuContentProps } from "./menu-content.js";
 import { MenuGroup, MenuGroupProps } from "./menu-group.js";
+import { MenuGroupLabel, MenuGroupLabelProps } from "./menu-group-label.js";
 import { MenuItem, MenuItemProps } from "./menu-item.js";
 import { MenuItemIndicator, MenuItemIndicatorProps } from "./menu-item-indicator.js";
-import { MenuLabel, MenuLabelProps } from "./menu-label.js";
+import { MenuItemValue, MenuItemValueProps } from "./menu-item-value.js";
 import { MenuRadioGroup, MenuRadioGroupProps } from "./menu-radio-group.js";
 import { MenuRadioItem, MenuRadioItemProps } from "./menu-radio-item.js";
 import { MenuRoot, MenuRootProps } from "./menu-root.js";
 import { MenuSeparator, MenuSeparatorProps } from "./menu-separator.js";
 import { MenuTrigger, MenuTriggerProps } from "./menu-trigger.js";
 import { MenuView, MenuViewProps } from "./menu-view.js";
-
-//#region src/ui/menu/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { MenuBack as Back, MenuBackProps as BackProps, MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuLabel as Label, MenuLabelProps as LabelProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps, MenuView as View, MenuViewProps as ViewProps };
+  export { MenuBack as Back, MenuBackProps as BackProps, MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuGroupLabelProps as GroupLabelProps, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuItemValue as ItemValue, MenuItemValueProps as ItemValueProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps, MenuView as View, MenuViewProps as ViewProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { MenuBack as Back, type MenuBackProps as BackProps, MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, type MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps, type MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, type MenuItemIndicatorProps as ItemIndicatorProps, type MenuItemProps as ItemProps, MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps, MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps, MenuView as View, type MenuViewProps as ViewProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -3,9 +3,10 @@ import { MenuBack } from "./menu-back.js";
 import { MenuCheckboxItem } from "./menu-checkbox-item.js";
 import { MenuContent } from "./menu-content.js";
 import { MenuGroup } from "./menu-group.js";
+import { MenuGroupLabel } from "./menu-group-label.js";
 import { MenuItem } from "./menu-item.js";
 import { MenuItemIndicator } from "./menu-item-indicator.js";
-import { MenuLabel } from "./menu-label.js";
+import { MenuItemValue } from "./menu-item-value.js";
 import { MenuRadioGroup } from "./menu-radio-group.js";
 import { MenuRadioItem } from "./menu-radio-item.js";
 import { MenuRoot } from "./menu-root.js";
@@ -18,9 +19,10 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	CheckboxItem: () => MenuCheckboxItem,
 	Content: () => MenuContent,
 	Group: () => MenuGroup,
+	GroupLabel: () => MenuGroupLabel,
 	Item: () => MenuItem,
 	ItemIndicator: () => MenuItemIndicator,
-	Label: () => MenuLabel,
+	ItemValue: () => MenuItemValue,
 	RadioGroup: () => MenuRadioGroup,
 	RadioItem: () => MenuRadioItem,
 	Root: () => MenuRoot,
@@ -29,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/dev/ui/menu/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { MenuBack as Back, type MenuBackProps as BackProps } from './menu-back';\nexport {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuLabel as Label, type MenuLabelProps as LabelProps } from './menu-label';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\nexport { MenuView as View, type MenuViewProps as ViewProps } from './menu-view';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { MenuBack as Back, type MenuBackProps as BackProps } from './menu-back';\nexport {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuItemValue as ItemValue, type MenuItemValueProps as ItemValueProps } from './menu-item-value';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\nexport { MenuView as View, type MenuViewProps as ViewProps } from './menu-view';\n"],"mappings":""}

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

@@ -1,14 +1,13 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
+import { Text } from "@videojs/core/i18n";
 import { MenuState } from "@videojs/core";
-
 //#region src/ui/menu/menu-back.d.ts
 interface MenuBackProps extends UIComponentProps<'button', MenuState> {
   /** Accessible label for the back button. */
-  label?: string;
+  label?: Text | string;
 }
 /** Button that navigates back to the parent menu view. Place at the top of a submenu Content. */
-declare const MenuBack: _$react.ForwardRefExoticComponent<Omit<MenuBackProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare const MenuBack: import("react").ForwardRefExoticComponent<Omit<MenuBackProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace MenuBack {
   type Props = MenuBackProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-back.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-back.tsx"],"mappings":";;;;;UASiB,aAAA,SAAsB,gBAAA,WAA2B,SAAA;;EAEhE,KAAA;AAAA;;cAIW,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,aAAA,WAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAkCJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-back.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-back.tsx"],"mappings":";;;;UAYiB,sBAAsB,2BAA2B;;EAEhE,QAAQ;;;cAIG,0BAAQ,0BAAA,KAAA,wCAAA,cAAA;kBAkCJ;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/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);
@@ -16,11 +20,10 @@ const MenuBack = forwardRef(function MenuBack({ render, className, style, label
 		style
 	}, {
 		state: parentMenu?.state ?? {},
-		stateAttrMap: parentMenu?.stateAttrMap,
 		ref: forwardedRef,
 		props: [{
 			type: "button",
-			"aria-label": label,
+			"aria-label": translateText(label, t),
 			onClick: handleClick
 		}, elementProps]
 	});

package/dist/dev/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      stateAttrMap: parentMenu?.stateAttrMap,\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,cAAc,YAAY;EAC1B,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/dev/ui/menu/menu-checkbox-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-checkbox-item.d.ts
 interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {
   /** Whether the item is currently checked. */
@@ -12,7 +10,7 @@ interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {
   disabled?: boolean;
 }
 /** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
-declare const MenuCheckboxItem: _$react.ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuCheckboxItem {
   type Props = MenuCheckboxItemProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-checkbox-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"mappings":";;;;;UASiB,qBAAA,SAA8B,gBAAA,QAAwB,SAAA;;EAErE,OAAA;EAFe;EAIf,eAAA,GAAkB,OAAA;;EAElB,QAAA;AAAA;;cAIW,gBAAA,EAAgB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiDZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-checkbox-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"mappings":";;;UASiB,8BAA8B,wBAAwB;;EAErE;;EAEA,kBAAkB;;EAElB;;;cAIW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAgDZ;OACH,QAAQ;OACR,QAAQ"}

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

@@ -5,7 +5,7 @@ import { forwardRef, useCallback, useEffect, useRef } from "react";
 //#region src/ui/menu/menu-checkbox-item.tsx
 /** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
 const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps }, forwardedRef) {
-	const { menu, state, stateAttrMap } = useMenuContext();
+	const { menu, state } = useMenuContext();
 	const elementRef = useRef(null);
 	useEffect(() => {
 		const element = elementRef.current;
@@ -33,7 +33,6 @@ const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, classNam
 		style
 	}, {
 		state,
-		stateAttrMap,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			role: "menuitemcheckbox",

package/dist/dev/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, stateAttrMap } = 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      stateAttrMap,\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,OAAO,iBAAiB,gBAAgB;CACtD,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;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/dev/ui/menu/menu-content.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-content.d.ts
 interface MenuContentProps extends UIComponentProps<'div', MenuState> {}
 /** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */
-declare const MenuContent: _$react.ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuContent: import("react").ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuContent {
   type Props = MenuContentProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-content.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"mappings":";;;;;UAgCiB,gBAAA,SAAyB,gBAAA,QAAwB,SAAA;;cA0ErD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,gBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAqRP,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-content.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"mappings":";;;UAkCiB,yBAAyB,wBAAwB;;cA0ErD,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAyUP;OACH,QAAQ;OACR,QAAQ"}

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

@@ -2,10 +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, 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 { 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 = {
@@ -68,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;
@@ -85,6 +86,8 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 	const menuViewTransitionState = useSnapshot(menuViewTransition.input);
 	const menuViewElementRef = useRef(null);
 	const parentContentElementRef = useRef(null);
+	const activeSubMenuIdRef = useRef(activeSubMenuId);
+	activeSubMenuIdRef.current = activeSubMenuId;
 	useLayoutEffect(() => {
 		return () => menuViewTransition.destroy();
 	}, [menuViewTransition]);
@@ -146,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);
@@ -156,11 +159,16 @@ 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;
 		syncMenuViewRoot(internalRef.current, activeSubMenuId !== null);
+		const contentElement = internalRef.current;
+		if (!contentElement) return;
+		return observeMenuViewContent(contentElement, () => {
+			syncMenuViewRoot(contentElement, activeSubMenuId !== null);
+		});
 	}, [
 		isSubmenu,
 		state.open,
@@ -174,9 +182,12 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 	});
 	useLayoutEffect(() => {
 		if (isSubmenu) return;
-		if (!positionOptions) return;
 		if (!state.open) {
-			setManualStyle(null);
+			setPosition(null);
+			return;
+		}
+		if (!positionOptions) {
+			syncMenuViewRoot(internalRef.current, activeSubMenuIdRef.current !== null);
 			return;
 		}
 		const rootPositionOptions = positionOptions;
@@ -185,12 +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 { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, rootPositionOptions, triggerRect, supportsAnchorPositioning() ? void 0 : getPopupPositionRect(contentElement), getPositioningBoundaryRect(boundaryElement), resolveOffsets(contentElement));
-			setManualStyle(nextStyle);
+			const anchorSupported = supportsAnchorPositioning();
+			let contentRect = getPopupPositionRect(contentElement, rootPositionOptions.side);
+			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+			const offsets = resolveOffsets(contentElement);
+			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) {
+				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;
+			setPosition(rootStyle);
+			setPositionedSide(side);
 		}
 		measure();
 		const triggerElement = menu.triggerElement;
@@ -228,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;
@@ -238,7 +271,6 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 			style
 		}, {
 			state,
-			stateAttrMap,
 			ref: menuViewComposedRef,
 			props: [{
 				...getMenuViewTransitionAttrs(menuViewTransitionState),
@@ -265,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/dev/ui/menu/menu-content.js.map

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

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/menu-group-label.d.ts
+interface MenuGroupLabelProps extends UIComponentProps<'div', MenuState> {}
+/** Non-interactive label for a group of items. Renders a `<div>`. */
+declare const MenuGroupLabel: import("react").ForwardRefExoticComponent<Omit<MenuGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuGroupLabel {
+  type Props = MenuGroupLabelProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuGroupLabel, MenuGroupLabelProps };
+//# sourceMappingURL=menu-group-label.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-group-label.tsx"],"mappings":";;;UAUiB,4BAA4B,wBAAwB;;cAGxD,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAwBV;OACH,QAAQ;OACR,QAAQ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label.js","names":[],"sources":["../../../../src/ui/menu/menu-group-label.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef, useLayoutEffect } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useMenuGroupContext } from './context';\n\nexport interface MenuGroupLabelProps extends UIComponentProps<'div', MenuState> {}\n\n/** Non-interactive label for a group of items. Renders a `<div>`. */\nexport const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>(function MenuGroupLabel(\n  { render, className, style, id: idProp, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const group = useMenuGroupContext();\n  const generatedId = useSafeId('menu-group-label');\n  const id = idProp ?? generatedId;\n\n  useLayoutEffect(() => {\n    return group?.registerLabel(id);\n  }, [group, id]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ id }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroupLabel {\n  export type Props = MenuGroupLabelProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,IAAI,QAAQ,GAAG,gBAC3C,cACA;CACA,MAAM,EAAE,UAAU,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/dev/ui/menu/menu-group.d.ts

@@ -1,14 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { MenuState } from "@videojs/core";
-
 //#region src/ui/menu/menu-group.d.ts
-interface MenuGroupProps extends UIComponentProps<'div', MenuState> {
-  /** Accessible label for the group. */
-  label?: string;
-}
+interface MenuGroupProps extends UIComponentProps<'div', MenuState> {}
 /** Groups related menu items. Renders a `<div>` with `role="group"`. */
-declare const MenuGroup: _$react.ForwardRefExoticComponent<Omit<MenuGroupProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const MenuGroup: import("react").ForwardRefExoticComponent<Omit<MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace MenuGroup {
   type Props = MenuGroupProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-group.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"mappings":";;;;;UASiB,cAAA,SAAuB,gBAAA,QAAwB,SAAA;;EAE9D,KAAA;AAAA;;cAIW,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-group.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"mappings":";;;UAUiB,uBAAuB,wBAAwB;;cAGnD,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBAuBL;OACH,QAAQ;OACR,QAAQ"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {\n  /** Accessible label for the group. */\n  label?: string;\n}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, label, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'group' as const, 'aria-label': label }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAeA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,gBACtC,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,gBAAgB;AAEhD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,MAAM;GAAkB,cAAc;GAAO,EAAE,aAAa;EACvE,CACF;EACD"}
+{"version":3,"file":"menu-group.js","names":[],"sources":["../../../../src/ui/menu/menu-group.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\nimport { getMenuGroupProps, MenuGroupProvider } from './use-menu-group';\n\nexport interface MenuGroupProps extends UIComponentProps<'div', MenuState> {}\n\n/** Groups related menu items. Renders a `<div>` with `role=\"group\"`. */\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return (\n    <MenuGroupProvider>\n      {(labelId) =>\n        renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            ref: [forwardedRef],\n            props: [getMenuGroupProps(labelId, elementProps), elementProps],\n          }\n        )\n      }\n    </MenuGroupProvider>\n  );\n});\n\nexport namespace MenuGroup {\n  export type Props = MenuGroupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,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/dev/ui/menu/menu-item-indicator.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-item-indicator.d.ts
 interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {
   /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */
@@ -10,7 +8,7 @@ interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {
   forceMount?: boolean;
 }
 /** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */
-declare const MenuItemIndicator: _$react.ForwardRefExoticComponent<Omit<MenuItemIndicatorProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare const MenuItemIndicator: import("react").ForwardRefExoticComponent<Omit<MenuItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace MenuItemIndicator {
   type Props = MenuItemIndicatorProps;
   type State = MenuState;

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

@@ -1 +1 @@
-{"version":3,"file":"menu-item-indicator.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"mappings":";;;;;UASiB,sBAAA,SAA+B,gBAAA,SAAyB,SAAA;;EAEvE,OAAA;EAFe;EAIf,UAAA;AAAA;;cAIW,iBAAA,EAAiB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,sBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAoBb,iBAAA;EAAA,KACH,KAAA,GAAQ,sBAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}
+{"version":3,"file":"menu-item-indicator.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator.tsx"],"mappings":";;;UASiB,+BAA+B,yBAAyB;;EAEvE;;EAEA;;;cAIW,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAmBb;OACH,QAAQ;OACR,QAAQ"}