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

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

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

Files changed (1552) hide show

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

@@ -8,9 +8,8 @@ import { isInteractiveActivation } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/menu-trigger.tsx
 /**
-* Button that toggles the menu visibility. At root level renders a `<button>`.
-* When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
-* that opens the submenu on click or ArrowRight.
+* Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+* trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
 */
 const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
 	const { core, menu, parent, state, contentId } = useMenuContext();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement \| HTMLDivElement;\n\nexport interface MenuTriggerProps\n extends Omit<UIComponentProps<'button', MenuState>, 'type' \| 'onClick' \| 'onKeyDown'> {\n /** Disables the trigger. /\n disabled?: boolean;\n onClick?: React.MouseEventHandler<MenuTriggerElement>;\n onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/\n Button that toggles the menu visibility. At root level renders a `<button~~>`.\n~~ * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\"~~>`\n~~ * that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement \| HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n forwardedRef\n) {\n const { core, menu, parent, state, contentId } = useMenuContext();\n const isSubMenuTrigger = parent !== null;\n const controlledId = state.open \|\| state.status === 'ending' ? contentId : undefined;\n\n const elementRef = useRef<HTMLElement>(null);\n const triggerId = useSafeId('sub-trigger');\n\n const parentMenuApi = parent?.menu ?? null;\n\n // Register with the parent menu's item list when acting as a submenu trigger.\n useEffect(() => {\n if (!isSubMenuTrigger \|\| !parentMenuApi) return;\n const element = elementRef.current;\n if (!element) return;\n menu.setTriggerElement(element);\n const unregister = parentMenuApi.registerItem(element);\n return () => {\n unregister();\n menu.setTriggerElement(null);\n };\n }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n const openSubMenu = useCallback(() => {\n if (!disabled) menu.open('click');\n }, [disabled, menu]);\n\n const handleSubMenuClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.defaultPrevented) return;\n openSubMenu();\n },\n [onClick, openSubMenu]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n if (disabled \|\| defaultPreventedByUser) return;\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n openSubMenu();\n }\n },\n [disabled, onKeyDown, openSubMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled \|\| !parentMenuApi) return;\n parentMenuApi.highlight(element, { focus: false, pointer: true });\n }, [disabled, parentMenuApi]);\n\n // Root trigger mode — standard button that toggles the menu.\n const triggerRef = useCallback(\n (element: HTMLButtonElement \| null) => {\n menu.setTriggerElement(element);\n },\n [menu]\n );\n\n const handleRootKeyDown = useCallback(\n (event: React.KeyboardEvent<MenuTriggerElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n if (disabled \|\| defaultPreventedByUser) {\n if (disabled && isMenuNavigationKey(event)) event.preventDefault();\n return;\n }\n\n if (isInteractiveActivation(event.nativeEvent)) {\n event.preventDefault();\n menu.triggerProps.onClick(event.nativeEvent);\n return;\n }\n\n menu.triggerProps.onKeyDown(event);\n },\n [disabled, menu.triggerProps, onKeyDown]\n );\n\n const rootTriggerProps = useMemo(\n () => ({\n onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n onKeyDown: handleRootKeyDown,\n }),\n [disabled, handleRootKeyDown, menu.triggerProps]\n );\n\n // Submenu trigger mode — renders as a div with role=\"menuitem\"\n if (isSubMenuTrigger) {\n return (\n <MenuTriggerSubmenu\n render={render}\n className={className}\n style={style}\n disabled={disabled}\n elementProps={elementProps}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n triggerId={triggerId}\n triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n state={state}\n onSubMenuClick={handleSubMenuClick}\n onSubMenuKeyDown={handleSubMenuKeyDown}\n onPointerEnter={handlePointerEnter}\n />\n );\n }\n\n return (\n <MenuTriggerChildContextProvider value>\n {renderElement(\n 'button',\n { render, className, style },\n {\n state,\n ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n props: [\n { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n rootTriggerProps,\n elementProps,\n ],\n }\n )}\n </MenuTriggerChildContextProvider>\n );\n});\n\nexport namespace MenuTrigger {\n export type Props = MenuTriggerProps;\n export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n render: MenuTriggerProps['render'];\n className: MenuTriggerProps['className'];\n style: MenuTriggerProps['style'];\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n forwardedRef: React.ForwardedRef<HTMLButtonElement \| HTMLDivElement>;\n elementRef: React.RefObject<HTMLElement \| null>;\n triggerId: string;\n triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n state: MenuState;\n onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n render,\n className,\n style,\n disabled,\n elementProps,\n forwardedRef,\n elementRef,\n triggerId,\n triggerAttrs,\n state,\n onSubMenuClick,\n onSubMenuKeyDown,\n onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n props: [\n {\n id: triggerId,\n role: 'menuitem' as const,\n ...triggerAttrs,\n 'aria-disabled': disabled ? true : undefined,\n 'data-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;;;AA0BA~~,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;~~EACzC~~,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;~~EACd~~,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;~~EACrD~~,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;~~EACf~~,IAAI,MAAM,kBAAkB;~~EAC5B~~,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;~~EACxC~~,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;~~EAC5C~~,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,oBAAoB,aACvB,UAAmD;EAClD,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAElE,IAAI,YAAY,wBAAwB;GACtC,IAAI,YAAY,oBAAoB,KAAK,GAAG,MAAM,eAAe;~~GACjE~~;EACF;EAEA,IAAI,wBAAwB,MAAM,WAAW,GAAG;GAC9C,MAAM,eAAe;GACrB,KAAK,aAAa,QAAQ,MAAM,WAAW;GAC3C;EACF;EAEA,KAAK,aAAa,UAAU,KAAK;CACnC,GACA;EAAC;EAAU,KAAK;EAAc;CAAS,CACzC;CAEA,MAAM,mBAAmB,eAChB;EACL,SAAS,YAAY,UAAyC,MAAM,eAAe,IAAI,KAAK,aAAa;EACzG,WAAW;CACb,IACA;EAAC;EAAU;EAAmB,KAAK;CAAY,CACjD;CAGA,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}
1	+ {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement \| HTMLDivElement;\n\nexport interface MenuTriggerProps extends Omit<\n UIComponentProps<'button', MenuState>,\n 'type' \| 'onClick' \| 'onKeyDown'\n> {\n /** Disables the trigger. /\n disabled?: boolean;\n onClick?: React.MouseEventHandler<MenuTriggerElement>;\n onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/\n Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu\n * trigger), renders as a `<div role=\"menuitem\">` that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement \| HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n forwardedRef\n) {\n const { core, menu, parent, state, contentId } = useMenuContext();\n const isSubMenuTrigger = parent !== null;\n const controlledId = state.open \|\| state.status === 'ending' ? contentId : undefined;\n\n const elementRef = useRef<HTMLElement>(null);\n const triggerId = useSafeId('sub-trigger');\n\n const parentMenuApi = parent?.menu ?? null;\n\n // Register with the parent menu's item list when acting as a submenu trigger.\n useEffect(() => {\n if (!isSubMenuTrigger \|\| !parentMenuApi) return;\n\n const element = elementRef.current;\n if (!element) return;\n\n menu.setTriggerElement(element);\n const unregister = parentMenuApi.registerItem(element);\n\n return () => {\n unregister();\n menu.setTriggerElement(null);\n };\n }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n const openSubMenu = useCallback(() => {\n if (!disabled) menu.open('click');\n }, [disabled, menu]);\n\n const handleSubMenuClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n\n if (event.defaultPrevented) return;\n\n openSubMenu();\n },\n [onClick, openSubMenu]\n );\n\n const handleSubMenuKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n if (disabled \|\| defaultPreventedByUser) return;\n\n if (event.key === 'ArrowRight') {\n event.preventDefault();\n openSubMenu();\n }\n },\n [disabled, onKeyDown, openSubMenu]\n );\n\n const handlePointerEnter = useCallback(() => {\n const element = elementRef.current;\n if (!element \|\| disabled \|\| !parentMenuApi) return;\n\n parentMenuApi.highlight(element, { focus: false, pointer: true });\n }, [disabled, parentMenuApi]);\n\n // Root trigger mode — standard button that toggles the menu.\n const triggerRef = useCallback(\n (element: HTMLButtonElement \| null) => {\n menu.setTriggerElement(element);\n },\n [menu]\n );\n\n const handleRootKeyDown = useCallback(\n (event: React.KeyboardEvent<MenuTriggerElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n if (disabled \|\| defaultPreventedByUser) {\n if (disabled && isMenuNavigationKey(event)) event.preventDefault();\n\n return;\n }\n\n if (isInteractiveActivation(event.nativeEvent)) {\n event.preventDefault();\n menu.triggerProps.onClick(event.nativeEvent);\n return;\n }\n\n menu.triggerProps.onKeyDown(event);\n },\n [disabled, menu.triggerProps, onKeyDown]\n );\n\n const rootTriggerProps = useMemo(\n () => ({\n onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n onKeyDown: handleRootKeyDown,\n }),\n [disabled, handleRootKeyDown, menu.triggerProps]\n );\n\n // Submenu trigger mode — renders as a div with role=\"menuitem\"\n if (isSubMenuTrigger) {\n return (\n <MenuTriggerSubmenu\n render={render}\n className={className}\n style={style}\n disabled={disabled}\n elementProps={elementProps}\n forwardedRef={forwardedRef}\n elementRef={elementRef}\n triggerId={triggerId}\n triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n state={state}\n onSubMenuClick={handleSubMenuClick}\n onSubMenuKeyDown={handleSubMenuKeyDown}\n onPointerEnter={handlePointerEnter}\n />\n );\n }\n\n return (\n <MenuTriggerChildContextProvider value>\n {renderElement(\n 'button',\n { render, className, style },\n {\n state,\n ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n props: [\n { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n rootTriggerProps,\n elementProps,\n ],\n }\n )}\n </MenuTriggerChildContextProvider>\n );\n});\n\nexport namespace MenuTrigger {\n export type Props = MenuTriggerProps;\n export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n render: MenuTriggerProps['render'];\n className: MenuTriggerProps['className'];\n style: MenuTriggerProps['style'];\n disabled: boolean \| undefined;\n elementProps: Record<string, unknown>;\n forwardedRef: React.ForwardedRef<HTMLButtonElement \| HTMLDivElement>;\n elementRef: React.RefObject<HTMLElement \| null>;\n triggerId: string;\n triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n state: MenuState;\n onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n render,\n className,\n style,\n disabled,\n elementProps,\n forwardedRef,\n elementRef,\n triggerId,\n triggerAttrs,\n state,\n onSubMenuClick,\n onSubMenuKeyDown,\n onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n props: [\n {\n id: triggerId,\n role: 'menuitem' as const,\n ...triggerAttrs,\n 'aria-disabled': disabled ? true : undefined,\n 'data-has-submenu': '',\n onClick: onSubMenuClick,\n onKeyDownCapture: preventMenuKeyDefault,\n onKeyDown: onSubMenuKeyDown,\n onPointerEnter,\n },\n elementProps,\n ],\n }\n );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,SAAS,WAAW,GAAG,gBAC7D,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,mBAAmB,WAAW;CACpC,MAAM,eAAe,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,KAAA;CAE3E,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,gBAAgB,QAAQ,QAAQ;CAGtC,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;EAEzC,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAEd,KAAK,kBAAkB,OAAO;EAC9B,MAAM,aAAa,cAAc,aAAa,OAAO;EAErD,aAAa;GACX,WAAW;GACX,KAAK,kBAAkB,IAAI;EAC7B;CACF,GAAG;EAAC;EAAkB;EAAM;CAAa,CAAC;CAE1C,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,KAAK,KAAK,OAAO;CAClC,GAAG,CAAC,UAAU,IAAI,CAAC;CAEnB,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAU,KAAK;EAEf,IAAI,MAAM,kBAAkB;EAE5B,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAClE,IAAI,YAAY,wBAAwB;EAExC,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;EAE5C,cAAc,UAAU,SAAS;GAAE,OAAO;GAAO,SAAS;EAAK,CAAC;CAClE,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;CAChC,GACA,CAAC,IAAI,CACP;CAEA,MAAM,oBAAoB,aACvB,UAAmD;EAClD,MAAM,yBAAyB,mBAAmB,WAAW,KAAK;EAElE,IAAI,YAAY,wBAAwB;GACtC,IAAI,YAAY,oBAAoB,KAAK,GAAG,MAAM,eAAe;GAEjE;EACF;EAEA,IAAI,wBAAwB,MAAM,WAAW,GAAG;GAC9C,MAAM,eAAe;GACrB,KAAK,aAAa,QAAQ,MAAM,WAAW;GAC3C;EACF;EAEA,KAAK,aAAa,UAAU,KAAK;CACnC,GACA;EAAC;EAAU,KAAK;EAAc;CAAS,CACzC;CAEA,MAAM,mBAAmB,eAChB;EACL,SAAS,YAAY,UAAyC,MAAM,eAAe,IAAI,KAAK,aAAa;EACzG,WAAW;CACb,IACA;EAAC;EAAU;EAAmB,KAAK;CAAY,CACjD;CAGA,IAAI,kBACF,OACE,oBAAC,oBAAD;EACU;EACG;EACJ;EACG;EACI;EACA;EACF;EACD;EACX,cAAc,KAAK,gBAAgB,OAAO,YAAY;EAC/C;EACP,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACjB,CAAA;CAIL,OACE,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,YAAY;IAAE;IACxE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;AAErC,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,cACA,OACA,gBACA,kBACA,kBAC0B;CAC1B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,GAAG;GACH,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;EACF,GACA,YACF;CACF,CACF;AACF"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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":["import { 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 } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { 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":";;;;;;;;;;;;;;;~~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,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"}
1	+ {"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["import { 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';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { 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\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\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\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\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\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;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,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;CAE7C,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;EAE1C,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;CAEvC,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/use-popup-position.js CHANGED Viewed

@@ -6,7 +6,7 @@ const POPOVER_RESET = {
 	inset: "auto",
 	margin: 0
 };
-function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, onSideChange }) {
+function usePopupPosition({ open, anchorName, position, triggerSource, popupRef, boundary, container, cssVars, trackResize, onSideChange }) {
 	const [positioner] = useState(() => new PopupPositioner());
 	useLayoutEffect(() => {
 		if (!open) {
@@ -20,6 +20,7 @@ function usePopupPosition({ open, anchorName, position, triggerSource, popupRef,
 			popup: popupRef.current,
 			boundary,
 			container,
+			...trackResize !== void 0 ? { trackResize } : {},
 			...cssVars ? { cssVars } : {},
 			...onSideChange ? { onSideChange } : {}
 		});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["import {\n type MediaContainer,\n PopupPositioner,\n type PopupPositionerOptions,\n type PositioningBoundary,\n type PositioningCSSVars,\n type PositioningOptions,\n} from '@videojs/core/dom';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\ntype PopupStyle = CSSProperties & Partial<Record<`--${string}`, string>>;\n\nconst POPOVER_RESET: PopupStyle = { position: 'fixed', inset: 'auto', margin: 0 };\n\ninterface UsePopupPositionOptions {\n open: boolean;\n anchorName: string;\n position: PositioningOptions \| null;\n triggerSource: { readonly triggerElement: HTMLElement \| null };\n popupRef: RefObject<HTMLElement \| null>;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n cssVars?: PositioningCSSVars;\n onSideChange?: PopupPositionerOptions['onSideChange'];\n}\n\nexport function usePopupPosition({\n open,\n anchorName,\n position,\n triggerSource,\n popupRef,\n boundary,\n container,\n cssVars,\n onSideChange,\n}: UsePopupPositionOptions): PopupStyle {\n const [positioner] = useState(() => new PopupPositioner());\n\n useLayoutEffect(() => {\n if (!open) {\n positioner.cleanup();\n return;\n }\n\n positioner.sync({\n anchorName,\n position,\n trigger: triggerSource.triggerElement,\n popup: popupRef.current,\n boundary,\n container,\n ...(cssVars ? { cssVars } : {}),\n ...(onSideChange ? { onSideChange } : {}),\n });\n });\n\n useLayoutEffect(() => () => positioner.cleanup(), [positioner]);\n\n return POPOVER_RESET;\n}\n"],"mappings":";;;AAaA,MAAM,gBAA4B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;~~AAchF~~,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,gBACsC;CACtC,MAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB,CAAC;CAEzD,sBAAsB;EACpB,IAAI,CAAC,MAAM;GACT,WAAW,QAAQ;GACnB;EACF;EAEA,WAAW,KAAK;GACd;GACA;GACA,SAAS,cAAc;GACvB,OAAO,SAAS;GAChB;GACA;GACA,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;GAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;EACzC,CAAC;CACH,CAAC;CAED,4BAA4B,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;CAE9D,OAAO;AACT"}
1	+ {"version":3,"file":"use-popup-position.js","names":[],"sources":["../../../../src/ui/popover/use-popup-position.ts"],"sourcesContent":["import {\n type MediaContainer,\n PopupPositioner,\n type PopupPositionerOptions,\n type PositioningBoundary,\n type PositioningCSSVars,\n type PositioningOptions,\n} from '@videojs/core/dom';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\ntype PopupStyle = CSSProperties & Partial<Record<`--${string}`, string>>;\n\nconst POPOVER_RESET: PopupStyle = { position: 'fixed', inset: 'auto', margin: 0 };\n\ninterface UsePopupPositionOptions {\n open: boolean;\n anchorName: string;\n position: PositioningOptions \| null;\n triggerSource: { readonly triggerElement: HTMLElement \| null };\n popupRef: RefObject<HTMLElement \| null>;\n boundary: PositioningBoundary;\n container: MediaContainer \| null;\n cssVars?: PositioningCSSVars;\n trackResize?: boolean;\n onSideChange?: PopupPositionerOptions['onSideChange'];\n}\n\nexport function usePopupPosition({\n open,\n anchorName,\n position,\n triggerSource,\n popupRef,\n boundary,\n container,\n cssVars,\n trackResize,\n onSideChange,\n}: UsePopupPositionOptions): PopupStyle {\n const [positioner] = useState(() => new PopupPositioner());\n\n useLayoutEffect(() => {\n if (!open) {\n positioner.cleanup();\n return;\n }\n\n positioner.sync({\n anchorName,\n position,\n trigger: triggerSource.triggerElement,\n popup: popupRef.current,\n boundary,\n container,\n ...(trackResize !== undefined ? { trackResize } : {}),\n ...(cssVars ? { cssVars } : {}),\n ...(onSideChange ? { onSideChange } : {}),\n });\n });\n\n useLayoutEffect(() => () => positioner.cleanup(), [positioner]);\n\n return POPOVER_RESET;\n}\n"],"mappings":";;;AAaA,MAAM,gBAA4B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;AAAE;AAehF,SAAgB,iBAAiB,EAC/B,MACA,YACA,UACA,eACA,UACA,UACA,WACA,SACA,aACA,gBACsC;CACtC,MAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB,CAAC;CAEzD,sBAAsB;EACpB,IAAI,CAAC,MAAM;GACT,WAAW,QAAQ;GACnB;EACF;EAEA,WAAW,KAAK;GACd;GACA;GACA,SAAS,cAAc;GACvB,OAAO,SAAS;GAChB;GACA;GACA,GAAI,gBAAgB,KAAA,IAAY,EAAE,YAAY,IAAI,CAAC;GACnD,GAAI,UAAU,EAAE,QAAQ,IAAI,CAAC;GAC7B,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;EACzC,CAAC;CACH,CAAC;CAED,4BAA4B,WAAW,QAAQ,GAAG,CAAC,UAAU,CAAC;CAE9D,OAAO;AACT"}

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

@@ -7,27 +7,25 @@ import { PosterCore, PosterDataAttrs } from "@videojs/core";
 /**
 * Displays the video poster image. Shows before playback starts, hides after.
 *
-* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the
-* image attributes are yours. Leave the source off and the player's resolved
-* `poster` fills it in.
+* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source
+* off and the player's resolved `poster` fills it in.
 *
-* The image is decorative unless you say otherwise. Describe a poster that
-* carries meaning by passing your own `alt`.
+* The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
 *
 * @example
-* ```tsx
-* <VideoPlayer poster="poster.jpg">
+*   ```tsx
+*   <VideoPlayer poster="poster.jpg">
 *   <Poster />
-* </VideoPlayer>
+*   </VideoPlayer>
 *
-* <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+*   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
 *
-* <Poster
+*   <Poster
 *   render={({ src, ...props }: ComponentProps<'img'>) =>
-*     src ? <Image {...props} src={src} alt="" fill /> : null
+*   src ? <Image {...props} src={src} alt="" fill /> : null
 *   }
-* />
-* ```
+*   />
+*   ```;
 */
 const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;

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":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } 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/** The source currently requested from the image, and how it is faring. /\ninterface ImageRequest {\n src: string;\n srcSet: string \| undefined;\n state: PosterImageLoadState;\n}\n\n/\n Displays the video poster image. Shows before playback starts, hides after.\n \n Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the\n * image attributes are yours. Leave the source off and the player's resolved\n * `poster` fills it in.\n \n The image is decorative unless you say otherwise. Describe a poster that\n * carries meaning by passing your own `alt`.\n \n @example\n * ```tsx\n * <VideoPlayer poster=\"poster.jpg\">\n * <Poster />\n * </VideoPlayer>\n \n <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n \n <Poster\n * render={({ src, ...props }: ComponentProps<'img'>) =>\n * src ? <Image {...props} src={src} alt=\"\" fill /> : null\n * }\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 const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new PosterCore());\n\n // The metadata feature is optional: without it nothing resolves a URL, and\n // this stays a visibility wrapper around whatever `src` was passed.\n if (playback) {\n core.setMedia({\n started: playback.started,\n poster: metadata?.poster ?? '',\n });\n }\n\n const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n // Either authored source makes the image yours, matching `hasSource` in the\n // HTML element. Filling `src` alongside a `srcset` would inject the player's\n // poster into your candidate set as the 1x entry.\n const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n const [request, setRequest] = useState<ImageRequest>(() => ({\n src,\n srcSet: authoredSrcSet,\n state: initialLoadState,\n }));\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // Keep only the active request. Retaining a settled source by value would\n // resurrect its old state when the image moved A -> B -> A, even though the\n // second A is a new request. `srcSet` is part of the identity because `src`\n // stays empty when it is the only source.\n const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n const loadState = matchesRequest ? request.state : initialLoadState;\n\n if (playback) core.setImageLoadState(loadState);\n\n const state = playback ? core.getState() : null;\n\n // An image can already be settled when we first see it — hydrated from server\n // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n // pixels stand on their own; the absence of them only means failure once\n // `complete` can be trusted, which takes a source on the image itself, since one\n // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n //\n // Only when we first see it. A later source change leaves the previous request's\n // pixels in place until the new one settles, so reading them again would call\n // the new source loaded while it is still fetching. `load` and `error` cover\n // every source after this one, the way the HTML element reads an image once.\n // ~~biome~~-~~ignore~~ ~~lint~~/~~correctness/useExhaustiveDependencies:~~ reads the first source only, at mount\n useEffect(() => {\n const img = imgRef.current;\n if (!img) return;\n\n if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n else if (img.complete && (img.getAttribute('src') \|\| img.hasAttribute('srcset'))) {\n setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n }\n }, []);\n\n // Recorded against the source this render asked for, not the one on the\n // element: a `render` override is free to rewrite it.\n const handleLoad = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n [src, authoredSrcSet]\n );\n const handleError = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n [src, authoredSrcSet]\n );\n\n if (!playback \|\| !state) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n return null;\n }\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state,\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [\n { alt: '' },\n elementProps,\n {\n // An empty `src` requests the document URL, so leave the attribute off.\n src: src \|\| undefined,\n onLoad: handleLoad,\n onError: handleError,\n },\n ],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA~~,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;~~CACjE~~,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;~~CACxF~~,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,~~OAEhB~~,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } 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/** The source currently requested from the image, and how it is faring. /\ninterface ImageRequest {\n src: string;\n srcSet: string \| undefined;\n state: PosterImageLoadState;\n}\n\n/\n Displays the video poster image. Shows before playback starts, hides after.\n \n Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source\n * off and the player's resolved `poster` fills it in.\n \n The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.\n \n @example\n * ```tsx\n * <VideoPlayer poster=\"poster.jpg\">\n * <Poster />\n * </VideoPlayer>\n \n <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n \n <Poster\n * render={({ src, ...props }: ComponentProps<'img'>) =>\n * src ? <Image {...props} src={src} alt=\"\" fill /> : null\n * }\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 const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new PosterCore());\n\n // The metadata feature is optional: without it nothing resolves a URL, and\n // this stays a visibility wrapper around whatever `src` was passed.\n if (playback) {\n core.setMedia({\n started: playback.started,\n poster: metadata?.poster ?? '',\n });\n }\n\n const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n // Either authored source makes the image yours, matching `hasSource` in the\n // HTML element. Filling `src` alongside a `srcset` would inject the player's\n // poster into your candidate set as the 1x entry.\n const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n const [request, setRequest] = useState<ImageRequest>(() => ({\n src,\n srcSet: authoredSrcSet,\n state: initialLoadState,\n }));\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // Keep only the active request. Retaining a settled source by value would\n // resurrect its old state when the image moved A -> B -> A, even though the\n // second A is a new request. `srcSet` is part of the identity because `src`\n // stays empty when it is the only source.\n const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n\n if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n\n const loadState = matchesRequest ? request.state : initialLoadState;\n\n if (playback) core.setImageLoadState(loadState);\n\n const state = playback ? core.getState() : null;\n\n // An image can already be settled when we first see it — hydrated from server\n // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n // pixels stand on their own; the absence of them only means failure once\n // `complete` can be trusted, which takes a source on the image itself, since one\n // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n //\n // Only when we first see it. A later source change leaves the previous request's\n // pixels in place until the new one settles, so reading them again would call\n // the new source loaded while it is still fetching. `load` and `error` cover\n // every source after this one, the way the HTML element reads an image once.\n // oxlint-disable-next-line react/exhaustive-deps -- reads the first source only, at mount\n useEffect(() => {\n const img = imgRef.current;\n if (!img) return;\n\n if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n else if (img.complete && (img.getAttribute('src') \|\| img.hasAttribute('srcset'))) {\n setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n }\n }, []);\n\n // Recorded against the source this render asked for, not the one on the\n // element: a `render` override is free to rewrite it.\n const handleLoad = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n [src, authoredSrcSet]\n );\n const handleError = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n [src, authoredSrcSet]\n );\n\n if (!playback \|\| !state) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n\n return null;\n }\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state,\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [\n { alt: '' },\n elementProps,\n {\n // An empty `src` requests the document URL, so leave the attribute off.\n src: src \|\| undefined,\n onLoad: handleLoad,\n onError: handleError,\n },\n ],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;CAEjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CAExF,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,OAGhB,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -9,9 +9,8 @@ const useQualityRadioOptions = createRadioOptionsHook({
 	createCore: () => new QualityRadioGroupCore()
 });
 /**
-* Create quality menu options (including an `Auto` option) from the player
-* video rendition state. Returns `null` when the quality feature is not
-* configured.
+* Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when
+* the quality feature is not configured.
 *
 * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
 */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n state: QualityRadioGroupCore.State;\n label: string;\n value: string;\n selectedLabel: string;\n options: QualityOption[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n name: 'useQualityOptions',\n feature: 'quality',\n selector: selectQuality,\n createCore: () => new QualityRadioGroupCore(),\n});\n\n/*\n Create quality menu options (including an `Auto` option) from the player\n * video rendition state. Returns `null` when the quality feature is not\n * configured.\n \n @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult \| null {\n 'use no memo';\n\n return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n export type Props = QualityOptionsProps;\n export type Result = QualityOptionsResult;\n export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC~~;;;;;;;;AASD~~,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}
1	+ {"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n state: QualityRadioGroupCore.State;\n label: string;\n value: string;\n selectedLabel: string;\n options: QualityOption[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n name: 'useQualityOptions',\n feature: 'quality',\n selector: selectQuality,\n createCore: () => new QualityRadioGroupCore(),\n});\n\n/*\n Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when\n * the quality feature is not configured.\n \n @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult \| null {\n 'use no memo';\n\n return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n export type Props = QualityOptionsProps;\n export type Result = QualityOptionsResult;\n export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;AAQD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

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

@@ -3,24 +3,24 @@ import { useQualityOptions } from "../quality/use-quality-options.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { Fragment, forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
 import { QualityRadioGroupDataAttrs } from "@videojs/core";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/quality-radio-group/quality-radio-group.tsx
 /**
 * Renders menu radio items for the player's video renditions.
 *
 * @example
-* ```tsx
-* <QualityRadioGroup
-*   renderItem={(props, item) => (
-*     <Menu.RadioItem {...props}>
-*       {item.label}
-*       {item.tier ? <sup>{item.tier}</sup> : null}
-*       <Menu.ItemIndicator checked={item.checked} />
-*     </Menu.RadioItem>
-*   )}
-* />
-* ```
+*   ```tsx
+*   <QualityRadioGroup
+*     renderItem={(props, item) => (
+*       <Menu.RadioItem {...props}>
+*         {item.label}
+*         {item.tier ? <sup>{item.tier}</sup> : null}
+*         <Menu.ItemIndicator checked={item.checked} />
+*       </Menu.RadioItem>
+*     )}
+*   />;
+*   ```;
 */
 const QualityRadioGroup = forwardRef(function QualityRadioGroup(componentProps, forwardedRef) {
 	const { renderItem, render, className, style, label, formatRendition, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n /** Whether this quality option is currently selected. /\n checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Rendition value represented by the item. /\n 'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'~~>,\n~~ QualityOptionsProps {\n /* Render one consumer-owned menu radio item for every quality option. /\n renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's video renditions.\n \n @example\n * ```tsx\n * <QualityRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * {item.tier ? <sup>{item.tier}</sup> : null}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * ~~/>\~~n * ~~```\~~n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n function QualityRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRendition,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const quality = useQualityOptions({ label, formatRendition, disabled });\n if (!quality) return null;\n\n const { state, value, options, setValue } = quality;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rendition': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace QualityRadioGroup {\n export type Props = QualityRadioGroupProps;\n export type State = QualityRadioGroupCore.State;\n export type ItemProps = QualityRadioGroupItemProps;\n export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;~~AA4CA~~,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
1	+ {"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n /** Whether this quality option is currently selected. /\n checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Rendition value represented by the item. /\n 'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>, QualityOptionsProps {\n /* Render one consumer-owned menu radio item for every quality option. /\n renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's video renditions.\n \n @example\n * ```tsx\n * <QualityRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * {item.tier ? <sup>{item.tier}</sup> : null}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * />;\n * ```;\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n function QualityRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRendition,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const quality = useQualityOptions({ label, formatRendition, disabled });\n if (!quality) return null;\n\n const { state, value, options, setValue } = quality;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rendition': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace QualityRadioGroup {\n export type Props = QualityRadioGroupProps;\n export type State = QualityRadioGroupCore.State;\n export type ItemProps = QualityRadioGroupItemProps;\n export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -6,18 +6,18 @@ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 * A button that seeks forward or backward by a configurable number of seconds.
 *
 * @example
-* ```tsx
-* <SeekButton seconds={-10} />
+*   ```tsx
+*   <SeekButton seconds={-10} />
 *
-* <SeekButton
+*   <SeekButton
 *   seconds={30}
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
-*     </button>
+*   <button {...props}>
+*   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const SeekButton = createMediaButton({
 	displayName: "SeekButton",