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

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

@@ -0,0 +1,245 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuOptionState } from "../menu/context.js";
+import { MenuRadioGroup } from "../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 { c } from "react-compiler-runtime";
+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/component.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(t0) {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	const playbackRate = usePlaybackRateOptions(props);
+	let t1;
+	if ($[3] !== playbackRate) {
+		t1 = toMenuOptionState(playbackRate);
+		$[3] = playbackRate;
+		$[4] = t1;
+	} else t1 = $[4];
+	useMenuOptionState(t1);
+	let t2;
+	if ($[5] !== children || $[6] !== playbackRate) {
+		t2 = /* @__PURE__ */ jsx(PlaybackRateRadioGroupContext.Provider, {
+			value: playbackRate,
+			children
+		});
+		$[5] = children;
+		$[6] = playbackRate;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/** 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 $ = c(40);
+	let ariaLabelProp;
+	let ariaLabelledBy;
+	let className;
+	let elementProps;
+	let render;
+	let renderItem;
+	let style;
+	if ($[0] !== componentProps) {
+		({renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps} = componentProps);
+		$[0] = componentProps;
+		$[1] = ariaLabelProp;
+		$[2] = ariaLabelledBy;
+		$[3] = className;
+		$[4] = elementProps;
+		$[5] = render;
+		$[6] = renderItem;
+		$[7] = style;
+	} else {
+		ariaLabelProp = $[1];
+		ariaLabelledBy = $[2];
+		className = $[3];
+		elementProps = $[4];
+		render = $[5];
+		renderItem = $[6];
+		style = $[7];
+	}
+	const playbackRate = usePlaybackRateRadioGroupContext();
+	if (!playbackRate) return null;
+	const { state, value, options, setValue } = playbackRate;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? playbackRate.label : void 0);
+	let t0;
+	if ($[8] !== state) {
+		t0 = getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs);
+		$[8] = state;
+		$[9] = t0;
+	} else t0 = $[9];
+	let t1;
+	if ($[10] !== className || $[11] !== state) {
+		t1 = isFunction(className) ? className(state) : className;
+		$[10] = className;
+		$[11] = state;
+		$[12] = t1;
+	} else t1 = $[12];
+	let t2;
+	if ($[13] !== state || $[14] !== style) {
+		t2 = isFunction(style) ? style(state) : style;
+		$[13] = state;
+		$[14] = style;
+		$[15] = t2;
+	} else t2 = $[15];
+	let t3;
+	if ($[16] !== render || $[17] !== state) {
+		t3 = isFunction(render) ? (props) => render(props, state) : render;
+		$[16] = render;
+		$[17] = state;
+		$[18] = t3;
+	} else t3 = $[18];
+	const t4 = state.disabled || void 0;
+	const t5 = state.hidden;
+	let t6;
+	if ($[19] !== options || $[20] !== renderItem || $[21] !== value) {
+		let t7;
+		if ($[23] !== renderItem || $[24] !== value) {
+			t7 = (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);
+			};
+			$[23] = renderItem;
+			$[24] = value;
+			$[25] = t7;
+		} else t7 = $[25];
+		t6 = options.map(t7);
+		$[19] = options;
+		$[20] = renderItem;
+		$[21] = value;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[26] !== ariaLabel || $[27] !== ariaLabelledBy || $[28] !== elementProps || $[29] !== forwardedRef || $[30] !== setValue || $[31] !== state.hidden || $[32] !== t0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t6 || $[38] !== value) {
+		t7 = /* @__PURE__ */ jsx(MenuRadioGroup, {
+			...t0,
+			...elementProps,
+			ref: forwardedRef,
+			className: t1,
+			style: t2,
+			render: t3,
+			value,
+			onValueChange: setValue,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-disabled": t4,
+			hidden: t5,
+			children: t6
+		});
+		$[26] = ariaLabel;
+		$[27] = ariaLabelledBy;
+		$[28] = elementProps;
+		$[29] = forwardedRef;
+		$[30] = setValue;
+		$[31] = state.hidden;
+		$[32] = t0;
+		$[33] = t1;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+		$[37] = t6;
+		$[38] = value;
+		$[39] = t7;
+	} else t7 = $[39];
+	return t7;
+});
+/** @internal Compatibility adapter for the existing preset sources. */
+const PlaybackRateRadioGroupLegacy = forwardRef(function PlaybackRateRadioGroupLegacy(t0, forwardedRef) {
+	const $ = c(13);
+	let disabled;
+	let formatRate;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, formatRate, disabled, ...props} = t0);
+		$[0] = t0;
+		$[1] = disabled;
+		$[2] = formatRate;
+		$[3] = label;
+		$[4] = props;
+	} else {
+		disabled = $[1];
+		formatRate = $[2];
+		label = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] !== forwardedRef || $[6] !== props) {
+		t1 = /* @__PURE__ */ jsx(PlaybackRateRadioGroupOptions, {
+			...props,
+			ref: forwardedRef
+		});
+		$[5] = forwardedRef;
+		$[6] = props;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== disabled || $[9] !== formatRate || $[10] !== label || $[11] !== t1) {
+		t2 = /* @__PURE__ */ jsx(PlaybackRateRadioGroupRoot, {
+			label,
+			formatRate,
+			disabled,
+			children: t1
+		});
+		$[8] = disabled;
+		$[9] = formatRate;
+		$[10] = label;
+		$[11] = t1;
+		$[12] = t2;
+	} else t2 = $[12];
+	return t2;
+});
+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=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":["{ children, ...props }: PlaybackRateRadioGroupRootProps","toMenuOptionState(playbackRate)","<PlaybackRateRadioGroupContext.Provider value={playbackRate}>{children}</PlaybackRateRadioGroupContext.Provider>","PlaybackRateRadioGroupContext.Provider","getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)","isFunction(className) ? className(state) : className","isFunction(style) ? style(state) : style","isFunction(render) ? (props: HTMLProps) => render(props, state) : render","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        })","(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        }","<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>","hidden","state.disabled || undefined","state.hidden","{ label, formatRate, disabled, ...props }","<PlaybackRateRadioGroupOptions {...props} ref={forwardedRef} />","<PlaybackRateRadioGroupRoot label={label} formatRate={formatRate} disabled={disabled}>\n        <PlaybackRateRadioGroupOptions {...props} ref={forwardedRef} />\n      </PlaybackRateRadioGroupRoot>"],"sources":["../../../../src/ui/playback-rate-radio-group/component.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/radio-group';\nimport type { MenuRadioItemProps } from '../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":"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"}

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupOptionsProps, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupRootProps, PlaybackRateRadioGroupValue, PlaybackRateRadioGroupValueProps } from "./playback-rate-radio-group.js";
+import { PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupOptionsProps, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupRootProps, PlaybackRateRadioGroupValue, PlaybackRateRadioGroupValueProps } from "./component.js";
 declare namespace index_parts_d_exports {
   export { PlaybackRateRadioGroupItemProps as ItemProps, PlaybackRateRadioGroupItemState as ItemState, PlaybackRateRadioGroupOptions as Options, PlaybackRateRadioGroupOptionsProps as OptionsProps, PlaybackRateRadioGroupRoot as Root, PlaybackRateRadioGroupRootProps as RootProps, PlaybackRateRadioGroupValue as Value, PlaybackRateRadioGroupValueProps as ValueProps };
 }

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

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupValue } from "./playback-rate-radio-group.js";
+import { PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupValue } from "./component.js";
 //#region src/ui/playback-rate-radio-group/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Options: () => PlaybackRateRadioGroupOptions,

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

