@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

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

@@ -0,0 +1,95 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext, useMenuPopupContext } from "./context.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
+import { MenuContentDataAttrs } from "@videojs/core";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+//#region src/ui/menu/content.tsx
+/** Accessible item and focus scope for exactly one root or nested menu page. */
+const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const { popup, element: popupElement } = useMenuPopupContext();
+	const isSubmenu = parent !== null;
+	const isActive = isSubmenu && state.open;
+	const wasActiveRef = useRef(false);
+	const cleanupRegistrationRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!isSubmenu) return void 0;
+		const wasActive = wasActiveRef.current;
+		wasActiveRef.current = isActive;
+		if (isActive && !wasActive) {
+			const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));
+			return () => cancelAnimationFrame(frame);
+		}
+	}, [
+		isActive,
+		isSubmenu,
+		menu
+	]);
+	const setContentElement = useCallback((element) => {
+		cleanupRegistrationRef.current?.();
+		cleanupRegistrationRef.current = null;
+		if (!element) {
+			if (isSubmenu) menu.setPopupElement(null);
+			return;
+		}
+		if (isSubmenu) menu.setPopupElement(element);
+		cleanupRegistrationRef.current = popup.registerContent({
+			menu,
+			parent: parent?.menu ?? null,
+			element
+		});
+	}, [
+		isSubmenu,
+		menu,
+		parent?.menu,
+		popup
+	]);
+	const composedRef = useComposedRefs(forwardedRef, setContentElement);
+	const handleKeyDown = useCallback((event) => {
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		const isNavigationKey = isMenuNavigationKey(event);
+		menu.contentProps.onKeyDown(event);
+		if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
+			event.preventDefault();
+			menu.close("escape");
+		}
+		if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
+	}, [
+		isSubmenu,
+		menu,
+		onKeyDown
+	]);
+	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	const contentNode = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MenuContentDataAttrs,
+		ref: composedRef,
+		props: [
+			{
+				id: contentId,
+				...core.getContentAttrs()
+			},
+			{
+				onKeyDownCapture: preventMenuKeyDefault,
+				onKeyDown: handleKeyDown,
+				onBlur: (event) => {
+					onBlur?.(event);
+					if (isSubmenu) menu.contentProps.onFocusOut(event);
+				}
+			},
+			elementProps
+		]
+	});
+	return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;
+});
+//#endregion
+export { MenuContent };
+
+//# sourceMappingURL=content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":[],"sources":["../../../../src/ui/menu/content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useRef } 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, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const { popup, element: popupElement } = useMenuPopupContext();\n  const isSubmenu = parent !== null;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n  const cleanupRegistrationRef = useRef<(() => void) | null>(null);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    },\n    [isSubmenu, menu, parent?.menu, popup]\n  );\n  const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    },\n    [isSubmenu, menu, onKeyDown]\n  );\n\n  const inactive = isSubmenu && !isActive && state.status !== 'ending';\n  if (inactive) return null;\n\n  const contentNode = renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MenuContentDataAttrs,\n      ref: composedRef,\n      props: [\n        { id: contentId, ...core.getContentAttrs() },\n        {\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: handleKeyDown,\n          onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          },\n        },\n        elementProps,\n      ],\n    }\n  );\n\n  return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAE/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAE1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,oBAAoB,aACvB,YAAmC;EAClC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAEjC,IAAI,CAAC,SAAS;GACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;GAExC;EACF;EAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;EAE3C,uBAAuB,UAAU,MAAM,gBAAgB;GACrD;GACA,QAAQ,QAAQ,QAAQ;GACxB;EACF,CAAC;CACH,GACA;EAAC;EAAW;EAAM,QAAQ;EAAM;CAAK,CACvC;CACA,MAAM,cAAc,gBAAgB,cAAc,iBAAiB;CAEnE,MAAM,gBAAgB,aACnB,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EAEjD,KAAK,aAAa,UAAU,KAAK;EAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;GACjG,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;CACvE,GACA;EAAC;EAAW;EAAM;CAAS,CAC7B;CAGA,IADiB,aAAa,CAAC,YAAY,MAAM,WAAW,UAC9C,OAAO;CAErB,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,UAA4C;KACnD,SAAS,KAAK;KAEd,IAAI,WAAW,KAAK,aAAa,WAAW,KAAK;IACnD;GACF;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}

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

