@videojs/react 10.0.0-beta.22 → 10.0.0-beta.24

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

@@ -0,0 +1,124 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useMenuContext, useSubMenuContext } from "./context.js";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+//#region src/ui/menu/menu-trigger.tsx
+function toUIKeyboardEvent(event) {
+	return {
+		get defaultPrevented() {
+			return event.defaultPrevented;
+		},
+		key: event.key,
+		shiftKey: event.shiftKey,
+		ctrlKey: event.ctrlKey,
+		altKey: event.altKey,
+		metaKey: event.metaKey,
+		target: event.target instanceof Node ? event.target : event.currentTarget,
+		currentTarget: event.currentTarget,
+		preventDefault: () => event.preventDefault(),
+		stopPropagation: () => event.stopPropagation()
+	};
+}
+function preventMenuKeyDefault(event) {
+	const keyboardEvent = toUIKeyboardEvent(event);
+	if (event.key !== "Escape" && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) event.preventDefault();
+}
+/**
+* Button that toggles the menu visibility. At root level renders a `<button>`.
+* When inside a parent menu (as a submenu trigger), renders as a `<div role="menuitem">`
+* that pushes the submenu on click or ArrowRight.
+*/
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();
+	const subMenuCtx = useSubMenuContext();
+	const isSubMenuTrigger = subMenuCtx !== null;
+	const elementRef = useRef(null);
+	const triggerId = useSafeId("sub-trigger");
+	const parentMenu = subMenuCtx?.parentMenu ?? null;
+	const parentMenuApi = parentMenu?.menu ?? null;
+	const parentState = parentMenu?.state ?? state;
+	const parentPush = parentMenu?.push ?? null;
+	const subMenuId = subMenuCtx?.subMenuId ?? null;
+	const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;
+	useEffect(() => {
+		if (!isSubMenuTrigger || !parentMenuApi) return;
+		const element = elementRef.current;
+		if (!element) return;
+		return parentMenuApi.registerItem(element);
+	}, [isSubMenuTrigger, parentMenuApi]);
+	const openSubMenu = useCallback(() => {
+		if (disabled || !parentPush || !subMenuId) return;
+		parentPush(subMenuId, triggerId);
+	}, [
+		disabled,
+		parentPush,
+		subMenuId,
+		triggerId
+	]);
+	const handleSubMenuClick = useCallback((event) => {
+		onClick?.(event);
+		openSubMenu();
+	}, [onClick, openSubMenu]);
+	const handleSubMenuKeyDown = useCallback((event) => {
+		onKeyDown?.(event);
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			openSubMenu();
+		}
+	}, [onKeyDown, openSubMenu]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || disabled || !parentMenuApi) return;
+		parentMenuApi.highlight(element, { focus: false });
+	}, [disabled, parentMenuApi]);
+	const triggerRef = useCallback((element) => {
+		menu.setTriggerElement(element);
+		if (element && supportsAnchorPositioning()) element.style.setProperty("anchor-name", `--${anchorName}`);
+	}, [menu, anchorName]);
+	if (isSubMenuTrigger) return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state: parentState,
+		stateAttrMap,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			id: triggerId,
+			role: "menuitem",
+			"aria-haspopup": "menu",
+			"aria-expanded": isExpanded,
+			"aria-disabled": disabled ? true : void 0,
+			"data-has-submenu": "",
+			onClick: handleSubMenuClick,
+			onKeyDownCapture: preventMenuKeyDefault,
+			onKeyDown: handleSubMenuKeyDown,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, contentId)
+			},
+			state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+			menu.triggerProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { MenuTrigger };
+
+//# sourceMappingURL=menu-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { isMenuNavigationKey, type UIKeyboardEvent } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useMenuContext, useSubMenuContext } from './context';\n\nexport interface MenuTriggerProps extends UIComponentProps<'button', MenuState> {\n  /** Disables the trigger. Only meaningful when used as a submenu trigger inside a parent menu. */\n  disabled?: boolean;\n}\n\nfunction toUIKeyboardEvent(event: React.KeyboardEvent<HTMLElement>): UIKeyboardEvent {\n  return {\n    get defaultPrevented() {\n      return event.defaultPrevented;\n    },\n    key: event.key,\n    shiftKey: event.shiftKey,\n    ctrlKey: event.ctrlKey,\n    altKey: event.altKey,\n    metaKey: event.metaKey,\n    target: event.target instanceof Node ? event.target : event.currentTarget,\n    currentTarget: event.currentTarget,\n    preventDefault: () => event.preventDefault(),\n    stopPropagation: () => event.stopPropagation(),\n  };\n}\n\nfunction preventMenuKeyDefault(event: React.KeyboardEvent<HTMLElement>): void {\n  const keyboardEvent = toUIKeyboardEvent(event);\n\n  if (event.key !== 'Escape' && isMenuNavigationKey(keyboardEvent) && !event.defaultPrevented) {\n    event.preventDefault();\n  }\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that pushes the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, stateAttrMap, anchorName, contentId } = useMenuContext();\n  const subMenuCtx = useSubMenuContext();\n  const isSubMenuTrigger = subMenuCtx !== null;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenu = subMenuCtx?.parentMenu ?? null;\n  const parentMenuApi = parentMenu?.menu ?? null;\n  const parentState = parentMenu?.state ?? state;\n  const parentPush = parentMenu?.push ?? null;\n  const subMenuId = subMenuCtx?.subMenuId ?? null;\n  const isExpanded = isSubMenuTrigger ? parentMenu?.activeSubMenuId === subMenuId : state.open;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    return parentMenuApi.registerItem(element);\n  }, [isSubMenuTrigger, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (disabled || !parentPush || !subMenuId) return;\n    parentPush(subMenuId, triggerId);\n  }, [disabled, parentPush, subMenuId, triggerId]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      (onClick as React.MouseEventHandler<HTMLDivElement> | undefined)?.(event);\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      (onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined)?.(event);\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || disabled || !parentMenuApi) return;\n    parentMenuApi.highlight(element, { focus: false });\n  }, [disabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n      if (element && supportsAnchorPositioning()) {\n        element.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [menu, anchorName]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return renderElement(\n      'div',\n      { render, className, style },\n      {\n        state: parentState,\n        stateAttrMap,\n        ref: [forwardedRef as React.Ref<HTMLDivElement>, elementRef as React.Ref<HTMLDivElement>],\n        props: [\n          {\n            id: triggerId,\n            role: 'menuitem' as const,\n            'aria-haspopup': 'menu' as const,\n            'aria-expanded': isExpanded,\n            'aria-disabled': disabled ? true : undefined,\n            'data-has-submenu': '',\n            onClick: handleSubMenuClick,\n            onKeyDownCapture: preventMenuKeyDefault,\n            onKeyDown: handleSubMenuKeyDown,\n            onPointerEnter: handlePointerEnter,\n          },\n          elementProps,\n        ],\n      }\n    );\n  }\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n      props: [\n        { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n        state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n        menu.triggerProps,\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n"],"mappings":"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"}

