@videojs/react 10.0.0-beta.8 → 10.0.0-rc.1

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

@@ -1,34 +1,32 @@
-'use client';
-
 import { createMediaButton } from "../create-media-button.js";
-import { selectPlaybackRate } from "@videojs/core/dom";
 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 />
+*   ```tsx
+*   <PlaybackRateButton />
 *
-* <PlaybackRateButton
+*   <PlaybackRateButton
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.rate}&times;
-*     </button>
+*   <button {...props}>
+*   {state.rate}&times;
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const PlaybackRateButton = createMediaButton({
 	displayName: "PlaybackRateButton",
 	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/default/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>, 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/index.js

@@ -0,0 +1,3 @@
+import { PlaybackRateRadioGroupLegacy } from "./playback-rate-radio-group.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as PlaybackRateRadioGroup, PlaybackRateRadioGroupLegacy };

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

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupValue } from "./playback-rate-radio-group.js";
+//#region src/ui/playback-rate-radio-group/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Options: () => PlaybackRateRadioGroupOptions,
+	Root: () => PlaybackRateRadioGroupRoot,
+	Value: () => PlaybackRateRadioGroupValue
+});
+//#endregion
+export { PlaybackRateRadioGroupOptions as Options, PlaybackRateRadioGroupRoot as Root, PlaybackRateRadioGroupValue as Value, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type PlaybackRateRadioGroupItemProps as ItemProps,\n  type PlaybackRateRadioGroupItemState as ItemState,\n  PlaybackRateRadioGroupOptions as Options,\n  type PlaybackRateRadioGroupOptionsProps as OptionsProps,\n  PlaybackRateRadioGroupRoot as Root,\n  type PlaybackRateRadioGroupRootProps as RootProps,\n  PlaybackRateRadioGroupValue as Value,\n  type PlaybackRateRadioGroupValueProps as ValueProps,\n} from './playback-rate-radio-group';\n"],"mappings":""}

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

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

@@ -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 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/context.js

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

package/dist/default/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\n/** Returns the current popover compound-component context. Throws outside `Popover.Root`. */\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n\n  return ctx;\n}\n"],"mappings":";;AAiBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;;AAGrD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAE1F,OAAO;AACT"}

package/dist/default/ui/popover/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/default/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/default/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/default/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/default/ui/popover/popover-popup.js

@@ -1,80 +1,34 @@
-'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, getPopupPositionRect, 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. */
+/**
+* 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) => {
+	const popupRef = useCallback((el) => {
 		popover.setPopupElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
-	}, [popover, anchorName]), internalRef);
+	}, [popover]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, 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(), getPopupPositionRect(popupEl), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
-		}
-		measure();
-		const triggerEl = popover.triggerElement;
-		const popupEl = internalRef.current;
-		let rafId = 0;
-		function reposition() {
-			cancelAnimationFrame(rafId);
-			rafId = requestAnimationFrame(measure);
-		}
-		reposition();
-		const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
-			reposition();
-		}) : null;
-		if (triggerEl && resizeObserver) resizeObserver.observe(triggerEl);
-		if (popupEl && resizeObserver) resizeObserver.observe(popupEl);
-		window.addEventListener("scroll", reposition, {
-			capture: true,
-			passive: true
-		});
-		window.addEventListener("resize", reposition);
-		return () => {
-			cancelAnimationFrame(rafId);
-			resizeObserver?.disconnect();
-			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", {
@@ -99,7 +53,7 @@ const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style
 		]
 	});
 });
-
 //#endregion
 export { PopoverPopup };
+
 //# sourceMappingURL=popover-popup.js.map

package/dist/default/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, getPopupPositionRect, 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 = getPopupPositionRect(popupEl);\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    const triggerEl = popover.triggerElement;\n    const popupEl = internalRef.current;\n\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    // Re-measure after the popover has entered the top layer and whenever\n    // its own size or the trigger size changes.\n    reposition();\n\n    const resizeObserver =\n      typeof ResizeObserver === 'function'\n        ? new ResizeObserver(() => {\n            reposition();\n          })\n        : null;\n\n    if (triggerEl && resizeObserver) {\n      resizeObserver.observe(triggerEl);\n    }\n\n    if (popupEl && resizeObserver) {\n      resizeObserver.observe(popupEl);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      resizeObserver?.disconnect();\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, popover]);\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,qBAAqB,QAAQ,EAC1B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EACT,MAAM,YAAY,QAAQ;EAC1B,MAAM,UAAU,YAAY;EAE5B,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAKxC,cAAY;EAEZ,MAAM,iBACJ,OAAO,mBAAmB,aACtB,IAAI,qBAAqB;AACvB,eAAY;IACZ,GACF;AAEN,MAAI,aAAa,eACf,gBAAe,QAAQ,UAAU;AAGnC,MAAI,WAAW,eACb,gBAAe,QAAQ,QAAQ;AAGjC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,mBAAgB,YAAY;AAC5B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;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/**\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,20 +1,25 @@
-'use client';
-
-import { useDestroy } from "../../utils/use-destroy.js";
+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 { PopoverCore, PopoverDataAttrs } from "@videojs/core";
-
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/popover/popover-root.tsx
-function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, children, ...coreProps }) {
+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 = controlledOpen !== void 0;
+	const isControlled = !isUndefined(controlledOpen);
 	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
 	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
 	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
@@ -22,6 +27,7 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 	const openOnHoverRef = useLatestRef(openOnHover);
 	const delayRef = useLatestRef(delay);
 	const closeDelayRef = useLatestRef(closeDelay);
+	const popupGroupRef = useLatestRef(popupGroup);
 	const [popover] = useState(() => {
 		const instance = createPopover({
 			transition: createTransition(),
@@ -35,36 +41,47 @@ function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultPr
 			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
 			openOnHover: () => openOnHoverRef.current,
 			delay: () => delayRef.current,
-			closeDelay: () => closeDelayRef.current
+			closeDelay: () => closeDelayRef.current,
+			group: () => popupGroupRef.current
 		});
 		if (!isControlled && defaultOpen) instance.open("click");
 		return instance;
 	});
 	const anchorName = useSafeId();
-	const popupId = useSafeId("popup-");
+	const popupId = useSafeId("popup");
 	useEffect(() => {
-		if (controlledOpen === void 0) return;
+		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: core.getState(),
+			state,
+			preferredSide,
+			setPositionedSide,
 			stateAttrMap: PopoverDataAttrs,
 			anchorName,
-			popupId
+			popupId,
+			boundary,
+			container
 		},
 		children
 	});
 }
-
 //#endregion
 export { PopoverRoot };
+
 //# sourceMappingURL=popover-root.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport { createPopover, createTransition, type PopoverChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\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  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n\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    });\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 (controlledOpen === undefined) 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  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAW,QAAQ;CAEnB,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}
+{"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"}

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

@@ -1,18 +1,14 @@
-'use client';
-
 import { renderElement } from "../../utils/use-render.js";
 import { usePopoverContext } from "./context.js";
 import { forwardRef, useCallback } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
-
 //#region src/ui/popover/popover-trigger.tsx
 /** Button that toggles the popover visibility. Renders a `<button>` element. */
 const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
-	const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();
+	const controlledId = state.open ? popupId : void 0;
 	const triggerRef = useCallback((el) => {
 		popover.setTriggerElement(el);
-		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
-	}, [popover, anchorName]);
+	}, [popover]);
 	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
 	return renderElement("button", {
 		render,
@@ -25,7 +21,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 		props: [
 			{
 				type: "button",
-				...core.getTriggerAttrs(state, popupId)
+				...core.getTriggerAttrs(state, controlledId)
 			},
 			{
 				...restTriggerProps,
@@ -36,7 +32,7 @@ const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, s
 		]
 	});
 });
-
 //#endregion
 export { PopoverTrigger };
+
 //# sourceMappingURL=popover-trigger.js.map

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

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