@videojs/react 10.0.0-rc.1 → 10.0.0-rc.2

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

@@ -1,166 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
-import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
-import { isMenuNavigationKey } from "@videojs/core/dom";
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-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.
-*/
-const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
-	const { core, menu, parent, state, contentId, optionState } = useMenuContext();
-	const resolvedDisabled = disabled || optionState?.disabled || false;
-	const isSubMenuTrigger = parent !== null;
-	const controlledId = state.open || state.status === "ending" ? contentId : void 0;
-	const elementRef = useRef(null);
-	const triggerId = useSafeId("sub-trigger");
-	const parentMenuApi = parent?.menu ?? null;
-	useEffect(() => {
-		if (!isSubMenuTrigger || !parentMenuApi) return;
-		const element = elementRef.current;
-		if (!element) return;
-		menu.setTriggerElement(element);
-		const unregister = parentMenuApi.registerItem(element);
-		return () => {
-			unregister();
-			menu.setTriggerElement(null);
-		};
-	}, [
-		isSubMenuTrigger,
-		menu,
-		parentMenuApi
-	]);
-	const openSubMenu = useCallback(() => {
-		if (!resolvedDisabled) menu.open("click");
-	}, [resolvedDisabled, menu]);
-	const handleSubMenuClick = useCallback((event) => {
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		openSubMenu();
-	}, [onClick, openSubMenu]);
-	const handleSubMenuKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) return;
-		if (event.key === "ArrowRight") {
-			event.preventDefault();
-			openSubMenu();
-		}
-	}, [
-		resolvedDisabled,
-		onKeyDown,
-		openSubMenu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || resolvedDisabled || !parentMenuApi) return;
-		parentMenuApi.highlight(element, {
-			focus: false,
-			pointer: true
-		});
-	}, [resolvedDisabled, parentMenuApi]);
-	const triggerRef = useCallback((element) => {
-		menu.setTriggerElement(element);
-	}, [menu]);
-	const handleRootKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) {
-			if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();
-			return;
-		}
-		if (isInteractiveActivation(event.nativeEvent)) {
-			event.preventDefault();
-			menu.triggerProps.onClick(event.nativeEvent);
-			return;
-		}
-		menu.triggerProps.onKeyDown(event);
-	}, [
-		resolvedDisabled,
-		menu.triggerProps,
-		onKeyDown
-	]);
-	const rootTriggerProps = useMemo(() => ({
-		onClick: resolvedDisabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
-		onKeyDown: handleRootKeyDown
-	}), [
-		resolvedDisabled,
-		handleRootKeyDown,
-		menu.triggerProps
-	]);
-	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
-		render,
-		className,
-		style,
-		disabled: resolvedDisabled,
-		elementProps,
-		forwardedRef,
-		elementRef,
-		triggerId,
-		triggerAttrs: core.getTriggerAttrs(state, controlledId),
-		availability: optionState?.availability,
-		hidden: optionState?.hidden,
-		state,
-		onSubMenuClick: handleSubMenuClick,
-		onSubMenuKeyDown: handleSubMenuKeyDown,
-		onPointerEnter: handlePointerEnter
-	});
-	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
-		value: true,
-		children: renderElement("button", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			ref: [forwardedRef, triggerRef],
-			props: [
-				{
-					type: "button",
-					...core.getTriggerAttrs(state, controlledId)
-				},
-				resolvedDisabled ? {
-					disabled: true,
-					"aria-disabled": "true"
-				} : void 0,
-				optionState ? { "data-availability": optionState.availability } : void 0,
-				state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
-				rootTriggerProps,
-				elementProps,
-				optionState?.hidden ? { hidden: true } : void 0
-			]
-		})
-	});
-});
-function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, availability, hidden, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: [forwardedRef, elementRef],
-		props: [
-			{
-				id: triggerId,
-				role: "menuitem",
-				...triggerAttrs,
-				"aria-disabled": disabled ? true : void 0,
-				"data-availability": availability,
-				"data-has-submenu": "",
-				onClick: onSubMenuClick,
-				onKeyDownCapture: preventMenuKeyDefault,
-				onKeyDown: onSubMenuKeyDown,
-				onPointerEnter
-			},
-			elementProps,
-			hidden ? { hidden: true } : void 0
-		]
-	});
-}
-//#endregion
-export { MenuTrigger };
-
-//# sourceMappingURL=menu-trigger.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, 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, optionState } = useMenuContext();\n  const resolvedDisabled = disabled || optionState?.disabled || false;\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 (!resolvedDisabled) menu.open('click');\n  }, [resolvedDisabled, 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 (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [resolvedDisabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [resolvedDisabled, 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 (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && 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    [resolvedDisabled, menu.triggerProps, onKeyDown]\n  );\n\n  const rootTriggerProps = useMemo(\n    () => ({\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [resolvedDisabled, 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={resolvedDisabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        availability={optionState?.availability}\n        hidden={optionState?.hidden}\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            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\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  availability: MenuOptionState['availability'] | undefined;\n  hidden: boolean | undefined;\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  availability,\n  hidden,\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-availability': availability,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n        hidden ? { hidden: true } : undefined,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}

