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

@videojs/react 10.0.0-beta.30 → 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 (1563) hide show

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"}

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

@@ -8,9 +8,8 @@ import { isInteractiveActivation } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-trigger.tsx
 /**
-* Button that toggles the menu visibility. At root level renders a `<button>`.
-* When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
-* that opens the submenu on click or ArrowRight.
+* 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 { core, menu, parent, state, contentId } = useMenuContext();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, 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 './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement \| HTMLDivElement;\n\nexport interface MenuTriggerProps\n extends Omit<UIComponentProps<'button', MenuState>, 'type' \| 'onClick' \| 'onKeyDown'> {\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~~>`.\n~~ * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\"~~>`\n~~ * 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 } = useMenuContext();\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 const element = elementRef.current;\n if (!element) return;\n menu.setTriggerElement(element);\n const unregister = parentMenuApi.registerItem(element);\n return () => {\n unregister();\n menu.setTriggerElement(null);\n };\n }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n const openSubMenu = useCallback(() => {\n if (!disabled) menu.open('click');\n }, [disabled, menu]);\n\n const handleSubMenuClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.defaultPrevented) return;\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 (disabled \|\| defaultPreventedByUser) return;\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n openSubMenu();\n }\n },\n [disabled, onKeyDown, openSubMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled \|\| !parentMenuApi) return;\n parentMenuApi.highlight(element, { focus: false, pointer: true });\n }, [disabled, 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 (disabled \|\| defaultPreventedByUser) {\n if (disabled && isMenuNavigationKey(event)) event.preventDefault();\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 [disabled, menu.triggerProps, onKeyDown]\n );\n\n const rootTriggerProps = useMemo(\n () => ({\n onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n onKeyDown: handleRootKeyDown,\n }),\n [disabled, 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={disabled}\n elementProps={elementProps}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n triggerId={triggerId}\n triggerAttrs={core.getTriggerAttrs(state, controlledId)}\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 disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n rootTriggerProps,\n elementProps,\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 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 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-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;AA0BA~~,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;~~EACzC~~,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;~~EACd~~,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;~~EACrD~~,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;~~EACf~~,IAAI,MAAM,kBAAkB;~~EAC5B~~,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;~~EACxC~~,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;~~EAC5C~~,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,oBAAoB,aACvB,UAAmD;EAClD,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAElE,IAAI,YAAY,wBAAwB;GACtC,IAAI,YAAY,oBAAoB,KAAK,GAAG,MAAM,eAAe;~~GACjE~~;EACF;EAEA,IAAI,wBAAwB,MAAM,WAAW,GAAG;GAC9C,MAAM,eAAe;GACrB,KAAK,aAAa,QAAQ,MAAM,WAAW;GAC3C;EACF;EAEA,KAAK,aAAa,UAAU,KAAK;CACnC,GACA;EAAC;EAAU,KAAK;EAAc;CAAS,CACzC;CAEA,MAAM,mBAAmB,eAChB;EACL,SAAS,YAAY,UAAyC,MAAM,eAAe,IAAI,KAAK,aAAa;EACzG,WAAW;CACb,IACA;EAAC;EAAU;EAAmB,KAAK;CAAY,CACjD;CAGA,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}
1	+ {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, 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 './menu-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 } = useMenuContext();\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 (!disabled) menu.open('click');\n }, [disabled, 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 (disabled \|\| defaultPreventedByUser) return;\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n openSubMenu();\n }\n },\n [disabled, onKeyDown, openSubMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled \|\| !parentMenuApi) return;\n\n parentMenuApi.highlight(element, { focus: false, pointer: true });\n }, [disabled, 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 (disabled \|\| defaultPreventedByUser) {\n if (disabled && 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 [disabled, menu.triggerProps, onKeyDown]\n );\n\n const rootTriggerProps = useMemo(\n () => ({\n onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n onKeyDown: handleRootKeyDown,\n }),\n [disabled, 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={disabled}\n elementProps={elementProps}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n triggerId={triggerId}\n triggerAttrs={core.getTriggerAttrs(state, controlledId)}\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 disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n rootTriggerProps,\n elementProps,\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 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 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-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;EAEzC,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;EAErD,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;EAExC,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;EAE5C,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,oBAAoB,aACvB,UAAmD;EAClD,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAElE,IAAI,YAAY,wBAAwB;GACtC,IAAI,YAAY,oBAAoB,KAAK,GAAG,MAAM,eAAe;GAEjE;EACF;EAEA,IAAI,wBAAwB,MAAM,WAAW,GAAG;GAC9C,MAAM,eAAe;GACrB,KAAK,aAAa,QAAQ,MAAM,WAAW;GAC3C;EACF;EAEA,KAAK,aAAa,UAAU,KAAK;CACnC,GACA;EAAC;EAAU,KAAK;EAAc;CAAS,CACzC;CAEA,MAAM,mBAAmB,eAChB;EACL,SAAS,YAAY,UAAyC,MAAM,eAAe,IAAI,KAAK,aAAa;EACzG,WAAW;CACb,IACA;EAAC;EAAU;EAAmB,KAAK;CAAY,CACjD;CAGA,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}

package/dist/default/ui/menu/use-menu-group.js CHANGED Viewed

@@ -19,8 +19,9 @@ function MenuGroupProvider({ children }) {
 			setLabelId((current) => current === id ? void 0 : current);
 		};
 	}, []);
+	const value = useMemo(() => ({ registerLabel }), [registerLabel]);
 	return /* @__PURE__ */ jsx(MenuGroupContextProvider, {
-		value: useMemo(() => ({ registerLabel }), [registerLabel]),
+		value,
 		children: children(labelId)
 	});
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["import { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n children: (labelId: string \| undefined) => ReactElement \| null;\n}\n\ninterface MenuGroupElementProps {\n 'aria-label'?: unknown;\n 'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n return elementProps['aria-label'] !== undefined \|\| elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n labelId: string \| undefined,\n elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string \| undefined } {\n return {\n role: 'group',\n 'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement \| null {\n const [labelId, setLabelId] = useState<string>();\n\n const registerLabel = useCallback((id: string) => {\n setLabelId(id);\n\n return () => {\n setLabelId((current) => (current === id ? undefined : current));\n };\n }, []);\n\n const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;AAaA,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;~~CAIL~~,~~OAAO~~,~~oBAAC~~,~~0BAAD;EAA0B,OAFnB,~~eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,~~CAEnB~~;~~EAAI~~,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}
1	+ {"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["import { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n children: (labelId: string \| undefined) => ReactElement \| null;\n}\n\ninterface MenuGroupElementProps {\n 'aria-label'?: unknown;\n 'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n return elementProps['aria-label'] !== undefined \|\| elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n labelId: string \| undefined,\n elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string \| undefined } {\n return {\n role: 'group',\n 'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement \| null {\n const [labelId, setLabelId] = useState<string>();\n\n const registerLabel = useCallback((id: string) => {\n setLabelId(id);\n\n return () => {\n setLabelId((current) => (current === id ? undefined : current));\n };\n }, []);\n\n const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;AAaA,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,QAAQ,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC;CAEhE,OAAO,oBAAC,0BAAD;EAAiC;EAAQ,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}

package/dist/default/ui/play-button/play-button.js CHANGED Viewed

@@ -6,17 +6,17 @@ import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
 * A button that toggles playback.
 *
 * @example
-* ```tsx
-* <PlayButton />
+*   ```tsx
+*   <PlayButton />
 *
-* <PlayButton
+*   <PlayButton
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.paused ? <PlayIcon /> : <PauseIcon />}
-*     </button>
+*   <button {...props}>
+*   {state.paused ? <PlayIcon /> : <PauseIcon />}
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const PlayButton = createMediaButton({
 	displayName: "PlayButton",

package/dist/default/ui/play-button/play-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/*\n A button that toggles playback.\n \n @example\n * ```tsx\n * <PlayButton />\n \n <PlayButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.paused ? <PlayIcon /> : <PauseIcon />}\n * </button>\n * )}\n * />\n * ~~```\~~n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n displayName: 'PlayButton',\n core: PlayButtonCore,\n stateAttrMap: PlayButtonDataAttrs,\n selector: selectPlayback,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n export type Props = PlayButtonProps;\n export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;AAChB,CAAC"}
1	+ {"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/*\n A button that toggles playback.\n \n @example\n * ```tsx\n * <PlayButton />\n \n <PlayButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.paused ? <PlayIcon /> : <PauseIcon />}\n * </button>\n * )}\n * />\n * ```;\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n displayName: 'PlayButton',\n core: PlayButtonCore,\n stateAttrMap: PlayButtonDataAttrs,\n selector: selectPlayback,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n export type Props = PlayButtonProps;\n export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;AAChB,CAAC"}

package/dist/default/ui/playback-rate/use-playback-rate-options.js CHANGED Viewed

@@ -10,8 +10,8 @@ const usePlaybackRateRadioOptions = createRadioOptionsHook({
 	createCore: () => new PlaybackRateRadioGroupCore()
 });
 /**
-* Create playback rate menu options from the player playback rate state.
-* Returns `null` when the playback rate feature is not configured.
+* Create playback rate menu options from the player playback rate state. Returns `null` when the playback rate feature
+* is not configured.
 *
 * @param props - Optional `label`, `formatRate`, and `disabled` overrides.
 */

package/dist/default/ui/playback-rate/use-playback-rate-options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["import {\n type PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n state: PlaybackRateRadioGroupCore.State;\n label: string;\n rate: number;\n value: string;\n selectedLabel: string;\n options: PlaybackRateOption[];\n disabled: boolean;\n hidden: boolean;\n setRate: (rate: number) => void;\n setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n name: 'usePlaybackRateOptions',\n feature: 'playbackRate',\n selector: selectPlaybackRate,\n createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/*\n Create playback rate menu options from the player playback rate state~~.\n~~ * Returns `null` when the playback rate feature is not configured.\n \n @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult \| null {\n const result = usePlaybackRateRadioOptions(props);\n const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n if (!result) return null;\n\n return {\n ...result,\n rate: result.state.rate,\n setRate,\n };\n}\n\nexport namespace usePlaybackRateOptions {\n export type Props = PlaybackRateOptionsProps;\n export type Result = PlaybackRateOptionsResult;\n export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;AA2BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;~~CAChG~~,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}
1	+ {"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["import {\n type PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n state: PlaybackRateRadioGroupCore.State;\n label: string;\n rate: number;\n value: string;\n selectedLabel: string;\n options: PlaybackRateOption[];\n disabled: boolean;\n hidden: boolean;\n setRate: (rate: number) => void;\n setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n name: 'usePlaybackRateOptions',\n feature: 'playbackRate',\n selector: selectPlaybackRate,\n createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/*\n Create playback rate menu options from the player playback rate state. Returns `null` when the playback rate feature\n * is not configured.\n \n @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult \| null {\n const result = usePlaybackRateRadioOptions(props);\n const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n\n if (!result) return null;\n\n return {\n ...result,\n rate: result.state.rate,\n setRate,\n };\n}\n\nexport namespace usePlaybackRateOptions {\n export type Props = PlaybackRateOptionsProps;\n export type Result = PlaybackRateOptionsResult;\n export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;AA2BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAEhG,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}

package/dist/default/ui/playback-rate-button/playback-rate-button.js CHANGED Viewed

@@ -6,17 +6,17 @@ import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/co
 * A button that cycles through playback rates.
 *
 * @example
-* ```tsx
-* <PlaybackRateButton />
+*   ```tsx
+*   <PlaybackRateButton />
 *
-* <PlaybackRateButton
+*   <PlaybackRateButton
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.rate}&times;
-*     </button>
+*   <button {...props}>
+*   {state.rate}&times;
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const PlaybackRateButton = createMediaButton({
 	displayName: "PlaybackRateButton",

package/dist/default/ui/playback-rate-button/playback-rate-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n extends UIComponentProps<'button', PlaybackRateButtonCore.State~~>,\n~~ PlaybackRateButtonCore.Props {}\n\n/*\n A button that cycles through playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateButton />\n \n <PlaybackRateButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.rate}×\n * </button>\n * )}\n * />\n * ~~```\~~n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n displayName: 'PlaybackRateButton',\n core: PlaybackRateButtonCore,\n stateAttrMap: PlaybackRateButtonDataAttrs,\n selector: selectPlaybackRate,\n action: (core, state) => core.cycle(state),\n hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n export type Props = PlaybackRateButtonProps;\n export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;~~AA0BA~~,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}
1	+ {"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n extends UIComponentProps<'button', PlaybackRateButtonCore.State>, PlaybackRateButtonCore.Props {}\n\n/*\n A button that cycles through playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateButton />\n \n <PlaybackRateButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.rate}×\n * </button>\n * )}\n * />\n * ```;\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n displayName: 'PlaybackRateButton',\n core: PlaybackRateButtonCore,\n stateAttrMap: PlaybackRateButtonDataAttrs,\n selector: selectPlaybackRate,\n action: (core, state) => core.cycle(state),\n hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n export type Props = PlaybackRateButtonProps;\n export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group.js CHANGED Viewed

@@ -3,23 +3,23 @@ import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-optio
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx
 /**
 * Renders menu radio items for the player's available playback rates.
 *
 * @example
-* ```tsx
-* <PlaybackRateRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <PlaybackRateRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const PlaybackRateRadioGroup = forwardRef(function PlaybackRateRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatRate, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["import { type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n type PlaybackRateOption,\n type PlaybackRateOptionsProps,\n usePlaybackRateOptions,\n} from '../playback-rate/use-playback-rate-options';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n /** Whether this playback rate is currently selected. /\n checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Playback rate represented by the item. /\n 'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupProps\n extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'~~>,\n~~ PlaybackRateOptionsProps {\n /* Render one consumer-owned menu radio item for every playback rate. /\n renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's available playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * ~~/>\~~n * ~~```\~~n */\nexport const PlaybackRateRadioGroup = forwardRef<HTMLDivElement, PlaybackRateRadioGroupProps>(\n function PlaybackRateRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRate,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const playbackRate = usePlaybackRateOptions({ label, formatRate, disabled });\n if (!playbackRate) return null;\n\n const { state, value, options, setValue } = playbackRate;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rate': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace PlaybackRateRadioGroup {\n export type Props = PlaybackRateRadioGroupProps;\n export type State = PlaybackRateRadioGroupCore.State;\n export type ItemProps = PlaybackRateRadioGroupItemProps;\n export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;~~AA+CA~~,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,cAAc;CAC5D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,YACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,uBAAuB;EAAE;EAAO;EAAY;CAAS,CAAC;CAC3E,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
1	+ {"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["import { type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n type PlaybackRateOption,\n type PlaybackRateOptionsProps,\n usePlaybackRateOptions,\n} from '../playback-rate/use-playback-rate-options';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n /** Whether this playback rate is currently selected. /\n checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Playback rate represented by the item. /\n 'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupProps\n extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'>, PlaybackRateOptionsProps {\n /* Render one consumer-owned menu radio item for every playback rate. /\n renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's available playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * />;\n * ```;\n */\nexport const PlaybackRateRadioGroup = forwardRef<HTMLDivElement, PlaybackRateRadioGroupProps>(\n function PlaybackRateRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRate,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const playbackRate = usePlaybackRateOptions({ label, formatRate, disabled });\n if (!playbackRate) return null;\n\n const { state, value, options, setValue } = playbackRate;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rate': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace PlaybackRateRadioGroup {\n export type Props = PlaybackRateRadioGroupProps;\n export type State = PlaybackRateRadioGroupCore.State;\n export type ItemProps = PlaybackRateRadioGroupItemProps;\n export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,cAAc;CAC5D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,YACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,uBAAuB;EAAE;EAAO;EAAY;CAAS,CAAC;CAC3E,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

package/dist/default/ui/popover/context.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { createContext, useContext } from "react";
 //#region src/ui/popover/context.tsx
 const PopoverContext = createContext(null);
 const PopoverContextProvider = PopoverContext.Provider;
+/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */
 function usePopoverContext() {
 	const ctx = useContext(PopoverContext);
 	if (!ctx) throw new Error("Popover compound components must be used within a Popover.Root");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["import type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, PopoverApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n core: PopoverCore;\n popover: PopoverApi;\n state: PopoverCore.State;\n preferredSide: PopoverCore.State['side'];\n setPositionedSide: (side: PopoverCore.State['side']) => void;\n stateAttrMap: StateAttrMap<PopoverCore.State>;\n anchorName: string;\n popupId: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst PopoverContext = createContext<PopoverContextValue \| null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\nexport function usePopoverContext(): PopoverContextValue {\n const ctx = useContext(PopoverContext);\n if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n return ctx;\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe~~;AAErD~~,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;~~CAC1F~~,OAAO;AACT"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["import type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { MediaContainer, PopoverApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n core: PopoverCore;\n popover: PopoverApi;\n state: PopoverCore.State;\n preferredSide: PopoverCore.State['side'];\n setPositionedSide: (side: PopoverCore.State['side']) => void;\n stateAttrMap: StateAttrMap<PopoverCore.State>;\n anchorName: string;\n popupId: string;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n}\n\nconst PopoverContext = createContext<PopoverContextValue \| null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\n/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */\nexport function usePopoverContext(): PopoverContextValue {\n const ctx = useContext(PopoverContext);\n if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n\n return ctx;\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;;AAGrD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAE1F,OAAO;AACT"}

package/dist/default/ui/popover/popover-popup.js CHANGED Viewed

@@ -4,13 +4,17 @@ import { usePopupPosition } from "./use-popup-position.js";
 import { usePopoverContext } from "./context.js";
 import { forwardRef, useCallback, useMemo, useRef } from "react";
 //#region src/ui/popover/popover-popup.tsx
-/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+/**
+* Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
 const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
 	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
 	const internalRef = useRef(null);
-	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+	const popupRef = useCallback((el) => {
 		popover.setPopupElement(el);
-	}, [popover]), internalRef);
+	}, [popover]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
 	const posOpts = useMemo(() => ({
 		side: preferredSide,
 		align: state.align

package/dist/default/ui/popover/popover-popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\nimport { usePopupPosition } from './use-popup-position';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n popover,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n },\n [popover]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: posOpts,\n triggerSource: popover,\n popupRef: internalRef,\n boundary,\n container,\n onSideChange: setPositionedSide,\n });\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":"~~;;;;;;;AAYA~~,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;~~CAS~~/C,MAAM,~~cAAc~~,~~gBAAgB,cAPnB,~~aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,~~CAG+C~~,~~GAAG~~,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\nimport { usePopupPosition } from './use-popup-position';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\n/*\n Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const {\n core,\n popover,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap,\n anchorName,\n popupId,\n boundary,\n container,\n } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n },\n [popover]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n const positioningStyle = usePopupPosition({\n open: state.open,\n anchorName,\n position: posOpts,\n triggerSource: popover,\n popupRef: internalRef,\n boundary,\n container,\n onSideChange: setPositionedSide,\n });\n\n // --- Visibility ---\n\n if (!state.open) {\n return null;\n }\n\n // Remap DOM focus events to React synthetic event names.\n const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: composedRef,\n props: [\n {\n id: popupId,\n style: positioningStyle,\n ...core.getPopupAttrs(state),\n },\n { ...restPopupProps, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverPopup {\n export type Props = PopoverPopupProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -10,8 +10,8 @@ import { createPopover, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isUndefined } from "@videojs/utils/predicate";
 import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/popover/popover-root.tsx
 function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, boundary = "container", children, ...coreProps }) {
 	const container = useOptionalContainer();