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

package/dist/dev/ui/live-button/component.d.ts

@@ -0,0 +1,28 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { LiveButtonCore } from "@videojs/core";
+//#region src/ui/live-button/component.d.ts
+interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}
+/**
+ * A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+ * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
+ *
+ * Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+ * `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
+ *
+ * Displays the translated live badge when no children are provided.
+ *
+ * @example
+ *   ```tsx
+ *   <LiveButton />;
+ *   ```;
+ *
+ * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+ */
+declare const LiveButton: import("react").ForwardRefExoticComponent<Omit<LiveButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace LiveButton {
+  type Props = LiveButtonProps;
+  type State = LiveButtonCore.State;
+}
+//#endregion
+export { LiveButton, LiveButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/live-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/live-button/component.tsx"],"mappings":";;;UAciB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;cAkB7F,4BAAU,0BAAA,KAAA,0CAAA,cAAA;kBA8EN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/live-button/component.js

@@ -0,0 +1,92 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { useOptionalTooltipContext } from "../tooltip/context.js";
+import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useLayoutEffect, useState } from "react";
+//#region src/ui/live-button/component.tsx
+const DISPLAY_NAME = "LiveButton";
+/**
+* A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+* live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
+*
+* Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+* `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
+*
+* Displays the translated live badge when no children are provided.
+*
+* @example
+*   ```tsx
+*   <LiveButton />;
+*   ```;
+*
+* @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+*/
+const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef) {
+	const { children, render, className, style, label, disabled, ...elementProps } = componentProps;
+	const live = usePlayer(selectLive);
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const media = live && time && buffer ? {
+		currentTime: time.currentTime,
+		seek: time.seek,
+		seekable: buffer.seekable,
+		liveEdgeStart: live.liveEdgeStart,
+		targetLiveWindow: live.targetLiveWindow
+	} : null;
+	const tooltipCtx = useOptionalTooltipContext();
+	const translator = useTranslator();
+	const [core] = useState(() => new LiveButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: DISPLAY_NAME,
+		onActivate: () => {
+			if (media) core.seekToLive(media);
+		},
+		isDisabled: () => !!disabled || !media
+	});
+	if (media) core.setMedia(media);
+	const state = media ? core.getState() : null;
+	const labelText = state ? translateText(core.getLabel(state), translator) : void 0;
+	useLayoutEffect(() => {
+		if (!tooltipCtx) return;
+		tooltipCtx.setContent(labelText ? { label: labelText } : void 0);
+		return () => tooltipCtx.setContent(void 0);
+	}, [tooltipCtx, labelText]);
+	if (!media || !state) {
+		logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? "live");
+		return null;
+	}
+	const attrs = core.getAttrs(state);
+	const labelAttr = attrs["aria-label"];
+	const content = children ?? translateText(LiveButtonCore.defaultText, translator);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: LiveButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			attrs,
+			{
+				children: content,
+				...elementProps,
+				"aria-label": labelAttr ? translateText(labelAttr, translator) : labelAttr
+			},
+			getButtonProps()
+		]
+	});
+});
+LiveButton.displayName = DISPLAY_NAME;
+//#endregion
+export { LiveButton };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/live-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/live-button/component.tsx"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is\n * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through\n * `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.\n *\n * Displays the translated live badge when no children are provided.\n *\n * @example\n *   ```tsx\n *   <LiveButton />;\n *   ```;\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const translator = useTranslator();\n    const [core] = useState(() => new LiveButtonCore());\n\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n\n    const state = media ? core.getState() : null;\n    const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const labelAttr = attrs['aria-label'];\n    const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [\n          attrs,\n          {\n            children: content,\n            ...elementProps,\n            'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n          },\n          getButtonProps(),\n        ],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;;;;;;;;;;;;;;;;;AAoBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAE9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EAEjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAAO;EACP,kBAAkB,cAAc,WAAW,eAAe,MAAM;EAE7E,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}

package/dist/dev/ui/live-button/index.d.ts