package/dist/default/ui/mute-button/mute-button.js

@@ -1,18 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
-import { selectVolume } from "@videojs/core/dom";
-//#region src/ui/mute-button/mute-button.tsx
-/** A button that toggles mute state. */
-const MuteButton = createMediaButton({
-	displayName: "MuteButton",
-	core: MuteButtonCore,
-	stateAttrMap: MuteButtonDataAttrs,
-	selector: selectVolume,
-	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleMuted",
-	isSupported: (state) => !state.hidden
-});
-//#endregion
-export { MuteButton };
-
-//# sourceMappingURL=mute-button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleMuted',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/default/ui/pip-button/pip-button.js

@@ -1,18 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
-import { selectPiP } from "@videojs/core/dom";
-//#region src/ui/pip-button/pip-button.tsx
-/** A button that toggles picture-in-picture. */
-const PiPButton = createMediaButton({
-	displayName: "PiPButton",
-	core: PiPButtonCore,
-	stateAttrMap: PiPButtonDataAttrs,
-	selector: selectPiP,
-	action: (core, state) => core.toggle(state),
-	hotkeyAction: "togglePictureInPicture",
-	isSupported: (state) => !state.hidden
-});
-//#endregion
-export { PiPButton };
-
-//# sourceMappingURL=pip-button.js.map

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

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

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

@@ -1,32 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
-import { selectPlayback } from "@videojs/core/dom";
-//#region src/ui/play-button/play-button.tsx
-/**
-* A button that toggles playback.
-*
-* @example
-*   ```tsx
-*   <PlayButton />
-*
-*   <PlayButton
-*   render={(props, state) => (
-*   <button {...props}>
-*   {state.paused ? <PlayIcon /> : <PauseIcon />}
-*   </button>
-*   )}
-*   />
-*   ```;
-*/
-const PlayButton = createMediaButton({
-	displayName: "PlayButton",
-	core: PlayButtonCore,
-	stateAttrMap: PlayButtonDataAttrs,
-	selector: selectPlayback,
-	action: (core, state) => core.toggle(state),
-	hotkeyAction: "togglePaused"
-});
-//#endregion
-export { PlayButton };
-
-//# sourceMappingURL=play-button.js.map

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