package/dist/dev/ui/menu/menu-view.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { MenuState } from "@videojs/core";
+
+//#region src/ui/menu/menu-view.d.ts
+interface MenuViewProps extends UIComponentProps<'div', MenuState> {}
+/** Root menu view inside the menu viewport. */
+declare const MenuView: _$react.ForwardRefExoticComponent<Omit<MenuViewProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare namespace MenuView {
+  type Props = MenuViewProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuView, MenuViewProps };
+//# sourceMappingURL=menu-view.d.ts.map

package/dist/dev/ui/menu/menu-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-view.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"mappings":";;;;;UAUiB,aAAA,SAAsB,gBAAA,QAAwB,SAAA;;cAGlD,QAAA,EAAQ,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,aAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiBJ,QAAA;EAAA,KACH,KAAA,GAAQ,aAAA;EAAA,KACR,KAAA,GAAQ,SAAA;AAAA"}

package/dist/dev/ui/menu/menu-view.js

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuContext } from "./context.js";
+import { getMenuRootViewAttrs } from "@videojs/core/dom";
+import { forwardRef } from "react";
+//#region src/ui/menu/menu-view.tsx
+/** Root menu view inside the menu viewport. */
+const MenuView = forwardRef(function MenuView({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state } = useMenuContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef],
+		props: [getMenuRootViewAttrs(), elementProps]
+	});
+});
+//#endregion
+export { MenuView };
+
+//# sourceMappingURL=menu-view.js.map

