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

package/dist/dev/ui/input-indicator/use-input-indicator-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAED,MAAM,eAAe,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}
+{"version":3,"file":"use-input-indicator-root.js","names":["() => core.close()","(event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  }","(callback) => core.state.subscribe(callback)","state","() => core.state.current","current"],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CAC0BA,IAAAA;CAAM,IAAA,EAAA,OAAA,MAAA;EAAN,WAAM,KAAK,MAAM;EAAX,EAAA,KAAA;;;CAAnD,MAAM,gBAAgB,uBAAuBA,EAAkB;CAEpCC,IAAAA;CACrB,IAAA,EAAA,OAAA,QAAA,EAAA,OAAoC,eAAA;EADf,MAAC,OAAO,aAAa;GAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;EACxD;EADM,EAAA,KAAA;EAAoC,EAAA,KAAA;;;CAD1C,2BAA2BA,EAE1B;CAGCC,IAAAA;CAAmBC,IAAAA,EAAAA,OAAAA,KAAAA,OAAAA;EAAnB,MAAC,aAAa,KAAK,MAAM,UAAU,QAAQ;EAAxBA,EAAAA,KAAAA,KAAAA;;;CACnBC,IAAAA;CACAA,IAAAA;CADiBC,IAAAA,EAAAA,OAAAA,KAAN,MAAM,SAAA;EAAjB,WAAM,KAAK,MAAM;EACjB,WAAM,KAAK,MAAM;EADAA,EAAAA,KAAAA,KAAN,MAAM;;;;;;;CAFnB,MAAM,eAAe,qBACnBH,IACAE,IACAA,EACF;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}

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.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.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.js