@@ -1,2 +1,2 @@
-import { LiveButton, LiveButtonProps } from "./live-button.js";
+import { LiveButton, LiveButtonProps } from "./component.js";
 export { LiveButton, type LiveButtonProps };

package/dist/dev/ui/live-button/index.js

@@ -1,2 +1,2 @@
-import { LiveButton } from "./live-button.js";
+import { LiveButton } from "./component.js";
 export { LiveButton };

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

@@ -0,0 +1,20 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/checkbox-item.d.ts
+interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {
+  /** Whether the item is currently checked. */
+  checked: boolean;
+  /** Called when the checked state should change. */
+  onCheckedChange: (checked: boolean) => void;
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+}
+/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
+declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuCheckboxItem {
+  type Props = MenuCheckboxItemProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuCheckboxItem, MenuCheckboxItemProps };
+//# sourceMappingURL=checkbox-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.d.ts","names":[],"sources":["../../../../src/ui/menu/checkbox-item.tsx"],"mappings":";;;UAOiB,8BAA8B,wBAAwB;;EAErE;;EAEA,kBAAkB;;EAElB;;;cAIW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAmDZ;OACH,QAAQ;OACR,QAAQ"}

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

@@ -0,0 +1,51 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+//#region src/ui/menu/checkbox-item.tsx
+/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
+const MenuCheckboxItem = forwardRef(function MenuCheckboxItem({ render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps }, forwardedRef) {
+	const { menu, state } = 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);
+		onCheckedChange(!checked);
+	}, [
+		disabled,
+		onClick,
+		onCheckedChange,
+		checked
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
+	}, [menu, disabled]);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitemcheckbox",
+			"aria-checked": checked,
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+});
+//#endregion
+export { MenuCheckboxItem };
+
+//# sourceMappingURL=checkbox-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.js","names":[],"sources":["../../../../src/ui/menu/checkbox-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {\n  /** Whether the item is currently checked. */\n  checked: boolean;\n  /** Called when the checked state should change. */\n  onCheckedChange: (checked: boolean) => void;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A checkbox-style menu item. Renders a `<div>` with `role=\"menuitemcheckbox\"`. */\nexport const MenuCheckboxItem = forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(\n  { render, className, style, checked, onCheckedChange, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\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      onCheckedChange(!checked);\n    },\n    [disabled, onClick, onCheckedChange, checked]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef],\n      props: [\n        {\n          role: 'menuitemcheckbox' as const,\n          'aria-checked': checked,\n          'aria-disabled': disabled ? true : undefined,\n          onClick: handleClick,\n          onPointerEnter: handlePointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuCheckboxItem {\n  export type Props = MenuCheckboxItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAiBA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,SAAS,iBAAiB,UAAU,SAAS,GAAG,gBAC5E,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EACf,gBAAgB,CAAC,OAAO;CAC1B,GACA;EAAC;EAAU;EAAS;EAAiB;CAAO,CAC9C;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/content.d.ts
+interface MenuContentProps extends UIComponentProps<'div', MenuState> {}
+/** Accessible item and focus scope for exactly one root or nested menu page. */
+declare const MenuContent: import("react").ForwardRefExoticComponent<Omit<MenuContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuContent {
+  type Props = MenuContentProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuContent, MenuContentProps };
+//# sourceMappingURL=content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","names":[],"sources":["../../../../src/ui/menu/content.tsx"],"mappings":";;;UAWiB,yBAAyB,wBAAwB;;cAGrD,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAmGP;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/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/dev/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/dev/ui/menu/group-label.d.ts

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

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

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

package/dist/dev/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/dev/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/dev/ui/menu/group.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","names":[],"sources":["../../../../src/ui/menu/group.tsx"],"mappings":";;;UAQiB,uBAAuB,wBAAwB;;cAGnD,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBAuBL;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/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/dev/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/dev/ui/menu/index.parts.d.ts

