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

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

@@ -0,0 +1,97 @@
+import { renderElement } from "../../utils/use-render.js";
+import { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from "./context.js";
+import { completeMenuItemSelection } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/radio-item.tsx
+/** A radio-style menu item. Renders a `<div>` with `role="menuitemradio"`. */
+const MenuRadioItem = forwardRef(function MenuRadioItem(t0, forwardedRef) {
+	const $ = c(16);
+	const { render, className, style, value, disabled, onClick, ...elementProps } = t0;
+	const { menu, state } = useMenuContext();
+	const { value: groupValue, onValueChange } = useMenuRadioGroupContext();
+	const elementRef = useRef(null);
+	const checked = groupValue === value;
+	let t1;
+	let t2;
+	if ($[0] !== menu) {
+		t1 = () => {
+			const element = elementRef.current;
+			if (!element) return;
+			return menu.registerItem(element);
+		};
+		t2 = [menu];
+		$[0] = menu;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== disabled || $[4] !== menu || $[5] !== onClick || $[6] !== onValueChange || $[7] !== value) {
+		t3 = (event) => {
+			if (disabled) return;
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			onValueChange(value);
+			completeMenuItemSelection(menu);
+		};
+		$[3] = disabled;
+		$[4] = menu;
+		$[5] = onClick;
+		$[6] = onValueChange;
+		$[7] = value;
+		$[8] = t3;
+	} else t3 = $[8];
+	const handleClick = t3;
+	let t4;
+	if ($[9] !== disabled || $[10] !== menu) {
+		t4 = () => {
+			const element_0 = elementRef.current;
+			if (!element_0 || disabled) return;
+			menu.highlight(element_0, {
+				focus: false,
+				pointer: true
+			});
+		};
+		$[9] = disabled;
+		$[10] = menu;
+		$[11] = t4;
+	} else t4 = $[11];
+	const handlePointerEnter = t4;
+	const T0 = MenuRadioItemContextProvider;
+	const t5 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitemradio",
+			"aria-checked": checked,
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+	let t6;
+	if ($[12] !== T0 || $[13] !== checked || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			value: checked,
+			children: t5
+		});
+		$[12] = T0;
+		$[13] = checked;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+});
+//#endregion
+export { MenuRadioItem };
+
+//# sourceMappingURL=radio-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-item.js","names":["{ render, className, style, value, disabled, onClick, ...elementProps }","() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    return menu.registerItem(element);\n  }","[menu]","(event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    }","useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onValueChange, value, menu]\n  )","() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }","element","useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled])","<MenuRadioItemContextProvider value={checked}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef, elementRef],\n          props: [\n            {\n              role: 'menuitemradio' as const,\n              'aria-checked': checked,\n              'aria-disabled': disabled ? true : undefined,\n              onClick: handleClick,\n              onPointerEnter: handlePointerEnter,\n            },\n            elementProps,\n          ],\n        }\n      )}\n    </MenuRadioItemContextProvider>","MenuRadioItemContextProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef, elementRef],\n          props: [\n            {\n              role: 'menuitemradio' as const,\n              'aria-checked': checked,\n              'aria-disabled': disabled ? true : undefined,\n              onClick: handleClick,\n              onPointerEnter: handlePointerEnter,\n            },\n            elementProps,\n          ],\n        }\n      )"],"sources":["../../../../src/ui/menu/radio-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from './context';\n\nexport interface MenuRadioItemProps extends UIComponentProps<'div', MenuState> {\n  /** The value this item represents. */\n  value: string;\n  /** Whether the item is disabled. */\n  disabled?: boolean;\n}\n\n/** A radio-style menu item. Renders a `<div>` with `role=\"menuitemradio\"`. */\nexport const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem(\n  { render, className, style, value, disabled, onClick, ...elementProps },\n  forwardedRef\n) {\n  const { menu, state } = useMenuContext();\n  const { value: groupValue, onValueChange } = useMenuRadioGroupContext();\n  const elementRef = useRef<HTMLDivElement>(null);\n  const checked = groupValue === value;\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n\n    return menu.registerItem(element);\n  }, [menu]);\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      onValueChange(value);\n      completeMenuItemSelection(menu);\n    },\n    [disabled, onClick, onValueChange, value, menu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled) return;\n\n    menu.highlight(element, { focus: false, pointer: true });\n  }, [menu, disabled]);\n\n  return (\n    <MenuRadioItemContextProvider value={checked}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef, elementRef],\n          props: [\n            {\n              role: 'menuitemradio' as const,\n              'aria-checked': checked,\n              'aria-disabled': disabled ? true : undefined,\n              onClick: handleClick,\n              onPointerEnter: handlePointerEnter,\n            },\n            elementProps,\n          ],\n        }\n      )}\n    </MenuRadioItemContextProvider>\n  );\n});\n\nexport namespace MenuRadioItem {\n  export type Props = MenuRadioItemProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;AAgBA,MAAa,gBAAgB,WAA+C,SAAS,cAAA,IAEnF,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,iBAAzDA;CAGA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,EAAE,OAAO,YAAY,kBAAkB,yBAAyB;CACtE,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,UAAU,eAAe;CAErBC,IAAAA;CAKPC,IAAAA;CADM,IAAA,EAAA,OAAA,MAAA;EAJC,WAAM;GACd,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,SAAS;GAEd,OAAO,KAAK,aAAa,OAAO;EAClC;EAAG,KAAA,CAAC,IAAI;EADC,EAAA,KAAA;;;;;;;CAJT,UAAUD,IAKPC,EAAM;CAGPC,IAAAA;CACM,IAAA,EAAA,OAAA,YAAA,EAAA,OAOsB,QAAA,EAAA,OAL1B,WAAA,EAAA,OAIA,iBAAA,EAAA,OAAc,OAAA;EAPhB,MAAC,UAA4C;GAC3C,IAAI,UAAU;GAEd,UAAU,KAAK;GAEf,IAAI,MAAM,kBAAkB;GAE5B,cAAc,KAAK;GACnB,0BAA0B,IAAI;EAChC;EARM,EAAA,KAAA;EAOsB,EAAA,KAAA;EAL1B,EAAA,KAAA;EAIA,EAAA,KAAA;EAAc,EAAA,KAAA;;;CARlB,MAAM,cAAcC;CAcmBC,IAAAA;CAErB,IAAA,EAAA,OAAA,YAAA,EAAA,QAEhB,MAAA;EAJqC,WAAM;GAC3C,MAAMC,YAAU,WAAW;GAC3B,IAAI,CAACA,aAAW,UAAU;GAE1B,KAAK,UAAUA,WAAS;IAAE,OAAO;IAAO,SAAS;GAAK,CAAC;EACzD;EAHkB,EAAA,KAAA;EAEhB,EAAA,MAAA;;;CAJF,MAAM,qBAAqBC;CAQxB,MAAA,KAAA;CACE,MAAA,KAAA,cACC,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;CAlBFC,IAAAA;CAACC,IAAAA,EAAAA,QAAAA,MAAAA,EAAAA,QAAoC,WAAA,EAAA,QAClCC,IAAAA;EADH,KAAA,oBAACD,IAAD;GAA8B,OAAO;GAClCC,UAAAA;EAkB2B,CAAA;EAnB7BD,EAAAA,MAAAA;EAAoC,EAAA,MAAA;EAClCC,EAAAA,MAAAA;;;CAFL,OACEF;AAqBJ,CAAC"}

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