@@ -0,0 +1,128 @@
+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 { c } from "react-compiler-runtime";
+import { forwardRef, 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(t0, forwardedRef) {
+	const $ = c(18);
+	const { render, className, style, onKeyDown, onBlur, ...elementProps } = t0;
+	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);
+	let t1;
+	let t2;
+	if ($[0] !== isActive || $[1] !== isSubmenu || $[2] !== menu) {
+		t1 = () => {
+			if (!isSubmenu) return;
+			const wasActive = wasActiveRef.current;
+			wasActiveRef.current = isActive;
+			if (isActive && !wasActive) {
+				const frame = requestAnimationFrame(() => menu.highlightInitialItem({ preventScroll: true }));
+				return () => cancelAnimationFrame(frame);
+			}
+		};
+		t2 = [
+			isActive,
+			isSubmenu,
+			menu
+		];
+		$[0] = isActive;
+		$[1] = isSubmenu;
+		$[2] = menu;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[5] !== isSubmenu || $[6] !== menu || $[7] !== parent?.menu || $[8] !== popup) {
+		t3 = (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
+			});
+		};
+		$[5] = isSubmenu;
+		$[6] = menu;
+		$[7] = parent?.menu;
+		$[8] = popup;
+		$[9] = t3;
+	} else t3 = $[9];
+	parent?.menu;
+	const composedRef = useComposedRefs(forwardedRef, t3);
+	let t4;
+	if ($[10] !== isSubmenu || $[11] !== menu || $[12] !== onKeyDown) {
+		t4 = (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();
+		};
+		$[10] = isSubmenu;
+		$[11] = menu;
+		$[12] = onKeyDown;
+		$[13] = t4;
+	} else t4 = $[13];
+	const handleKeyDown = t4;
+	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	let t5;
+	if ($[14] !== isSubmenu || $[15] !== menu || $[16] !== onBlur) {
+		t5 = (event_0) => {
+			onBlur?.(event_0);
+			if (isSubmenu) menu.contentProps.onFocusOut(event_0);
+		};
+		$[14] = isSubmenu;
+		$[15] = menu;
+		$[16] = onBlur;
+		$[17] = t5;
+	} else t5 = $[17];
+	const contentNode = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: MenuContentDataAttrs,
+		ref: composedRef,
+		props: [
+			{
+				id: contentId,
+				...core.getContentAttrs()
+			},
+			{
+				onKeyDownCapture: preventMenuKeyDefault,
+				onKeyDown: handleKeyDown,
+				onBlur: t5
+			},
+			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":["{ render, className, style, onKeyDown, onBlur, ...elementProps }","() => {\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.highlightInitialItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }","[isActive, isSubmenu, menu]","(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    }","menu","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  )","(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    }","menu.contentProps","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  )","(event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          }","event"],"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.highlightInitialItem({ 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,YAAA,IAE/E,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,iBAAlDA;CAGA,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/CC,IAAAA;CAcbC,IAAAA;CATsB,IAAA,EAAA,OAAA,YAAA,EAAA,OAJlB,aAAA,EAAA,OAOuC,MAAA;EAR9B,WAAM;GACpB,IAAI,CAAC,WAAW;GAEhB,MAAM,YAAY,aAAa;GAE/B,aAAa,UAAU;GAEvB,IAAI,YAAY,CAAC,WAAW;IAC1B,MAAM,QAAQ,4BAA4B,KAAK,qBAAqB,EAAE,eAAe,KAAK,CAAC,CAAC;IAE5F,aAAa,qBAAqB,KAAK;GACzC;EAGF;EAAG,KAAA;GAAC;GAAU;GAAW;EAAI;EATJ,EAAA,KAAA;EAJlB,EAAA,KAAA;EAOuC,EAAA,KAAA;;;;;;;CAR9C,gBAAgBD,IAcbC,EAA2B;CAG5BC,IAAAA;CAKQ,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,QAAA,EAAA,OASCC,QAAAA,QAAAA,EAAAA,OAFe,OAAA;EAZnC,MAAC,YAAmC;GAClC,uBAAuB,UAAU;GACjC,uBAAuB,UAAU;GAEjC,IAAI,CAAC,SAAS;IACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;IAExC;GACF;GAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;GAE3C,uBAAuB,UAAU,MAAM,gBAAgB;IACrD;IACA,QAAQ,QAAQ,QAAQ;IACxB;GACF,CAAC;EACH;EAZQ,EAAA,KAAA;EAAW,EAAA,KAAA;EASCA,EAAAA,KAAAA,QAAAA;EAFe,EAAA,KAAA;;;CAMjB,QAAQ;CAE5B,MAAM,cAAc,gBAAgB,cAAc,EAAiB;CAGjEE,IAAAA;CASM,IAAA,EAAA,QAAA,aAAA,EAAA,QAFJC,QAAAA,EAAAA,QALE,WAAA;EAFJ,MAAC,UAA+C;GAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;GACA,MAAM,kBAAkB,oBAAoB,KAAK;GAEjD,KAAK,aAAa,UAAU,KAAK;GAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;IACjG,MAAM,eAAe;IACrB,KAAK,MAAM,QAAQ;GACrB;GAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;EACvE;EANM,EAAA,MAAA;EAFJA,EAAAA,MAAAA;EALE,EAAA,MAAA;;;CAHN,MAAM,gBAAgBC;CAqBtB,IADiB,aAAa,CAAC,YAAY,MAAM,WAAW,UAC9C,OAAO;CAcLC,IAAAA;CAGF,IAAA,EAAA,QAAA,aAAA,EAAA,QAAWF,QAAAA,EAAAA,QAFf,QAAA;EADM,MAAC,YAA4C;GACnD,SAASG,OAAK;GAEd,IAAI,WAAW,KAAK,aAAa,WAAWA,OAAK;EACnD;EADM,EAAA,MAAA;EAAWH,EAAAA,MAAAA;EAFf,EAAA,MAAA;;;CAbV,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,QAAQE;GAKV;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}

package/dist/dev/ui/menu/context.js

@@ -1,3 +1,4 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useState } from "react";
 //#region src/ui/menu/context.tsx
 const MenuContext = createContext(null);
