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

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

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

Files changed (1563) hide show

package/dist/dev/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/dev/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/dev/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/dev/ui/play-button/play-button.d.ts CHANGED Viewed

@@ -6,17 +6,17 @@ interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.Stat
  * 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>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const PlayButton: import("react").ForwardRefExoticComponent<PlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace PlayButton {

package/dist/dev/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/dev/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/dev/ui/playback-rate/use-playback-rate-options.d.ts CHANGED Viewed

@@ -16,8 +16,8 @@ interface PlaybackRateOptionsResult {
   setValue: (value: string) => void;
 }
 /**
- * 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/dev/ui/playback-rate/use-playback-rate-options.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-playback-rate-options.d.ts","names":[],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"mappings":";;;UAUiB,iCAAiC,2BAA2B;KAEjE,qBAAqB,sBAAsB;UAEtC;EACf,OAAO,2BAA2B;EAClC;EACA;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,UAAU;EACV,WAAW;;;;;;;;iBAgBG,uBAAuB,QAAQ,2BAA2B;~~kBAYzD~~;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
1	+ {"version":3,"file":"use-playback-rate-options.d.ts","names":[],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"mappings":";;;UAUiB,iCAAiC,2BAA2B;KAEjE,qBAAqB,sBAAsB;UAEtC;EACf,OAAO,2BAA2B;EAClC;EACA;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,UAAU;EACV,WAAW;;;;;;;;iBAgBG,uBAAuB,QAAQ,2BAA2B;kBAazD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

package/dist/dev/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/dev/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/dev/ui/playback-rate-button/playback-rate-button.d.ts CHANGED Viewed

@@ -6,17 +6,17 @@ interface PlaybackRateButtonProps extends UIComponentProps<'button', PlaybackRat
  * 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>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const PlaybackRateButton: import("react").ForwardRefExoticComponent<PlaybackRateButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace PlaybackRateButton {

package/dist/dev/ui/playback-rate-button/playback-rate-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;UAMiB,gCACP,2BAA2B,uBAAuB,~~QACxD~~,uBAAuB;;;;;;;;;;;;;;;;;~~cAkBd~~,oCAAkB,0BAAA,0CAAA,cAAA;kBASd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}
1	+ {"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;UAMiB,gCACP,2BAA2B,uBAAuB,QAAQ,uBAAuB;;;;;;;;;;;;;;;;;cAkB9E,oCAAkB,0BAAA,0CAAA,cAAA;kBASd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}

package/dist/dev/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/dev/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/dev/ui/playback-rate-radio-group/playback-rate-radio-group.d.ts CHANGED Viewed

@@ -20,16 +20,16 @@ interface PlaybackRateRadioGroupProps extends Omit<UIComponentProps<'div', Playb
  * 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>
+ *     )}
+ *   />;
+ *   ```;
  */
 declare const PlaybackRateRadioGroup: import("react").ForwardRefExoticComponent<Omit<PlaybackRateRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace PlaybackRateRadioGroup {

package/dist/dev/ui/playback-rate-radio-group/playback-rate-radio-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-radio-group.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"mappings":";;;;;;KAeY,kCAAkC;;EAE5C;;UAGe,wCAAwC,KAAK;;EAE5D;;UAGe,oCACP,KAAK,wBAAwB,2BAA2B,~~qBAC9D~~;;~~EAEF~~,aAAa,OAAO,iCAAiC,OAAO,oCAAoC;;;;;;;;;;;;;;;;;cAkBrF,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAyDlB;OACH,QAAQ;OACR,QAAQ,2BAA2B;OACnC,YAAY;OACZ,YAAY"}
1	+ {"version":3,"file":"playback-rate-radio-group.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"mappings":";;;;;;KAeY,kCAAkC;;EAE5C;;UAGe,wCAAwC,KAAK;;EAE5D;;UAGe,oCACP,KAAK,wBAAwB,2BAA2B,qBAAqB;;EAErF,aAAa,OAAO,iCAAiC,OAAO,oCAAoC;;;;;;;;;;;;;;;;;cAkBrF,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAyDlB;OACH,QAAQ;OACR,QAAQ,2BAA2B;OACnC,YAAY;OACZ,YAAY"}

package/dist/dev/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/dev/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/dev/ui/popover/context.d.ts CHANGED Viewed

@@ -13,6 +13,7 @@ interface PopoverContextValue {
   boundary: PositioningBoundary;
   container: MediaContainer | null;
 }
+/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */
 declare function usePopoverContext(): PopoverContextValue;
 //#endregion
 export { PopoverContextValue, usePopoverContext };

package/dist/dev/ui/popover/context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;UAIiB;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,UAAU;EACV,WAAW~~;;iBAOG~~,qBAAqB"}
1	+ {"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;UAIiB;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,UAAU;EACV,WAAW;;;iBAQG,qBAAqB"}

package/dist/dev/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/dev/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/dev/ui/popover/popover-popup.d.ts CHANGED Viewed

@@ -2,7 +2,10 @@ import { UIComponentProps } from "../../utils/types.js";
 import { PopoverState } from "@videojs/core";
 //#region src/ui/popover/popover-popup.d.ts
 interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}
-/** 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.
+ */
 declare const PopoverPopup: import("react").ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace PopoverPopup {
   type Props = PopoverPopupProps;

package/dist/dev/ui/popover/popover-popup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UASiB,0BAA0B,wBAAwB~~;;cAGtD~~,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}
1	+ {"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UASiB,0BAA0B,wBAAwB;;;;;cAMtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/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/dev/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/dev/ui/popover/popover-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;~~UAoBiB~~,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,aACA,OACA,YACA,UACA,aACG,aACF,mBAAmB;~~kBA+FL~~;OACH,QAAQ"}
1	+ {"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;UAqBiB,yBAAyB;;EAExC,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,aACA,OACA,YACA,UACA,aACG,aACF,mBAAmB;kBAoGL;OACH,QAAQ"}

package/dist/dev/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/dev/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/dev/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/dev/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/dev/ui/poster/poster.d.ts CHANGED Viewed

@@ -5,27 +5,25 @@ interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
 /**
  * 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
  *   }
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const Poster: import("react").ForwardRefExoticComponent<Omit<PosterProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 declare namespace Poster {

package/dist/dev/ui/poster/poster.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UASiB,oBAAoB,wBAAwB,WAAW~~;;;;;;;;;;;;;;;;;;;;;;;;;;cAkC3D~~,wBAAM,0BAAA,KAAA,sCAAA,cAAA;~~kBAyGF~~;OACH,QAAQ;OACR,QAAQ,WAAW"}
1	+ {"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UASiB,oBAAoB,wBAAwB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;cAgC3D,wBAAM,0BAAA,KAAA,sCAAA,cAAA;kBA4GF;OACH,QAAQ;OACR,QAAQ,WAAW"}