npm - @videojs/react - Versions diffs - 10.0.0-beta.26 → 10.0.0-beta.28 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1415) hide show

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

@@ -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 { isInteractiveActivation } 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,47 +57,55 @@ 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]);
-	const rootTriggerProps = useMemo(() => {
-		if (!disabled) return menu.triggerProps;
-		return {
-			onClick: (event) => {
-				event.preventDefault();
-			},
-			onKeyDown: (event) => {
-				const keyboardEvent = toUIKeyboardEvent(event);
-				if (event.key === "Enter" || event.key === " " || isMenuNavigationKey(keyboardEvent)) 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, {
+	}, [menu]);
+	const handleRootKeyDown = useCallback((event) => {
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (disabled || defaultPreventedByUser) {
+			if (disabled && isMenuNavigationKey(event)) event.preventDefault();
+			return;
+		}
+		if (isInteractiveActivation(event.nativeEvent)) {
+			event.preventDefault();
+			menu.triggerProps.onClick(event.nativeEvent);
+			return;
+		}
+		menu.triggerProps.onKeyDown(event);
+	}, [
+		disabled,
+		menu.triggerProps,
+		onKeyDown
+	]);
+	const rootTriggerProps = useMemo(() => ({
+		onClick: disabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
+		onKeyDown: handleRootKeyDown
+	}), [
+		disabled,
+		handleRootKeyDown,
+		menu.triggerProps
+	]);
+	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 +117,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 +129,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 CHANGED Viewed

	@@ -1 +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":"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"}
1	+ {"version":3,"file":"menu-trigger.js","names":[],"sources":["../../../../src/ui/menu/menu-trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } 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 { 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 handleRootKeyDown = useCallback(\n (event: React.KeyboardEvent<MenuTriggerElement>) => {\n const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n if (disabled \|\| defaultPreventedByUser) {\n if (disabled && isMenuNavigationKey(event)) event.preventDefault();\n return;\n }\n\n if (isInteractiveActivation(event.nativeEvent)) {\n event.preventDefault();\n menu.triggerProps.onClick(event.nativeEvent);\n return;\n }\n\n menu.triggerProps.onKeyDown(event);\n },\n [disabled, menu.triggerProps, onKeyDown]\n );\n\n const rootTriggerProps = useMemo(\n () => ({\n onClick: disabled ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault() : menu.triggerProps.onClick,\n onKeyDown: handleRootKeyDown,\n }),\n [disabled, handleRootKeyDown, menu.triggerProps]\n );\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/menu/use-menu-group.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { MenuGroupContextProvider } from "./context.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/dev/ui/menu/use-menu-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n children: (labelId: string \| undefined) => ReactElement \| null;\n}\n\ninterface MenuGroupElementProps {\n 'aria-label'?: unknown;\n 'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n return elementProps['aria-label'] !== undefined \|\| elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n labelId: string \| undefined,\n elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string \| undefined } {\n return {\n role: 'group',\n 'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement \| null {\n const [labelId, setLabelId] = useState<string>();\n\n const registerLabel = useCallback((id: string) => {\n setLabelId(id);\n\n return () => {\n setLabelId((current) => (current === id ? undefined : current));\n };\n }, []);\n\n const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":"~~;;;;;AAeA~~,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAIL,OAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAEnB;EAAI,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}
1	+ {"version":3,"file":"use-menu-group.js","names":[],"sources":["../../../../src/ui/menu/use-menu-group.tsx"],"sourcesContent":["import { type ReactElement, useCallback, useMemo, useState } from 'react';\n\nimport { MenuGroupContextProvider } from './context';\n\ninterface MenuGroupProviderProps {\n children: (labelId: string \| undefined) => ReactElement \| null;\n}\n\ninterface MenuGroupElementProps {\n 'aria-label'?: unknown;\n 'aria-labelledby'?: unknown;\n}\n\nfunction hasExplicitLabel(elementProps: MenuGroupElementProps): boolean {\n return elementProps['aria-label'] !== undefined \|\| elementProps['aria-labelledby'] !== undefined;\n}\n\nexport function getMenuGroupProps(\n labelId: string \| undefined,\n elementProps: MenuGroupElementProps\n): { role: 'group'; 'aria-labelledby'?: string \| undefined } {\n return {\n role: 'group',\n 'aria-labelledby': hasExplicitLabel(elementProps) ? undefined : labelId,\n };\n}\n\nexport function MenuGroupProvider({ children }: MenuGroupProviderProps): ReactElement \| null {\n const [labelId, setLabelId] = useState<string>();\n\n const registerLabel = useCallback((id: string) => {\n setLabelId(id);\n\n return () => {\n setLabelId((current) => (current === id ? undefined : current));\n };\n }, []);\n\n const value = useMemo(() => ({ registerLabel }), [registerLabel]);\n\n return <MenuGroupContextProvider value={value}>{children(labelId)}</MenuGroupContextProvider>;\n}\n"],"mappings":";;;;AAaA,SAAS,iBAAiB,cAA8C;CACtE,OAAO,aAAa,kBAAkB,KAAA,KAAa,aAAa,uBAAuB,KAAA;AACzF;AAEA,SAAgB,kBACd,SACA,cAC2D;CAC3D,OAAO;EACL,MAAM;EACN,mBAAmB,iBAAiB,YAAY,IAAI,KAAA,IAAY;CAClE;AACF;AAEA,SAAgB,kBAAkB,EAAE,YAAyD;CAC3F,MAAM,CAAC,SAAS,cAAc,SAAiB;CAE/C,MAAM,gBAAgB,aAAa,OAAe;EAChD,WAAW,EAAE;EAEb,aAAa;GACX,YAAY,YAAa,YAAY,KAAK,KAAA,IAAY,OAAQ;EAChE;CACF,GAAG,CAAC,CAAC;CAIL,OAAO,oBAAC,0BAAD;EAA0B,OAFnB,eAAe,EAAE,cAAc,IAAI,CAAC,aAAa,CAEnB;EAAI,UAAA,SAAS,OAAO;CAA4B,CAAA;AAC9F"}

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

	@@ -1 +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"}
1	+ {"version":3,"file":"mute-button.d.ts","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"mappings":";;;UAMiB,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 CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectVolume } from "@videojs/core/dom";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
@@ -10,7 +9,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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["import { 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":";;;;;AASA,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/pip-button/pip-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;~~UAQiB~~,uBAAuB,2BAA2B,cAAc,QAAQ,cAAc;;cAG1F,2BAAS,0BAAA,iCAAA,cAAA;kBAUL;OACH,QAAQ;OACR,QAAQ,cAAc"}
1	+ {"version":3,"file":"pip-button.d.ts","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"mappings":";;;UAMiB,uBAAuB,2BAA2B,cAAc,QAAQ,cAAc;;cAG1F,2BAAS,0BAAA,iCAAA,cAAA;kBAUL;OACH,QAAQ;OACR,QAAQ,cAAc"}

package/dist/dev/ui/pip-button/pip-button.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPiP } from "@videojs/core/dom";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";

package/dist/dev/ui/pip-button/pip-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n displayName: 'PiPButton',\n core: PiPButtonCore,\n stateAttrMap: PiPButtonDataAttrs,\n selector: selectPiP,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePictureInPicture',\n isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n export type Props = PiPButtonProps;\n export type State = PiPButtonCore.State;\n}\n"],"mappings":"~~;;;;;;AAWA~~,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}
1	+ {"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n displayName: 'PiPButton',\n core: PiPButtonCore,\n stateAttrMap: PiPButtonDataAttrs,\n selector: selectPiP,\n action: (core, state) => core.toggle(state),\n hotkeyAction: 'togglePictureInPicture',\n isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n export type Props = PiPButtonProps;\n export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,YAAY,kBAAiD;CACxE,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/play-button/play-button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;~~UAQiB~~,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;cAkB7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}
1	+ {"version":3,"file":"play-button.d.ts","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"mappings":";;;UAMiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;cAkB7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/play-button/play-button.js CHANGED Viewed

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlayback } from "@videojs/core/dom";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";

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

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"use-playback-rate-options.d.ts","names":[],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"mappings":";;;UAUiB,iCAAiC,2BAA2B;KAEjE,qBAAqB,sBAAsB;UAEtC;EACf,OAAO,2BAA2B;EAClC;EACA;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,UAAU;EACV,WAAW;;;;;;;;iBAgBG,uBAAuB,QAAQ,2BAA2B;kBAYzD;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -1,9 +1,14 @@
-"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 +16,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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"version":3,"file":"use-playback-rate-options.js","names":["PlaybackRateRadioGroupCoreClass"],"sources":["../../../../src/ui/playback-rate/use-playback-rate-options.ts"],"sourcesContent":["import {\n type PlaybackRateRadioGroupCore,\n PlaybackRateRadioGroupCore as PlaybackRateRadioGroupCoreClass,\n type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\nimport { useCallback } from 'react';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface PlaybackRateOptionsProps extends PlaybackRateRadioGroupCore.Props {}\n\nexport type PlaybackRateOption = TranslatedRadioOption<PlaybackRateRadioGroupOption>;\n\nexport interface PlaybackRateOptionsResult {\n state: PlaybackRateRadioGroupCore.State;\n label: string;\n rate: number;\n value: string;\n selectedLabel: string;\n options: PlaybackRateOption[];\n disabled: boolean;\n hidden: boolean;\n setRate: (rate: number) => void;\n setValue: (value: string) => void;\n}\n\nconst usePlaybackRateRadioOptions = createRadioOptionsHook({\n name: 'usePlaybackRateOptions',\n feature: 'playbackRate',\n selector: selectPlaybackRate,\n createCore: () => new PlaybackRateRadioGroupCoreClass(),\n});\n\n/*\n Create playback rate menu options from the player playback rate state.\n * Returns `null` when the playback rate feature is not configured.\n \n @param props - Optional `label`, `formatRate`, and `disabled` overrides.\n */\nexport function usePlaybackRateOptions(props?: PlaybackRateOptionsProps): PlaybackRateOptionsResult \| null {\n const result = usePlaybackRateRadioOptions(props);\n const setRate = useCallback((rate: number) => result?.setValue(String(rate)), [result?.setValue]);\n if (!result) return null;\n\n return {\n ...result,\n rate: result.state.rate,\n setRate,\n };\n}\n\nexport namespace usePlaybackRateOptions {\n export type Props = PlaybackRateOptionsProps;\n export type Result = PlaybackRateOptionsResult;\n export type Option = PlaybackRateOption;\n}\n"],"mappings":";;;;;AA2BA,MAAM,8BAA8B,uBAAuB;CACzD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAIA,2BAAgC;AACxD,CAAC;;;;;;;AAQD,SAAgB,uBAAuB,OAAoE;CACzG,MAAM,SAAS,4BAA4B,KAAK;CAChD,MAAM,UAAU,aAAa,SAAiB,QAAQ,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAChG,IAAI,CAAC,QAAQ,OAAO;CAEpB,OAAO;EACL,GAAG;EACH,MAAM,OAAO,MAAM;EACnB;CACF;AACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;~~UAQiB~~,gCACP,2BAA2B,uBAAuB,QACxD,uBAAuB;;;;;;;;;;;;;;;;;cAkBd,oCAAkB,0BAAA,0CAAA,cAAA;kBASd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}
1	+ {"version":3,"file":"playback-rate-button.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"mappings":";;;UAMiB,gCACP,2BAA2B,uBAAuB,QACxD,uBAAuB;;;;;;;;;;;;;;;;;cAkBd,oCAAkB,0BAAA,0CAAA,cAAA;kBASd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}

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

@@ -1,4 +1,3 @@
-"use client";
 import { createMediaButton } from "../create-media-button.js";
 import { selectPlaybackRate } from "@videojs/core/dom";
 import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["~~'use~~ ~~client';\n\nimport~~ { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n PlaybackRateButtonCore.Props {}\n\n/*\n A button that cycles through playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateButton />\n \n <PlaybackRateButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.rate}×\n * </button>\n * )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n displayName: 'PlaybackRateButton',\n core: PlaybackRateButtonCore,\n stateAttrMap: PlaybackRateButtonDataAttrs,\n selector: selectPlaybackRate,\n action: (core, state) => core.cycle(state),\n hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n export type Props = PlaybackRateButtonProps;\n export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;AA4BA~~,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}
1	+ {"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n PlaybackRateButtonCore.Props {}\n\n/*\n A button that cycles through playback rates.\n \n @example\n * ```tsx\n * <PlaybackRateButton />\n \n <PlaybackRateButton\n * render={(props, state) => (\n * <button {...props}>\n * {state.rate}×\n * </button>\n * )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n displayName: 'PlaybackRateButton',\n core: PlaybackRateButtonCore,\n stateAttrMap: PlaybackRateButtonDataAttrs,\n selector: selectPlaybackRate,\n action: (core, state) => core.cycle(state),\n hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n export type Props = PlaybackRateButtonProps;\n export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}

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

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

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

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

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

@@ -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 ADDED Viewed

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