@@ -0,0 +1,28 @@
+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/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=group-label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.js","names":[],"sources":["../../../../src/ui/menu/group-label.tsx"],"sourcesContent":["import 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":";;;;;;AAWA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,IAAI,QAAQ,GAAG,gBAC3C,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,QAAQ,oBAAoB;CAClC,MAAM,cAAc,UAAU,kBAAkB;CAChD,MAAM,KAAK,UAAU;CAErB,sBAAsB;EACpB,OAAO,OAAO,cAAc,EAAE;CAChC,GAAG,CAAC,OAAO,EAAE,CAAC;CAEd,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,GAAG,GAAG,YAAY;CAC9B,CACF;AACF,CAAC"}

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

@@ -0,0 +1,23 @@
+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/group.tsx
+/** Groups related menu items. Renders a `<div>` with `role="group"`. */
+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,
+		ref: [forwardedRef],
+		props: [getMenuGroupProps(labelId, elementProps), elementProps]
+	}) });
+});
+//#endregion
+export { MenuGroup };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/menu/group.tsx"],"sourcesContent":["import 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":";;;;;;;AAWA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OACE,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;CAChE,CACF,EAEe,CAAA;AAEvB,CAAC"}

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

@@ -1,16 +1,16 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { MenuRadioGroup } from "./menu-radio-group.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 { MenuPopup } from "./menu-popup.js";
-import { MenuRadioItem } from "./menu-radio-item.js";
-import { MenuRoot } from "./menu-root.js";
-import { MenuSeparator } from "./menu-separator.js";
-import { MenuTrigger } from "./menu-trigger.js";
+import { MenuRadioGroup } from "./radio-group.js";
+import { MenuCheckboxItem } from "./checkbox-item.js";
+import { MenuContent } from "./content.js";
+import { MenuGroup } from "./group.js";
+import { MenuGroupLabel } from "./group-label.js";
+import { MenuItem } from "./item.js";
+import { MenuItemIndicator } from "./item-indicator.js";
+import { MenuPopup } from "./popup.js";
+import { MenuRadioItem } from "./radio-item.js";
+import { MenuRoot } from "./root.js";
+import { MenuSeparator } from "./separator.js";
+import { MenuTrigger } from "./trigger.js";
 //#region src/ui/menu/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	CheckboxItem: () => MenuCheckboxItem,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\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 { MenuPopup as Popup, type MenuPopupProps as PopupProps } from './menu-popup';\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';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export { MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemProps as CheckboxItemProps } from './checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './item-indicator';\nexport { MenuPopup as Popup, type MenuPopupProps as PopupProps } from './popup';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-indicator.js","names":[],"sources":["../../../../src/ui/menu/item-indicator.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useOptionalMenuRadioItemContext } from './context';\n\nexport interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {\n  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */\n  checked?: boolean;\n  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */\n  forceMount?: boolean;\n}\n\n/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */\nexport const MenuItemIndicator = forwardRef<HTMLSpanElement, MenuItemIndicatorProps>(function MenuItemIndicator(\n  { render, className, style, checked, forceMount = false, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n  const itemChecked = useOptionalMenuRadioItemContext();\n  const resolvedChecked = checked ?? itemChecked;\n  if (!resolvedChecked && !forceMount) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuItemIndicator {\n  export type Props = MenuItemIndicatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAeA,MAAa,oBAAoB,WAAoD,SAAS,kBAC5F,EAAE,QAAQ,WAAW,OAAO,SAAS,aAAa,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,cAAc,gCAAgC;CAEpD,IAAI,EADoB,WAAW,gBACX,CAAC,YAAY,OAAO;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,eAAe,KAAK,GAAG,YAAY;CAC/C,CACF;AACF,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":[],"sources":["../../../../src/ui/menu/item.tsx"],"sourcesContent":["import 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 } 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 } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      onSelect?.();\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onSelect, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuItemContent\n      disabled={disabled}\n      elementProps={elementProps}\n      onClick={handleClick}\n      onPointerEnter={handlePointerEnter}\n      render={render}\n      className={className}\n      style={style}\n      state={state}\n      forwardedRef={forwardedRef}\n      elementRef={elementRef}\n    />\n  );\n});\n\ninterface MenuItemContentProps {\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n  render: MenuItemProps['render'];\n  className: MenuItemProps['className'];\n  style: MenuItemProps['style'];\n  state: MenuState;\n  forwardedRef: React.ForwardedRef<HTMLDivElement>;\n  elementRef: React.RefObject<HTMLDivElement | null>;\n}\n\nfunction MenuItemContent({\n  disabled,\n  elementProps,\n  onClick,\n  onPointerEnter,\n  render,\n  className,\n  style,\n  state,\n  forwardedRef,\n  elementRef,\n}: MenuItemContentProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitem' as const,\n          'aria-disabled': disabled ? true : undefined,\n          onClick,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n\nexport namespace MenuItem {\n  export type Props = MenuItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,WAAW;EACX,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAU;CAAI,CACpC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,iBAAD;EACY;EACI;EACd,SAAS;EACT,gBAAgB;EACR;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}