@@ -1 +0,0 @@
-{"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-button/playback-rate-button.js

@@ -1,32 +0,0 @@
-import { createMediaButton } from "../create-media-button.js";
-import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
-import { selectPlaybackRate } from "@videojs/core/dom";
-//#region src/ui/playback-rate-button/playback-rate-button.tsx
-/**
-* A button that cycles through playback rates.
-*
-* @example
-*   ```tsx
-*   <PlaybackRateButton />
-*
-*   <PlaybackRateButton
-*   render={(props, state) => (
-*   <button {...props}>
-*   {state.rate}&times;
-*   </button>
-*   )}
-*   />
-*   ```;
-*/
-const PlaybackRateButton = createMediaButton({
-	displayName: "PlaybackRateButton",
-	core: PlaybackRateButtonCore,
-	stateAttrMap: PlaybackRateButtonDataAttrs,
-	selector: selectPlaybackRate,
-	action: (core, state) => core.cycle(state),
-	hotkeyAction: "speedUp"
-});
-//#endregion
-export { PlaybackRateButton };
-
-//# sourceMappingURL=playback-rate-button.js.map

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

@@ -1 +0,0 @@
-{"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}&times;\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

@@ -1,97 +0,0 @@
-import { renderElement } from "../../utils/use-render.js";
-import { useMenuOptionState } from "../menu/context.js";
-import { MenuRadioGroup } from "../menu/menu-radio-group.js";
-import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
-import { PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
-import { getStateDataAttrs } from "@videojs/core/dom";
-import { Fragment, createContext, forwardRef, useContext } from "react";
-import { jsx } from "react/jsx-runtime";
-import { isFunction } from "@videojs/utils/predicate";
-//#region src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx
-const PlaybackRateRadioGroupContext = createContext(void 0);
-/** Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element. */
-function PlaybackRateRadioGroupRoot({ children, ...props }) {
-	const playbackRate = usePlaybackRateOptions(props);
-	useMenuOptionState(toMenuOptionState(playbackRate));
-	return /* @__PURE__ */ jsx(PlaybackRateRadioGroupContext.Provider, {
-		value: playbackRate,
-		children
-	});
-}
-/** Displays the selected playback-rate label. */
-const PlaybackRateRadioGroupValue = forwardRef(function PlaybackRateRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
-	const playbackRate = usePlaybackRateRadioGroupContext();
-	if (!playbackRate) return null;
-	return renderElement("span", {
-		render,
-		className,
-		style
-	}, {
-		state: playbackRate,
-		ref: forwardedRef,
-		props: [elementProps, { children: playbackRate.selectedLabel }]
-	});
-});
-/** Renders menu radio items for the player's available playback rates. */
-const PlaybackRateRadioGroupOptions = forwardRef(function PlaybackRateRadioGroupOptions(componentProps, forwardedRef) {
-	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
-	const playbackRate = usePlaybackRateRadioGroupContext();
-	if (!playbackRate) return null;
-	const { state, value, options, setValue } = playbackRate;
-	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? playbackRate.label : void 0);
-	return /* @__PURE__ */ jsx(MenuRadioGroup, {
-		...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs),
-		...elementProps,
-		ref: forwardedRef,
-		className: isFunction(className) ? className(state) : className,
-		style: isFunction(style) ? style(state) : style,
-		render: isFunction(render) ? (props) => render(props, state) : render,
-		value,
-		onValueChange: setValue,
-		"aria-label": ariaLabel,
-		"aria-labelledby": ariaLabelledBy,
-		"aria-disabled": state.disabled || void 0,
-		hidden: state.hidden,
-		children: options.map((option) => {
-			const itemState = {
-				...option,
-				checked: option.value === value
-			};
-			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
-				value: option.value,
-				disabled: option.disabled,
-				"data-rate": option.value,
-				children: option.label
-			}, itemState) }, option.value);
-		})
-	});
-});
-/** @internal Compatibility adapter for the existing preset sources. */
-const PlaybackRateRadioGroupLegacy = forwardRef(function PlaybackRateRadioGroupLegacy({ label, formatRate, disabled, ...props }, forwardedRef) {
-	return /* @__PURE__ */ jsx(PlaybackRateRadioGroupRoot, {
-		label,
-		formatRate,
-		disabled,
-		children: /* @__PURE__ */ jsx(PlaybackRateRadioGroupOptions, {
-			...props,
-			ref: forwardedRef
-		})
-	});
-});
-function usePlaybackRateRadioGroupContext() {
-	const playbackRate = useContext(PlaybackRateRadioGroupContext);
-	if (playbackRate === void 0) throw new Error("PlaybackRateRadioGroup parts must be used within PlaybackRateRadioGroup.Root");
-	return playbackRate;
-}
-function toMenuOptionState(playbackRate) {
-	return {
-		value: playbackRate?.selectedLabel ?? "",
-		disabled: playbackRate?.disabled ?? true,
-		hidden: playbackRate?.hidden ?? true,
-		availability: playbackRate?.state.availability ?? "unsupported"
-	};
-}
-//#endregion
-export { PlaybackRateRadioGroupLegacy, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupValue };
-
-//# sourceMappingURL=playback-rate-radio-group.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["import { type MenuOptionState, type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n  type PlaybackRateOption,\n  type PlaybackRateOptionsProps,\n  type PlaybackRateOptionsResult,\n  usePlaybackRateOptions,\n} from '../playback-rate';\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 PlaybackRateRadioGroupRootProps extends PlaybackRateOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface PlaybackRateRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', PlaybackRateRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every playback rate. */\n  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\nexport type PlaybackRateRadioGroupValueProps = UIComponentProps<'span', PlaybackRateOptionsResult>;\n\nexport interface PlaybackRateRadioGroupLegacyProps\n  extends PlaybackRateRadioGroupOptionsProps, PlaybackRateOptionsProps {}\n\nconst PlaybackRateRadioGroupContext = createContext<PlaybackRateOptionsResult | null | undefined>(undefined);\n\n/** Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function PlaybackRateRadioGroupRoot({ children, ...props }: PlaybackRateRadioGroupRootProps): ReactNode {\n  const playbackRate = usePlaybackRateOptions(props);\n\n  useMenuOptionState(toMenuOptionState(playbackRate));\n\n  return (\n    <PlaybackRateRadioGroupContext.Provider value={playbackRate}>{children}</PlaybackRateRadioGroupContext.Provider>\n  );\n}\n\n/** Displays the selected playback-rate label. */\nexport const PlaybackRateRadioGroupValue = forwardRef<HTMLSpanElement, PlaybackRateRadioGroupValueProps>(\n  function PlaybackRateRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const playbackRate = usePlaybackRateRadioGroupContext();\n    if (!playbackRate) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: playbackRate, ref: forwardedRef, props: [elementProps, { children: playbackRate.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's available playback rates. */\nexport const PlaybackRateRadioGroupOptions = forwardRef<HTMLDivElement, PlaybackRateRadioGroupOptionsProps>(\n  function PlaybackRateRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const playbackRate = usePlaybackRateRadioGroupContext();\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\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const PlaybackRateRadioGroupLegacy = forwardRef<HTMLDivElement, PlaybackRateRadioGroupLegacyProps>(\n  function PlaybackRateRadioGroupLegacy({ label, formatRate, disabled, ...props }, forwardedRef) {\n    return (\n      <PlaybackRateRadioGroupRoot label={label} formatRate={formatRate} disabled={disabled}>\n        <PlaybackRateRadioGroupOptions {...props} ref={forwardedRef} />\n      </PlaybackRateRadioGroupRoot>\n    );\n  }\n);\n\nfunction usePlaybackRateRadioGroupContext(): PlaybackRateOptionsResult | null {\n  const playbackRate = useContext(PlaybackRateRadioGroupContext);\n\n  if (playbackRate === undefined) {\n    throw new Error('PlaybackRateRadioGroup parts must be used within PlaybackRateRadioGroup.Root');\n  }\n\n  return playbackRate;\n}\n\nfunction toMenuOptionState(playbackRate: PlaybackRateOptionsResult | null): MenuOptionState {\n  return {\n    value: playbackRate?.selectedLabel ?? '',\n    disabled: playbackRate?.disabled ?? true,\n    hidden: playbackRate?.hidden ?? true,\n    availability: playbackRate?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace PlaybackRateRadioGroupRoot {\n  export type Props = PlaybackRateRadioGroupRootProps;\n}\n\nexport namespace PlaybackRateRadioGroupValue {\n  export type Props = PlaybackRateRadioGroupValueProps;\n  export type State = PlaybackRateOptionsResult;\n}\n\nexport namespace PlaybackRateRadioGroupOptions {\n  export type Props = PlaybackRateRadioGroupOptionsProps;\n  export type State = PlaybackRateRadioGroupCore.State;\n  export type ItemProps = PlaybackRateRadioGroupItemProps;\n  export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,gCAAgC,cAA4D,KAAA,CAAS;;AAG3G,SAAgB,2BAA2B,EAAE,UAAU,GAAG,SAAqD;CAC7G,MAAM,eAAe,uBAAuB,KAAK;CAEjD,mBAAmB,kBAAkB,YAAY,CAAC;CAElD,OACE,oBAAC,8BAA8B,UAA/B;EAAwC,OAAO;EAAe;CAAiD,CAAA;AAEnH;;AAGA,MAAa,8BAA8B,WACzC,SAAS,4BAA4B,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAChG,MAAM,eAAe,iCAAiC;CACtD,IAAI,CAAC,cAAc,OAAO;CAE1B,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAc,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,aAAa,cAAc,CAAC;CAAE,CAC5G;AACF,CACF;;AAGA,MAAa,gCAAgC,WAC3C,SAAS,8BAA8B,gBAAgB,cAAc;CACnE,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,iCAAiC;CACtD,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;;AAGA,MAAa,+BAA+B,WAC1C,SAAS,6BAA6B,EAAE,OAAO,YAAY,UAAU,GAAG,SAAS,cAAc;CAC7F,OACE,oBAAC,4BAAD;EAAmC;EAAmB;EAAsB;EAC1E,UAAA,oBAAC,+BAAD;GAA+B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAEhC,CACF;AAEA,SAAS,mCAAqE;CAC5E,MAAM,eAAe,WAAW,6BAA6B;CAE7D,IAAI,iBAAiB,KAAA,GACnB,MAAM,IAAI,MAAM,8EAA8E;CAGhG,OAAO;AACT;AAEA,SAAS,kBAAkB,cAAiE;CAC1F,OAAO;EACL,OAAO,cAAc,iBAAiB;EACtC,UAAU,cAAc,YAAY;EACpC,QAAQ,cAAc,UAAU;EAChC,cAAc,cAAc,MAAM,gBAAgB;CACpD;AACF"}

