npm - @videojs/react - Versions diffs - 10.0.0-beta.25 → 10.0.0-beta.26 - Mend

@videojs/react 10.0.0-beta.25 → 10.0.0-beta.26

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 (1594) hide show

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":["'use client';\n\nimport 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, useMenuRadioGroupContext, useSubMenuContext } 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 subMenuCtx = useSubMenuContext();\n const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\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 onValueChange(value);\n completeMenuItemSelection(menu, parentMenu);\n },\n [disabled, onClick, onValueChange, value, menu, parentMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n menu.highlight(element, { focus: false });\n }, [menu, disabled]);\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: '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});\n\nexport namespace MenuRadioItem {\n export type Props = MenuRadioItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,SAAS,GAAG,gBACzD,cACA;CACA,MAAM,EAAE,MAAM,UAAU,~~gBAAgB~~;~~CACxC~~,MAAM,EAAE,OAAO,YAAY,kBAAkB,~~0BAA0B~~;~~CAEvE~~,MAAM,aADa,~~mBAAmB~~,~~EACP~~,WAAW,QAAQ;CAClD,MAAM,aAAa,OAAuB,~~KAAK~~;~~CAC/C~~,MAAM,UAAU,eAAe;~~AAE~~/B,~~iBAAgB~~;EACd,MAAM,UAAU,WAAW;~~AAC3B~~,~~MAAI~~,CAAC,~~QAAS~~;~~AACd~~,~~SAAO~~,KAAK,aAAa,~~QAAQ~~;~~IAChC~~,CAAC,~~KAAK~~,CAAC;~~CAEV~~,MAAM,cAAc,aACjB,UAA4C;~~AAC3C~~,~~MAAI~~,~~SAAU~~;~~AACd~~,~~YAAU~~,~~MAAM~~;~~AAChB~~,~~gBAAc~~,~~MAAM~~;~~AACpB~~,~~4BAA0B~~,MAAM,~~WAAW~~;~~IAE7C~~;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;~~EAAW~~,CAC5D;~~CAED~~,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;~~AAC3B~~,~~MAAI~~,CAAC,WAAW,~~SAAU~~;~~AAC1B~~,~~OAAK~~,UAAU,SAAS,EAAE,OAAO,~~OAAO~~,CAAC;~~IACxC~~,CAAC,MAAM,~~SAAS~~,CAAC;~~AAEpB~~,~~QAAO~~,cACL,OACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE;EACA,KAAK,CAAC,cAAc,~~WAAW~~;~~EAC/B~~,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;~~GACjB~~,~~EACD~~,~~aACD~~;~~EACF~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"menu-radio-item.js","names":[],"sources":["../../../../src/ui/menu/menu-radio-item.tsx"],"sourcesContent":["'use client';\n\nimport 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, useMenuRadioGroupContext, useSubMenuContext } 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 subMenuCtx = useSubMenuContext();\n const parentMenu = subMenuCtx?.parentMenu.menu ?? null;\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 onValueChange(value);\n completeMenuItemSelection(menu, parentMenu);\n },\n [disabled, onClick, onValueChange, value, menu, parentMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled) return;\n menu.highlight(element, { focus: false });\n }, [menu, disabled]);\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef],\n props: [\n {\n role: '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});\n\nexport namespace MenuRadioItem {\n export type Props = MenuRadioItemProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAkBA,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;CAEtE,MAAM,aADa,kBACS,CAAC,EAAE,WAAW,QAAQ;CAClD,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,cAAc,KAAK;EACnB,0BAA0B,MAAM,UAAU;CAC5C,GACA;EAAC;EAAU;EAAS;EAAe;EAAO;EAAM;CAAU,CAC5D;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,UAAU;EAC1B,KAAK,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CAC1C,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CACL;GACE,MAAM;GACN,gBAAgB;GAChB,iBAAiB,WAAW,OAAO,KAAA;GACnC,SAAS;GACT,gBAAgB;EAClB,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -5,6 +5,7 @@ import { useDestroy } from "../../utils/use-destroy.js";
 import { MenuContextProvider, SubMenuContextProvider, useOptionalMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
 import { createMenu, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useMemo, useState } from "react";
@@ -64,7 +65,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 	]);
 	useDestroy(menu);
 	const input = useSnapshot(menu.input);
