@videojs/react 10.0.0-beta.26 → 10.0.0-beta.27

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

@@ -1,72 +1,50 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { MenuTriggerChildContextProvider, useMenuContext, useOptionalMenuItemSettingContext, useSubMenuContext } from "./context.js";
+import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
-import { MenuItemSettingProvider } from "./menu-item-setting-provider.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./menu-keyboard.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
 import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#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.
+* that opens the submenu on click or ArrowRight.
 */
-const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, type, onClick, onKeyDown, ...elementProps }, forwardedRef) {
-	const { core, menu, state, anchorName, contentId } = useMenuContext();
-	const subMenuCtx = useSubMenuContext();
-	const isSubMenuTrigger = subMenuCtx !== null;
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, contentId } = useMenuContext();
+	const isSubMenuTrigger = parent !== null;
+	const controlledId = state.open || state.status === "ending" ? contentId : void 0;
 	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;
+	const parentMenuApi = parent?.menu ?? null;
 	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);
+		menu.setTriggerElement(element);
+		const unregister = parentMenuApi.registerItem(element);
+		return () => {
+			unregister();
+			menu.setTriggerElement(null);
+		};
 	}, [
-		disabled,
-		parentPush,
-		subMenuId,
-		triggerId
+		isSubMenuTrigger,
+		menu,
+		parentMenuApi
 	]);
+	const openSubMenu = useCallback(() => {
+		if (!disabled) menu.open("click");
+	}, [disabled, menu]);
 	const handleSubMenuClick = useCallback((event) => {
 		onClick?.(event);
+		if (event.defaultPrevented) return;
 		openSubMenu();
 	}, [onClick, openSubMenu]);
 	const handleSubMenuKeyDown = useCallback((event) => {
-		onKeyDown?.(event);
-		if (disabled) return;
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (disabled || defaultPreventedByUser) return;
 		if (event.key === "ArrowRight") {
 			event.preventDefault();
 			openSubMenu();
@@ -79,12 +57,14 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	const handlePointerEnter = useCallback(() => {
 		const element = elementRef.current;
 		if (!element || disabled || !parentMenuApi) return;
-		parentMenuApi.highlight(element, { focus: false });
+		parentMenuApi.highlight(element, {
+			focus: false,
+			pointer: true
+		});
 	}, [disabled, parentMenuApi]);
 	const triggerRef = useCallback((element) => {
 		menu.setTriggerElement(element);
-		if (element && supportsAnchorPositioning()) element.style.setProperty("anchor-name", `--${anchorName}`);
-	}, [menu, anchorName]);
+	}, [menu]);
 	const rootTriggerProps = useMemo(() => {
 		if (!disabled) return menu.triggerProps;
 		return {
@@ -92,34 +72,26 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 				event.preventDefault();
 			},
 			onKeyDown: (event) => {
-				const keyboardEvent = toUIKeyboardEvent(event);
-				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(keyboardEvent)) event.preventDefault();
+				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(event)) event.preventDefault();
 			}
 		};
 	}, [disabled, menu.triggerProps]);
-	if (isSubMenuTrigger) {
-		const trigger = /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
-			render,
-			className,
-			style,
-			disabled,
-			elementProps,
-			forwardedRef,
-			elementRef,
-			triggerId,
-			parentState,
-			isExpanded,
-			onSubMenuClick: handleSubMenuClick,
-			onSubMenuKeyDown: handleSubMenuKeyDown,
-			onPointerEnter: handlePointerEnter
-		});
-		if (!type) return trigger;
-		return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
-			type,
-			children: trigger
-		});
-	}
-	const rootTrigger = /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
+	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+		render,
+		className,
+		style,
+		disabled,
+		elementProps,
+		forwardedRef,
+		elementRef,
+		triggerId,
+		triggerAttrs: core.getTriggerAttrs(state, controlledId),
+		state,
+		onSubMenuClick: handleSubMenuClick,
+		onSubMenuKeyDown: handleSubMenuKeyDown,
+		onPointerEnter: handlePointerEnter
+	});
+	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
 		value: true,
 		children: renderElement("button", {
 			render,
@@ -131,7 +103,7 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 			props: [
 				{
 					type: "button",
-					...core.getTriggerAttrs(state, contentId)
+					...core.getTriggerAttrs(state, controlledId)
 				},
 				disabled ? {
 					disabled: true,
@@ -143,34 +115,25 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 			]
 		})
 	});
