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

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

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

@@ -0,0 +1,2 @@
+import { PlaybackRateOption, PlaybackRateOptionsProps, PlaybackRateOptionsResult, usePlaybackRateOptions } from "./use-playback-rate-options.js";
+export { type PlaybackRateOption, type PlaybackRateOptionsProps, type PlaybackRateOptionsResult, usePlaybackRateOptions };

package/dist/dev/ui/playback-rate/index.js

@@ -0,0 +1,2 @@
+import { usePlaybackRateOptions } from "./use-playback-rate-options.js";
+export { usePlaybackRateOptions };

package/dist/dev/ui/playback-rate/use-playback-rate-options.d.ts

@@ -0,0 +1,32 @@
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { PlaybackRateRadioGroupCore, PlaybackRateRadioGroupOption } from "@videojs/core";
+//#region src/ui/playback-rate/use-playback-rate-options.d.ts
+interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}
+type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;
+interface PlaybackRateOptionsResult {
+  state: PlaybackRateRadioGroupCore.State;
+  label: string;
+  rate: number;
+  value: string;
+  selectedLabel: string;
+  options: PlaybackRateOption[];
+  disabled: boolean;
+  hidden: boolean;
+  setRate: (rate: number) => void;
+  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.
+ *
+ * @param props - Optional `label`, `formatRate`, and `disabled` overrides.
+ */
+declare function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null;
+declare namespace usePlaybackRateOptions {
+  type Props = PlaybackRateOptionsProps;
+  type Result = PlaybackRateOptionsResult;
+  type Option = PlaybackRateOption;
+}
+//#endregion
+export { PlaybackRateOption, PlaybackRateOptionsProps, PlaybackRateOptionsResult, usePlaybackRateOptions };
+//# sourceMappingURL=use-playback-rate-options.d.ts.map

package/dist/dev/ui/playback-rate/use-playback-rate-options.d.ts.map

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

package/dist/dev/ui/playback-rate/use-playback-rate-options.js

@@ -0,0 +1,31 @@
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectPlaybackRate } from "@videojs/core/dom";
+import { useCallback } from "react";
+import { PlaybackRateRadioGroupCore } from "@videojs/core";
+//#region src/ui/playback-rate/use-playback-rate-options.ts
+const usePlaybackRateRadioOptions = createRadioOptionsHook({
+	name: "usePlaybackRateOptions",
+	feature: "playbackRate",
+	selector: selectPlaybackRate,
+	createCore: () => new PlaybackRateRadioGroupCore()
+});
+/**
+* Create playback rate menu options from the player playback rate state.
+* Returns `null` when the playback rate feature is not configured.
+*
+* @param props - Optional `label`, `formatRate`, and `disabled` overrides.
+*/
+function usePlaybackRateOptions(props) {
+	const result = usePlaybackRateRadioOptions(props);
+	const setRate = useCallback((rate) => result?.setValue(String(rate)), [result?.setValue]);
+	if (!result) return null;
+	return {
+		...result,
+		rate: result.state.rate,
+		setRate
+	};
+}
+//#endregion
+export { usePlaybackRateOptions };
+
+//# sourceMappingURL=use-playback-rate-options.js.map

package/dist/dev/ui/playback-rate/use-playback-rate-options.js.map

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

package/dist/dev/ui/playback-rate-button/index.js

@@ -1,3 +1,2 @@
 import { PlaybackRateButton } from "./playback-rate-button.js";
-
-export { PlaybackRateButton };
+export { PlaybackRateButton };

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { PlaybackRateButtonCore } from "@videojs/core";
-
 //#region src/ui/playback-rate-button/playback-rate-button.d.ts
 interface PlaybackRateButtonProps extends UIComponentProps<'button', PlaybackRateButtonCore.State>, PlaybackRateButtonCore.Props {}
 /**
@@ -20,7 +18,7 @@ interface PlaybackRateButtonProps extends UIComponentProps<'button', PlaybackRat
  * />
  * ```
  */
