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

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

@@ -0,0 +1,24 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+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();
+	if (!checked && !forceMount) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{ "aria-hidden": true }, elementProps]
+	});
+});
+//#endregion
+export { MenuItemIndicator };
+
+//# sourceMappingURL=menu-item-indicator.js.map

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

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

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

@@ -0,0 +1,53 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useSubMenuContext } from "./context.js";
+import { completeMenuItemSelection } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+//#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 parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
+	const elementRef = useRef(null);
+	useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		return menu.registerItem(element);
+	}, [menu]);
+	const handleClick = useCallback((event) => {
+		if (disabled) return;
+		onClick?.(event);
+		onSelect?.();
+		completeMenuItemSelection(menu, parentMenu);
+	}, [
+		disabled,
+		onClick,
+		onSelect,
+		menu,
+		parentMenu
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, { focus: false });
+	}, [menu, disabled]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitem",
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+});
+//#endregion
+export { MenuItem };
+
+//# sourceMappingURL=menu-item.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-label.js","names":[],"sources":["../../../../src/ui/menu/menu-label.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 MenuLabelProps extends UIComponentProps<'div', MenuState> {}\n\n/** Non-interactive label for a group of items. Renders a `<div>`. */\nexport const MenuLabel = forwardRef<HTMLDivElement, MenuLabelProps>(function MenuLabel(\n  { render, className, style, ...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: [elementProps],\n    }\n  );\n});\n\nexport namespace MenuLabel {\n  export type Props = MenuLabelProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,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,aAAa;EACtB,CACF;EACD"}

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

@@ -0,0 +1,33 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { MenuRadioGroupContextProvider, useMenuContext } from "./context.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, {
+		value: {
+			value,
+			onValueChange
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap,
+			ref: [forwardedRef],
+			props: [{
+				role: "group",
+				"aria-label": label
+			}, elementProps]
+		})
+	});
+});
+//#endregion
+export { MenuRadioGroup };
+
+//# sourceMappingURL=menu-radio-group.js.map

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

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

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

@@ -0,0 +1,57 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useMenuRadioGroupContext, useSubMenuContext } from "./context.js";
+import { completeMenuItemSelection } from "@videojs/core/dom";
+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 { value: groupValue, onValueChange } = useMenuRadioGroupContext();
+	const parentMenu = useSubMenuContext()?.parentMenu.menu ?? null;
+	const elementRef = useRef(null);
+	const checked = groupValue === value;
+	useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+		return menu.registerItem(element);
+	}, [menu]);
+	const handleClick = useCallback((event) => {
+		if (disabled) return;
+		onClick?.(event);
+		onValueChange(value);
+		completeMenuItemSelection(menu, parentMenu);
+	}, [
+		disabled,
+		onClick,
+		onValueChange,
+		value,
+		menu,
+		parentMenu
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, { focus: false });
+	}, [menu, disabled]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitemradio",
+			"aria-checked": checked,
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+});
+//#endregion
+export { MenuRadioItem };
+
+//# sourceMappingURL=menu-radio-item.js.map

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

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

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