@@ -14,26 +15,47 @@ function useOptionalMenuContext() {
 }
 /** Publishes a specialized option group's selected value and availability to its enclosing menu. */
 function useMenuOptionState(state) {
+	const $ = c(8);
 	const setOptionState = useOptionalMenuContext()?.setOptionState;
-	const [source] = useState(() => Symbol("menu-option"));
+	const [source] = useState(_temp);
 	const { value, disabled, hidden, availability } = state;
-	useLayoutEffect(() => {
-		if (!setOptionState) return void 0;
-		setOptionState(source, {
-			value,
+	let t0;
+	let t1;
+	if ($[0] !== availability || $[1] !== disabled || $[2] !== hidden || $[3] !== setOptionState || $[4] !== source || $[5] !== value) {
+		t0 = () => {
+			if (!setOptionState) return;
+			setOptionState(source, {
+				value,
+				disabled,
+				hidden,
+				availability
+			});
+			return () => setOptionState(source, null);
+		};
+		t1 = [
+			availability,
 			disabled,
 			hidden,
-			availability
-		});
-		return () => setOptionState(source, null);
-	}, [
-		availability,
-		disabled,
-		hidden,
-		setOptionState,
-		source,
-		value
-	]);
+			setOptionState,
+			source,
+			value
+		];
+		$[0] = availability;
+		$[1] = disabled;
+		$[2] = hidden;
+		$[3] = setOptionState;
+		$[4] = source;
+		$[5] = value;
+		$[6] = t0;
+		$[7] = t1;
+	} else {
+		t0 = $[6];
+		t1 = $[7];
+	}
+	useLayoutEffect(t0, t1);
+}
+function _temp() {
+	return Symbol("menu-option");
 }
 const MenuPopupContext = createContext(null);
 const MenuPopupContextProvider = MenuPopupContext.Provider;

