npm - @videojs/react - Versions diffs - 10.0.0-beta.31 → 10.0.0-beta.32 - Mend

@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1552) hide show

package/dist/default/ui/menu/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuState, ~~StateAttrMap~~ } from '@videojs/core';\nimport type { MediaContainer, MenuApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n core: MenuCore;\n menu: MenuApi;\n parent: MenuContextValue \| null;\n state: MenuState;\n preferredSide: MenuState['side'];\n setPositionedSide: (side: MenuState['side']) => void;\n ~~stateAttrMap: StateAttrMap<MenuState>;\n~~ contentId: string;\n anchorName: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst MenuContext = createContext<MenuContextValue \| null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\nexport function useMenuContext(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n return ctx;\n}\n\nexport function useOptionalMenuContext(): MenuContextValue \| null {\n return useContext(MenuContext);\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue \| null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue \| null {\n return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue \| null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n const ctx = useContext(MenuRadioGroupContext);\n if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;~~AAkBA~~,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY~~;AAE~~/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;~~CACpF~~,OAAO;AACT~~;AAEA~~,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;~~CAChF~~,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface MenuContextValue {\n core: MenuCore;\n menu: MenuApi;\n parent: MenuContextValue \| null;\n state: MenuState;\n preferredSide: MenuState['side'];\n setPositionedSide: (side: MenuState['side']) => void;\n contentId: string;\n anchorName: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst MenuContext = createContext<MenuContextValue \| null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. /\nexport function useMenuContext(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n return ctx;\n}\n\n/* Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue \| null {\n return useContext(MenuContext);\n}\n\nexport interface MenuPopupContextValue {\n popup: MenuPopupApi;\n element: HTMLElement \| null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue \| null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n const ctx = useContext(MenuPopupContext);\n if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue \| null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue \| null {\n return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n value: string;\n onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue \| null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n const ctx = useContext(MenuRadioGroupContext);\n if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAiBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;AAOA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

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

@@ -6,6 +6,7 @@ import { MenuGroup } from "./menu-group.js";
 import { MenuGroupLabel } from "./menu-group-label.js";
 import { MenuItem } from "./menu-item.js";
 import { MenuItemIndicator } from "./menu-item-indicator.js";
+import { MenuPopup } from "./menu-popup.js";
 import { MenuRadioItem } from "./menu-radio-item.js";
 import { MenuRoot } from "./menu-root.js";
 import { MenuSeparator } from "./menu-separator.js";
@@ -18,6 +19,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	GroupLabel: () => MenuGroupLabel,
 	Item: () => MenuItem,
 	ItemIndicator: () => MenuItemIndicator,
+	Popup: () => MenuPopup,
 	RadioGroup: () => MenuRadioGroup,
 	RadioItem: () => MenuRadioItem,
 	Root: () => MenuRoot,
@@ -25,6 +27,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => MenuTrigger
 });
 //#endregion
-export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
+export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
 //# sourceMappingURL=index.parts.js.map

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

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

package/dist/default/ui/menu/menu-checkbox-item.js.map CHANGED Viewed

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

package/dist/default/ui/menu/menu-content.js CHANGED Viewed

@@ -1,18 +1,20 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
-import { useMenuContext } from "./context.js";
-import { usePopupPosition } from "../popover/use-popup-position.js";
+import { useMenuContext, useMenuPopupContext } from "./context.js";
 import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
-import { MenuPositioningCSSVars, getRootPositionOptions, isMenuNavigationKey, observeMenuSize, syncMenuSizeChain } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { MenuContentDataAttrs } from "@videojs/core";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/menu-content.tsx
-/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */
+/** Accessible item and focus scope for exactly one root or nested menu page. */
 const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
-	const { core, menu, parent, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, contentId, boundary, container } = useMenuContext();
-	const isSubmenu = state.isSubmenu;
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const { popup, element: popupElement } = useMenuPopupContext();
+	const isSubmenu = parent !== null;
 	const isActive = isSubmenu && state.open;
 	const wasActiveRef = useRef(false);
+	const cleanupRegistrationRef = useRef(null);
 	useLayoutEffect(() => {
 		if (!isSubmenu) return void 0;
 		const wasActive = wasActiveRef.current;
@@ -26,130 +28,66 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 		isSubmenu,
 		menu
 	]);
-	const setSubmenuContentElement = useCallback((element) => {
-		menu.setContentElement(element);
-		if (!element) requestAnimationFrame(() => {
-			syncMenuSizeChain(parent?.menu.contentElement ?? null);
-			if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });
+	const setContentElement = useCallback((element) => {
+		cleanupRegistrationRef.current?.();
+		cleanupRegistrationRef.current = null;
+		if (!element) {
+			if (isSubmenu) menu.setPopupElement(null);
+			return;
+		}
+		if (isSubmenu) menu.setPopupElement(element);
+		cleanupRegistrationRef.current = popup.registerContent({
+			menu,
+			parent: parent?.menu ?? null,
+			element
 		});
-	}, [menu, parent]);
-	const handleSubMenuKeyDown = useCallback((event) => {
+	}, [
+		isSubmenu,
+		menu,
+		parent?.menu,
+		popup
+	]);
+	const composedRef = useComposedRefs(forwardedRef, setContentElement);
+	const handleKeyDown = useCallback((event) => {
 		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
 		const isNavigationKey = isMenuNavigationKey(event);
 		menu.contentProps.onKeyDown(event);
-		if ((event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
+		if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
 			event.preventDefault();
 			menu.close("escape");
 		}
-		if (isNavigationKey) event.stopPropagation();
-	}, [onKeyDown, menu]);
-	const handleRootMenuKeyDown = useCallback((event) => {
-		onKeyDown?.(event);
-		menu.contentProps.onKeyDown(event);
-		if (event.key === "Escape") return;
-		if (isMenuNavigationKey(event)) event.stopPropagation();
-	}, [onKeyDown, menu]);
-	const handleRootMenuBlur = useCallback((event) => {
-		onBlur?.(event);
-		menu.contentProps.onFocusOut(event);
-	}, [onBlur, menu]);
-	const handleSubMenuBlur = useCallback((event) => {
-		onBlur?.(event);
-		menu.contentProps.onFocusOut(event);
-	}, [onBlur, menu]);
-	const internalRef = useRef(null);
-	const rootComposedRef = useComposedRefs(forwardedRef, useCallback((element) => {
-		if (!isSubmenu) menu.setContentElement(element);
-	}, [isSubmenu, menu]), internalRef);
-	const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);
-	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open && !isSubmenu,
-		anchorName,
-		position: positionOptions,
-		triggerSource: menu,
-		popupRef: internalRef,
-		boundary,
-		container,
-		cssVars: MenuPositioningCSSVars,
-		onSideChange: setPositionedSide
-	});
-	useLayoutEffect(() => {
-		if (isSubmenu || !state.open) return;
-		const contentElement = internalRef.current;
-		if (!contentElement) return;
-		const sync = () => syncMenuSizeChain(contentElement);
-		sync();
-		const frame = requestAnimationFrame(sync);
-		const stopObserving = observeMenuSize(contentElement, sync);
-		return () => {
-			cancelAnimationFrame(frame);
-			stopObserving();
-		};
-	}, [isSubmenu, state.open]);
-	useLayoutEffect(() => {
-		if (!isSubmenu) return;
-		const isEnding = state.status === "ending";
-		const parentContentElement = parent?.menu.contentElement ?? null;
-		const sync = () => syncMenuSizeChain(parentContentElement);
-		sync();
-		const frame = requestAnimationFrame(sync);
-		const stopObserving = state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;
-		return () => {
-			cancelAnimationFrame(frame);
-			stopObserving?.();
-		};
+		if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
 	}, [
 		isSubmenu,
-		parent,
-		state.open,
-		state.status
+		menu,
+		onKeyDown
 	]);
-	if (isSubmenu) {
-		if (!isActive && state.status !== "ending") return null;
-		const subMenuContent = renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			stateAttrMap,
-			ref: submenuComposedRef,
-			props: [{
-				id: contentId,
-				role: "menu",
-				tabIndex: -1,
-				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: handleSubMenuKeyDown,
-				onBlur: handleSubMenuBlur
-			}, elementProps]
-		});
-		const parentContentElement = parent?.menu.contentElement ?? null;
-		return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;
-	}
-	if (!state.open && state.status !== "ending") return null;
-	return renderElement("div", {
+	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	const contentNode = renderElement("div", {
 		render,
 		className,
 		style
 	}, {
 		state,
-		stateAttrMap,
-		ref: rootComposedRef,
+		stateAttrMap: MenuContentDataAttrs,
+		ref: composedRef,
 		props: [
 			{
 				id: contentId,
-				style: positioningStyle,
-				...core.getContentAttrs(state)
+				...core.getContentAttrs()
 			},
 			{
 				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: handleRootMenuKeyDown,
-				onBlur: handleRootMenuBlur
+				onKeyDown: handleKeyDown,
+				onBlur: (event) => {
+					onBlur?.(event);
+					if (isSubmenu) menu.contentProps.onFocusOut(event);
+				}
 			},
 			elementProps
 		]
 	});
+	return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;
 });
 //#endregion
 export { MenuContent };

package/dist/default/ui/menu/menu-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport {\n getRootPositionOptions,\n isMenuNavigationKey,\n MenuPositioningCSSVars,\n observeMenuSize,\n syncMenuSizeChain,\n} from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Container for menu items. Positioned relative to the trigger at root level; renders in-place as a submenu panel when nested. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n { render, className, style, onKeyDown, onBlur, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n menu,\n parent,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n contentId,\n boundary,\n container,\n } = useMenuContext();\n const isSubmenu = state.isSubmenu;\n const isActive = isSubmenu && state.open;\n const wasActiveRef = useRef(false);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return undefined;\n\n const wasActive = wasActiveRef.current;\n wasActiveRef.current = isActive;\n\n if (isActive && !wasActive) {\n const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n return () => cancelAnimationFrame(frame);\n }\n\n return undefined;\n }, [isActive, isSubmenu, menu]);\n\n const setSubmenuContentElement = useCallback(\n (element: HTMLDivElement \| null) => {\n menu.setContentElement(element);\n if (!element) {\n requestAnimationFrame(() => {\n syncMenuSizeChain(parent?.menu.contentElement ?? null);\n if (!menu.input.current.active) menu.restoreFocus({ preventScroll: true });\n });\n }\n },\n [menu, parent]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(\n onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined,\n event\n );\n const isNavigationKey = isMenuNavigationKey(event);\n menu.contentProps.onKeyDown(event);\n const isBackNavigationKey = event.key === 'ArrowLeft' \|\| event.key === 'Escape';\n\n if (isBackNavigationKey && !defaultPreventedByUser) {\n event.preventDefault();\n menu.close('escape');\n }\n\n if (isNavigationKey) event.stopPropagation();\n },\n [onKeyDown, menu]\n );\n\n const handleRootMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onKeyDown(event);\n if (event.key === 'Escape') return;\n if (isMenuNavigationKey(event)) event.stopPropagation();\n },\n [onKeyDown, menu]\n );\n\n const handleRootMenuBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n (onBlur as React.FocusEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onFocusOut(event);\n },\n [onBlur, menu]\n );\n\n const handleSubMenuBlur = useCallback(\n (event: React.FocusEvent<HTMLDivElement>) => {\n (onBlur as React.FocusEventHandler<HTMLDivElement> \| undefined)?.(event);\n menu.contentProps.onFocusOut(event);\n },\n [onBlur, menu]\n );\n\n const internalRef = useRef<HTMLDivElement>(null);\n const contentRef = useCallback(\n (element: HTMLDivElement \| null) => {\n if (!isSubmenu) menu.setContentElement(element);\n },\n [isSubmenu, menu]\n );\n const rootComposedRef = useComposedRefs(forwardedRef, contentRef, internalRef);\n const submenuComposedRef = useComposedRefs(forwardedRef, setSubmenuContentElement);\n const positionOptions = useMemo(\n () => getRootPositionOptions(preferredSide, state.align),\n [preferredSide, state.align]\n );\n const positioningStyle = usePopupPosition({\n open: state.open && !isSubmenu,\n anchorName,\n position: positionOptions,\n triggerSource: menu,\n popupRef: internalRef,\n boundary,\n container,\n cssVars: MenuPositioningCSSVars,\n onSideChange: setPositionedSide,\n });\n\n useLayoutEffect(() => {\n if (isSubmenu \|\| !state.open) return;\n\n const contentElement = internalRef.current;\n if (!contentElement) return;\n\n const sync = () => syncMenuSizeChain(contentElement);\n sync();\n const frame = requestAnimationFrame(sync);\n const stopObserving = observeMenuSize(contentElement, sync);\n\n return () => {\n cancelAnimationFrame(frame);\n stopObserving();\n };\n }, [isSubmenu, state.open]);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return;\n\n const isEnding = state.status === 'ending';\n const parentContentElement = parent?.menu.contentElement ?? null;\n const sync = () => syncMenuSizeChain(parentContentElement);\n sync();\n const frame = requestAnimationFrame(sync);\n const stopObserving =\n state.open && !isEnding && parentContentElement ? observeMenuSize(parentContentElement, sync) : null;\n\n return () => {\n cancelAnimationFrame(frame);\n stopObserving?.();\n };\n }, [isSubmenu, parent, state.open, state.status]);\n\n if (isSubmenu) {\n if (!isActive && state.status !== 'ending') return null;\n\n const subMenuContent = renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: submenuComposedRef,\n props: [\n {\n id: contentId,\n role: 'menu' as const,\n tabIndex: -1,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: handleSubMenuKeyDown,\n onBlur: handleSubMenuBlur,\n },\n elementProps,\n ],\n }\n );\n\n const parentContentElement = parent?.menu.contentElement ?? null;\n return parentContentElement ? createPortal(subMenuContent, parentContentElement) : subMenuContent;\n }\n\n if (!state.open && state.status !== 'ending') return null;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: rootComposedRef,\n props: [\n {\n id: contentId,\n style: positioningStyle,\n ...core.getContentAttrs(state),\n },\n { onKeyDownCapture: preventMenuKeyDefault, onKeyDown: handleRootMenuKeyDown, onBlur: handleRootMenuBlur },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace MenuContent {\n export type Props = MenuContentProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EACJ,MACA,MACA,QACA,OACA,eACA,mBACA,cACA,YACA,WACA,UACA,cACE,eAAe;CACnB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CAEjC,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAC/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAC1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,2BAA2B,aAC9B,YAAmC;EAClC,KAAK,kBAAkB,OAAO;EAC9B,IAAI,CAAC,SACH,4BAA4B;GAC1B,kBAAkB,QAAQ,KAAK,kBAAkB,IAAI;GACrD,IAAI,CAAC,KAAK,MAAM,QAAQ,QAAQ,KAAK,aAAa,EAAE,eAAe,KAAK,CAAC;EAC3E,CAAC;CAEL,GACA,CAAC,MAAM,MAAM,CACf;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EACjD,KAAK,aAAa,UAAU,KAAK;EAGjC,KAF4B,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAE5C,CAAC,wBAAwB;GAClD,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,iBAAiB,MAAM,gBAAgB;CAC7C,GACA,CAAC,WAAW,IAAI,CAClB;CAEA,MAAM,wBAAwB,aAC3B,UAA+C;EAC9C,YAAwE,KAAK;EAC7E,KAAK,aAAa,UAAU,KAAK;EACjC,IAAI,MAAM,QAAQ,UAAU;EAC5B,IAAI,oBAAoB,KAAK,GAAG,MAAM,gBAAgB;CACxD,GACA,CAAC,WAAW,IAAI,CAClB;CAEA,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,SAAkE,KAAK;EACvE,KAAK,aAAa,WAAW,KAAK;CACpC,GACA,CAAC,QAAQ,IAAI,CACf;CAEA,MAAM,oBAAoB,aACvB,UAA4C;EAC3C,SAAkE,KAAK;EACvE,KAAK,aAAa,WAAW,KAAK;CACpC,GACA,CAAC,QAAQ,IAAI,CACf;CAEA,MAAM,cAAc,OAAuB,IAAI;CAO/C,MAAM,kBAAkB,gBAAgB,cANrB,aAChB,YAAmC;EAClC,IAAI,CAAC,WAAW,KAAK,kBAAkB,OAAO;CAChD,GACA,CAAC,WAAW,IAAI,CAE6C,GAAG,WAAW;CAC7E,MAAM,qBAAqB,gBAAgB,cAAc,wBAAwB;CACjF,MAAM,kBAAkB,cAChB,uBAAuB,eAAe,MAAM,KAAK,GACvD,CAAC,eAAe,MAAM,KAAK,CAC7B;CACA,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM,QAAQ,CAAC;EACrB;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,SAAS;EACT,cAAc;CAChB,CAAC;CAED,sBAAsB;EACpB,IAAI,aAAa,CAAC,MAAM,MAAM;EAE9B,MAAM,iBAAiB,YAAY;EACnC,IAAI,CAAC,gBAAgB;EAErB,MAAM,aAAa,kBAAkB,cAAc;EACnD,KAAK;EACL,MAAM,QAAQ,sBAAsB,IAAI;EACxC,MAAM,gBAAgB,gBAAgB,gBAAgB,IAAI;EAE1D,aAAa;GACX,qBAAqB,KAAK;GAC1B,cAAc;EAChB;CACF,GAAG,CAAC,WAAW,MAAM,IAAI,CAAC;CAE1B,sBAAsB;EACpB,IAAI,CAAC,WAAW;EAEhB,MAAM,WAAW,MAAM,WAAW;EAClC,MAAM,uBAAuB,QAAQ,KAAK,kBAAkB;EAC5D,MAAM,aAAa,kBAAkB,oBAAoB;EACzD,KAAK;EACL,MAAM,QAAQ,sBAAsB,IAAI;EACxC,MAAM,gBACJ,MAAM,QAAQ,CAAC,YAAY,uBAAuB,gBAAgB,sBAAsB,IAAI,IAAI;EAElG,aAAa;GACX,qBAAqB,KAAK;GAC1B,gBAAgB;EAClB;CACF,GAAG;EAAC;EAAW;EAAQ,MAAM;EAAM,MAAM;CAAM,CAAC;CAEhD,IAAI,WAAW;EACb,IAAI,CAAC,YAAY,MAAM,WAAW,UAAU,OAAO;EAEnD,MAAM,iBAAiB,cACrB,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA;GACA,KAAK;GACL,OAAO,CACL;IACE,IAAI;IACJ,MAAM;IACN,UAAU;IACV,kBAAkB;IAClB,WAAW;IACX,QAAQ;GACV,GACA,YACF;EACF,CACF;EAEA,MAAM,uBAAuB,QAAQ,KAAK,kBAAkB;EAC5D,OAAO,uBAAuB,aAAa,gBAAgB,oBAAoB,IAAI;CACrF;CAEA,IAAI,CAAC,MAAM,QAAQ,MAAM,WAAW,UAAU,OAAO;CAErD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,gBAAgB,KAAK;GAC/B;GACA;IAAE,kBAAkB;IAAuB,WAAW;IAAuB,QAAQ;GAAmB;GACxG;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"menu-content.js","names":[],"sources":["../../../../src/ui/menu/menu-content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n { render, className, style, onKeyDown, onBlur, ...elementProps },\n forwardedRef\n) {\n const { core, menu, parent, state, contentId } = useMenuContext();\n const { popup, element: popupElement } = useMenuPopupContext();\n const isSubmenu = parent !== null;\n const isActive = isSubmenu && state.open;\n const wasActiveRef = useRef(false);\n const cleanupRegistrationRef = useRef<(() => void) \| null>(null);\n\n useLayoutEffect(() => {\n if (!isSubmenu) return undefined;\n\n const wasActive = wasActiveRef.current;\n\n wasActiveRef.current = isActive;\n\n if (isActive && !wasActive) {\n const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n\n return () => cancelAnimationFrame(frame);\n }\n\n return undefined;\n }, [isActive, isSubmenu, menu]);\n\n const setContentElement = useCallback(\n (element: HTMLDivElement \| null) => {\n cleanupRegistrationRef.current?.();\n cleanupRegistrationRef.current = null;\n\n if (!element) {\n if (isSubmenu) menu.setPopupElement(null);\n\n return;\n }\n\n if (isSubmenu) menu.setPopupElement(element);\n\n cleanupRegistrationRef.current = popup.registerContent({\n menu,\n parent: parent?.menu ?? null,\n element,\n });\n },\n [isSubmenu, menu, parent?.menu, popup]\n );\n const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(\n onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined,\n event\n );\n const isNavigationKey = isMenuNavigationKey(event);\n\n menu.contentProps.onKeyDown(event);\n\n if (isSubmenu && (event.key === 'ArrowLeft' \|\| event.key === 'Escape') && !defaultPreventedByUser) {\n event.preventDefault();\n menu.close('escape');\n }\n\n if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n },\n [isSubmenu, menu, onKeyDown]\n );\n\n if (isSubmenu && !isActive && state.status !== 'ending') return null;\n\n const contentNode = renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: MenuContentDataAttrs,\n ref: composedRef,\n props: [\n { id: contentId, ...core.getContentAttrs() },\n {\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: handleKeyDown,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n\n if (isSubmenu) menu.contentProps.onFocusOut(event);\n },\n },\n elementProps,\n ],\n }\n );\n\n return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n export type Props = MenuContentProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAE/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAE1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,oBAAoB,aACvB,YAAmC;EAClC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAEjC,IAAI,CAAC,SAAS;GACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;GAExC;EACF;EAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;EAE3C,uBAAuB,UAAU,MAAM,gBAAgB;GACrD;GACA,QAAQ,QAAQ,QAAQ;GACxB;EACF,CAAC;CACH,GACA;EAAC;EAAW;EAAM,QAAQ;EAAM;CAAK,CACvC;CACA,MAAM,cAAc,gBAAgB,cAAc,iBAAiB;CAEnE,MAAM,gBAAgB,aACnB,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EAEjD,KAAK,aAAa,UAAU,KAAK;EAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;GACjG,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;CACvE,GACA;EAAC;EAAW;EAAM;CAAS,CAC7B;CAEA,IAAI,aAAa,CAAC,YAAY,MAAM,WAAW,UAAU,OAAO;CAEhE,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,UAA4C;KACnD,SAAS,KAAK;KAEd,IAAI,WAAW,KAAK,aAAa,WAAW,KAAK;IACnD;GACF;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}

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

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

package/dist/default/ui/menu/menu-item.js CHANGED Viewed

@@ -13,29 +13,31 @@ const MenuItem = forwardRef(function MenuItem({ render, className, style, onSele
 		if (!element) return;
 		return menu.registerItem(element);
 	}, [menu]);
+	const handleClick = useCallback((event) => {
+		if (disabled) return;
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		onSelect?.();
+		completeMenuItemSelection(menu);
+	}, [
+		disabled,
+		onClick,
+		onSelect,
+		menu
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled) return;
+		menu.highlight(element, {
+			focus: false,
+			pointer: true
+		});
+	}, [menu, disabled]);
 	return /* @__PURE__ */ jsx(MenuItemContent, {
 		disabled,
 		elementProps,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick?.(event);
-			if (event.defaultPrevented) return;
-			onSelect?.();
-			completeMenuItemSelection(menu);
-		}, [
-			disabled,
-			onClick,
-			onSelect,
-			menu
-		]),
-		onPointerEnter: useCallback(() => {
-			const element = elementRef.current;
-			if (!element || disabled) return;
-			menu.highlight(element, {
-				focus: false,
-				pointer: true
-			});
-		}, [menu, disabled]),
+		onClick: handleClick,
+		onPointerEnter: handlePointerEnter,
 		render,
 		className,
 		style,

package/dist/default/ui/menu/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n /** Called when the item is selected. /\n onSelect?: () => void;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n { render, className, style, onSelect, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const elementRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n onClick?.(event);\n if (event.defaultPrevented) return;\n onSelect?.();\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onSelect, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuItemContent\n disabled={disabled}\n elementProps={elementProps}\n onClick={handleClick}\n onPointerEnter={handlePointerEnter}\n render={render}\n className={className}\n style={style}\n state={state}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n />\n );\n});\n\ninterface MenuItemContentProps {\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n render: MenuItemProps['render'];\n className: MenuItemProps['className'];\n style: MenuItemProps['style'];\n state: MenuState;\n forwardedRef: React.ForwardedRef<HTMLDivElement>;\n elementRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nfunction MenuItemContent({\n disabled,\n elementProps,\n onClick,\n onPointerEnter,\n render,\n className,\n style,\n state,\n forwardedRef,\n elementRef,\n}: MenuItemContentProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitem' as const,\n 'aria-disabled': disabled ? true : undefined,\n onClick,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n\nexport namespace MenuItem {\n export type Props = MenuItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;~~EACd~~,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;~~CAmBT~~,~~OACE~~,~~oBAAC~~,~~iBAAD;EACY;EACI;EACd,SArBgB,~~aACjB,UAA4C;~~GAC3C~~,IAAI,UAAU;~~GACd~~,UAAU,KAAK;~~GACf~~,IAAI,MAAM,kBAAkB;~~GAC5B~~,WAAW;~~GACX~~,0BAA0B,IAAI;~~EAChC~~,GACA;~~GAAC~~;~~GAAU~~;~~GAAS~~;~~GAAU~~;~~EAAI~~,~~CAab~~;~~EACnB~~,~~gBAXuB~~,kBAAkB;~~GAC3C~~,MAAM,UAAU,WAAW;~~GAC3B~~,IAAI,CAAC,WAAW,UAAU;~~GAC1B~~,KAAK,UAAU,SAAS;~~IAAE~~,OAAO;~~IAAO~~,SAAS;~~GAAK~~,CAAC;~~EACzD~~,GAAG,CAAC,MAAM,QAAQ,~~CAOmB~~;~~EACzB~~;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}
1	+ {"version":3,"file":"menu-item.js","names":[],"sources":["../../../../src/ui/menu/menu-item.tsx"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { completeMenuItemSelection } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuItemProps extends UIComponentProps<'div', MenuState> {\n /** Called when the item is selected. /\n onSelect?: () => void;\n /* Whether the item is disabled. /\n disabled?: boolean;\n}\n\n/* A single action in the menu. Renders a `<div>` with `role=\"menuitem\"`. */\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n { render, className, style, onSelect, disabled, onClick, ...elementProps },\n forwardedRef\n) {\n const { menu, state } = useMenuContext();\n const elementRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const element = elementRef.current;\n if (!element) return;\n\n return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n\n onClick?.(event);\n\n if (event.defaultPrevented) return;\n\n onSelect?.();\n completeMenuItemSelection(menu);\n },\n [disabled, onClick, onSelect, menu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n\n menu.highlight(element, { focus: false, pointer: true });\n }, [menu, disabled]);\n\n return (\n <MenuItemContent\n disabled={disabled}\n elementProps={elementProps}\n onClick={handleClick}\n onPointerEnter={handlePointerEnter}\n render={render}\n className={className}\n style={style}\n state={state}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n />\n );\n});\n\ninterface MenuItemContentProps {\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n onClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n render: MenuItemProps['render'];\n className: MenuItemProps['className'];\n style: MenuItemProps['style'];\n state: MenuState;\n forwardedRef: React.ForwardedRef<HTMLDivElement>;\n elementRef: React.RefObject<HTMLDivElement \| null>;\n}\n\nfunction MenuItemContent({\n disabled,\n elementProps,\n onClick,\n onPointerEnter,\n render,\n className,\n style,\n state,\n forwardedRef,\n elementRef,\n}: MenuItemContentProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: 'menuitem' as const,\n 'aria-disabled': disabled ? true : undefined,\n onClick,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n\nexport namespace MenuItem {\n export type Props = MenuItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAgBA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,SAAS,GAAG,gBAC5D,cACA;CACA,MAAM,EAAE,MAAM,UAAU,eAAe;CACvC,MAAM,aAAa,OAAuB,IAAI;CAE9C,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;EAEd,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,WAAW;EACX,0BAA0B,IAAI;CAChC,GACA;EAAC;EAAU;EAAS;EAAU;CAAI,CACpC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAE1B,KAAK,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CACzD,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OACE,oBAAC,iBAAD;EACY;EACI;EACd,SAAS;EACT,gBAAgB;EACR;EACG;EACJ;EACA;EACO;EACF;CACb,CAAA;AAEL,CAAC;AAeD,SAAS,gBAAgB,EACvB,UACA,cACA,SACA,gBACA,QACA,WACA,OACA,OACA,cACA,cACuB;CACvB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,iBAAiB,WAAW,OAAO,KAAA;GACnC;GACA;EACF,GACA,YACF;CACF,CACF;AACF"}

package/dist/default/ui/menu/menu-keyboard.js.map CHANGED Viewed

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

package/dist/default/ui/menu/menu-popup.js ADDED Viewed

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

package/dist/default/ui/menu/menu-popup.js.map ADDED Viewed

@@ -0,0 +1 @@

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/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 return menu.registerItem(element);\n }, [menu]);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) return;\n onClick?.(event);\n if (event.defaultPrevented) return;\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 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;~~EACd~~,OAAO,KAAK,aAAa,OAAO;CAClC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,cAAc,aACjB,UAA4C;EAC3C,IAAI,UAAU;~~EACd~~,UAAU,KAAK;~~EACf~~,IAAI,MAAM,kBAAkB;~~EAC5B~~,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;~~EAC1B~~,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"}
1	+ {"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/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"}