@@ -1 +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":""}
+{"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 './component';\n"],"mappings":""}

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

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PopoverState } from "@videojs/core";
+//#region src/ui/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: import("react").ForwardRefExoticComponent<PopoverArrowProps>;
+declare namespace PopoverArrow {
+  type Props = PopoverArrowProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverArrow, PopoverArrowProps };
+//# sourceMappingURL=arrow.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","names":[],"sources":["../../../../src/ui/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/index.parts.d.ts

@@ -1,7 +1,7 @@
-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";
+import { PopoverArrow, PopoverArrowProps } from "./arrow.js";
+import { PopoverPopup, PopoverPopupProps } from "./popup.js";
+import { PopoverRoot, PopoverRootProps } from "./root.js";
+import { PopoverTrigger, PopoverTriggerProps } from "./trigger.js";
 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 };
 }

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

@@ -1,8 +1,8 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { PopoverArrow } from "./popover-arrow.js";
-import { PopoverPopup } from "./popover-popup.js";
-import { PopoverRoot } from "./popover-root.js";
-import { PopoverTrigger } from "./popover-trigger.js";
+import { PopoverArrow } from "./arrow.js";
+import { PopoverPopup } from "./popup.js";
+import { PopoverRoot } from "./root.js";
+import { PopoverTrigger } from "./trigger.js";
 //#region src/ui/popover/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => PopoverArrow,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/popover/index.parts.ts"],"sourcesContent":["export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps } from './popover-arrow';\nexport { PopoverPopup as Popup, type PopoverPopupProps as PopupProps } from './popover-popup';\nexport { PopoverRoot as Root, type PopoverRootProps as RootProps } from './popover-root';\nexport { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps } from './popover-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/popover/index.parts.ts"],"sourcesContent":["export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps } from './arrow';\nexport { PopoverPopup as Popup, type PopoverPopupProps as PopupProps } from './popup';\nexport { PopoverRoot as Root, type PopoverRootProps as RootProps } from './root';\nexport { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PopoverState } from "@videojs/core";
+//#region src/ui/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: import("react").ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PopoverPopup {
+  type Props = PopoverPopupProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverPopup, PopoverPopupProps };
+//# sourceMappingURL=popup.d.ts.map

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