package/dist/dev/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext, useLayoutEffect, useState } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  optionState: MenuOptionState | null;\n  setOptionState: (source: symbol, state: MenuOptionState | null) => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n  return ctx;\n}\n\n/** Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n/** Publishes a specialized option group's selected value and availability to its enclosing menu. */\nexport function useMenuOptionState(state: MenuOptionState): void {\n  const menu = useOptionalMenuContext();\n  const setOptionState = menu?.setOptionState;\n  const [source] = useState(() => Symbol('menu-option'));\n  const { value, disabled, hidden, availability } = state;\n\n  useLayoutEffect(() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }, [availability, disabled, hidden, setOptionState, source, value]);\n}\n\nexport interface MenuPopupContextValue {\n  popup: MenuPopupApi;\n  element: HTMLElement | null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue | null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n  const ctx = useContext(MenuPopupContext);\n  if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAmBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;;AAGA,SAAgB,mBAAmB,OAA8B;CAE/D,MAAM,iBADO,uBACa,CAAC,EAAE;CAC7B,MAAM,CAAC,UAAU,eAAe,OAAO,aAAa,CAAC;CACrD,MAAM,EAAE,OAAO,UAAU,QAAQ,iBAAiB;CAElD,sBAAsB;EACpB,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,eAAe,QAAQ;GAAE;GAAO;GAAU;GAAQ;EAAa,CAAC;EAEhE,aAAa,eAAe,QAAQ,IAAI;CAC1C,GAAG;EAAC;EAAc;EAAU;EAAQ;EAAgB;EAAQ;CAAK,CAAC;AACpE;AAOA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}
+{"version":3,"file":"context.js","names":["() => Symbol('menu-option')","() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }","[availability, disabled, hidden, setOptionState, source, value]"],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext, useLayoutEffect, useState } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  optionState: MenuOptionState | null;\n  setOptionState: (source: symbol, state: MenuOptionState | null) => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n  return ctx;\n}\n\n/** Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n/** Publishes a specialized option group's selected value and availability to its enclosing menu. */\nexport function useMenuOptionState(state: MenuOptionState): void {\n  const menu = useOptionalMenuContext();\n  const setOptionState = menu?.setOptionState;\n  const [source] = useState(() => Symbol('menu-option'));\n  const { value, disabled, hidden, availability } = state;\n\n  useLayoutEffect(() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }, [availability, disabled, hidden, setOptionState, source, value]);\n}\n\nexport interface MenuPopupContextValue {\n  popup: MenuPopupApi;\n  element: HTMLElement | null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue | null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n  const ctx = useContext(MenuPopupContext);\n  if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;;AAmBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;;AAGA,SAAgB,mBAAmB,OAA8B;;CAE/D,MAAM,iBADO,uBACU,CAAA,EAAM;CAC7B,MAAM,CAAC,UAAU,SAASA,KAA2B;CACrD,MAAM,EAAE,OAAO,UAAU,QAAQ,iBAAiB;CAElCC,IAAAA;CAMbC,IAAAA;CAHiD,IAAA,EAAA,OAAA,gBAAA,EAAA,OAAlB,YAAA,EAAA,OAAU,UAAA,EAAA,OAFrC,kBAAA,EAAA,OAEU,UAAA,EAAA,OAAU,OAAA;EAHX,WAAM;GACpB,IAAI,CAAC,gBAAgB;GAErB,eAAe,QAAQ;IAAE;IAAO;IAAU;IAAQ;GAAa,CAAC;GAEhE,aAAa,eAAe,QAAQ,IAAI;EAC1C;EAAG,KAAA;GAAC;GAAc;GAAU;GAAQ;GAAgB;GAAQ;EAAK;EAHb,EAAA,KAAA;EAAlB,EAAA,KAAA;EAAU,EAAA,KAAA;EAFrC,EAAA,KAAA;EAEU,EAAA,KAAA;EAAU,EAAA,KAAA;;;;;;;CAH3B,gBAAgBD,IAMbC,EAA+D;AACpE;AAV4B,SAAA,QAAA;CAAM,OAAA,OAAO,aAAa;;AAiBtD,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

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.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.js

@@ -0,0 +1,53 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";
+import { c } from "react-compiler-runtime";
+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(t0, forwardedRef) {
+	const $ = c(12);
+	let className;
+	let elementProps;
+	let render;
+	let style;
+	if ($[0] !== t0) {
+		({render, className, style, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = elementProps;
+		$[3] = render;
+		$[4] = style;
+	} else {
+		className = $[1];
+		elementProps = $[2];
+		render = $[3];
+		style = $[4];
+	}
+	const { state } = useMenuContext();
+	let t1;
+	if ($[5] !== className || $[6] !== elementProps || $[7] !== forwardedRef || $[8] !== render || $[9] !== state || $[10] !== style) {
+		t1 = /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef],
+			props: [getMenuGroupProps(labelId, elementProps), elementProps]
+		}) });
+		$[5] = className;
+		$[6] = elementProps;
+		$[7] = forwardedRef;
+		$[8] = render;
+		$[9] = state;
+		$[10] = style;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
+});
+//#endregion
+export { MenuGroup };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["{ render, className, style, ...elementProps }","<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>"],"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,UAAA,IAE3E,cACA;;CAFU,IAAA;CAAqB,IAAA;CAA7B,IAAA;CAAmB,IAAA;CAArBA,IAAAA,EAAAA,OAAAA,IAAAA;EAAE,CAAA,CAAA,QAAQ,WAAW,UAAO,gBAA5BA;;;;;;;;;;;;CAGA,MAAM,EAAE,UAAU,eAAe;CAG/BC,IAAAA;CAIgB,IAAA,EAAA,OAAA,aAAA,EAAA,OAI2B,gBAAA,EAAA,OAD7B,gBAAA,EAAA,OAHN,UAAA,EAAA,OAEA,SAAA,EAAA,QAFmB,OAAA;EAJ3B,KAAA,oBAAC,mBAAD,EAAA,WACI,YACA,cACE,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,YAAY;GAClB,OAAO,CAAC,kBAAkB,SAAS,YAAY,GAAG,YAAY;EAChE,CACF,EAEe,CAAA;EARH,EAAA,KAAA;EAI2B,EAAA,KAAA;EAD7B,EAAA,KAAA;EAHN,EAAA,KAAA;EAEA,EAAA,KAAA;EAFmB,EAAA,MAAA;;;CAL7B,OACEA;AAcJ,CAAC"}