package/dist/dev/ui/menu/menu-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-view.js","names":[],"sources":["../../../../src/ui/menu/menu-view.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuState } from '@videojs/core';\nimport { getMenuRootViewAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext } from './context';\n\nexport interface MenuViewProps extends UIComponentProps<'div', MenuState> {}\n\n/** Root menu view inside the menu viewport. */\nexport const MenuView = forwardRef<HTMLDivElement, MenuViewProps>(function MenuView(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state } = useMenuContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [getMenuRootViewAttrs(), elementProps],\n    }\n  );\n});\n\nexport namespace MenuView {\n  export type Props = MenuViewProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,UAAU,gBAAgB;AAElC,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,sBAAsB,EAAE,aAAa;EAC9C,CACF;EACD"}

package/dist/dev/ui/mute-button/mute-button.d.ts

@@ -1,11 +1,11 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
+import * as _$react from "react";
 import { MuteButtonCore } from "@videojs/core";
 
 //#region src/ui/mute-button/mute-button.d.ts
 interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}
 /** A button that toggles mute state. */
-declare const MuteButton: react.ForwardRefExoticComponent<MuteButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const MuteButton: _$react.ForwardRefExoticComponent<MuteButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
 declare namespace MuteButton {
   type Props = MuteButtonProps;
   type State = MuteButtonCore.State;

package/dist/dev/ui/mute-button/mute-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;cAG7F,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;cAG7F,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

package/dist/dev/ui/pip-button/pip-button.d.ts

@@ -1,11 +1,11 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
+import * as _$react from "react";
 import { PiPButtonCore } from "@videojs/core";
 
 //#region src/ui/pip-button/pip-button.d.ts
 interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}
 /** A button that toggles picture-in-picture. */
-declare const PiPButton: react.ForwardRefExoticComponent<PiPButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PiPButton: _$react.ForwardRefExoticComponent<PiPButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
 declare namespace PiPButton {
   type Props = PiPButtonProps;
   type State = PiPButtonCore.State;

package/dist/dev/ui/pip-button/pip-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;;;UAQiB,cAAA,SAAuB,gBAAA,WAA2B,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;cAG1F,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,cAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}

package/dist/dev/ui/play-button/play-button.d.ts

@@ -1,5 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
+import * as _$react from "react";
 import { PlayButtonCore } from "@videojs/core";
 
 //#region src/ui/play-button/play-button.d.ts