@@ -0,0 +1,86 @@
+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 { c } from "react-compiler-runtime";
+import { forwardRef, useRef } from "react";
+//#region src/ui/popover/popup.tsx
+/**
+* Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
+const PopoverPopup = forwardRef(function PopoverPopup(t0, forwardedRef) {
+	const $ = c(13);
+	const { render, className, style, ...elementProps } = t0;
+	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
+	const internalRef = useRef(null);
+	let t1;
+	if ($[0] !== popover) {
+		t1 = (el) => {
+			popover.setPopupElement(el);
+		};
+		$[0] = popover;
+		$[1] = t1;
+	} else t1 = $[1];
+	const composedRef = useComposedRefs(forwardedRef, t1, internalRef);
+	let t2;
+	if ($[2] !== preferredSide || $[3] !== state.align) {
+		t2 = {
+			side: preferredSide,
+			align: state.align
+		};
+		$[2] = preferredSide;
+		$[3] = state.align;
+		$[4] = t2;
+	} else t2 = $[4];
+	const posOpts = t2;
+	let t3;
+	if ($[5] !== anchorName || $[6] !== boundary || $[7] !== container || $[8] !== popover || $[9] !== posOpts || $[10] !== setPositionedSide || $[11] !== state.open) {
+		t3 = {
+			open: state.open,
+			anchorName,
+			position: posOpts,
+			triggerSource: popover,
+			popupRef: internalRef,
+			boundary,
+			container,
+			onSideChange: setPositionedSide
+		};
+		$[5] = anchorName;
+		$[6] = boundary;
+		$[7] = container;
+		$[8] = popover;
+		$[9] = posOpts;
+		$[10] = setPositionedSide;
+		$[11] = state.open;
+		$[12] = t3;
+	} else t3 = $[12];
+	const positioningStyle = usePopupPosition(t3);
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = popover.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { PopoverPopup };
+
+//# sourceMappingURL=popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":["{ render, className, style, ...elementProps }","(el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    }","useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\n  )","{ side: preferredSide, align: state.align }","align","useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align])","{\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: popover,\n    popupRef: internalRef,\n    boundary,\n    container,\n    onSideChange: setPositionedSide,\n  }","open"],"sources":["../../../../src/ui/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,aAAA,IAEjF,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAA/BA;CAGA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAG7CC,IAAAA;CACE,IAAA,EAAA,OAAA,SAAA;EADF,MAAC,OAA8B;GAC7B,QAAQ,gBAAgB,EAAE;EAC5B;EADE,EAAA,KAAA;;;CAKJ,MAAM,cAAc,gBAAgB,cAAc,IAAU,WAAW;CAIxCE,IAAAA;CAAQ,IAAA,EAAA,OAAA,iBAAA,EAAA,OAA4BC,MAAAA,OAAAA;EAApC,KAAA;GAAE,MAAM;GAAe,OAAO,MAAM;EAAM;EAAlC,EAAA,KAAA;EAA4BA,EAAAA,KAAAA,MAAAA;;;CAAnE,MAAM,UAAUC;CAE0BC,IAAAA;CAExC,IAAA,EAAA,OAAA,cAAA,EAAA,OAIA,YAAA,EAAA,OACA,aAAA,EAAA,OAHe,WAAA,EAAA,OADL,WAAA,EAAA,QAKI,qBAAA,EAAA,QAPFC,MAAAA,MAAAA;EAD4B,KAAA;GACxC,MAAM,MAAM;GACZ;GACA,UAAU;GACV,eAAe;GACf,UAAU;GACV;GACA;GACA,cAAc;EAChB;EAPE,EAAA,KAAA;EAIA,EAAA,KAAA;EACA,EAAA,KAAA;EAHe,EAAA,KAAA;EADL,EAAA,KAAA;EAKI,EAAA,MAAA;EAPFA,EAAAA,MAAAA,MAAAA;;;CADd,MAAM,mBAAmB,iBAAiBD,EASzC;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/root.d.ts

@@ -0,0 +1,20 @@
+import { PopoverProps } from "@videojs/core";
+import { PopoverChangeDetails, PositioningBoundary } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/popover/root.d.ts
+interface PopoverRootProps extends Omit<PopoverProps, 'boundary'> {
+  /** 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, boundary, children, ...coreProps }: PopoverRootProps): ReactNode;
+declare namespace PopoverRoot {
+  type Props = PopoverRootProps;
+}
+//#endregion
+export { PopoverRoot, PopoverRootProps };
+//# sourceMappingURL=root.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/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/dev/ui/popover/trigger.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PopoverState } from "@videojs/core";
+//#region src/ui/popover/trigger.d.ts
+interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}
+/** Button that toggles the popover visibility. Renders a `<button>` element. */
+declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace PopoverTrigger {
+  type Props = PopoverTriggerProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverTrigger, PopoverTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map