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

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

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

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

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

@@ -1 +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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"}
+{"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/trigger.js

@@ -3,7 +3,8 @@ 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 { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+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
@@ -11,7 +12,9 @@ import { jsx } from "react/jsx-runtime";
 * 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({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+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;
@@ -19,120 +22,199 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	const elementRef = useRef(null);
 	const triggerId = useSafeId("sub-trigger");
 	const parentMenuApi = parent?.menu ?? null;
-	useEffect(() => {
-		if (!isSubMenuTrigger || !parentMenuApi) return;
-		const element = elementRef.current;
-		if (!element) return;
-		menu.setTriggerElement(element);
-		const unregister = parentMenuApi.registerItem(element);
-		return () => {
-			unregister();
-			menu.setTriggerElement(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);
+			};
 		};
-	}, [
-		isSubMenuTrigger,
-		menu,
-		parentMenuApi
-	]);
-	const openSubMenu = useCallback(() => {
-		if (!resolvedDisabled) menu.open("click");
-	}, [resolvedDisabled, menu]);
-	const handleSubMenuClick = useCallback((event) => {
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		openSubMenu();
-	}, [onClick, openSubMenu]);
-	const handleSubMenuKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) return;
-		if (event.key === "ArrowRight") {
-			event.preventDefault();
+		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();
-		}
-	}, [
-		resolvedDisabled,
-		onKeyDown,
-		openSubMenu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || resolvedDisabled || !parentMenuApi) return;
-		parentMenuApi.highlight(element, {
-			focus: false,
-			pointer: true
+		};
+		$[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
 		});
-	}, [resolvedDisabled, parentMenuApi]);
-	const triggerRef = useCallback((element) => {
-		menu.setTriggerElement(element);
-	}, [menu]);
-	const handleRootKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) {
-			if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();
-			return;
-		}
-		if (isInteractiveActivation(event.nativeEvent)) {
-			event.preventDefault();
-			menu.triggerProps.onClick(event.nativeEvent);
-			return;
-		}
-		menu.triggerProps.onKeyDown(event);
-	}, [
-		resolvedDisabled,
-		menu.triggerProps,
-		onKeyDown
-	]);
-	const rootTriggerProps = useMemo(() => ({
-		onClick: resolvedDisabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
-		onKeyDown: handleRootKeyDown
-	}), [
-		resolvedDisabled,
-		handleRootKeyDown,
-		menu.triggerProps
-	]);
-	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+	}
+	const T0 = MenuTriggerChildContextProvider;
+	const t11 = true;
+	const t12 = renderElement("button", {
 		render,
 		className,
-		style,
-		disabled: resolvedDisabled,
-		elementProps,
-		forwardedRef,
-		elementRef,
-		triggerId,
-		triggerAttrs: core.getTriggerAttrs(state, controlledId),
-		availability: optionState?.availability,
-		hidden: optionState?.hidden,
+		style
+	}, {
 		state,
-		onSubMenuClick: handleSubMenuClick,
-		onSubMenuKeyDown: handleSubMenuKeyDown,
-		onPointerEnter: handlePointerEnter
-	});
-	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
-		value: true,
-		children: 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
-			]
-		})
+		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", {
@@ -160,6 +242,9 @@ function MenuTriggerSubmenu({ render, className, style, disabled, elementProps,
 		]
 	});
 }
+function _temp(event_2) {
+	return event_2.preventDefault();
+}
 //#endregion
 export { MenuTrigger };
 

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

@@ -1 +1 @@
-{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/menu/trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps extends Omit<\n  UIComponentProps<'button', MenuState>,\n  'type' | 'onClick' | 'onKeyDown'\n> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu\n * trigger), renders as a `<div role=\"menuitem\">` that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId, optionState } = useMenuContext();\n  const resolvedDisabled = disabled || optionState?.disabled || false;\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n\n    const element = elementRef.current;\n    if (!element) return;\n\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!resolvedDisabled) menu.open('click');\n  }, [resolvedDisabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [resolvedDisabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [resolvedDisabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    },\n    [menu]\n  );\n\n  const handleRootKeyDown = useCallback(\n    (event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();\n\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    },\n    [resolvedDisabled, menu.triggerProps, onKeyDown]\n  );\n\n  const rootTriggerProps = useMemo(\n    () => ({\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [resolvedDisabled, handleRootKeyDown, menu.triggerProps]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={resolvedDisabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        availability={optionState?.availability}\n        hidden={optionState?.hidden}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  availability: MenuOptionState['availability'] | undefined;\n  hidden: boolean | undefined;\n  state: MenuState;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  triggerAttrs,\n  availability,\n  hidden,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-availability': availability,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n        hidden ? { hidden: true } : undefined,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"trigger.js","names":["{ render, className, style, disabled, onClick, onKeyDown, ...elementProps }","() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n\n    const element = elementRef.current;\n    if (!element) return;\n\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }","[isSubMenuTrigger, menu, parentMenuApi]","() => {\n    if (!resolvedDisabled) menu.open('click');\n  }","useCallback(() => {\n    if (!resolvedDisabled) menu.open('click');\n  }, [resolvedDisabled, menu])","(event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      openSubMenu();\n    }","useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  )","(event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    }","event","useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [resolvedDisabled, onKeyDown, openSubMenu]\n  )","() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }","element","useCallback(() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [resolvedDisabled, parentMenuApi])","(element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    }","useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    },\n    [menu]\n  )","(event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();\n\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    }","triggerProps","defaultPreventedByUser","useCallback(\n    (event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();\n\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    },\n    [resolvedDisabled, menu.triggerProps, onKeyDown]\n  )","resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick","(event: React.MouseEvent<HTMLElement>) => event.preventDefault()","{\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }","useMemo(\n    () => ({\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [resolvedDisabled, handleRootKeyDown, menu.triggerProps]\n  )","core.getTriggerAttrs(state, controlledId)","<MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>","MenuTriggerChildContextProvider","renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\n          ],\n        }\n      )"],"sources":["../../../../src/ui/menu/trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps extends Omit<\n  UIComponentProps<'button', MenuState>,\n  'type' | 'onClick' | 'onKeyDown'\n> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu\n * trigger), renders as a `<div role=\"menuitem\">` that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId, optionState } = useMenuContext();\n  const resolvedDisabled = disabled || optionState?.disabled || false;\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n\n    const element = elementRef.current;\n    if (!element) return;\n\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!resolvedDisabled) menu.open('click');\n  }, [resolvedDisabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [resolvedDisabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [resolvedDisabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    },\n    [menu]\n  );\n\n  const handleRootKeyDown = useCallback(\n    (event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();\n\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    },\n    [resolvedDisabled, menu.triggerProps, onKeyDown]\n  );\n\n  const rootTriggerProps = useMemo(\n    () => ({\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [resolvedDisabled, handleRootKeyDown, menu.triggerProps]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={resolvedDisabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        availability={optionState?.availability}\n        hidden={optionState?.hidden}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  availability: MenuOptionState['availability'] | undefined;\n  hidden: boolean | undefined;\n  state: MenuState;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  triggerAttrs,\n  availability,\n  hidden,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-availability': availability,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n        hidden ? { hidden: true } : undefined,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}