package/dist/default/ui/popover/popover-arrow.js

@@ -1,14 +0,0 @@
-import { createContextPart } from "../create-context-part.js";
-import { usePopoverContext } from "./context.js";
-//#region src/ui/popover/popover-arrow.tsx
-/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */
-const PopoverArrow = createContextPart({
-	displayName: "PopoverArrow",
-	tag: "div",
-	useContext: usePopoverContext,
-	staticProps: { "aria-hidden": "true" }
-});
-//#endregion
-export { PopoverArrow };
-
-//# sourceMappingURL=popover-arrow.js.map

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

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

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

@@ -1,59 +0,0 @@
-import { useComposedRefs } from "../../utils/use-composed-refs.js";
-import { renderElement } from "../../utils/use-render.js";
-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.
-*/
-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 popupRef = useCallback((el) => {
-		popover.setPopupElement(el);
-	}, [popover]);
-	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
-	const posOpts = useMemo(() => ({
-		side: preferredSide,
-		align: state.align
-	}), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open,
-		anchorName,
-		position: posOpts,
-		triggerSource: popover,
-		popupRef: internalRef,
-		boundary,
-		container,
-		onSideChange: setPositionedSide
-	});
-	if (!state.open) return null;
-	const { onFocusOut, ...restPopupProps } = popover.popupProps;
-	return renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap,
-		ref: composedRef,
-		props: [
-			{
-				id: popupId,
-				style: positioningStyle,
-				...core.getPopupAttrs(state)
-			},
-			{
-				...restPopupProps,
-				onBlur: onFocusOut
-			},
-			elementProps
-		]
-	});
-});
-//#endregion
-export { PopoverPopup };
-
-//# sourceMappingURL=popover-popup.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,87 +0,0 @@
-import { useOptionalContainer } from "../../player/context.js";
-import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
-import { useLatestRef } from "../../utils/use-latest-ref.js";
-import { useDestroy } from "../../utils/use-destroy.js";
-import { useSafeId } from "../../utils/use-safe-id.js";
-import { useOptionalControlsContext } from "../controls/context.js";
-import { usePositionedState } from "../hooks/use-positioned-state.js";
-import { PopoverContextProvider } from "./context.js";
-import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
-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";
-//#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();
-	const popupGroup = useOptionalPopupGroup();
-	const controls = useOptionalControlsContext();
-	const [core] = useState(() => new PopoverCore(coreProps));
-	core.setProps(coreProps);
-	const isControlled = !isUndefined(controlledOpen);
-	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
-	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
-	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
-	const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);
-	const openOnHoverRef = useLatestRef(openOnHover);
-	const delayRef = useLatestRef(delay);
-	const closeDelayRef = useLatestRef(closeDelay);
-	const popupGroupRef = useLatestRef(popupGroup);
-	const [popover] = useState(() => {
-		const instance = createPopover({
-			transition: createTransition(),
-			onOpenChange: (nextOpen, details) => {
-				onOpenChangeRef.current?.(nextOpen, details);
-			},
-			onOpenChangeComplete: (nextOpen) => {
-				onOpenChangeCompleteRef.current?.(nextOpen);
-			},
-			closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,
-			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
-			openOnHover: () => openOnHoverRef.current,
-			delay: () => delayRef.current,
-			closeDelay: () => closeDelayRef.current,
-			group: () => popupGroupRef.current
-		});
-		if (!isControlled && defaultOpen) instance.open("click");
-		return instance;
-	});
-	const anchorName = useSafeId();
-	const popupId = useSafeId("popup");
-	useEffect(() => {
-		if (isUndefined(controlledOpen)) return;
-		const { active: inputOpen } = popover.input.current;
-		if (controlledOpen === inputOpen) return;
-		if (controlledOpen) popover.open("click");
-		else popover.close("click");
-	}, [controlledOpen, popover]);
-	useEffect(() => {
-		if (isUndefined(controls?.state.visible)) return;
-		if (controls.state.visible) return;
-		popover.close("imperative-action");
-	}, [controls?.state.visible, popover]);
-	useDestroy(popover);
-	const input = useSnapshot(popover.input);
-	core.setInput(input);
-	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
-	return /* @__PURE__ */ jsx(PopoverContextProvider, {
-		value: {
-			core,
-			popover,
-			state,
-			preferredSide,
-			setPositionedSide,
-			stateAttrMap: PopoverDataAttrs,
-			anchorName,
-			popupId,
-			boundary,
-			container
-		},
-		children
-	});
-}
-//#endregion
-export { PopoverRoot };
-
-//# sourceMappingURL=popover-root.js.map

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

@@ -1 +0,0 @@
-{"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 Omit<CorePopoverProps, 'boundary'> {\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"}