@@ -20,7 +20,7 @@ interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.Stat
  * />
  * ```
  */
-declare const PlayButton: react.ForwardRefExoticComponent<PlayButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PlayButton: _$react.ForwardRefExoticComponent<PlayButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
 declare namespace PlayButton {
   type Props = PlayButtonProps;
   type State = PlayButtonCore.State;

package/dist/dev/ui/play-button/play-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,KAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;cAkBa,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBASN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}

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

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

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

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

package/dist/dev/ui/playback-rate-menu/context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/playback-rate-menu/context.tsx
+const PlaybackRateMenuContext = createContext(null);
+function PlaybackRateMenuProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PlaybackRateMenuContext.Provider, {
+		value,
+		children
+	});
+}
+function usePlaybackRateMenuContext() {
+	const ctx = useContext(PlaybackRateMenuContext);
+	if (!ctx) throw new Error("PlaybackRateMenu compound components must be used within a PlaybackRateMenu.Root");
+	return ctx;
+}
+//#endregion
+export { PlaybackRateMenuProvider, usePlaybackRateMenuContext };
+
+//# sourceMappingURL=context.js.map

package/dist/dev/ui/playback-rate-menu/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/context.tsx"],"sourcesContent":["'use client';\n\nimport type { MediaPlaybackRateState, PlaybackRateMenuCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface PlaybackRateMenuContextValue {\n  core: PlaybackRateMenuCore;\n  media: MediaPlaybackRateState;\n  state: PlaybackRateMenuCore.State;\n}\n\nconst PlaybackRateMenuContext = createContext<PlaybackRateMenuContextValue | null>(null);\n\nexport function PlaybackRateMenuProvider({\n  value,\n  children,\n}: {\n  value: PlaybackRateMenuContextValue;\n  children: React.ReactNode;\n}): React.ReactNode {\n  return <PlaybackRateMenuContext.Provider value={value}>{children}</PlaybackRateMenuContext.Provider>;\n}\n\nexport function usePlaybackRateMenuContext(): PlaybackRateMenuContextValue {\n  const ctx = useContext(PlaybackRateMenuContext);\n  if (!ctx) throw new Error('PlaybackRateMenu compound components must be used within a PlaybackRateMenu.Root');\n  return ctx;\n}\n"],"mappings":";;;;AAWA,MAAM,0BAA0B,cAAmD,KAAK;AAExF,SAAgB,yBAAyB,EACvC,OACA,YAIkB;AAClB,QAAO,oBAAC,wBAAwB,UAAzB;EAAyC;EAAQ;EAA4C,CAAA;;AAGtG,SAAgB,6BAA2D;CACzE,MAAM,MAAM,WAAW,wBAAwB;AAC/C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mFAAmF;AAC7G,QAAO"}

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

@@ -0,0 +1,3 @@
+import { PlaybackRateMenuOption, PlaybackRateMenuResult, usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as PlaybackRateMenu, type PlaybackRateMenuOption, type PlaybackRateMenuResult, usePlaybackRateMenu };

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

@@ -0,0 +1,3 @@
+import { usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as PlaybackRateMenu, usePlaybackRateMenu };

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

@@ -0,0 +1,12 @@
+import { PlaybackRateMenuContent, PlaybackRateMenuContentProps } from "./playback-rate-menu-content.js";
+import { PlaybackRateMenuRoot, PlaybackRateMenuRootProps } from "./playback-rate-menu-root.js";
+import { PlaybackRateMenuTrigger, PlaybackRateMenuTriggerProps } from "./playback-rate-menu-trigger.js";
+import { PlaybackRateMenuOption, PlaybackRateMenuResult, usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+
+//#region src/ui/playback-rate-menu/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { PlaybackRateMenuContent as Content, PlaybackRateMenuContentProps as ContentProps, PlaybackRateMenuOption, PlaybackRateMenuResult, PlaybackRateMenuContent as Popup, PlaybackRateMenuContentProps as PopupProps, PlaybackRateMenuRoot as Root, PlaybackRateMenuRootProps as RootProps, PlaybackRateMenuTrigger as Trigger, PlaybackRateMenuTriggerProps as TriggerProps, usePlaybackRateMenu };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/playback-rate-menu/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-menu/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PlaybackRateMenuContent } from "./playback-rate-menu-content.js";
+import { PlaybackRateMenuRoot } from "./playback-rate-menu-root.js";
+import { PlaybackRateMenuTrigger } from "./playback-rate-menu-trigger.js";
+import { usePlaybackRateMenu } from "./use-playback-rate-menu.js";
+//#region src/ui/playback-rate-menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => PlaybackRateMenuContent,
+	Popup: () => PlaybackRateMenuContent,
+	Root: () => PlaybackRateMenuRoot,
+	Trigger: () => PlaybackRateMenuTrigger,
+	usePlaybackRateMenu: () => usePlaybackRateMenu
+});
+//#endregion
+export { index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/index.parts.ts"],"sourcesContent":["export {\n  PlaybackRateMenuContent as Content,\n  PlaybackRateMenuContent as Popup,\n  type PlaybackRateMenuContentProps as ContentProps,\n  type PlaybackRateMenuContentProps as PopupProps,\n} from './playback-rate-menu-content';\nexport { PlaybackRateMenuRoot as Root, type PlaybackRateMenuRootProps as RootProps } from './playback-rate-menu-root';\nexport {\n  PlaybackRateMenuTrigger as Trigger,\n  type PlaybackRateMenuTriggerProps as TriggerProps,\n} from './playback-rate-menu-trigger';\nexport {\n  type PlaybackRateMenuOption,\n  type PlaybackRateMenuResult,\n  usePlaybackRateMenu,\n} from './use-playback-rate-menu';\n"],"mappings":""}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-content.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { PlaybackRateMenuCore } from "@videojs/core";
+
+//#region src/ui/playback-rate-menu/playback-rate-menu-content.d.ts
+interface PlaybackRateMenuContentProps extends UIComponentProps<'div', PlaybackRateMenuCore.State> {}
+declare const PlaybackRateMenuContent: _$react.ForwardRefExoticComponent<Omit<PlaybackRateMenuContentProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare namespace PlaybackRateMenuContent {
+  type Props = PlaybackRateMenuContentProps;
+  type State = PlaybackRateMenuCore.State;
+}
+//#endregion
+export { PlaybackRateMenuContent, PlaybackRateMenuContentProps };
+//# sourceMappingURL=playback-rate-menu-content.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-content.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-content.tsx"],"mappings":";;;;;UAUiB,4BAAA,SAAqC,gBAAA,QAAwB,oBAAA,CAAqB,KAAA;AAAA,cAEtF,uBAAA,EAAuB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,4BAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAyBnB,uBAAA;EAAA,KACH,KAAA,GAAQ,4BAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-content.js

@@ -0,0 +1,28 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { MenuContent } from "../menu/menu-content.js";
+import { usePlaybackRateMenuContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PlaybackRateMenuDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-menu-content.tsx
+const PlaybackRateMenuContent = forwardRef(function PlaybackRateMenuContent({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state } = usePlaybackRateMenuContext();
+	return /* @__PURE__ */ jsx(MenuContent, {
+		render: (menuProps) => renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: PlaybackRateMenuDataAttrs,
+			ref: [forwardedRef],
+			props: [menuProps, elementProps]
+		}),
+		children
+	});
+});
+//#endregion
+export { PlaybackRateMenuContent };
+
+//# sourceMappingURL=playback-rate-menu-content.js.map

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-content.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-content.tsx"],"sourcesContent":["'use client';\n\nimport { type PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuContent } from '../menu/menu-content';\nimport { usePlaybackRateMenuContext } from './context';\n\nexport interface PlaybackRateMenuContentProps extends UIComponentProps<'div', PlaybackRateMenuCore.State> {}\n\nexport const PlaybackRateMenuContent = forwardRef<HTMLDivElement, PlaybackRateMenuContentProps>(\n  function PlaybackRateMenuContent({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const { state } = usePlaybackRateMenuContext();\n\n    return (\n      <MenuContent\n        render={(menuProps) =>\n          renderElement(\n            'div',\n            { render, className, style },\n            {\n              state,\n              stateAttrMap: PlaybackRateMenuDataAttrs,\n              ref: [forwardedRef],\n              props: [menuProps, elementProps],\n            }\n          )\n        }\n      >\n        {children}\n      </MenuContent>\n    );\n  }\n);\n\nexport namespace PlaybackRateMenuContent {\n  export type Props = PlaybackRateMenuContentProps;\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACtG,MAAM,EAAE,UAAU,4BAA4B;AAE9C,QACE,oBAAC,aAAD;EACE,SAAS,cACP,cACE,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,aAAa;GACnB,OAAO,CAAC,WAAW,aAAa;GACjC,CACF;EAGF;EACW,CAAA;EAGnB"}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-root.d.ts

@@ -0,0 +1,23 @@
+import { MenuRootProps } from "../menu/menu-root.js";
+import { ReactNode } from "react";
+import { PlaybackRateMenuCore } from "@videojs/core";
+
+//#region src/ui/playback-rate-menu/playback-rate-menu-root.d.ts
+interface PlaybackRateMenuRootProps extends Omit<MenuRootProps, 'children'>, PlaybackRateMenuCore.Props {
+  children?: ReactNode;
+}
+declare function PlaybackRateMenuRoot({
+  label,
+  formatRate,
+  disabled,
+  align,
+  children,
+  ...menuProps
+}: PlaybackRateMenuRootProps): ReactNode;
+declare namespace PlaybackRateMenuRoot {
+  type Props = PlaybackRateMenuRootProps;
+  type State = PlaybackRateMenuCore.State;
+}
+//#endregion
+export { PlaybackRateMenuRoot, PlaybackRateMenuRootProps };
+//# sourceMappingURL=playback-rate-menu-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-root.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-root.tsx"],"mappings":";;;;;UAWiB,yBAAA,SAAkC,IAAA,CAAK,aAAA,eAA4B,oBAAA,CAAqB,KAAA;EACvG,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,oBAAA,CAAA;EACd,KAAA;EACA,UAAA;EACA,QAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,yBAAA,GAA4B,SAAA;AAAA,kBAuBd,oBAAA;EAAA,KACH,KAAA,GAAQ,yBAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-root.js

@@ -0,0 +1,39 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { MenuRoot } from "../menu/menu-root.js";
+import { PlaybackRateMenuProvider } from "./context.js";
+import { logMissingFeature, selectPlaybackRate } from "@videojs/core/dom";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PlaybackRateMenuCore } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-menu-root.tsx
+function PlaybackRateMenuRoot({ label, formatRate, disabled, align = "center", children, ...menuProps }) {
+	const playbackRate = usePlayer(selectPlaybackRate);
+	const [core] = useState(() => new PlaybackRateMenuCore());
+	core.setProps({
+		label,
+		formatRate,
+		disabled
+	});
+	if (!playbackRate) {
+		logMissingFeature("PlaybackRateMenu", selectPlaybackRate.displayName ?? "playbackRate");
+		return null;
+	}
+	core.setMedia(playbackRate);
+	return /* @__PURE__ */ jsx(PlaybackRateMenuProvider, {
+		value: {
+			core,
+			media: playbackRate,
+			state: core.getState()
+		},
+		children: /* @__PURE__ */ jsx(MenuRoot, {
+			align,
+			...menuProps,
+			children
+		})
+	});
+}
+//#endregion
+export { PlaybackRateMenuRoot };
+
+//# sourceMappingURL=playback-rate-menu-root.js.map

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-root.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-root.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateMenuCore } from '@videojs/core';\nimport { logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { MenuRoot, type MenuRootProps } from '../menu/menu-root';\nimport { PlaybackRateMenuProvider } from './context';\n\nexport interface PlaybackRateMenuRootProps extends Omit<MenuRootProps, 'children'>, PlaybackRateMenuCore.Props {\n  children?: ReactNode;\n}\n\nexport function PlaybackRateMenuRoot({\n  label,\n  formatRate,\n  disabled,\n  align = 'center',\n  children,\n  ...menuProps\n}: PlaybackRateMenuRootProps): ReactNode {\n  const playbackRate = usePlayer(selectPlaybackRate);\n  const [core] = useState(() => new PlaybackRateMenuCore());\n\n  core.setProps({ label, formatRate, disabled });\n\n  if (!playbackRate) {\n    if (__DEV__) logMissingFeature('PlaybackRateMenu', selectPlaybackRate.displayName ?? 'playbackRate');\n    return null;\n  }\n\n  core.setMedia(playbackRate);\n  const state = core.getState();\n\n  return (\n    <PlaybackRateMenuProvider value={{ core, media: playbackRate, state }}>\n      <MenuRoot align={align} {...menuProps}>\n        {children}\n      </MenuRoot>\n    </PlaybackRateMenuProvider>\n  );\n}\n\nexport namespace PlaybackRateMenuRoot {\n  export type Props = PlaybackRateMenuRootProps;\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,qBAAqB,EACnC,OACA,YACA,UACA,QAAQ,UACR,UACA,GAAG,aACoC;CACvC,MAAM,eAAe,UAAU,mBAAmB;CAClD,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;AAEzD,MAAK,SAAS;EAAE;EAAO;EAAY;EAAU,CAAC;AAE9C,KAAI,CAAC,cAAc;AACJ,oBAAkB,oBAAoB,mBAAmB,eAAe,eAAe;AACpG,SAAO;;AAGT,MAAK,SAAS,aAAa;AAG3B,QACE,oBAAC,0BAAD;EAA0B,OAAO;GAAE;GAAM,OAAO;GAAc,OAHlD,KAAK,UAAU;GAG0C;YACnE,oBAAC,UAAD;GAAiB;GAAO,GAAI;GACzB;GACQ,CAAA;EACc,CAAA"}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-trigger.d.ts

@@ -0,0 +1,14 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as _$react from "react";
+import { PlaybackRateMenuCore } from "@videojs/core";
+
+//#region src/ui/playback-rate-menu/playback-rate-menu-trigger.d.ts
+interface PlaybackRateMenuTriggerProps extends UIComponentProps<'button', PlaybackRateMenuCore.State> {}
+declare const PlaybackRateMenuTrigger: _$react.ForwardRefExoticComponent<Omit<PlaybackRateMenuTriggerProps, "ref"> & _$react.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare namespace PlaybackRateMenuTrigger {
+  type Props = PlaybackRateMenuTriggerProps;
+  type State = PlaybackRateMenuCore.State;
+}
+//#endregion
+export { PlaybackRateMenuTrigger, PlaybackRateMenuTriggerProps };
+//# sourceMappingURL=playback-rate-menu-trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-trigger.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-trigger.tsx"],"mappings":";;;;;UAYiB,4BAAA,SAAqC,gBAAA,WAA2B,oBAAA,CAAqB,KAAA;AAAA,cAMzF,uBAAA,EAAuB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,4BAAA,WAAA,OAAA,CAAA,aAAA,CAAA,iBAAA,GAAA,cAAA;AAAA,kBAoCnB,uBAAA;EAAA,KACH,KAAA,GAAQ,4BAAA;EAAA,KACR,KAAA,GAAQ,oBAAA,CAAqB,KAAA;AAAA"}

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-trigger.js

@@ -0,0 +1,51 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { MenuTrigger } from "../menu/menu-trigger.js";
+import { usePlaybackRateMenuContext } from "./context.js";
+import { forwardRef, isValidElement } from "react";
+import { isNull, isUndefined } from "@videojs/utils/predicate";
+import { jsx } from "react/jsx-runtime";
+import { PlaybackRateMenuDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-menu-trigger.tsx
+function hasChildren(children) {
+	return !isUndefined(children) && !isNull(children) && children !== false;
+}
+const PlaybackRateMenuTrigger = forwardRef(function PlaybackRateMenuTrigger({ render, className, style, children, disabled, ...elementProps }, forwardedRef) {
+	const { core, state } = usePlaybackRateMenuContext();
+	const isDisabled = state.disabled || Boolean(disabled);
+	const renderedChildren = isValidElement(render) ? render.props.children : void 0;
+	const hasOwnChildren = !isUndefined(children);
+	const hasRenderedChildren = !isUndefined(renderedChildren);
+	const triggerChildren = hasOwnChildren ? children : hasRenderedChildren ? void 0 : core.getRateLabel(state.rate);
+	const childrenProps = !isUndefined(triggerChildren) ? { children: triggerChildren } : void 0;
+	const inlineLabelProps = hasChildren(triggerChildren) || hasChildren(renderedChildren) ? { "data-inline-rate-label": "" } : void 0;
+	return /* @__PURE__ */ jsx(MenuTrigger, {
+		disabled: isDisabled,
+		render: (menuProps) => {
+			const isSubmenuTrigger = menuProps.role === "menuitem";
+			const element = isSubmenuTrigger ? "div" : "button";
+			const disabledProps = isSubmenuTrigger ? void 0 : { disabled: isDisabled };
+			return renderElement(element, {
+				render,
+				className,
+				style
+			}, {
+				state,
+				stateAttrMap: PlaybackRateMenuDataAttrs,
+				ref: [forwardedRef],
+				props: [
+					menuProps,
+					core.getAttrs(state),
+					elementProps,
+					disabledProps,
+					inlineLabelProps,
+					childrenProps
+				]
+			});
+		}
+	});
+});
+//#endregion
+export { PlaybackRateMenuTrigger };
+
+//# sourceMappingURL=playback-rate-menu-trigger.js.map

package/dist/dev/ui/playback-rate-menu/playback-rate-menu-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-trigger.js","names":[],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport { type PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from '@videojs/core';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode, Ref } from 'react';\nimport { forwardRef, isValidElement } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { MenuTrigger } from '../menu/menu-trigger';\nimport { usePlaybackRateMenuContext } from './context';\n\nexport interface PlaybackRateMenuTriggerProps extends UIComponentProps<'button', PlaybackRateMenuCore.State> {}\n\nfunction hasChildren(children: ReactNode): boolean {\n  return !isUndefined(children) && !isNull(children) && children !== false;\n}\n\nexport const PlaybackRateMenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, PlaybackRateMenuTriggerProps>(\n  function PlaybackRateMenuTrigger({ render, className, style, children, disabled, ...elementProps }, forwardedRef) {\n    const { core, state } = usePlaybackRateMenuContext();\n    const isDisabled = state.disabled || Boolean(disabled);\n    const renderedChildren = isValidElement<{ children?: ReactNode }>(render) ? render.props.children : undefined;\n    const hasOwnChildren = !isUndefined(children);\n    const hasRenderedChildren = !isUndefined(renderedChildren);\n    const triggerChildren = hasOwnChildren ? children : hasRenderedChildren ? undefined : core.getRateLabel(state.rate);\n    const childrenProps = !isUndefined(triggerChildren) ? { children: triggerChildren } : undefined;\n    const inlineLabelProps =\n      hasChildren(triggerChildren) || hasChildren(renderedChildren) ? { 'data-inline-rate-label': '' } : undefined;\n\n    return (\n      <MenuTrigger\n        disabled={isDisabled}\n        render={(menuProps) => {\n          const isSubmenuTrigger = menuProps.role === 'menuitem';\n          const element = isSubmenuTrigger ? 'div' : 'button';\n          const disabledProps = isSubmenuTrigger ? undefined : { disabled: isDisabled };\n\n          return renderElement(\n            element,\n            { render, className, style },\n            {\n              state,\n              stateAttrMap: PlaybackRateMenuDataAttrs,\n              ref: [forwardedRef as Ref<HTMLButtonElement & HTMLDivElement>],\n              props: [menuProps, core.getAttrs(state), elementProps, disabledProps, inlineLabelProps, childrenProps],\n            }\n          );\n        }}\n      />\n    );\n  }\n);\n\nexport namespace PlaybackRateMenuTrigger {\n  export type Props = PlaybackRateMenuTriggerProps;\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;;;;AAcA,SAAS,YAAY,UAA8B;AACjD,QAAO,CAAC,YAAY,SAAS,IAAI,CAAC,OAAO,SAAS,IAAI,aAAa;;AAGrE,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBAAgB,cAAc;CAChH,MAAM,EAAE,MAAM,UAAU,4BAA4B;CACpD,MAAM,aAAa,MAAM,YAAY,QAAQ,SAAS;CACtD,MAAM,mBAAmB,eAAyC,OAAO,GAAG,OAAO,MAAM,WAAW,KAAA;CACpG,MAAM,iBAAiB,CAAC,YAAY,SAAS;CAC7C,MAAM,sBAAsB,CAAC,YAAY,iBAAiB;CAC1D,MAAM,kBAAkB,iBAAiB,WAAW,sBAAsB,KAAA,IAAY,KAAK,aAAa,MAAM,KAAK;CACnH,MAAM,gBAAgB,CAAC,YAAY,gBAAgB,GAAG,EAAE,UAAU,iBAAiB,GAAG,KAAA;CACtF,MAAM,mBACJ,YAAY,gBAAgB,IAAI,YAAY,iBAAiB,GAAG,EAAE,0BAA0B,IAAI,GAAG,KAAA;AAErG,QACE,oBAAC,aAAD;EACE,UAAU;EACV,SAAS,cAAc;GACrB,MAAM,mBAAmB,UAAU,SAAS;GAC5C,MAAM,UAAU,mBAAmB,QAAQ;GAC3C,MAAM,gBAAgB,mBAAmB,KAAA,IAAY,EAAE,UAAU,YAAY;AAE7E,UAAO,cACL,SACA;IAAE;IAAQ;IAAW;IAAO,EAC5B;IACE;IACA,cAAc;IACd,KAAK,CAAC,aAAwD;IAC9D,OAAO;KAAC;KAAW,KAAK,SAAS,MAAM;KAAE;KAAc;KAAe;KAAkB;KAAc;IACvG,CACF;;EAEH,CAAA;EAGP"}

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

@@ -0,0 +1,26 @@
+import { PlaybackRateMenuCore } from "@videojs/core";
+
+//#region src/ui/playback-rate-menu/use-playback-rate-menu.d.ts
+interface PlaybackRateMenuOption {
+  rate: number;
+  value: string;
+  label: string;
+  disabled: boolean;
+}
+interface PlaybackRateMenuResult {
+  state: PlaybackRateMenuCore.State;
+  rate: number;
+  value: string;
+  options: PlaybackRateMenuOption[];
+  disabled: boolean;
+  setRate: (rate: number) => void;
+  setValue: (value: string) => void;
+}
+declare function usePlaybackRateMenu(): PlaybackRateMenuResult;
+declare namespace usePlaybackRateMenu {
+  type Result = PlaybackRateMenuResult;
+  type Option = PlaybackRateMenuOption;
+}
+//#endregion
+export { PlaybackRateMenuOption, PlaybackRateMenuResult, usePlaybackRateMenu };
+//# sourceMappingURL=use-playback-rate-menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-playback-rate-menu.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-menu/use-playback-rate-menu.ts"],"mappings":";;;UAOiB,sBAAA;EACf,IAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,sBAAA;EACf,KAAA,EAAO,oBAAA,CAAqB,KAAA;EAC5B,IAAA;EACA,KAAA;EACA,OAAA,EAAS,sBAAA;EACT,QAAA;EACA,OAAA,GAAU,IAAA;EACV,QAAA,GAAW,KAAA;AAAA;AAAA,iBAGG,mBAAA,CAAA,GAAuB,sBAAA;AAAA,kBAsBtB,mBAAA;EAAA,KACH,MAAA,GAAS,sBAAA;EAAA,KACT,MAAA,GAAS,sBAAA;AAAA"}