package/dist/default/ui/menu/keyboard.js

@@ -0,0 +1,31 @@
+import { isMenuNavigationKey } from "@videojs/core/dom";
+//#region src/ui/menu/keyboard.ts
+const preventedEvents = /* @__PURE__ */ new WeakSet();
+const canceledEvents = /* @__PURE__ */ new WeakSet();
+function preventMenuKeyDefault(event) {
+	if (event.key !== "Escape" && isMenuNavigationKey(event) && !event.defaultPrevented) {
+		event.preventDefault();
+		preventedEvents.add(event.nativeEvent);
+	}
+}
+function callKeyDownHandler(handler, event) {
+	const defaultPreventedBeforeHandler = event.defaultPrevented && (!preventedEvents.has(event.nativeEvent) || canceledEvents.has(event.nativeEvent));
+	if (!handler) return defaultPreventedBeforeHandler;
+	let defaultPreventedByHandler = false;
+	const preventDefault = event.preventDefault;
+	event.preventDefault = () => {
+		defaultPreventedByHandler = true;
+		preventDefault.call(event);
+	};
+	try {
+		handler(event);
+	} finally {
+		event.preventDefault = preventDefault;
+	}
+	if (defaultPreventedByHandler) canceledEvents.add(event.nativeEvent);
+	return defaultPreventedBeforeHandler || defaultPreventedByHandler;
+}
+//#endregion
+export { callKeyDownHandler, preventMenuKeyDefault };
+
+//# sourceMappingURL=keyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.js","names":[],"sources":["../../../../src/ui/menu/keyboard.ts"],"sourcesContent":["import { isMenuNavigationKey } from '@videojs/core/dom';\n\nconst preventedEvents = new WeakSet<Event>();\nconst canceledEvents = new WeakSet<Event>();\n\n// Menu keys are prevented during capture before native player hotkeys run.\n// Track that internal prevention so bubble handlers can still honor a consumer\n// that calls preventDefault() to opt out of the built-in menu behavior.\nexport function preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  if (event.key !== 'Escape' && isMenuNavigationKey(event) && !event.defaultPrevented) {\n    event.preventDefault();\n    preventedEvents.add(event.nativeEvent);\n  }\n}\n\nexport function callKeyDownHandler<T extends HTMLElement>(\n  handler: React.KeyboardEventHandler<T> | undefined,\n  event: React.KeyboardEvent<T>\n): boolean {\n  const defaultPreventedBeforeHandler =\n    event.defaultPrevented && (!preventedEvents.has(event.nativeEvent) || canceledEvents.has(event.nativeEvent));\n\n  if (!handler) return defaultPreventedBeforeHandler;\n\n  let defaultPreventedByHandler = false;\n  const preventDefault = event.preventDefault;\n\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  if (defaultPreventedByHandler) canceledEvents.add(event.nativeEvent);\n\n  return defaultPreventedBeforeHandler || defaultPreventedByHandler;\n}\n"],"mappings":";;AAEA,MAAM,kCAAkB,IAAI,QAAe;AAC3C,MAAM,iCAAiB,IAAI,QAAe;AAK1C,SAAgB,sBAAsB,OAA+C;CACnF,IAAI,MAAM,QAAQ,YAAY,oBAAoB,KAAK,KAAK,CAAC,MAAM,kBAAkB;EACnF,MAAM,eAAe;EACrB,gBAAgB,IAAI,MAAM,WAAW;CACvC;AACF;AAEA,SAAgB,mBACd,SACA,OACS;CACT,MAAM,gCACJ,MAAM,qBAAqB,CAAC,gBAAgB,IAAI,MAAM,WAAW,KAAK,eAAe,IAAI,MAAM,WAAW;CAE5G,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI,4BAA4B;CAChC,MAAM,iBAAiB,MAAM;CAE7B,MAAM,uBAAuB;EAC3B,4BAA4B;EAC5B,eAAe,KAAK,KAAK;CAC3B;CAEA,IAAI;EACF,QAAQ,KAAK;CACf,UAAU;EACR,MAAM,iBAAiB;CACzB;CAEA,IAAI,2BAA2B,eAAe,IAAI,MAAM,WAAW;CAEnE,OAAO,iCAAiC;AAC1C"}