@@ -0,0 +1,136 @@
+"use client";
+import { useOptionalContainer, useOptionalPopupGroup } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
+import { createMenu, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { MenuCore, MenuDataAttrs } from "@videojs/core";
+//#region src/ui/menu/menu-root.tsx
+function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary = "container", children, ...coreProps }) {
+	const parentMenu = useOptionalMenuContext();
+	const controls = useOptionalControlsContext();
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const isSubmenu = parentMenu !== null;
+	const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;
+	const [core] = useState(() => new MenuCore({
+		...coreProps,
+		isSubmenu
+	}));
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(closeOnEscape);
+	const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const isSubmenuRef = useLatestRef(isSubmenu);
+	const [menu] = useState(() => {
+		const instance = createMenu({
+			transition: createTransition(),
+			onOpenChange(nextOpen, details) {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete(nextOpen) {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,
+			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,
+			group: () => isSubmenuRef.current ? void 0 : popupGroupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const contentId = useSafeId("menu");
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = menu.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) menu.open("click");
+		else menu.close("click");
+	}, [controlledOpen, menu]);
+	useEffect(() => {
+		if (isSubmenu || controls?.state.visible !== false) return;
+		menu.close("imperative-action");
+	}, [
+		controls?.state.visible,
+		isSubmenu,
+		menu
+	]);
+	useDestroy(menu);
+	const input = useSnapshot(menu.input);
+	const state = useMemo(() => {
+		core.setProps({
+			side,
+			align,
+			closeOnEscape,
+			closeOnOutsideClick,
+			isSubmenu
+		});
+		core.setInput(input);
+		return core.getState();
+	}, [
+		core,
+		input,
+		side,
+		align,
+		closeOnEscape,
+		closeOnOutsideClick,
+		isSubmenu
+	]);
+	const navigationInput = useSnapshot(menu.navigationInput);
+	const topEntry = navigationInput.stack[navigationInput.stack.length - 1];
+	const activeSubMenuId = topEntry?.menuId ?? null;
+	const activeSubMenuTriggerId = topEntry?.triggerId ?? null;
+	const navigationDirection = navigationInput.direction;
+	const contextValue = useMemo(() => ({
+		core,
+		menu,
+		state,
+		stateAttrMap: MenuDataAttrs,
+		contentId,
+		anchorName,
+		boundary,
+		container,
+		activeSubMenuId,
+		activeSubMenuTriggerId,
+		navigationDirection,
+		push: menu.push,
+		pop: menu.pop
+	}), [
+		core,
+		menu,
+		state,
+		contentId,
+		anchorName,
+		boundary,
+		container,
+		activeSubMenuId,
+		activeSubMenuTriggerId,
+		navigationDirection
+	]);
+	const subMenuContextValue = useMemo(() => parentMenu ? {
+		subMenuId: contentId,
+		parentMenu
+	} : null, [contentId, parentMenu]);
+	if (subMenuContextValue) return /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(SubMenuContextProvider, {
+			value: subMenuContextValue,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: contextValue,
+		children
+	});
+}
+//#endregion
+export { MenuRoot };
+
+//# sourceMappingURL=menu-root.js.map

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

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

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

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/menu/menu-separator.tsx
+/** Visual divider between groups of items. Renders a `<div>` with `role="separator"`. */
+const MenuSeparator = forwardRef(function MenuSeparator({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useMenuContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{ role: "separator" }, elementProps]
+	});
+});
+//#endregion
+export { MenuSeparator };
+
+//# sourceMappingURL=menu-separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.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 MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...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: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,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,EAAE,MAAM,aAAsB,EAAE,aAAa;EACtD,CACF;EACD"}

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

@@ -0,0 +1,124 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useMenuContext, useSubMenuContext } from "./context.js";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+//#region src/ui/menu/menu-trigger.tsx
+function toUIKeyboardEvent(event) {
+	return {
+		get defaultPrevented() {
+			return event.defaultPrevented;
+		},
+		key: event.key,
+		shiftKey: event.shiftKey,
+		ctrlKey: event.ctrlKey,
+		altKey: event.altKey,
+		metaKey: event.metaKey,
+		target: event.target instanceof Node ? event.target : event.currentTarget,
+		currentTarget: event.currentTarget,
+		preventDefault: () => event.preventDefault(),
+		stopPropagation: () => event.stopPropagation()
+	};
+}
+function preventMenuKeyDefault(event) {
+	const keyboardEvent = toUIKeyboardEvent(event);
+	if (event.key !== "Escape" && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) event.preventDefault();
+}
+/**
+* Button that toggles the menu visibility. At root level renders a `<button>`.
+* When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
+* that pushes the submenu on click or ArrowRight.
+*/
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();
+	const subMenuCtx = useSubMenuContext();
+	const isSubMenuTrigger = subMenuCtx !== null;
+	const elementRef = useRef(null);
+	const triggerId = useSafeId("sub-trigger");
+	const parentMenu = subMenuCtx?.parentMenu ?? null;
+	const parentMenuApi = parentMenu?.menu ?? null;
+	const parentState = parentMenu?.state ?? state;
+	const parentPush = parentMenu?.push ?? null;
+	const subMenuId = subMenuCtx?.subMenuId ?? null;
+	const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;
+	useEffect(() => {
+		if (!isSubMenuTrigger || !parentMenuApi) return;
+		const element = elementRef.current;
+		if (!element) return;
+		return parentMenuApi.registerItem(element);
+	}, [isSubMenuTrigger, parentMenuApi]);
+	const openSubMenu = useCallback(() => {
+		if (disabled || !parentPush || !subMenuId) return;
+		parentPush(subMenuId, triggerId);
+	}, [
+		disabled,
+		parentPush,
+		subMenuId,
+		triggerId
+	]);
+	const handleSubMenuClick = useCallback((event) => {
+		onClick?.(event);
+		openSubMenu();
+	}, [onClick, openSubMenu]);
+	const handleSubMenuKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			openSubMenu();
+		}
+	}, [onKeyDown, openSubMenu]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled || !parentMenuApi) return;
+		parentMenuApi.highlight(element, { focus: false });
+	}, [disabled, parentMenuApi]);
+	const triggerRef = useCallback((element) => {
+		menu.setTriggerElement(element);
+		if (element && supportsAnchorPositioning()) element.style.setProperty("anchor-name", `--${anchorName}`);
+	}, [menu, anchorName]);
+	if (isSubMenuTrigger) return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state: parentState,
+		stateAttrMap,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			id: triggerId,
+			role: "menuitem",
+			"aria-haspopup": "menu",
+			"aria-expanded": isExpanded,
+			"aria-disabled": disabled ? true : void 0,
+			"data-has-submenu": "",
+			onClick: handleSubMenuClick,
+			onKeyDownCapture: preventMenuKeyDefault,
+			onKeyDown: handleSubMenuKeyDown,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, contentId)
+			},
+			state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+			menu.triggerProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { MenuTrigger };
+
+//# sourceMappingURL=menu-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useSubMenuContext } from './context';\n\nexport interface MenuTriggerProps extends UIComponentProps<'button', MenuState> {\n  /** Disables the trigger. Only meaningful when used as a submenu trigger inside a parent menu. */\n  disabled?: boolean;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): 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 preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n  }\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubMenuTrigger = subMenuCtx !== null;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const parentMenuApi = parentMenu?.menu ?? null;\n  const parentState = parentMenu?.state ?? state;\n  const parentPush = parentMenu?.push ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n  const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    return parentMenuApi.registerItem(element);\n  }, [isSubMenuTrigger, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (disabled || !parentPush || !subMenuId) return;\n    parentPush(subMenuId, triggerId);\n  }, [disabled, parentPush, subMenuId, triggerId]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(event);\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [menu, anchorName]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return renderElement(\n      'div',\n      { render, className, style },\n      {\n        state: parentState,\n        stateAttrMap,\n        ref: [forwardedRef as React.Ref<HTMLDivElement>, elementRef as React.Ref<HTMLDivElement>],\n        props: [\n          {\n            id: triggerId,\n            role: 'menuitem' as const,\n            'aria-haspopup': 'menu' as const,\n            'aria-expanded': isExpanded,\n            'aria-disabled': disabled ? true : undefined,\n            'data-has-submenu': '',\n            onClick: handleSubMenuClick,\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onPointerEnter: handlePointerEnter,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n      props: [\n        { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n        state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n        menu.triggerProps,\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAiBA,SAAS,kBAAkB,OAA0D;AACnF,QAAO;EACL,IAAI,mBAAmB;AACrB,UAAO,MAAM;;EAEf,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ,MAAM,kBAAkB,OAAO,MAAM,SAAS,MAAM;EAC5D,eAAe,MAAM;EACrB,sBAAsB,MAAM,gBAAgB;EAC5C,uBAAuB,MAAM,iBAAiB;EAC/C;;AAGH,SAAS,sBAAsB,OAA+C;CAC5E,MAAM,gBAAgB,kBAAkB,MAAM;AAE9C,KAAI,MAAM,QAAQ,YAAY,oBAAoB,cAAc,IAAI,CAAC,MAAM,iBACzE,OAAM,gBAAgB;;;;;;;AAS1B,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,OAAO,cAAc,YAAY,cAAc,gBAAgB;CACnF,MAAM,aAAa,mBAAmB;CACtC,MAAM,mBAAmB,eAAe;CAExC,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,YAAY,UAAU,cAAc;CAE1C,MAAM,aAAa,YAAY,cAAc;CAC7C,MAAM,gBAAgB,YAAY,QAAQ;CAC1C,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,aAAa,YAAY,QAAQ;CACvC,MAAM,YAAY,YAAY,aAAa;CAC3C,MAAM,aAAa,mBAAmB,YAAY,oBAAoB,YAAY,MAAM;AAGxF,iBAAgB;AACd,MAAI,CAAC,oBAAoB,CAAC,cAAe;EACzC,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,cAAc,aAAa,QAAQ;IACzC,CAAC,kBAAkB,cAAc,CAAC;CAErC,MAAM,cAAc,kBAAkB;AACpC,MAAI,YAAY,CAAC,cAAc,CAAC,UAAW;AAC3C,aAAW,WAAW,UAAU;IAC/B;EAAC;EAAU;EAAY;EAAW;EAAU,CAAC;CAEhD,MAAM,qBAAqB,aACxB,UAA4C;AAC1C,YAAkE,MAAM;AACzE,eAAa;IAEf,CAAC,SAAS,YAAY,CACvB;CAED,MAAM,uBAAuB,aAC1B,UAA+C;AAC7C,cAAuE,MAAM;AAC9E,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,gBAAa;;IAGjB,CAAC,WAAW,YAAY,CACzB;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,YAAY,CAAC,cAAe;AAC5C,gBAAc,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACjD,CAAC,UAAU,cAAc,CAAC;CAG7B,MAAM,aAAa,aAChB,YAAsC;AACrC,OAAK,kBAAkB,QAAQ;AAC/B,MAAI,WAAW,2BAA2B,CACxC,SAAQ,MAAM,YAAY,eAAe,KAAK,aAAa;IAG/D,CAAC,MAAM,WAAW,CACnB;AAGD,KAAI,iBACF,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO;EACP;EACA,KAAK,CAAC,cAA2C,WAAwC;EACzF,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX,gBAAgB;GACjB,EACD,aACD;EACF,CACF;AAGH,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAA8C,WAAW;EAC/D,OAAO;GACL;IAAE,MAAM;IAAmB,GAAG,KAAK,gBAAgB,OAAO,UAAU;IAAE;GACtE,MAAM,OAAO,EAAE,kBAAkB,uBAAuB,GAAG,KAAA;GAC3D,KAAK;GACL;GACD;EACF,CACF;EACD"}

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

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { getMenuRootViewAttrs } from "@videojs/core/dom";
+import { forwardRef } from "react";
+//#region src/ui/menu/menu-view.tsx
+/** Root menu view inside the menu viewport. */
+const MenuView = forwardRef(function MenuView({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef],
+		props: [getMenuRootViewAttrs(), elementProps]
+	});
+});
+//#endregion
+export { MenuView };
+
+//# sourceMappingURL=menu-view.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-view.js","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { getMenuRootViewAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuViewProps extends UIComponentProps<'div', MenuState> {}\n\n/** Root menu view inside the menu viewport. */\nexport const MenuView = forwardRef<HTMLDivElement, MenuViewProps>(function MenuView(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [getMenuRootViewAttrs(), elementProps],\n    }\n  );\n});\n\nexport namespace MenuView {\n  export type Props = MenuViewProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,sBAAsB,EAAE,aAAa;EAC9C,CACF;EACD"}