-	if (!type) return rootTrigger;
-	return /* @__PURE__ */ jsx(MenuItemSettingProvider, {
-		type,
-		children: rootTrigger
-	});
 });
-function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, parentState, isExpanded, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
-	const setting = useOptionalMenuItemSettingContext();
-	const settingAttrs = setting ? { "data-availability": setting.availability } : void 0;
+function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
 	return renderElement("div", {
 		render,
 		className,
 		style
 	}, {
-		state: parentState,
+		state,
 		ref: [forwardedRef, elementRef],
 		props: [{
 			id: triggerId,
 			role: "menuitem",
-			"aria-haspopup": "menu",
-			"aria-expanded": isExpanded,
+			...triggerAttrs,
 			"aria-disabled": disabled ? true : void 0,
 			"data-has-submenu": "",
 			onClick: onSubMenuClick,
 			onKeyDownCapture: preventMenuKeyDefault,
 			onKeyDown: onSubMenuKeyDown,
-			onPointerEnter,
-			...settingAttrs
+			onPointerEnter
 		}, elementProps]
 	});
 }

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

@@ -1 +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, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport {\n  MenuTriggerChildContextProvider,\n  useMenuContext,\n  useOptionalMenuItemSettingContext,\n  useSubMenuContext,\n} from './context';\nimport { MenuItemSettingProvider } from './menu-item-setting-provider';\nimport type { MenuItemSettingType } from './menu-item-type';\n\nexport interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  /** Setting kind for submenu triggers (`playback-rate`, `quality`, `audio-track`, or `captions`). */\n  type?: MenuItemSettingType | undefined;\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, type, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, state, 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 (disabled) return;\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [disabled, 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  const rootTriggerProps = useMemo(() => {\n    if (!disabled) return menu.triggerProps;\n\n    return {\n      onClick: (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n      },\n      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n        const keyboardEvent = toUIKeyboardEvent(event);\n        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(keyboardEvent)) {\n          event.preventDefault();\n        }\n      },\n    };\n  }, [disabled, menu.triggerProps]);\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    const trigger = (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={disabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        parentState={parentState}\n        isExpanded={isExpanded}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n\n    if (!type) return trigger;\n\n    return <MenuItemSettingProvider type={type}>{trigger}</MenuItemSettingProvider>;\n  }\n\n  const rootTrigger = (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, contentId) },\n            disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n\n  if (!type) return rootTrigger;\n\n  return <MenuItemSettingProvider type={type}>{rootTrigger}</MenuItemSettingProvider>;\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  parentState: MenuState;\n  isExpanded: boolean;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  parentState,\n  isExpanded,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  const setting = useOptionalMenuItemSettingContext();\n  const settingAttrs = setting ? { 'data-availability': setting.availability } : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state: parentState,\n      ref: [forwardedRef, 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: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n          ...settingAttrs,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAS,kBAAkB,OAA0D;CACnF,OAAO;EACL,IAAI,mBAAmB;GACrB,OAAO,MAAM;EACf;EACA,KAAK,MAAM;EACX,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,QAAQ,MAAM,kBAAkB,OAAO,MAAM,SAAS,MAAM;EAC5D,eAAe,MAAM;EACrB,sBAAsB,MAAM,eAAe;EAC3C,uBAAuB,MAAM,gBAAgB;CAC/C;AACF;AAEA,SAAS,sBAAsB,OAA+C;CAC5E,MAAM,gBAAgB,kBAAkB,KAAK;CAE7C,IAAI,MAAM,QAAQ,YAAY,oBAAoB,aAAa,KAAK,CAAC,MAAM,kBACzE,MAAM,eAAe;AAEzB;;;;;;AAOA,MAAa,cAAc,WAAiE,SAAS,YACnG,EAAE,QAAQ,WAAW,OAAO,UAAU,MAAM,SAAS,WAAW,GAAG,gBACnE,cACA;CACA,MAAM,EAAE,MAAM,MAAM,OAAO,YAAY,cAAc,eAAe;CACpE,MAAM,aAAa,kBAAkB;CACrC,MAAM,mBAAmB,eAAe;CAExC,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,YAAY,UAAU,aAAa;CAEzC,MAAM,aAAa,YAAY,cAAc;CAC7C,MAAM,gBAAgB,YAAY,QAAQ;CAC1C,MAAM,cAAc,YAAY,SAAS;CACzC,MAAM,aAAa,YAAY,QAAQ;CACvC,MAAM,YAAY,YAAY,aAAa;CAC3C,MAAM,aAAa,mBAAmB,YAAY,oBAAoB,YAAY,MAAM;CAGxF,gBAAgB;EACd,IAAI,CAAC,oBAAoB,CAAC,eAAe;EACzC,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EACd,OAAO,cAAc,aAAa,OAAO;CAC3C,GAAG,CAAC,kBAAkB,aAAa,CAAC;CAEpC,MAAM,cAAc,kBAAkB;EACpC,IAAI,YAAY,CAAC,cAAc,CAAC,WAAW;EAC3C,WAAW,WAAW,SAAS;CACjC,GAAG;EAAC;EAAU;EAAY;EAAW;CAAS,CAAC;CAE/C,MAAM,qBAAqB,aACxB,UAA4C;EAC3C,UAAmE,KAAK;EACxE,YAAY;CACd,GACA,CAAC,SAAS,WAAW,CACvB;CAEA,MAAM,uBAAuB,aAC1B,UAA+C;EAC9C,YAAwE,KAAK;EAC7E,IAAI,UAAU;EACd,IAAI,MAAM,QAAQ,cAAc;GAC9B,MAAM,eAAe;GACrB,YAAY;EACd;CACF,GACA;EAAC;EAAU;EAAW;CAAW,CACnC;CAEA,MAAM,qBAAqB,kBAAkB;EAC3C,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,WAAW,YAAY,CAAC,eAAe;EAC5C,cAAc,UAAU,SAAS,EAAE,OAAO,MAAM,CAAC;CACnD,GAAG,CAAC,UAAU,aAAa,CAAC;CAG5B,MAAM,aAAa,aAChB,YAAsC;EACrC,KAAK,kBAAkB,OAAO;EAC9B,IAAI,WAAW,0BAA0B,GACvC,QAAQ,MAAM,YAAY,eAAe,KAAK,YAAY;CAE9D,GACA,CAAC,MAAM,UAAU,CACnB;CAEA,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,UAAU,OAAO,KAAK;EAE3B,OAAO;GACL,UAAU,UAAyC;IACjD,MAAM,eAAe;GACvB;GACA,YAAY,UAA4C;IACtD,MAAM,gBAAgB,kBAAkB,KAAK;IAC7C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,OAAO,oBAAoB,aAAa,GACjF,MAAM,eAAe;GAEzB;EACF;CACF,GAAG,CAAC,UAAU,KAAK,YAAY,CAAC;CAGhC,IAAI,kBAAkB;EACpB,MAAM,UACJ,oBAAC,oBAAD;GACU;GACG;GACJ;GACG;GACI;GACA;GACF;GACD;GACE;GACD;GACZ,gBAAgB;GAChB,kBAAkB;GAClB,gBAAgB;EACjB,CAAA;EAGH,IAAI,CAAC,MAAM,OAAO;EAElB,OAAO,oBAAC,yBAAD;GAA+B;GAAO,UAAA;EAAiC,CAAA;CAChF;CAEA,MAAM,cACJ,oBAAC,iCAAD;EAAiC,OAAA;EAC9B,UAAA,cACC,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,KAAK,CAAC,cAA8C,UAAU;GAC9D,OAAO;IACL;KAAE,MAAM;KAAmB,GAAG,KAAK,gBAAgB,OAAO,SAAS;IAAE;IACrE,WAAW;KAAE,UAAU;KAAM,iBAAiB;IAAgB,IAAI,KAAA;IAClE,MAAM,OAAO,EAAE,kBAAkB,sBAAsB,IAAI,KAAA;IAC3D;IACA;GACF;EACF,CACF;CAC+B,CAAA;CAGnC,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO,oBAAC,yBAAD;EAA+B;EAAO,UAAA;CAAqC,CAAA;AACpF,CAAC;AAuBD,SAAS,mBAAmB,EAC1B,QACA,WACA,OACA,UACA,cACA,cACA,YACA,WACA,aACA,YACA,gBACA,kBACA,kBAC0B;CAC1B,MAAM,UAAU,kCAAkC;CAClD,MAAM,eAAe,UAAU,EAAE,qBAAqB,QAAQ,aAAa,IAAI,KAAA;CAE/E,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO;EACP,KAAK,CAAC,cAAc,UAAuC;EAC3D,OAAO,CACL;GACE,IAAI;GACJ,MAAM;GACN,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,WAAW,OAAO,KAAA;GACnC,oBAAoB;GACpB,SAAS;GACT,kBAAkB;GAClB,WAAW;GACX;GACA,GAAG;EACL,GACA,YACF;CACF,CACF;AACF"}
+{"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './menu-keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps\n  extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`.\n * When inside a parent menu (as a submenu trigger), renders as a `<div role=\"menuitem\">`\n * that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n    const element = elementRef.current;\n    if (!element) return;\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!disabled) menu.open('click');\n  }, [disabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n      if (event.defaultPrevented) return;\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (disabled || defaultPreventedByUser) return;\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [disabled, 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, pointer: true });\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    },\n    [menu]\n  );\n\n  const rootTriggerProps = useMemo(() => {\n    if (!disabled) return menu.triggerProps;\n\n    return {\n      onClick: (event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n      },\n      onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n        if (event.key === 'Enter' || event.key === ' ' || isMenuNavigationKey(event)) {\n          event.preventDefault();\n        }\n      },\n    };\n  }, [disabled, menu.triggerProps]);\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={disabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            disabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  state: MenuState;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  triggerAttrs,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}

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,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;cAG7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}
+{"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;UAQiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;cAG7F,4BAAU,0BAAA,kCAAA,cAAA;kBAUN;OACH,QAAQ;OACR,QAAQ,eAAe"}

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

@@ -10,7 +10,8 @@ const MuteButton = createMediaButton({
 	stateAttrMap: MuteButtonDataAttrs,
 	selector: selectVolume,
 	action: (core, state) => core.toggle(state),
-	hotkeyAction: "toggleMuted"
+	hotkeyAction: "toggleMuted",
+	isSupported: (state) => !state.hidden
 });
 //#endregion
 export { MuteButton };

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

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

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

@@ -1,18 +1,17 @@
-import { PlaybackRateRadioGroupCore } from "@videojs/core";
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { PlaybackRateRadioGroupCore, PlaybackRateRadioGroupOption } from "@videojs/core";
 //#region src/ui/playback-rate/use-playback-rate-options.d.ts
 interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}