package/dist/default/ui/menu/menu-root.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { createMenu, createTransition, selectControls } from "@videojs/core/dom"
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { MenuCore, MenuDataAttrs } from "@videojs/core";
+import { MenuCore } from "@videojs/core";
 //#region src/ui/menu/menu-root.tsx
 function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, boundary = "container", children, ...coreProps }) {
 	const parentMenu = useOptionalMenuContext();
@@ -69,7 +69,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		input.active,
 		isSubmenu
 	]);
-	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
+	const preferredState = useMemo(() => {
 		core.setProps({
 			side,
 			align,
@@ -89,32 +89,33 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		closeOnEscape,
 		closeOnOutsideClick,
 		isSubmenu
-	]));
+	]);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);
+	const contextValue = useMemo(() => ({
+		core,
+		menu,
+		parent: parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container
+	}), [
+		core,
+		menu,
+		parentMenu,
+		state,
+		preferredSide,
+		setPositionedSide,
+		contentId,
+		anchorName,
+		boundary,
+		container
+	]);
 	return /* @__PURE__ */ jsx(MenuContextProvider, {
-		value: useMemo(() => ({
-			core,
-			menu,
-			parent: parentMenu,
-			state,
-			preferredSide,
-			setPositionedSide,
-			stateAttrMap: MenuDataAttrs,
-			contentId,
-			anchorName,
-			boundary,
-			container
-		}), [
-			core,
-			menu,
-			parentMenu,
-			state,
-			preferredSide,
-			setPositionedSide,
-			contentId,
-			anchorName,
-			boundary,
-			container
-		]),
+		value: contextValue,
 		children
 	});
 }