@@ -1,15 +1,15 @@
-import { MenuRadioItem, MenuRadioItemProps } from "./menu-radio-item.js";
-import { MenuCheckboxItem, MenuCheckboxItemProps } from "./menu-checkbox-item.js";
-import { MenuContent, MenuContentProps } from "./menu-content.js";
-import { MenuGroup, MenuGroupProps } from "./menu-group.js";
-import { MenuGroupLabel, MenuGroupLabelProps } from "./menu-group-label.js";
-import { MenuItem, MenuItemProps } from "./menu-item.js";
-import { MenuItemIndicator, MenuItemIndicatorProps } from "./menu-item-indicator.js";
-import { MenuPopup, MenuPopupProps } from "./menu-popup.js";
-import { MenuRadioGroup, MenuRadioGroupProps } from "./menu-radio-group.js";
-import { MenuRoot, MenuRootProps } from "./menu-root.js";
-import { MenuSeparator, MenuSeparatorProps } from "./menu-separator.js";
-import { MenuTrigger, MenuTriggerProps } from "./menu-trigger.js";
+import { MenuRadioItem, MenuRadioItemProps } from "./radio-item.js";
+import { MenuCheckboxItem, MenuCheckboxItemProps } from "./checkbox-item.js";
+import { MenuContent, MenuContentProps } from "./content.js";
+import { MenuGroup, MenuGroupProps } from "./group.js";
+import { MenuGroupLabel, MenuGroupLabelProps } from "./group-label.js";
+import { MenuItem, MenuItemProps } from "./item.js";
+import { MenuItemIndicator, MenuItemIndicatorProps } from "./item-indicator.js";
+import { MenuPopup, MenuPopupProps } from "./popup.js";
+import { MenuRadioGroup, MenuRadioGroupProps } from "./radio-group.js";
+import { MenuRoot, MenuRootProps } from "./root.js";
+import { MenuSeparator, MenuSeparatorProps } from "./separator.js";
+import { MenuTrigger, MenuTriggerProps } from "./trigger.js";
 declare namespace index_parts_d_exports {
   export { MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuGroupLabelProps as GroupLabelProps, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuPopup as Popup, MenuPopupProps as PopupProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps };
 }

package/dist/dev/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/dev/ui/menu/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\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/dev/ui/menu/item-indicator.d.ts

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/item-indicator.d.ts
+interface MenuItemIndicatorProps extends UIComponentProps<'span', MenuState> {
+  /** Whether the indicator is currently shown. Typically bound to the parent item's checked state. */
+  checked?: boolean;
+  /** When `true`, renders even when unchecked (useful for animating out). Defaults to `false`. */
+  forceMount?: boolean;
+}
+/** Visual indicator for a checked state. Only renders when `checked` is `true` (or `forceMount` is set). */
+declare const MenuItemIndicator: import("react").ForwardRefExoticComponent<Omit<MenuItemIndicatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace MenuItemIndicator {
+  type Props = MenuItemIndicatorProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuItemIndicator, MenuItemIndicatorProps };
+//# sourceMappingURL=item-indicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-indicator.d.ts","names":[],"sources":["../../../../src/ui/menu/item-indicator.tsx"],"mappings":";;;UAOiB,+BAA+B,yBAAyB;;EAEvE;;EAEA;;;cAIW,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAoBb;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/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/dev/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/dev/ui/menu/item.d.ts

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/item.d.ts
+interface MenuItemProps extends UIComponentProps<'div', MenuState> {
+  /** Called when the item is selected. */
+  onSelect?: () => void;
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+}
+/** A single action in the menu. Renders a `<div>` with `role="menuitem"`. */
+declare const MenuItem: import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuItem {
+  type Props = MenuItemProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuItem, MenuItemProps };
+//# sourceMappingURL=item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","names":[],"sources":["../../../../src/ui/menu/item.tsx"],"mappings":";;;UAQiB,sBAAsB,wBAAwB;;EAE7D;;EAEA;;;cAIW,0BAAQ,0BAAA,KAAA,wCAAA,cAAA;kBA+FJ;OACH,QAAQ;OACR,QAAQ"}