-interface PlaybackRateOption {
-  rate: number;
-  value: string;
-  label: string;
-  disabled: boolean;
-}
+type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;
 interface PlaybackRateOptionsResult {
   state: PlaybackRateRadioGroupCore.State;
+  label: string;
   rate: number;
   value: string;
+  selectedLabel: string;
   options: PlaybackRateOption[];
   disabled: boolean;
+  hidden: boolean;
   setRate: (rate: number) => void;
   setValue: (value: string) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"use-playback-rate-options.d.ts","names":[],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"mappings":";;UAWiB,iCAAiC,2BAA2B;UAE5D;EACf;EACA;EACA;EACA;;UAGe;EACf,OAAO,2BAA2B;EAClC;EACA;EACA,SAAS;EACT;EACA,UAAU;EACV,WAAW;;;;;;;;iBASG,uBAAuB,QAAQ,2BAA2B;kBAiCzD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
+{"version":3,"file":"use-playback-rate-options.d.ts","names":[],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"mappings":";;;UAYiB,iCAAiC,2BAA2B;KAEjE,qBAAqB,sBAAsB;UAEtC;EACf,OAAO,2BAA2B;EAClC;EACA;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,UAAU;EACV,WAAW;;;;;;;;iBAgBG,uBAAuB,QAAQ,2BAA2B;kBAYzD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -1,9 +1,15 @@
 "use client";
-import { usePlayer } from "../../player/context.js";
-import { logMissingFeature, selectPlaybackRate } from "@videojs/core/dom";
-import { useCallback, useState } from "react";
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectPlaybackRate } from "@videojs/core/dom";
+import { useCallback } from "react";
 import { PlaybackRateRadioGroupCore } from "@videojs/core";
 //#region src/ui/playback-rate/use-playback-rate-options.ts
+const usePlaybackRateRadioOptions = createRadioOptionsHook({
+	name: "usePlaybackRateOptions",
+	feature: "playbackRate",
+	selector: selectPlaybackRate,
+	createCore: () => new PlaybackRateRadioGroupCore()
+});
 /**
 * Create playback rate menu options from the player playback rate state.
 * Returns `null` when the playback rate feature is not configured.
@@ -11,30 +17,13 @@ import { PlaybackRateRadioGroupCore } from "@videojs/core";
 * @param props - Optional `label`, `formatRate`, and `disabled` overrides.
 */
 function usePlaybackRateOptions(props) {
-	const media = usePlayer(selectPlaybackRate);
-	const [core] = useState(() => new PlaybackRateRadioGroupCore());
-	core.setProps(props ?? {});
-	const setRate = useCallback((rate) => core.select(media, rate), [core, media]);
-	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
-	if (!media) {
-		logMissingFeature("usePlaybackRateOptions", selectPlaybackRate.displayName ?? "playbackRate");
-		return null;
-	}
-	core.setMedia(media);
-	const state = core.getState();
+	const result = usePlaybackRateRadioOptions(props);
+	const setRate = useCallback((rate) => result?.setValue(String(rate)), [result?.setValue]);
+	if (!result) return null;
 	return {
-		state,
-		rate: state.rate,
-		value: core.getRateValue(state.rate),
-		options: state.rates.map((rate) => ({
-			rate,
-			value: core.getRateValue(rate),
-			label: core.getRateLabel(rate),
-			disabled: state.disabled
-		})),
-		disabled: state.disabled,
-		setRate,
-		setValue
+		...result,
+		rate: result.state.rate,
+		setRate
 	};
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["'use client';\n\nimport {\n  type PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n} from '@videojs/core';\nimport { logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport interface PlaybackRateOption {\n  rate: number;\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\nexport interface PlaybackRateOptionsResult {\n  state: PlaybackRateRadioGroupCore.State;\n  rate: number;\n  value: string;\n  options: PlaybackRateOption[];\n  disabled: boolean;\n  setRate: (rate: number) => void;\n  setValue: (value: string) => void;\n}\n\n/**\n * Create playback rate menu options from the player playback rate state.\n * Returns `null` when the playback rate feature is not configured.\n *\n * @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null {\n  const media = usePlayer(selectPlaybackRate);\n  const [core] = useState(() => new PlaybackRateRadioGroupCoreClass());\n\n  core.setProps(props ?? {});\n\n  const setRate = useCallback((rate: number) => core.select(media!, rate), [core, media]);\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('usePlaybackRateOptions', selectPlaybackRate.displayName ?? 'playbackRate');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    rate: state.rate,\n    value: core.getRateValue(state.rate),\n    options: state.rates.map((rate) => ({\n      rate,\n      value: core.getRateValue(rate),\n      label: core.getRateLabel(rate),\n      disabled: state.disabled,\n    })),\n    disabled: state.disabled,\n    setRate,\n    setValue,\n  };\n}\n\nexport namespace usePlaybackRateOptions {\n  export type Props = PlaybackRateOptionsProps;\n  export type Result = PlaybackRateOptionsResult;\n  export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;;;;;;;;AAoCA,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,QAAQ,UAAU,kBAAkB;CAC1C,MAAM,CAAC,QAAQ,eAAe,IAAIA,2BAAgC,CAAC;CAEnE,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,UAAU,aAAa,SAAiB,KAAK,OAAO,OAAQ,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CACtF,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAAO;EACG,kBAAkB,0BAA0B,mBAAmB,eAAe,cAAc;EACzG,OAAO;CACT;CAEA,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,MAAM,MAAM;EACZ,OAAO,KAAK,aAAa,MAAM,IAAI;EACnC,SAAS,MAAM,MAAM,KAAK,UAAU;GAClC;GACA,OAAO,KAAK,aAAa,IAAI;GAC7B,OAAO,KAAK,aAAa,IAAI;GAC7B,UAAU,MAAM;EAClB,EAAE;EACF,UAAU,MAAM;EAChB;EACA;CACF;AACF"}
+{"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["'use client';\n\nimport {\n  type PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n  state: PlaybackRateRadioGroupCore.State;\n  label: string;\n  rate: number;\n  value: string;\n  selectedLabel: string;\n  options: PlaybackRateOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setRate: (rate: number) => void;\n  setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n  name: 'usePlaybackRateOptions',\n  feature: 'playbackRate',\n  selector: selectPlaybackRate,\n  createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/**\n * Create playback rate menu options from the player playback rate state.\n * Returns `null` when the playback rate feature is not configured.\n *\n * @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult | null {\n  const result = usePlaybackRateRadioOptions(props);\n  const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n  if (!result) return null;\n\n  return {\n    ...result,\n    rate: result.state.rate,\n    setRate,\n  };\n}\n\nexport namespace usePlaybackRateOptions {\n  export type Props = PlaybackRateOptionsProps;\n  export type Result = PlaybackRateOptionsResult;\n  export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;;AA6BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAChG,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-radio-group.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"mappings":";;;;;;KAiBY,kCAAkC;;EAE5C;;UAGe,wCAAwC,KAAK;;EAE5D;;UAGe,oCACP,KAAK,wBAAwB,2BAA2B,qBAC9D;;EAEF,aAAa,OAAO,iCAAiC,OAAO,oCAAoC;;;;;;;;;;;;;;;;;cAkBrF,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;kBAyDlB;OACH,QAAQ;OACR,QAAQ,2BAA2B;OACnC,YAAY;OACZ,YAAY"}

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

@@ -0,0 +1,65 @@
+"use client";
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { usePlaybackRateOptions } from "../playback-rate/use-playback-rate-options.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx
+/**
+* Renders menu radio items for the player's available playback rates.
+*
+* @example
+* ```tsx
+* <PlaybackRateRadioGroup
+*   renderItem={(props, item) => (
+*     <Menu.RadioItem {...props}>
+*       {item.label}
+*       <Menu.ItemIndicator checked={item.checked} />
+*     </Menu.RadioItem>
+*   )}
+* />
+* ```
+*/
+const PlaybackRateRadioGroup = forwardRef(function PlaybackRateRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatRate, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const playbackRate = usePlaybackRateOptions({
+		label,
+		formatRate,
+		disabled
+	});
+	if (!playbackRate) return null;
+	const { state, value, options, setValue } = playbackRate;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? playbackRate.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-rate": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+//#endregion
+export { PlaybackRateRadioGroup };
+
+//# sourceMappingURL=playback-rate-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-radio-group.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport {\n  type PlaybackRateOption,\n  type PlaybackRateOptionsProps,\n  usePlaybackRateOptions,\n} from '../playback-rate/use-playback-rate-options';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n  /** Whether this playback rate is currently selected. */\n  checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Playback rate represented by the item. */\n  'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupProps\n  extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'>,\n    PlaybackRateOptionsProps {\n  /** Render one consumer-owned menu radio item for every playback rate. */\n  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's available playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateRadioGroup = forwardRef<HTMLDivElement, PlaybackRateRadioGroupProps>(\n  function PlaybackRateRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRate,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const playbackRate = usePlaybackRateOptions({ label, formatRate, disabled });\n    if (!playbackRate) return null;\n\n    const { state, value, options, setValue } = playbackRate;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rate': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\nexport namespace PlaybackRateRadioGroup {\n  export type Props = PlaybackRateRadioGroupProps;\n  export type State = PlaybackRateRadioGroupCore.State;\n  export type ItemProps = PlaybackRateRadioGroupItemProps;\n  export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,gBAAgB,cAAc;CAC5D,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,YACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,uBAAuB;EAAE;EAAO;EAAY;CAAS,CAAC;CAC3E,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UAqBiB,0BAA0B,wBAAwB;;cAKtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAiKR;OACH,QAAQ;OACR,QAAQ"}
+{"version":3,"file":"popover-popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"mappings":";;;UAWiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}