package/dist/default/ui/menu/popup.js

@@ -0,0 +1,74 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { MenuPopupContextProvider, useMenuContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { MenuPopupDataAttrs } from "@videojs/core";
+import { MenuPositioningCSSVars, createMenuPopup, getRootPositionOptions } from "@videojs/core/dom";
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/popup.tsx
+/** Positioned menu surface that contains one or more sibling Content pages. */
+const MenuPopup = forwardRef(function MenuPopup({ render, className, style, onBlur, keepMounted = false, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, preferredSide, setPositionedSide, anchorName, boundary, container } = useMenuContext();
+	const [popup] = useState(createMenuPopup);
+	const [popupElement, setPopupElement] = useState(null);
+	const internalRef = useRef(null);
+	const setInternalElement = useCallback((element) => {
+		menu.setPopupElement(element);
+		popup.setElement(element);
+		setPopupElement(element);
+	}, [menu, popup]);
+	const composedRef = useComposedRefs(forwardedRef, internalRef, setInternalElement);
+	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
+	const positioningStyle = usePopupPosition({
+		open: state.open,
+		anchorName,
+		position: positionOptions,
+		triggerSource: menu,
+		popupRef: internalRef,
+		boundary,
+		container,
+		cssVars: MenuPositioningCSSVars,
+		trackResize: false,
+		onSideChange: setPositionedSide
+	});
+	useDestroy(popup);
+	const inactive = !state.open && state.status !== "ending";
+	if (inactive && !keepMounted) return null;
+	const popupNode = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MenuPopupDataAttrs,
+		ref: composedRef,
+		props: [
+			{
+				style: positioningStyle,
+				...core.getPopupAttrs()
+			},
+			{ onBlur: (event) => {
+				onBlur?.(event);
+				menu.contentProps.onFocusOut(event);
+			} },
+			elementProps,
+			{
+				hidden: inactive,
+				inert: inactive || void 0
+			}
+		]
+	});
+	return /* @__PURE__ */ jsx(MenuPopupContextProvider, {
+		value: {
+			popup,
+			element: popupElement
+		},
+		children: popupNode
+	});
+});
+//#endregion
+export { MenuPopup };
+
+//# sourceMappingURL=popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/menu/popup.tsx"],"sourcesContent":["import { MenuPopupDataAttrs, type MenuState } from '@videojs/core';\nimport { createMenuPopup, getRootPositionOptions, MenuPositioningCSSVars } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { MenuPopupContextProvider, useMenuContext } from './context';\n\nexport interface MenuPopupProps extends UIComponentProps<'div', MenuState> {\n  /** Keep the popup mounted, hidden, and inert while closed. */\n  keepMounted?: boolean;\n}\n\n/** Positioned menu surface that contains one or more sibling Content pages. */\nexport const MenuPopup = forwardRef<HTMLDivElement, MenuPopupProps>(function MenuPopup(\n  { render, className, style, onBlur, keepMounted = false, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, preferredSide, setPositionedSide, anchorName, boundary, container } =\n    useMenuContext();\n  if (__DEV__ && parent) throw new Error('Menu.Popup must be a direct child of a root Menu.Root');\n\n  const [popup] = useState(createMenuPopup);\n  const [popupElement, setPopupElement] = useState<HTMLElement | null>(null);\n  const internalRef = useRef<HTMLDivElement>(null);\n  const setInternalElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      menu.setPopupElement(element);\n      popup.setElement(element);\n      setPopupElement(element);\n    },\n    [menu, popup]\n  );\n  const composedRef = useComposedRefs(forwardedRef, internalRef, setInternalElement);\n  const positionOptions = useMemo(\n    () => getRootPositionOptions(preferredSide, state.align),\n    [preferredSide, state.align]\n  );\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: positionOptions,\n    triggerSource: menu,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: MenuPositioningCSSVars,\n    trackResize: false,\n    onSideChange: setPositionedSide,\n  });\n\n  useDestroy(popup);\n\n  const inactive = !state.open && state.status !== 'ending';\n  if (inactive && !keepMounted) return null;\n\n  const popupNode = renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MenuPopupDataAttrs,\n      ref: composedRef,\n      props: [\n        { style: positioningStyle, ...core.getPopupAttrs() },\n        {\n          onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n            menu.contentProps.onFocusOut(event);\n          },\n        },\n        elementProps,\n        { hidden: inactive, inert: inactive || undefined },\n      ],\n    }\n  );\n\n  return <MenuPopupContextProvider value={{ popup, element: popupElement }}>{popupNode}</MenuPopupContextProvider>;\n});\n\nexport namespace MenuPopup {\n  export type Props = MenuPopupProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,QAAQ,WAAW,OAAO,QAAQ,cAAc,OAAO,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,eAAe,mBAAmB,YAAY,UAAU,cACzF,eAAe;CAGjB,MAAM,CAAC,SAAS,SAAS,eAAe;CACxC,MAAM,CAAC,cAAc,mBAAmB,SAA6B,IAAI;CACzE,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,qBAAqB,aACxB,YAAmC;EAClC,KAAK,gBAAgB,OAAO;EAC5B,MAAM,WAAW,OAAO;EACxB,gBAAgB,OAAO;CACzB,GACA,CAAC,MAAM,KAAK,CACd;CACA,MAAM,cAAc,gBAAgB,cAAc,aAAa,kBAAkB;CACjF,MAAM,kBAAkB,cAChB,uBAAuB,eAAe,MAAM,KAAK,GACvD,CAAC,eAAe,MAAM,KAAK,CAC7B;CACA,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,aAAa;EACb,cAAc;CAChB,CAAC;CAED,WAAW,KAAK;CAEhB,MAAM,WAAW,CAAC,MAAM,QAAQ,MAAM,WAAW;CACjD,IAAI,YAAY,CAAC,aAAa,OAAO;CAErC,MAAM,YAAY,cAChB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,OAAO;IAAkB,GAAG,KAAK,cAAc;GAAE;GACnD,EACE,SAAS,UAA4C;IACnD,SAAS,KAAK;IACd,KAAK,aAAa,WAAW,KAAK;GACpC,EACF;GACA;GACA;IAAE,QAAQ;IAAU,OAAO,YAAY,KAAA;GAAU;EACnD;CACF,CACF;CAEA,OAAO,oBAAC,0BAAD;EAA0B,OAAO;GAAE;GAAO,SAAS;EAAa;EAAI,UAAA;CAAoC,CAAA;AACjH,CAAC"}

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

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { MenuRadioGroupContextProvider, useMenuContext } from "./context.js";
+import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/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, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	return /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => /* @__PURE__ */ jsx(MenuRadioGroupContextProvider, {
+		value: {
+			value,
+			onValueChange
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef],
+			props: [getMenuGroupProps(labelId, elementProps), elementProps]
+		})
+	}) });
+});
+//#endregion
+export { MenuRadioGroup };
+
+//# sourceMappingURL=radio-group.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-item.js","names":[],"sources":["../../../../src/ui/menu/radio-item.tsx"],"sourcesContent":["import 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 { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onValueChange, value, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuRadioItemContextProvider value={checked}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef, elementRef],\n          props: [\n            {\n              role: 'menuitemradio' as const,\n              'aria-checked': checked,\n              'aria-disabled': disabled ? true : undefined,\n              onClick: handleClick,\n              onPointerEnter: handlePointerEnter,\n            },\n            elementProps,\n          ],\n        }\n      )}\n    </MenuRadioItemContextProvider>\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAE/B,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,cAAc,KAAK;EACnB,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;CAAI,CAChD;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,8BAAD;EAA8B,OAAO;EAClC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CACL;IACE,MAAM;IACN,gBAAgB;IAChB,iBAAiB,WAAW,OAAO,KAAA;IACnC,SAAS;IACT,gBAAgB;GAClB,GACA,YACF;EACF,CACF;CAC4B,CAAA;AAElC,CAAC"}