-	const state = useMemo(() => {
+	const { state, preferredSide, setPositionedSide } = usePositionedState(useMemo(() => {
 		core.setProps({
 			side,
 			align,
@@ -82,7 +83,7 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		closeOnEscape,
 		closeOnOutsideClick,
 		isSubmenu
-	]);
+	]));
 	const navigationInput = useSnapshot(menu.navigationInput);
 	const topEntry = navigationInput.stack[navigationInput.stack.length - 1];
 	const activeSubMenuId = topEntry?.menuId ?? null;
@@ -92,6 +93,8 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		core,
 		menu,
 		state,
+		preferredSide,
+		setPositionedSide,
 		stateAttrMap: MenuDataAttrs,
 		contentId,
 		anchorName,
@@ -106,6 +109,8 @@ function MenuRoot({ open: controlledOpen, defaultOpen = MenuCore.defaultProps.de
 		core,
 		menu,
 		state,
+		preferredSide,
+		setPositionedSide,
 		contentId,
 		anchorName,
 		boundary,

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":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport { createMenu, createTransition, type MenuChangeDetails, type PositioningBoundary } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/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 { MenuContextProvider, SubMenuContextProvider, 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 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, isSubmenu }));\n\n const isControlled = controlledOpen !== undefined;\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 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 if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const contentId = useSafeId('menu');\n\n // Sync controlled open prop → internal state.\n useEffect(() => {\n if (controlledOpen === undefined) return;\n\n const { active: inputOpen } = menu.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n menu.open('click');\n } else {\n menu.close('click');\n }\n }, [controlledOpen, menu]);\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 const ~~state~~ = useMemo(() => {\n core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n core.setInput(input);\n return core.getState();\n }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n\n // Subscribe to navigation state — used by Content/Trigger when this is a root menu.\n const navigationInput = useSnapshot(menu.navigationInput);\n const topEntry = navigationInput.stack[navigationInput.stack.length - 1];\n const activeSubMenuId = topEntry?.menuId ?? null;\n const activeSubMenuTriggerId = topEntry?.triggerId ?? null;\n const navigationDirection = navigationInput.direction;\n\n const contextValue = useMemo(\n () => ({\n core,\n menu,\n state,\n stateAttrMap: MenuDataAttrs,\n contentId,\n anchorName,\n boundary,\n container,\n activeSubMenuId,\n activeSubMenuTriggerId,\n navigationDirection,\n push: menu.push,\n pop: menu.pop,\n }),\n [\n core,\n menu,\n state,\n contentId,\n anchorName,\n boundary,\n container,\n activeSubMenuId,\n activeSubMenuTriggerId,\n navigationDirection,\n ]\n );\n\n const subMenuContextValue = useMemo(\n () => (parentMenu ? { subMenuId: contentId, parentMenu } : null),\n [contentId, parentMenu]\n );\n\n // When acting as a submenu, expose its content ID and the parent menu context\n // through SubMenuContext so Trigger can register/push and Content can show/hide.\n if (subMenuContextValue) {\n return (\n <MenuContextProvider value={contextValue}>\n <SubMenuContextProvider value={subMenuContextValue}>{children}</SubMenuContextProvider>\n </MenuContextProvider>\n );\n }\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":"~~;;;;;;;;;;;;;AAwBA~~,SAAgB,SAAS,EACvB,MAAM,gBACN,cAAc,SAAS,aAAa,aACpC,cAAc,kBACd,sBAAsB,0BACtB,WAAW,aACX,UACA,GAAG,aACwB;CAG3B,MAAM,aAAa,~~wBAAwB~~;~~CAC3C~~,MAAM,WAAW,~~4BAA4B~~;~~CAC7C~~,MAAM,YAAY,~~sBAAsB~~;~~CACxC~~,MAAM,aAAa,~~uBAAuB~~;~~CAC1C~~,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;~~EAAW~~,CAAC,CAAC;~~CAExE~~,MAAM,eAAe,mBAAmB,KAAA;CAExC,MAAM,kBAAkB,aAAa,~~iBAAiB~~;~~CACtD~~,MAAM,0BAA0B,aAAa,~~yBAAyB~~;~~CACtE~~,MAAM,mBAAmB,aAAa,~~cAAc~~;~~CACpD~~,MAAM,yBAAyB,aAAa,~~oBAAoB~~;~~CAChE~~,MAAM,gBAAgB,aAAa,~~WAAW~~;~~CAC9C~~,MAAM,eAAe,aAAa,~~UAAU~~;~~CAE5C~~,MAAM,CAAC,QAAQ,eAAe;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,~~kBAAkB~~;~~GAC9B~~,aAAa,UAAU,SAAS;~~AAC9B~~,~~oBAAgB~~,UAAU,UAAU,~~QAAQ;;GAE9C~~,qBAAqB,UAAU;~~AAC7B~~,~~4BAAwB~~,UAAU,~~SAAS;;GAE7C~~,qBAAqB,iBAAiB,WAAW,SAAS,aAAa;GACvE,2BAA2B,uBAAuB,WAAW,SAAS,aAAa;GACnF,aAAc,aAAa,UAAU,KAAA,IAAY,cAAc;~~GAChE~~,CAAC;~~AAEF~~,~~MAAI~~,CAAC,gBAAgB,~~YACnB~~,~~UAAS~~,~~MAAM~~;~~AAGjB~~,~~SAAO~~;~~GACP~~;~~CAEF~~,MAAM,aAAa,~~WAAW~~;~~CAC9B~~,MAAM,YAAY,UAAU,~~OAAO~~;~~AAGnC~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,mBAAmB,KAAA,~~EAAW~~;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;~~AACzC~~,~~MAAI~~,mBAAmB,~~UAAW~~;~~AAElC~~,~~MAAI~~,~~eACF~~,~~MAAK~~,KAAK,~~QAAQ~~;~~MAElB~~,~~MAAK~~,MAAM,~~QAAQ~~;~~IAEpB~~,CAAC,gBAAgB,~~KAAK~~,CAAC;~~AAE1B~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,aAAa,UAAU,MAAM,YAAY,~~MAAO~~;~~AAEpD~~,~~OAAK~~,MAAM,~~oBAAoB~~;~~IAC9B~~;EAAC,UAAU,MAAM;EAAS;EAAW;~~EAAK~~,CAAC;~~AAE9C~~,~~YAAW~~,~~KAAK~~;~~CAEhB~~,MAAM,QAAQ,YAAY,KAAK,~~MAAM~~;~~CACrC~~,MAAM,~~QAAQ~~,cAAc;~~AAC1B~~,~~OAAK~~,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;~~GAAW~~,CAAC;~~AAC7E~~,~~OAAK~~,SAAS,~~MAAM~~;~~AACpB~~,~~SAAO~~,KAAK,~~UAAU~~;~~IACrB~~;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;~~EAAU~~,CAAC;~~CAG7E~~,MAAM,kBAAkB,YAAY,KAAK,~~gBAAgB~~;~~CACzD~~,MAAM,WAAW,gBAAgB,MAAM,gBAAgB,MAAM,SAAS;CACtE,MAAM,kBAAkB,UAAU,UAAU;CAC5C,MAAM,yBAAyB,UAAU,aAAa;CACtD,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;~~EACX~~,~~GACD~~;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;~~EACD~~,CACF;~~CAED~~,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;~~EAAY~~,~~GAAG~~,MAC3D,CAAC,WAAW,~~WAAW~~,CACxB;~~AAID~~,~~KAAI~~,~~oBACF~~,~~QACE~~,oBAAC,qBAAD;EAAqB,OAAO;~~YAC1B~~,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;~~GAAkC~~,CAAA;~~EACnE~~,CAAA;~~AAI1B~~,~~QAAO~~,oBAAC,qBAAD;EAAqB,OAAO;EAAe;~~EAA+B~~,CAAA"}
1	+ {"version":3,"file":"menu-root.js","names":[],"sources":["../../../../src/ui/menu/menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { MenuCore, MenuDataAttrs } from '@videojs/core';\nimport { createMenu, createTransition, type MenuChangeDetails, type PositioningBoundary } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/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, SubMenuContextProvider, 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 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, isSubmenu }));\n\n const isControlled = controlledOpen !== undefined;\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 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 if (!isControlled && defaultOpen) {\n instance.open();\n }\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const contentId = useSafeId('menu');\n\n // Sync controlled open prop → internal state.\n useEffect(() => {\n if (controlledOpen === undefined) return;\n\n const { active: inputOpen } = menu.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n menu.open('click');\n } else {\n menu.close('click');\n }\n }, [controlledOpen, menu]);\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 const preferredState = useMemo(() => {\n core.setProps({ side, align, closeOnEscape, closeOnOutsideClick, isSubmenu });\n core.setInput(input);\n return core.getState();\n }, [core, input, side, align, closeOnEscape, closeOnOutsideClick, isSubmenu]);\n const { state, preferredSide, setPositionedSide } = usePositionedState(preferredState);\n\n // Subscribe to navigation state — used by Content/Trigger when this is a root menu.\n const navigationInput = useSnapshot(menu.navigationInput);\n const topEntry = navigationInput.stack[navigationInput.stack.length - 1];\n const activeSubMenuId = topEntry?.menuId ?? null;\n const activeSubMenuTriggerId = topEntry?.triggerId ?? null;\n const navigationDirection = navigationInput.direction;\n\n const contextValue = useMemo(\n () => ({\n core,\n menu,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: MenuDataAttrs,\n contentId,\n anchorName,\n boundary,\n container,\n activeSubMenuId,\n activeSubMenuTriggerId,\n navigationDirection,\n push: menu.push,\n pop: menu.pop,\n }),\n [\n core,\n menu,\n state,\n preferredSide,\n setPositionedSide,\n contentId,\n anchorName,\n boundary,\n container,\n activeSubMenuId,\n activeSubMenuTriggerId,\n navigationDirection,\n ]\n );\n\n const subMenuContextValue = useMemo(\n () => (parentMenu ? { subMenuId: contentId, parentMenu } : null),\n [contentId, parentMenu]\n );\n\n // When acting as a submenu, expose its content ID and the parent menu context\n // through SubMenuContext so Trigger can register/push and Content can show/hide.\n if (subMenuContextValue) {\n return (\n <MenuContextProvider value={contextValue}>\n <SubMenuContextProvider value={subMenuContextValue}>{children}</SubMenuContextProvider>\n </MenuContextProvider>\n );\n }\n\n return <MenuContextProvider value={contextValue}>{children}</MenuContextProvider>;\n}\n\nexport namespace MenuRoot {\n export type Props = MenuRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;AAyBA,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,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,YAAY,eAAe;CACjC,MAAM,EAAE,MAAM,OAAO,eAAe,wBAAwB;CAE5D,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS;EAAE,GAAG;EAAW;CAAU,CAAC,CAAC;CAEvE,MAAM,eAAe,mBAAmB,KAAA;CAExC,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;EAC5B,MAAM,WAAW,WAAW;GAC1B,YAAY,iBAAiB;GAC7B,aAAa,UAAU,SAAS;IAC9B,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,CAAC;EAED,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,YAAY,UAAU,MAAM;CAGlC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,KAAK,MAAM;EACzC,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,KAAK,KAAK,OAAO;OAEjB,KAAK,MAAM,OAAO;CAEtB,GAAG,CAAC,gBAAgB,IAAI,CAAC;CAEzB,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;CAMpC,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAL7B,cAAc;EACnC,KAAK,SAAS;GAAE;GAAM;GAAO;GAAe;GAAqB;EAAU,CAAC;EAC5E,KAAK,SAAS,KAAK;EACnB,OAAO,KAAK,SAAS;CACvB,GAAG;EAAC;EAAM;EAAO;EAAM;EAAO;EAAe;EAAqB;CAAS,CACS,CAAC;CAGrF,MAAM,kBAAkB,YAAY,KAAK,eAAe;CACxD,MAAM,WAAW,gBAAgB,MAAM,gBAAgB,MAAM,SAAS;CACtE,MAAM,kBAAkB,UAAU,UAAU;CAC5C,MAAM,yBAAyB,UAAU,aAAa;CACtD,MAAM,sBAAsB,gBAAgB;CAE5C,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA,MAAM,KAAK;EACX,KAAK,KAAK;CACZ,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,sBAAsB,cACnB,aAAa;EAAE,WAAW;EAAW;CAAW,IAAI,MAC3D,CAAC,WAAW,UAAU,CACxB;CAIA,IAAI,qBACF,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAAC,wBAAD;GAAwB,OAAO;GAAsB;EAAiC,CAAA;CACnE,CAAA;CAIzB,OAAO,oBAAC,qBAAD;EAAqB,OAAO;EAAe;CAA8B,CAAA;AAClF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [{ role: 'separator' as const }, elementProps],\n }\n );\n});\n\nexport namespace MenuSeparator {\n export type Props = MenuSeparatorProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,~~gBAAgB~~;~~AAElC~~,~~QAAO~~,cACL,OACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE;EACA,KAAK,CAAC,~~aAAa~~;~~EACnB~~,OAAO,CAAC,EAAE,MAAM,~~aAAsB~~,~~EAAE~~,~~aAAa~~;~~EACtD~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"menu-separator.js","names":[],"sources":["../../../../src/ui/menu/menu-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuSeparatorProps extends UIComponentProps<'div', MenuState> {}\n\n/** Visual divider between groups of items. Renders a `<div>` with `role=\"separator\"`. */\nexport const MenuSeparator = forwardRef<HTMLDivElement, MenuSeparatorProps>(function MenuSeparator(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [{ role: 'separator' as const }, elementProps],\n }\n );\n});\n\nexport namespace MenuSeparator {\n export type Props = MenuSeparatorProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;AAYA,MAAa,gBAAgB,WAA+C,SAAS,cACnF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,MAAM,YAAqB,GAAG,YAAY;CACtD,CACF;AACF,CAAC"}

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

@@ -5,8 +5,8 @@ import { useSafeId } from "../../utils/use-safe-id.js";
 import { MenuItemSettingProvider } from "./menu-item-setting-provider.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-trigger.tsx
 function toUIKeyboardEvent(event) {
 	return {

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":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } 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 {\n MenuTriggerChildContextProvider,\n useMenuContext,\n useOptionalMenuItemSettingContext,\n useSubMenuContext,\n} from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {\n /** Disables the trigger. /\n disabled?: boolean;\n /* Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). /\n type?: MenuItemSettingType \| undefined;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n return {\n get defaultPrevented() {\n return event.defaultPrevented;\n },\n key: event.key,\n shiftKey: event.shiftKey,\n ctrlKey: event.ctrlKey,\n altKey: event.altKey,\n metaKey: event.metaKey,\n target: event.target instanceof Node ? event.target : event.currentTarget,\n currentTarget: event.currentTarget,\n preventDefault: () => event.preventDefault(),\n stopPropagation: () => event.stopPropagation(),\n };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n const keyboardEvent = toUIKeyboardEvent(event);\n\n if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n event.preventDefault();\n }\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 pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement \| HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n { render, className, style, disabled, type, onClick, onKeyDown, ...elementProps },\n forwardedRef\n) {\n const { core, menu, state, anchorName, contentId } = useMenuContext();\n const subMenuCtx = useSubMenuContext();\n const isSubMenuTrigger = subMenuCtx !== null;\n\n const elementRef = useRef<HTMLElement>(null);\n const triggerId = useSafeId('sub-trigger');\n\n const parentMenu = subMenuCtx?.parentMenu ?? null;\n const parentMenuApi = parentMenu?.menu ?? null;\n const parentState = parentMenu?.state ?? state;\n const parentPush = parentMenu?.push ?? null;\n const subMenuId = subMenuCtx?.subMenuId ?? null;\n const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\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 return parentMenuApi.registerItem(element);\n }, [isSubMenuTrigger, parentMenuApi]);\n\n const openSubMenu = useCallback(() => {\n if (disabled \|\| !parentPush \|\| !subMenuId) return;\n parentPush(subMenuId, triggerId);\n }, [disabled, parentPush, subMenuId, triggerId]);\n\n const handleSubMenuClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n (onClick as React.MouseEventHandler<HTMLDivElement> \| undefined)?.(event);\n openSubMenu();\n },\n [onClick, openSubMenu]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined)?.(event);\n if (disabled) 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 });\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 if (element && supportsAnchorPositioning()) {\n element.style.setProperty('anchor-name', `--${anchorName}`);\n }\n },\n [menu, anchorName]\n );\n\n const rootTriggerProps = useMemo(() => {\n if (!disabled) return menu.triggerProps;\n\n return {\n onClick: (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n const keyboardEvent = toUIKeyboardEvent(event);\n if (event.key === 'Enter' \|\| event.key === ' ' \|\| isMenuNavigationKey(keyboardEvent)) {\n event.preventDefault();\n }\n },\n };\n }, [disabled, menu.triggerProps]);\n\n // Submenu trigger mode — renders as a div with role=\"menuitem\"\n if (isSubMenuTrigger) {\n const trigger = (\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 parentState={parentState}\n isExpanded={isExpanded}\n onSubMenuClick={handleSubMenuClick}\n onSubMenuKeyDown={handleSubMenuKeyDown}\n onPointerEnter={handlePointerEnter}\n />\n );\n\n if (!type) return trigger;\n\n return <MenuItemSettingProvider type={type}>{trigger}</MenuItemSettingProvider>;\n }\n\n const rootTrigger = (\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, contentId) },\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 if (!type) return rootTrigger;\n\n return <MenuItemSettingProvider type={type}>{rootTrigger}</MenuItemSettingProvider>;\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 parentState: MenuState;\n isExpanded: boolean;\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 parentState,\n isExpanded,\n onSubMenuClick,\n onSubMenuKeyDown,\n onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n const setting = useOptionalMenuItemSettingContext();\n const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state: parentState,\n ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n props: [\n {\n id: triggerId,\n role: 'menuitem' as const,\n 'aria-haspopup': 'menu' as const,\n 'aria-expanded': isExpanded,\n 'aria-disabled': disabled ? true : undefined,\n 'data-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n ...settingAttrs,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,kBAAkB,OAA0D;AACnF,QAAO;EACL,IAAI,mBAAmB;AACrB,UAAO,MAAM;;EAEf,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ,MAAM,kBAAkB,OAAO,MAAM,SAAS,MAAM;EAC5D,eAAe,MAAM;EACrB,sBAAsB,MAAM,gBAAgB;EAC5C,uBAAuB,MAAM,iBAAiB;EAC/C;;AAGH,SAAS,sBAAsB,OAA+C;CAC5E,MAAM,gBAAgB,kBAAkB,MAAM;AAE9C,KAAI,MAAM,QAAQ,YAAY,oBAAoB,cAAc,IAAI,CAAC,MAAM,iBACzE,OAAM,gBAAgB;;;;;;;AAS1B,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,MAAM,SAAS,WAAW,GAAG,gBACnE,cACA;CACA,MAAM,EAAE,MAAM,MAAM,OAAO,YAAY,cAAc,gBAAgB;CACrE,MAAM,aAAa,mBAAmB;CACtC,MAAM,mBAAmB,eAAe;CAExC,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,YAAY,UAAU,cAAc;CAE1C,MAAM,aAAa,YAAY,cAAc;CAC7C,MAAM,gBAAgB,YAAY,QAAQ;CAC1C,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,aAAa,YAAY,QAAQ;CACvC,MAAM,YAAY,YAAY,aAAa;CAC3C,MAAM,aAAa,mBAAmB,YAAY,oBAAoB,YAAY,MAAM;AAGxF,iBAAgB;AACd,MAAI,CAAC,oBAAoB,CAAC,cAAe;EACzC,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AACd,SAAO,cAAc,aAAa,QAAQ;IACzC,CAAC,kBAAkB,cAAc,CAAC;CAErC,MAAM,cAAc,kBAAkB;AACpC,MAAI,YAAY,CAAC,cAAc,CAAC,UAAW;AAC3C,aAAW,WAAW,UAAU;IAC/B;EAAC;EAAU;EAAY;EAAW;EAAU,CAAC;CAEhD,MAAM,qBAAqB,aACxB,UAA4C;AAC1C,YAAkE,MAAM;AACzE,eAAa;IAEf,CAAC,SAAS,YAAY,CACvB;CAED,MAAM,uBAAuB,aAC1B,UAA+C;AAC7C,cAAuE,MAAM;AAC9E,MAAI,SAAU;AACd,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,gBAAa;;IAGjB;EAAC;EAAU;EAAW;EAAY,CACnC;CAED,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,WAAW,YAAY,CAAC,cAAe;AAC5C,gBAAc,UAAU,SAAS,EAAE,OAAO,OAAO,CAAC;IACjD,CAAC,UAAU,cAAc,CAAC;CAG7B,MAAM,aAAa,aAChB,YAAsC;AACrC,OAAK,kBAAkB,QAAQ;AAC/B,MAAI,WAAW,2BAA2B,CACxC,SAAQ,MAAM,YAAY,eAAe,KAAK,aAAa;IAG/D,CAAC,MAAM,WAAW,CACnB;CAED,MAAM,mBAAmB,cAAc;AACrC,MAAI,CAAC,SAAU,QAAO,KAAK;AAE3B,SAAO;GACL,UAAU,UAAyC;AACjD,UAAM,gBAAgB;;GAExB,YAAY,UAA4C;IACtD,MAAM,gBAAgB,kBAAkB,MAAM;AAC9C,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,oBAAoB,cAAc,CAClF,OAAM,gBAAgB;;GAG3B;IACA,CAAC,UAAU,KAAK,aAAa,CAAC;AAGjC,KAAI,kBAAkB;EACpB,MAAM,UACJ,oBAAC,oBAAD;GACU;GACG;GACJ;GACG;GACI;GACA;GACF;GACD;GACE;GACD;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,gBAAgB;GAChB,CAAA;AAGJ,MAAI,CAAC,KAAM,QAAO;AAElB,SAAO,oBAAC,yBAAD;GAA+B;aAAO;GAAkC,CAAA;;CAGjF,MAAM,cACJ,oBAAC,iCAAD;EAAiC,OAAA;YAC9B,cACC,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,KAAK,CAAC,cAA8C,WAAW;GAC/D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,UAAU;KAAE;IACtE,WAAW;KAAE,UAAU;KAAM,iBAAiB;KAAiB,GAAG,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,uBAAuB,GAAG,KAAA;IAC3D;IACA;IACD;GACF,CACF;EAC+B,CAAA;AAGpC,KAAI,CAAC,KAAM,QAAO;AAElB,QAAO,oBAAC,yBAAD;EAA+B;YAAO;EAAsC,CAAA;EACnF;AAuBF,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,aACA,YACA,gBACA,kBACA,kBAC0B;CAC1B,MAAM,UAAU,mCAAmC;CACnD,MAAM,eAAe,UAAU,EAAE,qBAAqB,QAAQ,cAAc,GAAG,KAAA;AAE/E,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO;EACP,KAAK,CAAC,cAAc,WAAwC;EAC5D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;GACA,GAAG;GACJ,EACD,aACD;EACF,CACF"}
1	+ {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } 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 {\n MenuTriggerChildContextProvider,\n useMenuContext,\n useOptionalMenuItemSettingContext,\n useSubMenuContext,\n} from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {\n /** Disables the trigger. /\n disabled?: boolean;\n /* Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). /\n type?: MenuItemSettingType \| undefined;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n return {\n get defaultPrevented() {\n return event.defaultPrevented;\n },\n key: event.key,\n shiftKey: event.shiftKey,\n ctrlKey: event.ctrlKey,\n altKey: event.altKey,\n metaKey: event.metaKey,\n target: event.target instanceof Node ? event.target : event.currentTarget,\n currentTarget: event.currentTarget,\n preventDefault: () => event.preventDefault(),\n stopPropagation: () => event.stopPropagation(),\n };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n const keyboardEvent = toUIKeyboardEvent(event);\n\n if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n event.preventDefault();\n }\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 pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement \| HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n { render, className, style, disabled, type, onClick, onKeyDown, ...elementProps },\n forwardedRef\n) {\n const { core, menu, state, anchorName, contentId } = useMenuContext();\n const subMenuCtx = useSubMenuContext();\n const isSubMenuTrigger = subMenuCtx !== null;\n\n const elementRef = useRef<HTMLElement>(null);\n const triggerId = useSafeId('sub-trigger');\n\n const parentMenu = subMenuCtx?.parentMenu ?? null;\n const parentMenuApi = parentMenu?.menu ?? null;\n const parentState = parentMenu?.state ?? state;\n const parentPush = parentMenu?.push ?? null;\n const subMenuId = subMenuCtx?.subMenuId ?? null;\n const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\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 return parentMenuApi.registerItem(element);\n }, [isSubMenuTrigger, parentMenuApi]);\n\n const openSubMenu = useCallback(() => {\n if (disabled \|\| !parentPush \|\| !subMenuId) return;\n parentPush(subMenuId, triggerId);\n }, [disabled, parentPush, subMenuId, triggerId]);\n\n const handleSubMenuClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n (onClick as React.MouseEventHandler<HTMLDivElement> \| undefined)?.(event);\n openSubMenu();\n },\n [onClick, openSubMenu]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> \| undefined)?.(event);\n if (disabled) 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 });\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 if (element && supportsAnchorPositioning()) {\n element.style.setProperty('anchor-name', `--${anchorName}`);\n }\n },\n [menu, anchorName]\n );\n\n const rootTriggerProps = useMemo(() => {\n if (!disabled) return menu.triggerProps;\n\n return {\n onClick: (event: React.MouseEvent<HTMLElement>) => {\n event.preventDefault();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n const keyboardEvent = toUIKeyboardEvent(event);\n if (event.key === 'Enter' \|\| event.key === ' ' \|\| isMenuNavigationKey(keyboardEvent)) {\n event.preventDefault();\n }\n },\n };\n }, [disabled, menu.triggerProps]);\n\n // Submenu trigger mode — renders as a div with role=\"menuitem\"\n if (isSubMenuTrigger) {\n const trigger = (\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 parentState={parentState}\n isExpanded={isExpanded}\n onSubMenuClick={handleSubMenuClick}\n onSubMenuKeyDown={handleSubMenuKeyDown}\n onPointerEnter={handlePointerEnter}\n />\n );\n\n if (!type) return trigger;\n\n return <MenuItemSettingProvider type={type}>{trigger}</MenuItemSettingProvider>;\n }\n\n const rootTrigger = (\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, contentId) },\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 if (!type) return rootTrigger;\n\n return <MenuItemSettingProvider type={type}>{rootTrigger}</MenuItemSettingProvider>;\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 parentState: MenuState;\n isExpanded: boolean;\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 parentState,\n isExpanded,\n onSubMenuClick,\n onSubMenuKeyDown,\n onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n const setting = useOptionalMenuItemSettingContext();\n const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state: parentState,\n ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n props: [\n {\n id: triggerId,\n role: 'menuitem' as const,\n 'aria-haspopup': 'menu' as const,\n 'aria-expanded': isExpanded,\n 'aria-disabled': disabled ? true : undefined,\n 'data-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n ...settingAttrs,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-view.js","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { getMenuRootViewAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuViewProps extends UIComponentProps<'div', MenuState> {}\n\n/** Root menu view inside the menu viewport. */\nexport const MenuView = forwardRef<HTMLDivElement, MenuViewProps>(function MenuView(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [getMenuRootViewAttrs(), elementProps],\n }\n );\n});\n\nexport namespace MenuView {\n export type Props = MenuViewProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,~~gBAAgB~~;~~AAElC~~,~~QAAO~~,cACL,OACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE;EACA,KAAK,CAAC,~~aAAa~~;~~EACnB~~,OAAO,CAAC,~~sBAAsB~~,~~EAAE~~,~~aAAa~~;~~EAC9C~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"menu-view.js","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { getMenuRootViewAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuViewProps extends UIComponentProps<'div', MenuState> {}\n\n/** Root menu view inside the menu viewport. */\nexport const MenuView = forwardRef<HTMLDivElement, MenuViewProps>(function MenuView(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { state } = useMenuContext();\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef],\n props: [getMenuRootViewAttrs(), elementProps],\n }\n );\n});\n\nexport namespace MenuView {\n export type Props = MenuViewProps;\n export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,eAAe;CAEjC,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,qBAAqB,GAAG,YAAY;CAC9C,CACF;AACF,CAAC"}

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":["'use client';\n\nimport { 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":";;;;;AAeA,SAAS,iBAAiB,cAA8C;~~AACtE~~,~~QAAO~~,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA~~;;AAGzF~~,SAAgB,kBACd,SACA,cAC2D;~~AAC3D~~,~~QAAO~~;EACL,MAAM;EACN,mBAAmB,iBAAiB,~~aAAa~~,~~GAAG~~,KAAA,IAAY;~~EACjE;;AAGH~~,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,~~UAAkB~~;~~CAEhD~~,MAAM,gBAAgB,aAAa,OAAe;~~AAChD~~,~~aAAW~~,~~GAAG~~;~~AAEd~~,~~eAAa~~;~~AACX~~,~~eAAY~~,YAAa,YAAY,KAAK,KAAA,IAAY,~~QAAS;;IAEhE~~,~~EAAE~~,CAAC;~~AAIN~~,~~QAAO~~,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,~~eAAe~~,~~GAAG~~,CAAC,~~cAAc~~,~~CAAC~~;~~YAEjB~~,SAAS,~~QAAQ~~;~~EAA4B~~,CAAA"}
1	+ {"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;AAeA,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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n displayName: 'MuteButton',\n core: MuteButtonCore,\n stateAttrMap: MuteButtonDataAttrs,\n selector: selectVolume,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'toggleMuted',\n});\n\nexport namespace MuteButton {\n export type Props = MuteButtonProps;\n export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,~~MAAM~~;~~CAC3C~~,cAAc;~~CACf~~,CAAC"}
1	+ {"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n displayName: 'MuteButton',\n core: MuteButtonCore,\n stateAttrMap: MuteButtonDataAttrs,\n selector: selectVolume,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'toggleMuted',\n});\n\nexport namespace MuteButton {\n export type Props = MuteButtonProps;\n export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,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/pip-button/pip-button.js CHANGED Viewed

@@ -10,7 +10,8 @@ const PiPButton = createMediaButton({
 	stateAttrMap: PiPButtonDataAttrs,
 	selector: selectPiP,
 	action: (core, state) => core.toggle(state),
-	hotkeyAction: "togglePictureInPicture"
+	hotkeyAction: "togglePictureInPicture",
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { PiPButton };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n displayName: 'PiPButton',\n core: PiPButtonCore,\n stateAttrMap: PiPButtonDataAttrs,\n selector: selectPiP,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePictureInPicture',\n});\n\nexport namespace PiPButton {\n export type Props = PiPButtonProps;\n export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,~~MAAM~~;~~CAC3C~~,cAAc;~~CACf~~,CAAC"}
1	+ {"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n displayName: 'PiPButton',\n core: PiPButtonCore,\n stateAttrMap: PiPButtonDataAttrs,\n selector: selectPiP,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePictureInPicture',\n isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n export type Props = PiPButtonProps;\n export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

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":["'use client';\n\nimport { 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":";;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,~~MAAM~~;~~CAC3C~~,cAAc;~~CACf~~,CAAC"}
1	+ {"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;;;;;;;;;;;AA0BA,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

@@ -4,6 +4,12 @@ import { selectPlaybackRate } from "@videojs/core/dom";
 import { useCallback, useState } from "react";
 import { PlaybackRateRadioGroupCore } from "@videojs/core";
 //#region src/ui/playback-rate/use-playback-rate-options.ts
+/**
+* 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.
+*/
 function usePlaybackRateOptions(props) {
 	const media = usePlayer(selectPlaybackRate);
 	const [core] = useState(() => new PlaybackRateRadioGroupCore());

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":["'use client';\n\nimport {\n type PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n} from '@videojs/core';\nimport { logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport interface PlaybackRateOption {\n rate: number;\n value: string;\n label: string;\n disabled: boolean;\n}\n\nexport interface PlaybackRateOptionsResult {\n state: PlaybackRateRadioGroupCore.State;\n rate: number;\n value: string;\n options: PlaybackRateOption[];\n disabled: boolean;\n setRate: (rate: number) => void;\n setValue: (value: string) => void;\n}\n\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult \| null {\n const media = usePlayer(selectPlaybackRate);\n const [core] = useState(() => new PlaybackRateRadioGroupCoreClass());\n\n core.setProps(props ?? {});\n\n const setRate = useCallback((rate: number) => core.select(media!, rate), [core, media]);\n const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n if (!media) {\n if (__DEV__) logMissingFeature('usePlaybackRateOptions', selectPlaybackRate.displayName ?? 'playbackRate');\n return null;\n }\n\n core.setMedia(media);\n const state = core.getState();\n\n return {\n state,\n rate: state.rate,\n value: core.getRateValue(state.rate),\n options: state.rates.map((rate) => ({\n rate,\n value: core.getRateValue(rate),\n label: core.getRateLabel(rate),\n disabled: state.disabled,\n })),\n disabled: state.disabled,\n setRate,\n setValue,\n };\n}\n\nexport namespace usePlaybackRateOptions {\n export type Props = PlaybackRateOptionsProps;\n export type Result = PlaybackRateOptionsResult;\n export type Option = PlaybackRateOption;\n}\n"],"mappings":"~~;;;;;;AA8BA~~,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,QAAQ,UAAU,~~mBAAmB~~;~~CAC3C~~,MAAM,CAAC,QAAQ,eAAe,IAAIA,~~4BAAiC~~,CAAC;~~AAEpE~~,~~MAAK~~,SAAS,SAAS,~~EAAE~~,CAAC;~~CAE1B~~,MAAM,UAAU,aAAa,SAAiB,KAAK,OAAO,OAAQ,~~KAAK~~,~~EAAE~~,CAAC,MAAM,~~MAAM~~,CAAC;~~CACvF~~,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,~~MAAM~~,~~EAAE~~,CAAC,MAAM,~~MAAM~~,CAAC;~~AAE/F~~,~~KAAI~~,CAAC,~~MAEH~~,~~QAAO~~;~~AAGT~~,~~MAAK~~,SAAS,~~MAAM~~;~~CACpB~~,MAAM,QAAQ,KAAK,~~UAAU~~;~~AAE7B~~,~~QAAO~~;EACL;EACA,MAAM,MAAM;EACZ,OAAO,KAAK,aAAa,MAAM,~~KAAK~~;~~EACpC~~,SAAS,MAAM,MAAM,KAAK,UAAU;GAClC;GACA,OAAO,KAAK,aAAa,~~KAAK~~;~~GAC9B~~,OAAO,KAAK,aAAa,~~KAAK~~;~~GAC9B~~,UAAU,MAAM;~~GACjB~~,EAAE;~~EACH~~,UAAU,MAAM;EAChB;EACA;~~EACD~~"}
1	+ {"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["'use client';\n\nimport {\n type PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n} from '@videojs/core';\nimport { logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport interface PlaybackRateOption {\n rate: number;\n value: string;\n label: string;\n disabled: boolean;\n}\n\nexport interface PlaybackRateOptionsResult {\n state: PlaybackRateRadioGroupCore.State;\n rate: number;\n value: string;\n options: PlaybackRateOption[];\n disabled: boolean;\n setRate: (rate: number) => void;\n setValue: (value: string) => void;\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 media = usePlayer(selectPlaybackRate);\n const [core] = useState(() => new PlaybackRateRadioGroupCoreClass());\n\n core.setProps(props ?? {});\n\n const setRate = useCallback((rate: number) => core.select(media!, rate), [core, media]);\n const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n if (!media) {\n if (__DEV__) logMissingFeature('usePlaybackRateOptions', selectPlaybackRate.displayName ?? 'playbackRate');\n return null;\n }\n\n core.setMedia(media);\n const state = core.getState();\n\n return {\n state,\n rate: state.rate,\n value: core.getRateValue(state.rate),\n options: state.rates.map((rate) => ({\n rate,\n value: core.getRateValue(rate),\n label: core.getRateLabel(rate),\n disabled: state.disabled,\n })),\n disabled: state.disabled,\n setRate,\n setValue,\n };\n}\n\nexport namespace usePlaybackRateOptions {\n export type Props = PlaybackRateOptionsProps;\n export type Result = PlaybackRateOptionsResult;\n export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;;;;;;;;AAoCA,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,QAAQ,UAAU,kBAAkB;CAC1C,MAAM,CAAC,QAAQ,eAAe,IAAIA,2BAAgC,CAAC;CAEnE,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,UAAU,aAAa,SAAiB,KAAK,OAAO,OAAQ,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CACtF,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAEH,OAAO;CAGT,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,MAAM,MAAM;EACZ,OAAO,KAAK,aAAa,MAAM,IAAI;EACnC,SAAS,MAAM,MAAM,KAAK,UAAU;GAClC;GACA,OAAO,KAAK,aAAa,IAAI;GAC7B,OAAO,KAAK,aAAa,IAAI;GAC7B,UAAU,MAAM;EAClB,EAAE;EACF,UAAU,MAAM;EAChB;EACA;CACF;AACF"}

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":["'use client';\n\nimport { 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":";;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,~~MAAM~~;~~CAC1C~~,cAAc;~~CACf~~,CAAC"}
1	+ {"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { 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":";;;;;;;;;;;;;;;;;;;;;AA4BA,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/popover/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport 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 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,~~KAAK~~;~~AAEtE~~,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,~~eAAe~~;~~AACtC~~,~~KAAI~~,CAAC,~~IAAK~~,~~OAAM~~,IAAI,MAAM,~~iEAAiE~~;~~AAC3F~~,~~QAAO~~"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;AAmBA,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"}

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

@@ -11,6 +11,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Trigger: () => PopoverTrigger
 });
 //#endregion
-export { index_parts_exports };
+export { PopoverArrow as Arrow, PopoverPopup as Popup, PopoverRoot as Root, PopoverTrigger as Trigger, index_parts_exports };
 //# sourceMappingURL=index.parts.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-arrow.js","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */\nexport const PopoverArrow = createContextPart<PopoverArrowProps, PopoverState>({\n displayName: 'PopoverArrow',\n tag: 'div',\n useContext: usePopoverContext,\n staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace PopoverArrow {\n export type Props = PopoverArrowProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;AAWA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,~~QAAiB~~;~~CAChD~~,CAAC"}
1	+ {"version":3,"file":"popover-arrow.js","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */\nexport const PopoverArrow = createContextPart<PopoverArrowProps, PopoverState>({\n displayName: 'PopoverArrow',\n tag: 'div',\n useContext: usePopoverContext,\n staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace PopoverArrow {\n export type Props = PopoverArrowProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;AAWA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,OAAgB;AAChD,CAAC"}

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

@@ -2,7 +2,7 @@
 import { useComposedRefs } from "../../utils/use-composed-refs.js";
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
-import { getAnchorPositionStyle, getPopupPositionRect, getPositioningBoundaryRect, isEventWithinElement, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
+import { getAnchorPositionStyle, getPopupPositionRect, getPositionedSide, getPositioningBoundaryRect, isEventWithinElement, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { supportsAnchorPositioning } from "@videojs/utils/dom";
 //#region src/ui/popover/popover-popup.tsx
@@ -13,25 +13,25 @@ const POPOVER_RESET = {
 };
 /** 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, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
+	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
 		popover.setPopupElement(el);
 		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
 	}, [popover, anchorName]), internalRef);
 	const posOpts = useMemo(() => ({
-		side: state.side,
+		side: preferredSide,
 		align: state.align
-	}), [state.side, state.align]);
+	}), [preferredSide, state.align]);
 	const anchorStyle = useMemo(() => {
 		if (!supportsAnchorPositioning()) return null;
 		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);
 		return rest;
 	}, [anchorName, posOpts]);
-	const [manualStyle, setManualStyle] = useState(null);
+	const [position, setPosition] = useState(null);
 	useLayoutEffect(() => {
 		if (!state.open) {
-			setManualStyle(null);
+			setPosition(null);
 			return;
 		}
 		function measure() {
@@ -39,12 +39,21 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 			const popupEl = internalRef.current;
 			if (!triggerEl || !popupEl) return;
 			const triggerRect = triggerEl.getBoundingClientRect();
+			const root = popupEl.getRootNode();
 			const boundaryElement = resolvePositioningBoundary(boundary, {
 				container,
-				root: popupEl.getRootNode()
+				root
 			});
-			const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, posOpts, triggerRect, supportsAnchorPositioning() ? void 0 : getPopupPositionRect(popupEl), getPositioningBoundaryRect(boundaryElement), resolveOffsets(popupEl));
-			setManualStyle(nextStyle);
+			const popupRect = getPopupPositionRect(popupEl, posOpts.side);
+			const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+			const offsets = resolveOffsets(popupEl);
+			const side = getPositionedSide(triggerRect, popupRect, boundaryRect, posOpts, offsets);
+			const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(anchorName, {
+				...posOpts,
+				side
+			}, triggerRect, supportsAnchorPositioning() ? void 0 : popupRect, boundaryRect, offsets);
+			setPosition(nextStyle);
+			setPositionedSide(side);
 		}
 		measure();
 		const triggerEl = popover.triggerElement;
@@ -83,9 +92,10 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 		posOpts,
 		popover,
 		boundary,
-		container
+		container,
+		setPositionedSide
 	]);
-	const positioningStyle = manualStyle ?? anchorStyle ?? POPOVER_RESET;
+	const positioningStyle = position ?? anchorStyle ?? POPOVER_RESET;
 	if (!state.open) return null;
 	const { onFocusOut, ...restPopupProps } = popover.popupProps;
 	return renderElement("div", {

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":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport {\n getAnchorPositionStyle,\n getPopupPositionRect,\n getPositioningBoundaryRect,\n isEventWithinElement,\n resolveOffsets,\n resolvePositioningBoundary,\n} from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } 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';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\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 { core, popover, state, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();\n const internalRef = useRef<HTMLDivElement>(null);\n\n const popupRef = useCallback(\n (el: HTMLDivElement \| null) => {\n popover.setPopupElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n // --- Positioning ---\n\n const posOpts = useMemo(() => ({ side: ~~state.side~~, align: state.align }), [~~state.side~~, state.align]);\n\n // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // ~~Manual~~ ~~fallback — measure~~ rects after layout, before paint.\n const [~~manualStyle~~, ~~setManualStyle~~] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (!state.open) {\n ~~setManualStyle~~(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const root = popupEl.getRootNode() as Document \| ShadowRoot;\n const boundaryElement = resolvePositioningBoundary(boundary, { container, root });\n const popupRect = ~~supportsAnchorPositioning() ? undefined :~~ getPopupPositionRect(popupEl);\n const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n const offsets = resolveOffsets(popupEl);\n\n const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(\n anchorName,\n posOpts,\n triggerRect,\n popupRect,\n boundaryRect,\n offsets\n );\n\n ~~setManualStyle~~(nextStyle as CSSProperties);\n }\n\n measure();\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n const boundaryElement = popupEl\n ? resolvePositioningBoundary(boundary, {\n container,\n root: popupEl.getRootNode() as Document \| ShadowRoot,\n })\n : null;\n\n let rafId = 0;\n function reposition(event?: Event): void {\n if (event && isEventWithinElement(event, internalRef.current)) return;\n\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the popover has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n if (boundaryElement && resizeObserver) {\n resizeObserver.observe(boundaryElement);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover, boundary, container]);\n\n // ~~Anchor~~ ~~path~~ ~~uses~~ ~~computed~~ ~~styles~~; ~~manual~~ ~~path uses measured styles;\n // fallback resets~~ UA [popover] defaults until ~~positioning is computed~~.\n const positioningStyle = ~~manualStyle~~ ?? anchorStyle ?? POPOVER_RESET;\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":";;;;;;;;~~AAsBA~~,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;~~CAAG~~;;~~AAGpF~~,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,~~EAAE~~,~~MAAM~~,~~SAAS~~,~~OAAO~~,~~cAAc~~,~~YAAY~~,~~SAAS~~,~~UAAU~~,~~cAAc~~,~~mBAAmB~~;~~CAC5G~~,MAAM,cAAc,OAAuB,~~KAAK~~;~~CAYhD~~,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;~~AAC7B~~,~~UAAQ~~,gBAAgB,~~GAAG~~;~~AAC3B~~,~~MAAI~~,MAAM,~~2BAA2B~~,~~CACnC~~,~~IAAG~~,MAAM,YAAY,mBAAmB,KAAK,~~aAAa~~;~~IAG9D~~,CAAC,SAAS,~~WAAW~~,~~CACtB~~,~~EAE2D~~,~~YAAY~~;~~CAIxE~~,MAAM,UAAU,eAAe;EAAE,MAAM~~,MAAM~~;~~EAAM~~,OAAO,MAAM;~~EAAO~~,~~GAAG~~,CAAC,~~MAAM~~,MAAM,~~MAAM~~,~~MAAM,~~CAAC;~~CAKpG~~,MAAM,cAAc,cAAc;~~AAChC~~,~~MAAI~~,CAAC,~~2BAA2B~~,~~CAAE~~,~~QAAO~~;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,~~QAAQ~~;~~AAClF~~,~~SAAO~~;~~IACN~~,CAAC,YAAY,~~QAAQ~~,CAAC;~~CAGzB~~,MAAM,CAAC,~~aAAa~~,~~kBAAkB~~,SAA+B,~~KAAK~~;~~AAE1E~~,~~uBAAsB~~;~~AACpB~~,~~MAAI~~,CAAC,MAAM,MAAM;~~AACf~~,~~kBAAe~~,~~KAAK~~;~~AACpB;;EAGF~~,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;~~AAC5B~~,~~OAAI~~,CAAC,aAAa,CAAC,~~QAAS~~;GAE5B,MAAM,cAAc,UAAU,~~uBAAuB~~;~~GAErD~~,MAAM,kBAAkB,2BAA2B,UAAU;IAAE;IAAW,~~MAD7D~~,QAAQ,~~aAAa~~;~~IAC8C~~,~~CAAC~~;~~GAKjF~~,MAAM,EAAE,gBAAgB,GAAG,GAAG,cAAc,uBAC1C,YACA,~~SACA~~,~~aAPgB~~,~~2BAA2B~~,~~GAAG~~,KAAA,IAAY,~~qBAAqB~~,~~QAAQ~~,~~EACpE~~,~~2BAA2B~~,~~gBAAgB~~,~~EAChD~~,~~eAAe~~,QAAQ~~,CAStC~~;~~AAED~~,~~kBAAe,UAA2B;;AAG5C,WAAS;EACT,~~MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAC5B,MAAM,kBAAkB,UACpB,2BAA2B,UAAU;GACnC;GACA,MAAM,QAAQ,~~aAAa~~;~~GAC5B~~,CAAC,~~GACF~~;EAEJ,IAAI,QAAQ;EACZ,SAAS,WAAW,OAAqB;~~AACvC~~,~~OAAI~~,SAAS,qBAAqB,OAAO,YAAY,~~QAAQ~~,~~CAAE~~;~~AAE~~/D,~~wBAAqB~~,~~MAAM~~;~~AAC3B~~,~~WAAQ~~,sBAAsB,~~QAAQ;;AAKxC~~,~~cAAY~~;~~EAEZ~~,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;~~AACvB~~,~~eAAY~~;~~IACZ~~,~~GACF~~;~~AAEN~~,~~MAAI~~,aAAa,~~eACf~~,~~gBAAe~~,QAAQ,~~UAAU~~;~~AAGnC~~,~~MAAI~~,WAAW,~~eACb~~,~~gBAAe~~,QAAQ,~~QAAQ~~;~~AAEjC~~,~~MAAI~~,mBAAmB,~~eACrB~~,~~gBAAe~~,QAAQ,~~gBAAgB~~;~~AAGzC~~,~~SAAO~~,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;~~GAAM~~,CAAC;~~AAC/E~~,~~SAAO~~,iBAAiB,UAAU,~~WAAW~~;~~AAE7C~~,~~eAAa~~;~~AACX~~,~~wBAAqB~~,~~MAAM~~;~~AAC3B~~,~~mBAAgB~~,~~YAAY~~;~~AAC5B~~,~~UAAO~~,oBAAoB,UAAU,YAAY,~~KAAK~~;~~AACtD~~,~~UAAO~~,oBAAoB,UAAU,~~WAAW;;IAEjD~~;EAAC,MAAM;EAAM;EAAY;EAAS;EAAS;EAAU;~~EAAU~~,CAAC;~~CAInE~~,MAAM,mBAAmB,~~eAAe~~,eAAe;~~AAIvD~~,~~KAAI~~,CAAC,MAAM,~~KACT~~,~~QAAO~~;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;~~AAElD~~,~~QAAO~~,cACL,OACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,~~MAAM~~;~~IAC7B~~;~~GACD~~;IAAE,GAAG;IAAgB,QAAQ;~~IAAY~~;~~GACzC~~;~~GACD~~;~~EACF~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport {\n getAnchorPositionStyle,\n getPopupPositionRect,\n getPositionedSide,\n getPositioningBoundaryRect,\n isEventWithinElement,\n resolveOffsets,\n resolvePositioningBoundary,\n} from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } 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';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\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 if (el && supportsAnchorPositioning()) {\n el.style.setProperty('position-anchor', `--${anchorName}`);\n }\n },\n [popover, anchorName]\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 // CSS Anchor Positioning — computed from state, no measurement needed.\n // `position-anchor` is set imperatively in the ref callback above\n // because React's style prop silently drops unrecognised CSS properties.\n const anchorStyle = useMemo(() => {\n if (!supportsAnchorPositioning()) return null;\n const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n return rest as CSSProperties;\n }, [anchorName, posOpts]);\n\n // Measure rects after layout, before paint.\n const [position, setPosition] = useState<CSSProperties \| null>(null);\n\n useLayoutEffect(() => {\n if (!state.open) {\n setPosition(null);\n return;\n }\n\n function measure(): void {\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n if (!triggerEl \|\| !popupEl) return;\n\n const triggerRect = triggerEl.getBoundingClientRect();\n const root = popupEl.getRootNode() as Document \| ShadowRoot;\n const boundaryElement = resolvePositioningBoundary(boundary, { container, root });\n const popupRect = getPopupPositionRect(popupEl, posOpts.side);\n const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n const offsets = resolveOffsets(popupEl);\n const side = getPositionedSide(triggerRect, popupRect, boundaryRect, posOpts, offsets);\n\n const { positionAnchor: _, ...nextStyle } = getAnchorPositionStyle(\n anchorName,\n { ...posOpts, side },\n triggerRect,\n supportsAnchorPositioning() ? undefined : popupRect,\n boundaryRect,\n offsets\n );\n\n setPosition(nextStyle as CSSProperties);\n setPositionedSide(side);\n }\n\n measure();\n const triggerEl = popover.triggerElement;\n const popupEl = internalRef.current;\n const boundaryElement = popupEl\n ? resolvePositioningBoundary(boundary, {\n container,\n root: popupEl.getRootNode() as Document \| ShadowRoot,\n })\n : null;\n\n let rafId = 0;\n function reposition(event?: Event): void {\n if (event && isEventWithinElement(event, internalRef.current)) return;\n\n cancelAnimationFrame(rafId);\n rafId = requestAnimationFrame(measure);\n }\n\n // Re-measure after the popover has entered the top layer and whenever\n // its own size or the trigger size changes.\n reposition();\n\n const resizeObserver =\n typeof ResizeObserver === 'function'\n ? new ResizeObserver(() => {\n reposition();\n })\n : null;\n\n if (triggerEl && resizeObserver) {\n resizeObserver.observe(triggerEl);\n }\n\n if (popupEl && resizeObserver) {\n resizeObserver.observe(popupEl);\n }\n if (boundaryElement && resizeObserver) {\n resizeObserver.observe(boundaryElement);\n }\n\n window.addEventListener('scroll', reposition, { capture: true, passive: true });\n window.addEventListener('resize', reposition);\n\n return () => {\n cancelAnimationFrame(rafId);\n resizeObserver?.disconnect();\n window.removeEventListener('scroll', reposition, true);\n window.removeEventListener('resize', reposition);\n };\n }, [state.open, anchorName, posOpts, popover, boundary, container, setPositionedSide]);\n\n // Use measured styles once available; reset UA [popover] defaults until then.\n const positioningStyle = position ?? anchorStyle ?? POPOVER_RESET;\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":"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"}

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

@@ -4,12 +4,13 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { useDestroy } from "../../utils/use-destroy.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
 import { PopoverContextProvider } from "./context.js";
 import { createPopover, createTransition } from "@videojs/core/dom";
 import { useSnapshot } from "@videojs/store/react";
 import { useEffect, useState } from "react";
-import { isUndefined } from "@videojs/utils/predicate";
 import { jsx } from "react/jsx-runtime";
+import { isUndefined } from "@videojs/utils/predicate";
 import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
 //#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 }) {
@@ -63,11 +64,14 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 	useDestroy(popover);
 	const input = useSnapshot(popover.input);
 	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
 	return /* @__PURE__ */ jsx(PopoverContextProvider, {
 		value: {
 			core,
 			popover,
-			state: core.getState(),
+			state,
+			preferredSide,
+			setPositionedSide,
 			stateAttrMap: PopoverDataAttrs,
 			anchorName,
 			popupId,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport {\n createPopover,\n createTransition,\n type PopoverChangeDetails,\n type PositioningBoundary,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/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 { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the popover open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function PopoverRoot({\n open: controlledOpen,\n defaultOpen = PopoverCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n openOnHover = PopoverCore.defaultProps.openOnHover,\n delay = PopoverCore.defaultProps.delay,\n closeDelay = PopoverCore.defaultProps.closeDelay,\n boundary = 'container',\n children,\n ...coreProps\n}: PopoverRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new PopoverCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n // Keep refs that always point to the latest values so the\n // createPopover closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n const openOnHoverRef = useLatestRef(openOnHover);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [popover] = useState(() => {\n const instance = createPopover({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n openOnHover: () => openOnHoverRef.current,\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n group: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open('click');\n }\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const popupId = useSafeId('popup');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = popover.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n popover.open('click');\n } else {\n popover.close('click');\n }\n }, [controlledOpen, popover]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n popover.close('imperative-action');\n }, [controls?.state.visible, popover]);\n\n useDestroy(popover);\n\n const input = useSnapshot(popover.input);\n core.setInput(input);\n const state = core.getState();\n\n return (\n <PopoverContextProvider\n value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId, boundary, container }}\n >\n {children}\n </PopoverContextProvider>\n );\n}\n\nexport namespace PopoverRoot {\n export type Props = PopoverRootProps;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;AA8BA~~,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,~~sBAAsB~~;~~CACxC~~,MAAM,aAAa,~~uBAAuB~~;~~CAC1C~~,MAAM,WAAW,~~4BAA4B~~;~~CAC7C~~,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,~~UAAU~~,CAAC;~~AACzD~~,~~MAAK~~,SAAS,~~UAAU~~;~~CAExB~~,MAAM,eAAe,CAAC,YAAY,~~eAAe~~;~~CAIjD~~,MAAM,kBAAkB,aAAa,~~iBAAiB~~;~~CACtD~~,MAAM,0BAA0B,aAAa,~~yBAAyB~~;~~CACtE~~,MAAM,mBAAmB,aAAa,UAAU,~~cAAc~~;~~CAC9D~~,MAAM,yBAAyB,aAAa,UAAU,~~oBAAoB~~;~~CAC1E~~,MAAM,iBAAiB,aAAa,~~YAAY~~;~~CAChD~~,MAAM,WAAW,aAAa,~~MAAM~~;~~CACpC~~,MAAM,gBAAgB,aAAa,~~WAAW~~;~~CAC9C~~,MAAM,gBAAgB,aAAa,~~WAAW~~;~~CAE9C~~,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,~~kBAAkB~~;~~GAC9B~~,eAAe,UAAmB,YAAkC;~~AAClE~~,~~oBAAgB~~,UAAU,UAAU,~~QAAQ;;GAE9C~~,uBAAuB,aAAsB;~~AAC3C~~,~~4BAAwB~~,UAAU,~~SAAS;;GAE7C~~,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,aAAa,cAAc;~~GAC5B~~,CAAC;~~AAGF~~,~~MAAI~~,CAAC,gBAAgB,~~YACnB~~,~~UAAS~~,KAAK,~~QAAQ~~;~~AAGxB~~,~~SAAO~~;~~GACP~~;~~CAEF~~,MAAM,aAAa,~~WAAW~~;~~CAC9B~~,MAAM,UAAU,UAAU,~~QAAQ~~;~~AAGlC~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,YAAY,~~eAAe~~,~~CAAE~~;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;~~AAC5C~~,~~MAAI~~,mBAAmB,~~UAAW~~;~~AAElC~~,~~MAAI~~,~~eACF~~,~~SAAQ~~,KAAK,~~QAAQ~~;~~MAErB~~,~~SAAQ~~,MAAM,~~QAAQ~~;~~IAEvB~~,CAAC,gBAAgB,~~QAAQ~~,CAAC;~~AAE7B~~,~~iBAAgB~~;~~AACd~~,~~MAAI~~,YAAY,UAAU,MAAM,~~QAAQ~~,~~CAAE~~;~~AAC1C~~,~~MAAI~~,SAAS,MAAM,~~QAAS~~;~~AAE5B~~,~~UAAQ~~,MAAM,~~oBAAoB~~;~~IACjC~~,CAAC,UAAU,MAAM,SAAS,~~QAAQ~~,CAAC;~~AAEtC~~,~~YAAW~~,~~QAAQ~~;~~CAEnB~~,MAAM,QAAQ,YAAY,QAAQ,~~MAAM~~;~~AACxC~~,~~MAAK~~,SAAS,MAAM;~~AAGpB~~,~~QACE~~,oBAAC,wBAAD;EACE,OAAO;~~GAAE~~;~~GAAM~~;~~GAAS,OAJd,KAAK,UAAU~~;~~GAIM~~,cAAc;~~GAAkB~~;~~GAAY~~;~~GAAS~~;~~GAAU~~;~~GAAW~~;~~EAExG~~;~~EACsB~~,CAAA"}
1	+ {"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport {\n createPopover,\n createTransition,\n type PopoverChangeDetails,\n type PositioningBoundary,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useOptionalContainer, useOptionalPopupGroup } from '../../player/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 { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\n /** Boundary used to constrain the popup size. /\n boundary?: PositioningBoundary;\n /* Called when the popover open state changes (fires immediately, before animations). /\n onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n /* Called after open/close animations complete. */\n onOpenChangeComplete?: (open: boolean) => void;\n children?: ReactNode;\n}\n\nexport function PopoverRoot({\n open: controlledOpen,\n defaultOpen = PopoverCore.defaultProps.defaultOpen,\n onOpenChange: onOpenChangeProp,\n onOpenChangeComplete: onOpenChangeCompleteProp,\n openOnHover = PopoverCore.defaultProps.openOnHover,\n delay = PopoverCore.defaultProps.delay,\n closeDelay = PopoverCore.defaultProps.closeDelay,\n boundary = 'container',\n children,\n ...coreProps\n}: PopoverRootProps): ReactNode {\n const container = useOptionalContainer();\n const popupGroup = useOptionalPopupGroup();\n const controls = useOptionalControlsContext();\n const [core] = useState(() => new PopoverCore(coreProps));\n core.setProps(coreProps);\n\n const isControlled = !isUndefined(controlledOpen);\n\n // Keep refs that always point to the latest values so the\n // createPopover closure never reads stale props.\n const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n const openOnHoverRef = useLatestRef(openOnHover);\n const delayRef = useLatestRef(delay);\n const closeDelayRef = useLatestRef(closeDelay);\n const popupGroupRef = useLatestRef(popupGroup);\n\n const [popover] = useState(() => {\n const instance = createPopover({\n transition: createTransition(),\n onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n onOpenChangeRef.current?.(nextOpen, details);\n },\n onOpenChangeComplete: (nextOpen: boolean) => {\n onOpenChangeCompleteRef.current?.(nextOpen);\n },\n closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n openOnHover: () => openOnHoverRef.current,\n delay: () => delayRef.current,\n closeDelay: () => closeDelayRef.current,\n group: () => popupGroupRef.current,\n });\n\n // Apply defaultOpen on creation (uncontrolled only)\n if (!isControlled && defaultOpen) {\n instance.open('click');\n }\n\n return instance;\n });\n\n const anchorName = useSafeId();\n const popupId = useSafeId('popup');\n\n // Sync controlled open prop -> internal input state.\n useEffect(() => {\n if (isUndefined(controlledOpen)) return;\n\n const { active: inputOpen } = popover.input.current;\n if (controlledOpen === inputOpen) return;\n\n if (controlledOpen) {\n popover.open('click');\n } else {\n popover.close('click');\n }\n }, [controlledOpen, popover]);\n\n useEffect(() => {\n if (isUndefined(controls?.state.visible)) return;\n if (controls.state.visible) return;\n\n popover.close('imperative-action');\n }, [controls?.state.visible, popover]);\n\n useDestroy(popover);\n\n const input = useSnapshot(popover.input);\n core.setInput(input);\n const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n return (\n <PopoverContextProvider\n value={{\n core,\n popover,\n state,\n preferredSide,\n setPositionedSide,\n stateAttrMap: PopoverDataAttrs,\n anchorName,\n popupId,\n boundary,\n container,\n }}\n >\n {children}\n </PopoverContextProvider>\n );\n}\n\nexport namespace PopoverRoot {\n export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CACxD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,UAAU,aAAa;CAC7D,MAAM,yBAAyB,aAAa,UAAU,mBAAmB;CACzE,MAAM,iBAAiB,aAAa,WAAW;CAC/C,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,aAAa,cAAc;EAC7B,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK,OAAO;EAGvB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,OAAO;CAGjC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK,OAAO;OAEpB,QAAQ,MAAM,OAAO;CAEzB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAC1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CACvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n const triggerRef = useCallback(\n (el: HTMLButtonElement \| null) => {\n popover.setTriggerElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('anchor-name', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n // Remap DOM focus events to React synthetic event names.\n // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n // but React maps those to onFocus/onBlur.\n const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, triggerRef],\n props: [\n {\n type: 'button' as const,\n ...core.getTriggerAttrs(state, popupId),\n },\n { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverTrigger {\n export type Props = PopoverTriggerProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,~~mBAAmB~~;~~CAEvF~~,MAAM,aAAa,aAChB,OAAiC;~~AAChC~~,~~UAAQ~~,kBAAkB,~~GAAG~~;~~AAC7B~~,~~MAAI~~,MAAM,~~2BAA2B~~,~~CACnC~~,~~IAAG~~,MAAM,YAAY,eAAe,KAAK,~~aAAa~~;~~IAG1D~~,CAAC,SAAS,~~WAAW~~,CACtB;~~CAKD~~,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;~~AAE~~/D,~~QAAO~~,cACL,UACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE;EACA;EACA,KAAK,CAAC,cAAc,~~WAAW~~;~~EAC/B~~,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,~~QAAQ~~;~~IACxC~~;~~GACD~~;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;~~IAAY~~;~~GAC/D~~;~~GACD~~;~~EACF~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n { render, className, style, ...elementProps },\n forwardedRef\n) {\n const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n const triggerRef = useCallback(\n (el: HTMLButtonElement \| null) => {\n popover.setTriggerElement(el);\n if (el && supportsAnchorPositioning()) {\n el.style.setProperty('anchor-name', `--${anchorName}`);\n }\n },\n [popover, anchorName]\n );\n\n // Remap DOM focus events to React synthetic event names.\n // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n // but React maps those to onFocus/onBlur.\n const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n return renderElement(\n 'button',\n { render, className, style },\n {\n state,\n stateAttrMap,\n ref: [forwardedRef, triggerRef],\n props: [\n {\n type: 'button' as const,\n ...core.getTriggerAttrs(state, popupId),\n },\n { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n elementProps,\n ],\n }\n );\n});\n\nexport namespace PopoverTrigger {\n export type Props = PopoverTriggerProps;\n export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,kBAAkB;CAEtF,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;EAC5B,IAAI,MAAM,0BAA0B,GAClC,GAAG,MAAM,YAAY,eAAe,KAAK,YAAY;CAEzD,GACA,CAAC,SAAS,UAAU,CACtB;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,OAAO;GACxC;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

package/dist/default/ui/poster/poster.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef, SyntheticEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/*\n Displays the video poster image. Shows before playback starts, hides after.\n \n @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n \n <Poster\n * src=\"poster.jpg\"\n * alt=\"Video description\"\n * className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n componentProps: PosterProps,\n forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new PosterCore());\n\n // Track when the current src has finished loading so the CSS blur-up\n // sequence can show the placeholder first, then crossfade to the full image.\n const src = (elementProps as { src?: string }).src;\n const [loadedSrc, setLoadedSrc] = useState<string \| undefined>(undefined);\n const loaded = loadedSrc === src;\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // A cached image may already be complete when the element mounts, in which\n // case onLoad never fires. Check synchronously after mount and on src change.\n useEffect(() => {\n const img = imgRef.current;\n if (img?.complete && img.naturalWidth > 0 && img.getAttribute('src') === src) {\n setLoadedSrc(src);\n }\n }, [src]);\n\n const handleLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n setLoadedSrc(event.currentTarget.getAttribute('src') ?? undefined);\n }, []);\n\n if (!playback) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n return null;\n }\n\n core.setMedia(playback);\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state: core.getState(),\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [elementProps, { 'data-loaded': loaded ? '' : undefined, onLoad: handleLoad }],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,~~eAAe~~;~~CAE1C~~,MAAM,CAAC,QAAQ,eAAe,IAAI,~~YAAY~~,CAAC;~~CAI/C~~,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,~~EAAU~~;~~CACzE~~,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,~~KAAK~~;~~AAIpD~~,~~iBAAgB~~;EACd,MAAM,MAAM,OAAO;~~AACnB~~,~~MAAI~~,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,MAAM,~~KAAK~~,~~IACvE~~,~~cAAa,IAAI~~;~~IAElB~~,CAAC,~~IAAI~~,CAAC;~~CAET~~,MAAM,aAAa,aAAa,UAA4C;~~AAC1E~~,~~eAAa~~,MAAM,cAAc,aAAa,~~MAAM~~,~~IAAI~~,KAAA,~~EAAU~~;~~IACjE~~,~~EAAE~~,CAAC;~~AAEN~~,~~KAAI~~,CAAC,~~SAEH~~,~~QAAO~~;~~AAGT~~,~~MAAK~~,SAAS,~~SAAS~~;~~AAEvB~~,~~QAAO~~,cACL,OACA;EAAE;EAAQ;EAAW;~~EAAO~~,~~EAC5B~~;EACE,OAAO,KAAK,~~UAAU~~;~~EACtB~~,cAAc;EACd,KAAK,CAAC,cAAc,~~OAAO~~;~~EAC3B~~,OAAO,CAAC,cAAc;GAAE,eAAe,SAAS,KAAK,KAAA;GAAW,QAAQ;~~GAAY~~,CAAC;~~EACtF~~,CACF;~~EACD~~"}
1	+ {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef, SyntheticEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/*\n Displays the video poster image. Shows before playback starts, hides after.\n \n @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n \n <Poster\n * src=\"poster.jpg\"\n * alt=\"Video description\"\n * className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n componentProps: PosterProps,\n forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n const { render, className, style, ...elementProps } = componentProps;\n\n const playback = usePlayer(selectPlayback);\n\n const [core] = useState(() => new PosterCore());\n\n // Track when the current src has finished loading so the CSS blur-up\n // sequence can show the placeholder first, then crossfade to the full image.\n const src = (elementProps as { src?: string }).src;\n const [loadedSrc, setLoadedSrc] = useState<string \| undefined>(undefined);\n const loaded = loadedSrc === src;\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // A cached image may already be complete when the element mounts, in which\n // case onLoad never fires. Check synchronously after mount and on src change.\n useEffect(() => {\n const img = imgRef.current;\n if (img?.complete && img.naturalWidth > 0 && img.getAttribute('src') === src) {\n setLoadedSrc(src);\n }\n }, [src]);\n\n const handleLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n setLoadedSrc(event.currentTarget.getAttribute('src') ?? undefined);\n }, []);\n\n if (!playback) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n return null;\n }\n\n core.setMedia(playback);\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state: core.getState(),\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [elementProps, { 'data-loaded': loaded ? '' : undefined, onLoad: handleLoad }],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,CAAS;CACxE,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,IAAI;CAInD,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,KAAK,MAAM,KACvE,aAAa,GAAG;CAEpB,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,aAAa,aAAa,UAA4C;EAC1E,aAAa,MAAM,cAAc,aAAa,KAAK,KAAK,KAAA,CAAS;CACnE,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,UAEH,OAAO;CAGT,KAAK,SAAS,QAAQ;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO,KAAK,SAAS;EACrB,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO,CAAC,cAAc;GAAE,eAAe,SAAS,KAAK,KAAA;GAAW,QAAQ;EAAW,CAAC;CACtF,CACF;AACF,CAAC"}