-declare const PlaybackRateButton: react.ForwardRefExoticComponent<PlaybackRateButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PlaybackRateButton: import("react").ForwardRefExoticComponent<PlaybackRateButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace PlaybackRateButton {
   type Props = PlaybackRateButtonProps;
   type State = PlaybackRateButtonCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;;;UAQiB,uBAAA,SACP,gBAAA,WAA2B,sBAAA,CAAuB,KAAA,GACxD,sBAAA,CAAuB,KAAA;;AAF3B;;;;;;;;;;;;;;;cAoBa,kBAAA,EAAkB,KAAA,CAAA,yBAAA,CAAA,uBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAQd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;EAAA,KACR,KAAA,GAAQ,sBAAA,CAAuB,KAAA;AAAA"}
+{"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"}

package/dist/dev/ui/playback-rate-button/playback-rate-button.js

@@ -1,9 +1,6 @@
-'use client';
-
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
-
 //#region src/ui/playback-rate-button/playback-rate-button.tsx
 /**
 * A button that cycles through playback rates.
@@ -26,9 +23,10 @@ const PlaybackRateButton = createMediaButton({
 	core: PlaybackRateButtonCore,
 	stateAttrMap: PlaybackRateButtonDataAttrs,
 	selector: selectPlaybackRate,
-	action: (core, state) => core.cycle(state)
+	action: (core, state) => core.cycle(state),
+	hotkeyAction: "speedUp"
 });
-
 //#endregion
 export { PlaybackRateButton };
+
 //# sourceMappingURL=playback-rate-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&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});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC3C,CAAC"}
+{"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}&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":";;;;;;;;;;;;;;;;;;;;AA0BA,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/index.d.ts

@@ -0,0 +1,2 @@
+import { PlaybackRateRadioGroup, PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupProps } from "./playback-rate-radio-group.js";
+export { PlaybackRateRadioGroup, type PlaybackRateRadioGroupItemProps, type PlaybackRateRadioGroupItemState, type PlaybackRateRadioGroupProps };

package/dist/dev/ui/playback-rate-radio-group/index.js

@@ -0,0 +1,2 @@
+import { PlaybackRateRadioGroup } from "./playback-rate-radio-group.js";
+export { PlaybackRateRadioGroup };

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

@@ -0,0 +1,43 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { PlaybackRateOption, PlaybackRateOptionsProps } from "../playback-rate/use-playback-rate-options.js";
+import { ReactElement } from "react";
+import { PlaybackRateRadioGroupCore } from "@videojs/core";
+//#region src/ui/playback-rate-radio-group/playback-rate-radio-group.d.ts
+type PlaybackRateRadioGroupItemState = PlaybackRateOption & {
+  /** Whether this playback rate is currently selected. */
+  checked: boolean;
+};
+interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Playback rate represented by the item. */
+  'data-rate': string;
+}
+interface PlaybackRateRadioGroupProps extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'>, PlaybackRateOptionsProps {
+  /** Render one consumer-owned menu radio item for every playback rate. */
+  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;
+}
+/**
+ * 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>
+ *   )}
+ * />
+ * ```
+ */
+declare const PlaybackRateRadioGroup: import("react").ForwardRefExoticComponent<Omit<PlaybackRateRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PlaybackRateRadioGroup {
+  type Props = PlaybackRateRadioGroupProps;
+  type State = PlaybackRateRadioGroupCore.State;
+  type ItemProps = PlaybackRateRadioGroupItemProps;
+  type ItemState = PlaybackRateRadioGroupItemState;
+}
+//#endregion
+export { PlaybackRateRadioGroup, PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupProps };
+//# sourceMappingURL=playback-rate-radio-group.d.ts.map

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

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

package/dist/dev/ui/playback-rate-radio-group/playback-rate-radio-group.js