@@ -0,0 +1,20 @@
+import { MenuCore } from "@videojs/core";
+import { MenuChangeDetails, PositioningBoundary } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/menu/root.d.ts
+interface MenuRootProps extends Omit<MenuCore.Props, 'boundary'> {
+  /** Boundary used to constrain the root menu popup size. */
+  boundary?: PositioningBoundary;
+  /** Called when the menu open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function MenuRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary, children, ...coreProps }: MenuRootProps): ReactNode;
+declare namespace MenuRoot {
+  type Props = MenuRootProps;
+}
+//#endregion
+export { MenuRoot, MenuRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,164 @@
+import { useOptionalContainer, useOptionalPlayer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { MenuContextProvider, useOptionalMenuContext } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { MenuCore, resolveMenuOptionState } from "@videojs/core";
+import { createMenu, createTransition, selectControls } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/root.tsx
+function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary = "container", children, ...coreProps }) {
+	const parentMenu = useOptionalMenuContext();
+	const controls = useOptionalControlsContext();
+	const controlsState = useOptionalPlayer(selectControls);
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const isSubmenu = parentMenu !== null;
+	const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;
+	const [core] = useState(() => new MenuCore(coreProps));
+	const isControlled = controlledOpen !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const resolvedOpen = controlledOpen ?? uncontrolledOpen;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(closeOnEscape);
+	const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const isSubmenuRef = useLatestRef(isSubmenu);
+	const [menu] = useState(() => {
+		return createMenu({
+			transition: createTransition(),
+			onOpenChange(nextOpen, details) {
+				if (!isControlled) setUncontrolledOpen(nextOpen);
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete(nextOpen) {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,
+			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,
+			group: () => isSubmenuRef.current ? void 0 : popupGroupRef.current
+		});
+	});
+	const anchorName = useSafeId();
+	const contentId = useSafeId("menu");
+	useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);
+	useLayoutEffect(() => {
+		menu.syncOpen(resolvedOpen);
+	}, [menu, resolvedOpen]);
+	useEffect(() => {
+		if (isSubmenu || controls?.state.visible !== false) return;
+		menu.close("imperative-action");
+	}, [
+		controls?.state.visible,
+		isSubmenu,
+		menu
+	]);
+	useDestroy(menu);
+	const input = useSnapshot(menu.input);
+	useEffect(() => {
+		if (!input.active || isSubmenu) return;
+		return controlsState?.requestControlsLock();
+	}, [
+		controlsState?.requestControlsLock,
+		input.active,
+		isSubmenu
+	]);
+	const preferredState = useMemo(() => {
+		core.setProps({
+			side,
+			align,
+			closeOnEscape,
+			closeOnOutsideClick
+		});
+		core.setInput({
+			...input,
+			isSubmenu
+		});
+		return core.getState();
+	}, [
+		core,
+		input,
+		side,
+		align,
+		closeOnEscape,
+		closeOnOutsideClick,
+		isSubmenu
+	]);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);
+	const [optionStates, setOptionStates] = useState(() => /* @__PURE__ */ new Map());
+	const [optionSource] = useState(() => Symbol("menu"));
+	const setOptionState = useCallback((source, optionState) => {
+		setOptionStates((current) => {
+			const previous = current.get(source);
+			if (optionState && isSameOptionState(previous, optionState)) return current;
+			if (!optionState && !previous) return current;
+			const next = new Map(current);
+			if (optionState) next.set(source, optionState);
+			else next.delete(source);
+			return next;
+		});
+	}, []);
+	const optionState = useMemo(() => resolveMenuOptionState(optionStates.values()), [optionStates]);
+	const setParentOptionState = parentMenu?.setOptionState;
+	useEffect(() => {
+		if (!optionState?.disabled && !optionState?.hidden) return;
+		menu.close("imperative-action");
+	}, [
+		menu,
+		optionState?.disabled,
+		optionState?.hidden
+	]);
+	useLayoutEffect(() => {
+		if (!setParentOptionState) return void 0;
+		setParentOptionState(optionSource, optionState);
+		return () => setParentOptionState(optionSource, null);
+	}, [
+		optionSource,
+		optionState,
+		setParentOptionState
+	]);
+	const contextValue = useMemo(() => ({
+		core,
+		menu,
+		parent: parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container,
+		optionState,
+		setOptionState
+	}), [
+		core,
+		menu,
+		parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container,
+		optionState,
+		setOptionState
+	]);
+	return /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: contextValue,
+		children
+	});
+}
+function isSameOptionState(a, b) {
+	return a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability;
+}
+//#endregion
+export { MenuRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/menu/root.tsx"],"sourcesContent":["import { MenuCore, type MenuOptionState, resolveMenuOptionState } from '@videojs/core';\nimport {\n  createMenu,\n  createTransition,\n  type MenuChangeDetails,\n  type PositioningBoundary,\n  selectControls,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\n\nimport { useOptionalContainer, useOptionalPlayer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { MenuContextProvider, useOptionalMenuContext } from './context';\n\nexport interface MenuRootProps extends Omit<MenuCore.Props, 'boundary'> {\n  /** Boundary used to constrain the root menu popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the menu open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: MenuChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function MenuRoot({\n  open: controlledOpen,\n  defaultOpen = MenuCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: MenuRootProps): ReactNode {\n  // Detect if we are nested inside a parent Menu.Content — if so, operate as\n  // a submenu: no popover positioning, Trigger acts as a parent item.\n  const parentMenu = useOptionalMenuContext();\n  const controls = useOptionalControlsContext();\n  const controlsState = useOptionalPlayer(selectControls);\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const isSubmenu = parentMenu !== null;\n  const { side, align, closeOnEscape, closeOnOutsideClick } = coreProps;\n\n  const [core] = useState(() => new MenuCore(coreProps));\n\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const resolvedOpen = controlledOpen ?? uncontrolledOpen;\n\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\n\n  const popupGroupRef = useLatestRef(popupGroup);\n  const isSubmenuRef = useLatestRef(isSubmenu);\n\n  const [menu] = useState(() => {\n    const instance = createMenu({\n      transition: createTransition(),\n      onOpenChange(nextOpen, details) {\n        if (!isControlled) setUncontrolledOpen(nextOpen);\n\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete(nextOpen) {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? MenuCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? MenuCore.defaultProps.closeOnOutsideClick,\n      group: () => (isSubmenuRef.current ? undefined : popupGroupRef.current),\n    });\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const contentId = useSafeId('menu');\n\n  useLayoutEffect(() => parentMenu?.menu.registerSubmenu(menu), [menu, parentMenu?.menu]);\n\n  // Commit only the open state resolved by controlled/uncontrolled ownership.\n  useLayoutEffect(() => {\n    menu.syncOpen(resolvedOpen);\n  }, [menu, resolvedOpen]);\n\n  useEffect(() => {\n    if (isSubmenu || controls?.state.visible !== false) return;\n\n    menu.close('imperative-action');\n  }, [controls?.state.visible, isSubmenu, menu]);\n\n  useDestroy(menu);\n\n  const input = useSnapshot(menu.input);\n\n  useEffect(() => {\n    if (!input.active || isSubmenu) return;\n\n    return controlsState?.requestControlsLock();\n  }, [controlsState?.requestControlsLock, input.active, isSubmenu]);\n\n  const preferredState = useMemo(() => {\n    core.setProps({ side, align, closeOnEscape, closeOnOutsideClick });\n    core.setInput({ ...input, isSubmenu });\n    return core.getState();\n  }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n  const [optionStates, setOptionStates] = useState<ReadonlyMap<symbol, MenuOptionState>>(() => new Map());\n  const [optionSource] = useState(() => Symbol('menu'));\n  const setOptionState = useCallback((source: symbol, optionState: MenuOptionState | null) => {\n    setOptionStates((current) => {\n      const previous = current.get(source);\n      if (optionState && isSameOptionState(previous, optionState)) return current;\n\n      if (!optionState && !previous) return current;\n\n      const next = new Map(current);\n\n      if (optionState) next.set(source, optionState);\n      else next.delete(source);\n\n      return next;\n    });\n  }, []);\n  const optionState = useMemo(() => resolveMenuOptionState(optionStates.values()), [optionStates]);\n  const setParentOptionState = parentMenu?.setOptionState;\n\n  useEffect(() => {\n    if (!optionState?.disabled && !optionState?.hidden) return;\n\n    menu.close('imperative-action');\n  }, [menu, optionState?.disabled, optionState?.hidden]);\n\n  useLayoutEffect(() => {\n    if (!setParentOptionState) return undefined;\n\n    setParentOptionState(optionSource, optionState);\n\n    return () => setParentOptionState(optionSource, null);\n  }, [optionSource, optionState, setParentOptionState]);\n\n  const contextValue = useMemo(\n    () => ({\n      core,\n      menu,\n      parent: parentMenu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      optionState,\n      setOptionState,\n    }),\n    [\n      core,\n      menu,\n      parentMenu,\n      state,\n      preferredSide,\n      setPositionedSide,\n      contentId,\n      anchorName,\n      boundary,\n      container,\n      optionState,\n      setOptionState,\n    ]\n  );\n\n  return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nfunction isSameOptionState(a: MenuOptionState | undefined, b: MenuOptionState): boolean {\n  return (\n    a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability\n  );\n}\n\nexport namespace MenuRoot {\n  export type Props = MenuRootProps;\n}\n"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/menu/separator.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';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ role: 'separator' as const }, elementProps],\n    }\n  );\n});\n\nexport namespace MenuSeparator {\n  export type Props = MenuSeparatorProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,MAAM,YAAqB,GAAG,YAAY;CACtD,CACF;AACF,CAAC"}

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

@@ -0,0 +1,22 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/trigger.d.ts
+type MenuTriggerElement = HTMLButtonElement | HTMLDivElement;
+interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {
+  /** Disables the trigger. */
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<MenuTriggerElement>;
+  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;
+}
+/**
+ * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+ * trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
+ */
+declare const MenuTrigger: import("react").ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare namespace MenuTrigger {
+  type Props = MenuTriggerProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuTrigger, MenuTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

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

@@ -0,0 +1,251 @@
+import { renderElement } from "../../utils/use-render.js";
+import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useRef } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/trigger.tsx
+/**
+* Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+* trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
+*/
+const MenuTrigger = forwardRef(function MenuTrigger(t0, forwardedRef) {
+	const $ = c(37);
+	const { render, className, style, disabled, onClick, onKeyDown, ...elementProps } = t0;
+	const { core, menu, parent, state, contentId, optionState } = useMenuContext();
+	const resolvedDisabled = disabled || optionState?.disabled || false;
+	const isSubMenuTrigger = parent !== null;
+	const controlledId = state.open || state.status === "ending" ? contentId : void 0;
+	const elementRef = useRef(null);
+	const triggerId = useSafeId("sub-trigger");
+	const parentMenuApi = parent?.menu ?? null;
+	let t1;
+	let t2;
+	if ($[0] !== isSubMenuTrigger || $[1] !== menu || $[2] !== parentMenuApi) {
+		t1 = () => {
+			if (!isSubMenuTrigger || !parentMenuApi) return;
+			const element = elementRef.current;
+			if (!element) return;
+			menu.setTriggerElement(element);
+			const unregister = parentMenuApi.registerItem(element);
+			return () => {
+				unregister();
+				menu.setTriggerElement(null);
+			};
+		};
+		t2 = [
+			isSubMenuTrigger,
+			menu,
+			parentMenuApi
+		];
+		$[0] = isSubMenuTrigger;
+		$[1] = menu;
+		$[2] = parentMenuApi;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[5] !== menu || $[6] !== resolvedDisabled) {
+		t3 = () => {
+			if (!resolvedDisabled) menu.open("click");
+		};
+		$[5] = menu;
+		$[6] = resolvedDisabled;
+		$[7] = t3;
+	} else t3 = $[7];
+	const openSubMenu = t3;
+	let t4;
+	if ($[8] !== onClick || $[9] !== openSubMenu) {
+		t4 = (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			openSubMenu();
+		};
+		$[8] = onClick;
+		$[9] = openSubMenu;
+		$[10] = t4;
+	} else t4 = $[10];
+	const handleSubMenuClick = t4;
+	let t5;
+	if ($[11] !== onKeyDown || $[12] !== openSubMenu || $[13] !== resolvedDisabled) {
+		t5 = (event_0) => {
+			const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event_0);
+			if (resolvedDisabled || defaultPreventedByUser) return;
+			if (event_0.key === "ArrowRight") {
+				event_0.preventDefault();
+				openSubMenu();
+			}
+		};
+		$[11] = onKeyDown;
+		$[12] = openSubMenu;
+		$[13] = resolvedDisabled;
+		$[14] = t5;
+	} else t5 = $[14];
+	const handleSubMenuKeyDown = t5;
+	let t6;
+	if ($[15] !== parentMenuApi || $[16] !== resolvedDisabled) {
+		t6 = () => {
+			const element_0 = elementRef.current;
+			if (!element_0 || resolvedDisabled || !parentMenuApi) return;
+			parentMenuApi.highlight(element_0, {
+				focus: false,
+				pointer: true
+			});
+		};
+		$[15] = parentMenuApi;
+		$[16] = resolvedDisabled;
+		$[17] = t6;
+	} else t6 = $[17];
+	const handlePointerEnter = t6;
+	let t7;
+	if ($[18] !== menu) {
+		t7 = (element_1) => {
+			menu.setTriggerElement(element_1);
+		};
+		$[18] = menu;
+		$[19] = t7;
+	} else t7 = $[19];
+	const triggerRef = t7;
+	let t8;
+	if ($[20] !== menu.triggerProps || $[21] !== onKeyDown || $[22] !== resolvedDisabled) {
+		t8 = (event_1) => {
+			const defaultPreventedByUser_0 = callKeyDownHandler(onKeyDown, event_1);
+			if (resolvedDisabled || defaultPreventedByUser_0) {
+				if (resolvedDisabled && isMenuNavigationKey(event_1)) event_1.preventDefault();
+				return;
+			}
+			if (isInteractiveActivation(event_1.nativeEvent)) {
+				event_1.preventDefault();
+				menu.triggerProps.onClick(event_1.nativeEvent);
+				return;
+			}
+			menu.triggerProps.onKeyDown(event_1);
+		};
+		$[20] = menu.triggerProps;
+		$[21] = onKeyDown;
+		$[22] = resolvedDisabled;
+		$[23] = t8;
+	} else t8 = $[23];
+	const handleRootKeyDown = t8;
+	let t9;
+	if ($[24] !== menu.triggerProps || $[25] !== resolvedDisabled) {
+		t9 = resolvedDisabled ? _temp : menu.triggerProps.onClick;
+		$[24] = menu.triggerProps;
+		$[25] = resolvedDisabled;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== handleRootKeyDown || $[28] !== t9) {
+		t10 = {
+			onClick: t9,
+			onKeyDown: handleRootKeyDown
+		};
+		$[27] = handleRootKeyDown;
+		$[28] = t9;
+		$[29] = t10;
+	} else t10 = $[29];
+	const rootTriggerProps = t10;
+	if (isSubMenuTrigger) {
+		let t11;
+		if ($[30] !== controlledId || $[31] !== core || $[32] !== state) {
+			t11 = core.getTriggerAttrs(state, controlledId);
+			$[30] = controlledId;
+			$[31] = core;
+			$[32] = state;
+			$[33] = t11;
+		} else t11 = $[33];
+		return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+			render,
+			className,
+			style,
+			disabled: resolvedDisabled,
+			elementProps,
+			forwardedRef,
+			elementRef,
+			triggerId,
+			triggerAttrs: t11,
+			availability: optionState?.availability,
+			hidden: optionState?.hidden,
+			state,
+			onSubMenuClick: handleSubMenuClick,
+			onSubMenuKeyDown: handleSubMenuKeyDown,
+			onPointerEnter: handlePointerEnter
+		});
+	}
+	const T0 = MenuTriggerChildContextProvider;
+	const t11 = true;
+	const t12 = renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, controlledId)
+			},
+			resolvedDisabled ? {
+				disabled: true,
+				"aria-disabled": "true"
+			} : void 0,
+			optionState ? { "data-availability": optionState.availability } : void 0,
+			state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+			rootTriggerProps,
+			elementProps,
+			optionState?.hidden ? { hidden: true } : void 0
+		]
+	});
+	let t13;
+	if ($[34] !== T0 || $[35] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T0, {
+			value: t11,
+			children: t12
+		});
+		$[34] = T0;
+		$[35] = t12;
+		$[36] = t13;
+	} else t13 = $[36];
+	return t13;
+});
+function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, availability, hidden, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [
+			{
+				id: triggerId,
+				role: "menuitem",
+				...triggerAttrs,
+				"aria-disabled": disabled ? true : void 0,
+				"data-availability": availability,
+				"data-has-submenu": "",
+				onClick: onSubMenuClick,
+				onKeyDownCapture: preventMenuKeyDefault,
+				onKeyDown: onSubMenuKeyDown,
+				onPointerEnter
+			},
+			elementProps,
+			hidden ? { hidden: true } : void 0
+		]
+	});
+}
+function _temp(event_2) {
+	return event_2.preventDefault();
+}
+//#endregion
+export { MenuTrigger };
+
+//# sourceMappingURL=trigger.js.map