package/dist/default/ui/menu/menu-root.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["import { MenuCore, ~~MenuDataAttrs~~ } 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 { useEffect, useLayoutEffect, useMemo, useState } from 'react';\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 MenuCore.Props {\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 const closeOnEscapeRef = useLatestRef(closeOnEscape);\n const closeOnOutsideClickRef = useLatestRef(closeOnOutsideClick);\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 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 contextValue = useMemo(\n () => ({\n core,\n menu,\n parent: parentMenu,\n state,\n preferredSide,\n setPositionedSide,\n ~~stateAttrMap: MenuDataAttrs,\n~~ contentId,\n anchorName,\n boundary,\n container,\n }),\n [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n );\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;~~AA8BA~~,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,SAAS,CAAC;CAErD,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;~~CACrE~~,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;~~CAC~~/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;~~EAe5B~~,~~OAdiB~~,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;~~IAC~~/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;~~CAOhE~~,MAAM,~~EAAE~~,~~OAAO,eAAe,sBAAsB,mBAL7B,~~cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;EAAoB,CAAC;EACjE,KAAK,SAAS;GAAE,GAAG;GAAO;EAAU,CAAC;EACrC,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,~~CACS,~~CAAC;~~CAmBrF~~,OAAO,~~oBAAC~~,~~qBAAD~~;~~EAAqB~~,~~OAjBP~~,eACZ;~~GACL~~;~~GACA~~;~~GACA~~,QAAQ;~~GACR~~;~~GACA~~;~~GACA~~;~~GACA,cAAc~~;~~GACd~~;~~GACA~~;~~GACA~~;~~GACA;EACF~~,IACA;~~GAAC~~;~~GAAM~~;~~GAAM~~;~~GAAY~~;~~GAAO~~;~~GAAe~~;~~GAAmB~~;~~GAAW~~;~~GAAY~~;~~GAAU~~;~~EAAS~~,~~CAGhE~~;~~EAAI~~;CAA8B,CAAA;AAClF"}
1	+ {"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["import { MenuCore } 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 { 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 MenuCore.Props {\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 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 }),\n [core, menu, parentMenu, state, preferredSide, setPositionedSide, contentId, anchorName, boundary, container]\n );\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BA,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,uBAAuB;CAC1C,MAAM,WAAW,2BAA2B;CAC5C,MAAM,gBAAgB,kBAAkB,cAAc;CACtD,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,SAAS,CAAC;CAErD,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,WAAW;CACpE,MAAM,eAAe,kBAAkB;CAEvC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,MAAM,mBAAmB,aAAa,aAAa;CACnD,MAAM,yBAAyB,aAAa,mBAAmB;CAE/D,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,eAAe,aAAa,SAAS;CAE3C,MAAM,CAAC,QAAQ,eAAe;EAgB5B,OAfiB,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,IAAI,CAAC,cAAc,oBAAoB,QAAQ;IAE/C,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,qBAAqB,UAAU;IAC7B,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;EACjE,CAEc;CAChB,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAElC,sBAAsB,YAAY,KAAK,gBAAgB,IAAI,GAAG,CAAC,MAAM,YAAY,IAAI,CAAC;CAGtF,sBAAsB;EACpB,KAAK,SAAS,YAAY;CAC5B,GAAG,CAAC,MAAM,YAAY,CAAC;CAEvB,gBAAgB;EACd,IAAI,aAAa,UAAU,MAAM,YAAY,OAAO;EAEpD,KAAK,MAAM,mBAAmB;CAChC,GAAG;EAAC,UAAU,MAAM;EAAS;EAAW;CAAI,CAAC;CAE7C,WAAW,IAAI;CAEf,MAAM,QAAQ,YAAY,KAAK,KAAK;CAEpC,gBAAgB;EACd,IAAI,CAAC,MAAM,UAAU,WAAW;EAEhC,OAAO,eAAe,oBAAoB;CAC5C,GAAG;EAAC,eAAe;EAAqB,MAAM;EAAQ;CAAS,CAAC;CAEhE,MAAM,iBAAiB,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;EAAoB,CAAC;EACjE,KAAK,SAAS;GAAE,GAAG;GAAO;EAAU,CAAC;EACrC,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CAAC;CAC5E,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,cAAc;CAErF,MAAM,eAAe,eACZ;EACL;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAM;EAAY;EAAO;EAAe;EAAmB;EAAW;EAAY;EAAU;CAAS,CAC9G;CAEA,OAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;CAA8B,CAAA;AAClF"}