@@ -0,0 +1,64 @@
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
+//#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>
+*   )}
+* />
+* ```
+*/
+const PlaybackRateRadioGroup = forwardRef(function PlaybackRateRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatRate, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const playbackRate = usePlaybackRateOptions({
+		label,
+		formatRate,
+		disabled
+	});
+	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);
+		})
+	});
+});
+//#endregion
+export { PlaybackRateRadioGroup };
+
+//# sourceMappingURL=playback-rate-radio-group.js.map

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

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

package/dist/dev/ui/popover/context.d.ts

@@ -1,14 +1,17 @@
-import { PopoverApi } from "@videojs/core/dom";
+import { MediaContainer, PopoverApi, PositioningBoundary } from "@videojs/core/dom";
 import { PopoverCore, StateAttrMap as StateAttrMap$1 } from "@videojs/core";
-
 //#region src/ui/popover/context.d.ts
 interface PopoverContextValue {
   core: PopoverCore;
   popover: PopoverApi;
   state: PopoverCore.State;
+  preferredSide: PopoverCore.State['side'];
+  setPositionedSide: (side: PopoverCore.State['side']) => void;
   stateAttrMap: StateAttrMap$1<PopoverCore.State>;
   anchorName: string;
   popupId: string;
+  boundary: PositioningBoundary;
+  container: MediaContainer | null;
 }
 declare function usePopoverContext(): PopoverContextValue;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;AAAA;AAAA,iBAOc,iBAAA,CAAA,GAAqB,mBAAA"}
+{"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"}

package/dist/dev/ui/popover/context.js

@@ -1,7 +1,4 @@
-'use client';
-
 import { createContext, useContext } from "react";
-
 //#region src/ui/popover/context.tsx
 const PopoverContext = createContext(null);
 const PopoverContextProvider = PopoverContext.Provider;
@@ -10,7 +7,7 @@ function usePopoverContext() {
 	if (!ctx) throw new Error("Popover compound components must be used within a Popover.Root");
 	return ctx;
 }
-
 //#endregion
 export { PopoverContextProvider, usePopoverContext };
+
 //# sourceMappingURL=context.js.map

package/dist/dev/ui/popover/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { PopoverApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n  core: PopoverCore;\n  popover: PopoverApi;\n  state: PopoverCore.State;\n  stateAttrMap: StateAttrMap<PopoverCore.State>;\n  anchorName: string;\n  popupId: string;\n}\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":";;;;;AAeA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO"}
+{"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"}

package/dist/dev/ui/popover/index.js

@@ -1,4 +1,3 @@
 import { usePopoverContext } from "./context.js";
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as Popover, usePopoverContext };
+export { index_parts_exports as Popover, usePopoverContext };

package/dist/dev/ui/popover/index.parts.d.ts

@@ -2,11 +2,9 @@ import { PopoverArrow, PopoverArrowProps } from "./popover-arrow.js";
 import { PopoverPopup, PopoverPopupProps } from "./popover-popup.js";
 import { PopoverRoot, PopoverRootProps } from "./popover-root.js";
 import { PopoverTrigger, PopoverTriggerProps } from "./popover-trigger.js";
-
-//#region src/ui/popover/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { PopoverArrow as Arrow, PopoverArrowProps as ArrowProps, PopoverPopup as Popup, PopoverPopupProps as PopupProps, PopoverRoot as Root, PopoverRootProps as RootProps, PopoverTrigger as Trigger, PopoverTriggerProps as TriggerProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps, PopoverPopup as Popup, type PopoverPopupProps as PopupProps, PopoverRoot as Root, type PopoverRootProps as RootProps, PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/popover/index.parts.js

@@ -3,7 +3,6 @@ import { PopoverArrow } from "./popover-arrow.js";
 import { PopoverPopup } from "./popover-popup.js";
 import { PopoverRoot } from "./popover-root.js";
 import { PopoverTrigger } from "./popover-trigger.js";
-
 //#region src/ui/popover/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => PopoverArrow,
@@ -11,7 +10,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => PopoverRoot,
 	Trigger: () => PopoverTrigger
 });
-
 //#endregion
-export { index_parts_exports };
+export { PopoverArrow as Arrow, PopoverPopup as Popup, PopoverRoot as Root, PopoverTrigger as Trigger, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/popover/popover-arrow.d.ts

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { PopoverState } from "@videojs/core";
-
 //#region src/ui/popover/popover-arrow.d.ts
 interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}
 /** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */
-declare const PopoverArrow: react.ForwardRefExoticComponent<PopoverArrowProps>;
+declare const PopoverArrow: import("react").ForwardRefExoticComponent<PopoverArrowProps>;
 declare namespace PopoverArrow {
   type Props = PopoverArrowProps;
   type State = PopoverState;

package/dist/dev/ui/popover/popover-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-arrow.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"mappings":";;;;;UAQiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAGtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA;AAAA,kBAOR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"popover-arrow.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAOR;OACH,QAAQ;OACR,QAAQ"}

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

@@ -1,8 +1,5 @@
-'use client';
-
 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({
@@ -11,7 +8,7 @@ const PopoverArrow = createContextPart({
 	useContext: usePopoverContext,
 	staticProps: { "aria-hidden": "true" }
 });
-
 //#endregion
 export { PopoverArrow };
+
 //# sourceMappingURL=popover-arrow.js.map

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

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

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 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. */
-declare const PopoverPopup: react.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverPopup: import("react").ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace PopoverPopup {
   type Props = PopoverPopupProps;
   type State = PopoverState;

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

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;;;UAaiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6GR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"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"}

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

@@ -1,71 +1,30 @@
-'use client';
-
 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 { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
-
+import { forwardRef, useCallback, useMemo, useRef } from "react";
 //#region src/ui/popover/popover-popup.tsx
-const POPOVER_RESET = {
-	position: "fixed",
-	inset: "auto",
-	margin: 0
-};
 /** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
 const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
-	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
 	const internalRef = useRef(null);
 	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
 		popover.setPopupElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
-	}, [popover, anchorName]), internalRef);
+	}, [popover]), internalRef);
 	const posOpts = useMemo(() => ({
-		side: state.side,
+		side: preferredSide,
 		align: state.align
-	}), [state.side, state.align]);
-	const anchorStyle = useMemo(() => {
-		if (!supportsAnchorPositioning()) return null;
-		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);
-		return rest;
-	}, [anchorName, posOpts]);
-	const [manualStyle, setManualStyle] = useState(null);
-	useLayoutEffect(() => {
-		if (supportsAnchorPositioning()) return;
-		if (!state.open) {
-			setManualStyle(null);
-			return;
-		}
-		function measure() {
-			const triggerEl = popover.triggerElement;
-			const popupEl = internalRef.current;
-			if (!triggerEl || !popupEl) return;
-			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
-		}
-		measure();
-		let rafId = 0;
-		function reposition() {
-			cancelAnimationFrame(rafId);
-			rafId = requestAnimationFrame(measure);
-		}
-		window.addEventListener("scroll", reposition, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", reposition);
-		return () => {
-			cancelAnimationFrame(rafId);
-			window.removeEventListener("scroll", reposition, true);
-			window.removeEventListener("resize", reposition);
-		};
-	}, [
-		state.open,
+	}), [preferredSide, state.align]);
+	const positioningStyle = usePopupPosition({
+		open: state.open,
 		anchorName,
-		posOpts,
-		popover
-	]);
-	const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;
+		position: posOpts,
+		triggerSource: popover,
+		popupRef: internalRef,
+		boundary,
+		container,
+		onSideChange: setPositionedSide
+	});
 	if (!state.open) return null;
 	const { onFocusOut, ...restPopupProps } = popover.popupProps;
 	return renderElement("div", {
@@ -90,7 +49,7 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 		]
 	});
 });
-
 //#endregion
 export { PopoverPopup };
+
 //# sourceMappingURL=popover-popup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // `position-anchor` is set imperatively in the ref callback above\n  // because React's style prop silently drops unrecognised CSS properties.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts);\n    return rest as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = popover.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl);\n\n      setManualStyle(\n        getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the popover tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, popover]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBAAuB,YAAY,QAAQ;AAClF,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}
+{"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"}

package/dist/dev/ui/popover/popover-root.d.ts

@@ -1,26 +1,17 @@
-import { PopoverChangeDetails } from "@videojs/core/dom";
+import { PopoverChangeDetails, PositioningBoundary } from "@videojs/core/dom";
 import { ReactNode } from "react";
 import { PopoverProps } from "@videojs/core";
-
 //#region src/ui/popover/popover-root.d.ts
 interface PopoverRootProps extends PopoverProps {
+  /** Boundary used to constrain the popup size. */
+  boundary?: PositioningBoundary;
   /** Called when the popover open state changes (fires immediately, before animations). */
   onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
   /** Called after open/close animations complete. */
   onOpenChangeComplete?: (open: boolean) => void;
   children?: ReactNode;
 }
-declare function PopoverRoot({
-  open: controlledOpen,
-  defaultOpen,
-  onOpenChange: onOpenChangeProp,
-  onOpenChangeComplete: onOpenChangeCompleteProp,
-  openOnHover,
-  delay,
-  closeDelay,
-  children,
-  ...coreProps
-}: PopoverRootProps): ReactNode;
+declare function PopoverRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover, delay, closeDelay, boundary, children, ...coreProps }: PopoverRootProps): ReactNode;
 declare namespace PopoverRoot {
   type Props = PopoverRootProps;
 }

package/dist/dev/ui/popover/popover-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover-root.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"mappings":";;;;;UAaiB,gBAAA,SAAyB,YAAA;;EAExC,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,oBAAA;EAFR;EAIhC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,WAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,WAAA;EACA,KAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAsEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}
+{"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"}