package/dist/default/ui/playback-rate-menu/context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/playback-rate-menu/context.tsx
+const PlaybackRateMenuContext = createContext(null);
+function PlaybackRateMenuProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PlaybackRateMenuContext.Provider, {
+		value,
+		children
+	});
+}
+function usePlaybackRateMenuContext() {
+	const ctx = useContext(PlaybackRateMenuContext);
+	if (!ctx) throw new Error("PlaybackRateMenu compound components must be used within a PlaybackRateMenu.Root");
+	return ctx;
+}
+//#endregion
+export { PlaybackRateMenuProvider, usePlaybackRateMenuContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/playback-rate-menu/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaPlaybackRateState, PlaybackRateMenuCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface PlaybackRateMenuContextValue {\n  core: PlaybackRateMenuCore;\n  media: MediaPlaybackRateState;\n  state: PlaybackRateMenuCore.State;\n}\n\nconst PlaybackRateMenuContext = createContext<PlaybackRateMenuContextValue | null>(null);\n\nexport function PlaybackRateMenuProvider({\n  value,\n  children,\n}: {\n  value: PlaybackRateMenuContextValue;\n  children: React.ReactNode;\n}): React.ReactNode {\n  return <PlaybackRateMenuContext.Provider value={value}>{children}</PlaybackRateMenuContext.Provider>;\n}\n\nexport function usePlaybackRateMenuContext(): PlaybackRateMenuContextValue {\n  const ctx = useContext(PlaybackRateMenuContext);\n  if (!ctx) throw new Error('PlaybackRateMenu compound components must be used within a PlaybackRateMenu.Root');\n  return ctx;\n}\n"],"mappings":";;;;AAWA,MAAM,0BAA0B,cAAmD,KAAK;AAExF,SAAgB,yBAAyB,EACvC,OACA,YAIkB;AAClB,QAAO,oBAAC,wBAAwB,UAAzB;EAAyC;EAAQ;EAA4C,CAAA;;AAGtG,SAAgB,6BAA2D;CACzE,MAAM,MAAM,WAAW,wBAAwB;AAC/C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mFAAmF;AAC7G,QAAO"}

package/dist/default/ui/playback-rate-menu/index.js

@@ -0,0 +1,3 @@
+import { usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as PlaybackRateMenu, usePlaybackRateMenu };

package/dist/default/ui/playback-rate-menu/index.parts.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PlaybackRateMenuContent } from "./playback-rate-menu-content.js";
+import { PlaybackRateMenuRoot } from "./playback-rate-menu-root.js";
+import { PlaybackRateMenuTrigger } from "./playback-rate-menu-trigger.js";
+import { usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+//#region src/ui/playback-rate-menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => PlaybackRateMenuContent,
+	Popup: () => PlaybackRateMenuContent,
+	Root: () => PlaybackRateMenuRoot,
+	Trigger: () => PlaybackRateMenuTrigger,
+	usePlaybackRateMenu: () => usePlaybackRateMenu
+});
+//#endregion
+export { index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/playback-rate-menu/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/index.parts.ts"],"sourcesContent":["export {\n  PlaybackRateMenuContent as Content,\n  PlaybackRateMenuContent as Popup,\n  type PlaybackRateMenuContentProps as ContentProps,\n  type PlaybackRateMenuContentProps as PopupProps,\n} from './playback-rate-menu-content';\nexport { PlaybackRateMenuRoot as Root, type PlaybackRateMenuRootProps as RootProps } from './playback-rate-menu-root';\nexport {\n  PlaybackRateMenuTrigger as Trigger,\n  type PlaybackRateMenuTriggerProps as TriggerProps,\n} from './playback-rate-menu-trigger';\nexport {\n  type PlaybackRateMenuOption,\n  type PlaybackRateMenuResult,\n  usePlaybackRateMenu,\n} from './use-playback-rate-menu';\n"],"mappings":""}