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

package/dist/default/ui/menu/radio-group.js

@@ -1,29 +1,65 @@
 import { renderElement } from "../../utils/use-render.js";
 import { MenuRadioGroupContextProvider, useMenuContext } from "./context.js";
 import { MenuGroupProvider, getMenuGroupProps } from "./use-menu-group.js";
+import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/radio-group.tsx
 /** A group of mutually exclusive radio items. Renders a `<div>` with `role="group"`. */
-const MenuRadioGroup = forwardRef(function MenuRadioGroup({ render, className, style, value, onValueChange, ...elementProps }, forwardedRef) {
+const MenuRadioGroup = forwardRef(function MenuRadioGroup(t0, forwardedRef) {
+	const $ = c(16);
+	let className;
+	let elementProps;
+	let onValueChange;
+	let render;
+	let style;
+	let value;
+	if ($[0] !== t0) {
+		({render, className, style, value, onValueChange, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = elementProps;
+		$[3] = onValueChange;
+		$[4] = render;
+		$[5] = style;
+		$[6] = value;
+	} else {
+		className = $[1];
+		elementProps = $[2];
+		onValueChange = $[3];
+		render = $[4];
+		style = $[5];
+		value = $[6];
+	}
 	const { state } = useMenuContext();
-	return /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => /* @__PURE__ */ jsx(MenuRadioGroupContextProvider, {
-		value: {
-			value,
-			onValueChange
-		},
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			ref: [forwardedRef],
-			props: [getMenuGroupProps(labelId, elementProps), elementProps]
-		})
-	}) });
+	let t1;
+	if ($[7] !== className || $[8] !== elementProps || $[9] !== forwardedRef || $[10] !== onValueChange || $[11] !== render || $[12] !== state || $[13] !== style || $[14] !== value) {
+		t1 = /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => /* @__PURE__ */ jsx(MenuRadioGroupContextProvider, {
+			value: {
+				value,
+				onValueChange
+			},
+			children: renderElement("div", {
+				render,
+				className,
+				style
+			}, {
+				state,
+				ref: [forwardedRef],
+				props: [getMenuGroupProps(labelId, elementProps), elementProps]
+			})
+		}) });
+		$[7] = className;
+		$[8] = elementProps;
+		$[9] = forwardedRef;
+		$[10] = onValueChange;
+		$[11] = render;
+		$[12] = state;
+		$[13] = style;
+		$[14] = value;
+		$[15] = t1;
+	} else t1 = $[15];
+	return t1;
 });
 //#endregion
 export { MenuRadioGroup };
-
-//# sourceMappingURL=radio-group.js.map

package/dist/default/ui/menu/radio-item.js

@@ -1,61 +1,95 @@
 import { renderElement } from "../../utils/use-render.js";
 import { MenuRadioItemContextProvider, useMenuContext, useMenuRadioGroupContext } from "./context.js";
 import { completeMenuItemSelection } from "@videojs/core/dom";
-import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/radio-item.tsx
 /** A radio-style menu item. Renders a `<div>` with `role="menuitemradio"`. */
-const MenuRadioItem = forwardRef(function MenuRadioItem({ render, className, style, value, disabled, onClick, ...elementProps }, forwardedRef) {
+const MenuRadioItem = forwardRef(function MenuRadioItem(t0, forwardedRef) {
+	const $ = c(16);
+	const { render, className, style, value, disabled, onClick, ...elementProps } = t0;
 	const { menu, state } = useMenuContext();
 	const { value: groupValue, onValueChange } = useMenuRadioGroupContext();
 	const elementRef = useRef(null);
 	const checked = groupValue === value;
-	useEffect(() => {
-		const element = elementRef.current;
-		if (!element) return;
-		return menu.registerItem(element);
-	}, [menu]);
-	const handleClick = useCallback((event) => {
-		if (disabled) return;
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		onValueChange(value);
-		completeMenuItemSelection(menu);
-	}, [
-		disabled,
-		onClick,
-		onValueChange,
-		value,
-		menu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || disabled) return;
-		menu.highlight(element, {
-			focus: false,
-			pointer: true
-		});
-	}, [menu, disabled]);
-	return /* @__PURE__ */ jsx(MenuRadioItemContextProvider, {
-		value: checked,
-		children: renderElement("div", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			ref: [forwardedRef, elementRef],
-			props: [{
-				role: "menuitemradio",
-				"aria-checked": checked,
-				"aria-disabled": disabled ? true : void 0,
-				onClick: handleClick,
-				onPointerEnter: handlePointerEnter
-			}, elementProps]
-		})
+	let t1;
+	let t2;
+	if ($[0] !== menu) {
+		t1 = () => {
+			const element = elementRef.current;
+			if (!element) return;
+			return menu.registerItem(element);
+		};
+		t2 = [menu];
+		$[0] = menu;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== disabled || $[4] !== menu || $[5] !== onClick || $[6] !== onValueChange || $[7] !== value) {
+		t3 = (event) => {
+			if (disabled) return;
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			onValueChange(value);
+			completeMenuItemSelection(menu);
+		};
+		$[3] = disabled;
+		$[4] = menu;
+		$[5] = onClick;
+		$[6] = onValueChange;
+		$[7] = value;
+		$[8] = t3;
+	} else t3 = $[8];
+	const handleClick = t3;
+	let t4;
+	if ($[9] !== disabled || $[10] !== menu) {
+		t4 = () => {
+			const element_0 = elementRef.current;
+			if (!element_0 || disabled) return;
+			menu.highlight(element_0, {
+				focus: false,
+				pointer: true
+			});
+		};
+		$[9] = disabled;
+		$[10] = menu;
+		$[11] = t4;
+	} else t4 = $[11];
+	const handlePointerEnter = t4;
+	const T0 = MenuRadioItemContextProvider;
+	const t5 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [{
+			role: "menuitemradio",
+			"aria-checked": checked,
+			"aria-disabled": disabled ? true : void 0,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter
+		}, elementProps]
 	});
+	let t6;
+	if ($[12] !== T0 || $[13] !== checked || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			value: checked,
+			children: t5
+		});
+		$[12] = T0;
+		$[13] = checked;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 });
 //#endregion
 export { MenuRadioItem };
-
-//# sourceMappingURL=radio-item.js.map

package/dist/default/ui/menu/root.js

@@ -160,5 +160,3 @@ function isSameOptionState(a, b) {
 }
 //#endregion
 export { MenuRoot };
-
-//# sourceMappingURL=root.js.map

package/dist/default/ui/menu/separator.js

@@ -17,5 +17,3 @@ const MenuSeparator = forwardRef(function MenuSeparator({ render, className, sty
 });
 //#endregion
 export { MenuSeparator };
-
-//# sourceMappingURL=separator.js.map

package/dist/default/ui/menu/trigger.js

@@ -3,7 +3,8 @@ import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
 import { useSafeId } from "../../utils/use-safe-id.js";
 import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
 import { isMenuNavigationKey } from "@videojs/core/dom";
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useRef } from "react";
 import { isInteractiveActivation } from "@videojs/utils/dom";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/trigger.tsx
@@ -11,7 +12,9 @@ import { jsx } from "react/jsx-runtime";
 * 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 opens the submenu on click or ArrowRight.
 */
-const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+const MenuTrigger = forwardRef(function MenuTrigger(t0, forwardedRef) {
+	const $ = c(37);
+	const { render, className, style, disabled, onClick, onKeyDown, ...elementProps } = t0;
 	const { core, menu, parent, state, contentId, optionState } = useMenuContext();
 	const resolvedDisabled = disabled || optionState?.disabled || false;
 	const isSubMenuTrigger = parent !== null;
@@ -19,120 +22,199 @@ const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style,
 	const elementRef = useRef(null);
 	const triggerId = useSafeId("sub-trigger");
 	const parentMenuApi = parent?.menu ?? null;
-	useEffect(() => {
-		if (!isSubMenuTrigger || !parentMenuApi) return;
-		const element = elementRef.current;
-		if (!element) return;
-		menu.setTriggerElement(element);
-		const unregister = parentMenuApi.registerItem(element);
-		return () => {
-			unregister();
-			menu.setTriggerElement(null);
+	let t1;
+	let t2;
+	if ($[0] !== isSubMenuTrigger || $[1] !== menu || $[2] !== parentMenuApi) {
+		t1 = () => {
+			if (!isSubMenuTrigger || !parentMenuApi) return;
+			const element = elementRef.current;
+			if (!element) return;
+			menu.setTriggerElement(element);
+			const unregister = parentMenuApi.registerItem(element);
+			return () => {
+				unregister();
+				menu.setTriggerElement(null);
+			};
 		};
-	}, [
-		isSubMenuTrigger,
-		menu,
-		parentMenuApi
-	]);
-	const openSubMenu = useCallback(() => {
-		if (!resolvedDisabled) menu.open("click");
-	}, [resolvedDisabled, menu]);
-	const handleSubMenuClick = useCallback((event) => {
-		onClick?.(event);
-		if (event.defaultPrevented) return;
-		openSubMenu();
-	}, [onClick, openSubMenu]);
-	const handleSubMenuKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) return;
-		if (event.key === "ArrowRight") {
-			event.preventDefault();
+		t2 = [
+			isSubMenuTrigger,
+			menu,
+			parentMenuApi
+		];
+		$[0] = isSubMenuTrigger;
+		$[1] = menu;
+		$[2] = parentMenuApi;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[5] !== menu || $[6] !== resolvedDisabled) {
+		t3 = () => {
+			if (!resolvedDisabled) menu.open("click");
+		};
+		$[5] = menu;
+		$[6] = resolvedDisabled;
+		$[7] = t3;
+	} else t3 = $[7];
+	const openSubMenu = t3;
+	let t4;
+	if ($[8] !== onClick || $[9] !== openSubMenu) {
+		t4 = (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
 			openSubMenu();
-		}
-	}, [
-		resolvedDisabled,
-		onKeyDown,
-		openSubMenu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || resolvedDisabled || !parentMenuApi) return;
-		parentMenuApi.highlight(element, {
-			focus: false,
-			pointer: true
+		};
+		$[8] = onClick;
+		$[9] = openSubMenu;
+		$[10] = t4;
+	} else t4 = $[10];
+	const handleSubMenuClick = t4;
+	let t5;
+	if ($[11] !== onKeyDown || $[12] !== openSubMenu || $[13] !== resolvedDisabled) {
+		t5 = (event_0) => {
+			const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event_0);
+			if (resolvedDisabled || defaultPreventedByUser) return;
+			if (event_0.key === "ArrowRight") {
+				event_0.preventDefault();
+				openSubMenu();
+			}
+		};
+		$[11] = onKeyDown;
+		$[12] = openSubMenu;
+		$[13] = resolvedDisabled;
+		$[14] = t5;
+	} else t5 = $[14];
+	const handleSubMenuKeyDown = t5;
+	let t6;
+	if ($[15] !== parentMenuApi || $[16] !== resolvedDisabled) {
+		t6 = () => {
+			const element_0 = elementRef.current;
+			if (!element_0 || resolvedDisabled || !parentMenuApi) return;
+			parentMenuApi.highlight(element_0, {
+				focus: false,
+				pointer: true
+			});
+		};
+		$[15] = parentMenuApi;
+		$[16] = resolvedDisabled;
+		$[17] = t6;
+	} else t6 = $[17];
+	const handlePointerEnter = t6;
+	let t7;
+	if ($[18] !== menu) {
+		t7 = (element_1) => {
+			menu.setTriggerElement(element_1);
+		};
+		$[18] = menu;
+		$[19] = t7;
+	} else t7 = $[19];
+	const triggerRef = t7;
+	let t8;
+	if ($[20] !== menu.triggerProps || $[21] !== onKeyDown || $[22] !== resolvedDisabled) {
+		t8 = (event_1) => {
+			const defaultPreventedByUser_0 = callKeyDownHandler(onKeyDown, event_1);
+			if (resolvedDisabled || defaultPreventedByUser_0) {
+				if (resolvedDisabled && isMenuNavigationKey(event_1)) event_1.preventDefault();
+				return;
+			}
+			if (isInteractiveActivation(event_1.nativeEvent)) {
+				event_1.preventDefault();
+				menu.triggerProps.onClick(event_1.nativeEvent);
+				return;
+			}
+			menu.triggerProps.onKeyDown(event_1);
+		};
+		$[20] = menu.triggerProps;
+		$[21] = onKeyDown;
+		$[22] = resolvedDisabled;
+		$[23] = t8;
+	} else t8 = $[23];
+	const handleRootKeyDown = t8;
+	let t9;
+	if ($[24] !== menu.triggerProps || $[25] !== resolvedDisabled) {
+		t9 = resolvedDisabled ? _temp : menu.triggerProps.onClick;
+		$[24] = menu.triggerProps;
+		$[25] = resolvedDisabled;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== handleRootKeyDown || $[28] !== t9) {
+		t10 = {
+			onClick: t9,
+			onKeyDown: handleRootKeyDown
+		};
+		$[27] = handleRootKeyDown;
+		$[28] = t9;
+		$[29] = t10;
+	} else t10 = $[29];
+	const rootTriggerProps = t10;
+	if (isSubMenuTrigger) {
+		let t11;
+		if ($[30] !== controlledId || $[31] !== core || $[32] !== state) {
+			t11 = core.getTriggerAttrs(state, controlledId);
+			$[30] = controlledId;
+			$[31] = core;
+			$[32] = state;
+			$[33] = t11;
+		} else t11 = $[33];
+		return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+			render,
+			className,
+			style,
+			disabled: resolvedDisabled,
+			elementProps,
+			forwardedRef,
+			elementRef,
+			triggerId,
+			triggerAttrs: t11,
+			availability: optionState?.availability,
+			hidden: optionState?.hidden,
+			state,
+			onSubMenuClick: handleSubMenuClick,
+			onSubMenuKeyDown: handleSubMenuKeyDown,
+			onPointerEnter: handlePointerEnter
 		});
-	}, [resolvedDisabled, parentMenuApi]);
-	const triggerRef = useCallback((element) => {
-		menu.setTriggerElement(element);
-	}, [menu]);
-	const handleRootKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		if (resolvedDisabled || defaultPreventedByUser) {
-			if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();
-			return;
-		}
-		if (isInteractiveActivation(event.nativeEvent)) {
-			event.preventDefault();
-			menu.triggerProps.onClick(event.nativeEvent);
-			return;
-		}
-		menu.triggerProps.onKeyDown(event);
-	}, [
-		resolvedDisabled,
-		menu.triggerProps,
-		onKeyDown
-	]);
-	const rootTriggerProps = useMemo(() => ({
-		onClick: resolvedDisabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
-		onKeyDown: handleRootKeyDown
-	}), [
-		resolvedDisabled,
-		handleRootKeyDown,
-		menu.triggerProps
-	]);
-	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+	}
+	const T0 = MenuTriggerChildContextProvider;
+	const t11 = true;
+	const t12 = renderElement("button", {
 		render,
 		className,
-		style,
-		disabled: resolvedDisabled,
-		elementProps,
-		forwardedRef,
-		elementRef,
-		triggerId,
-		triggerAttrs: core.getTriggerAttrs(state, controlledId),
-		availability: optionState?.availability,
-		hidden: optionState?.hidden,
+		style
+	}, {
 		state,
-		onSubMenuClick: handleSubMenuClick,
-		onSubMenuKeyDown: handleSubMenuKeyDown,
-		onPointerEnter: handlePointerEnter
-	});
-	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
-		value: true,
-		children: renderElement("button", {
-			render,
-			className,
-			style
-		}, {
-			state,
-			ref: [forwardedRef, triggerRef],
-			props: [
-				{
-					type: "button",
-					...core.getTriggerAttrs(state, controlledId)
-				},
-				resolvedDisabled ? {
-					disabled: true,
-					"aria-disabled": "true"
-				} : void 0,
-				optionState ? { "data-availability": optionState.availability } : void 0,
-				state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
-				rootTriggerProps,
-				elementProps,
-				optionState?.hidden ? { hidden: true } : void 0
-			]
-		})
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, controlledId)
+			},
+			resolvedDisabled ? {
+				disabled: true,
+				"aria-disabled": "true"
+			} : void 0,
+			optionState ? { "data-availability": optionState.availability } : void 0,
+			state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+			rootTriggerProps,
+			elementProps,
+			optionState?.hidden ? { hidden: true } : void 0
+		]
 	});
+	let t13;
+	if ($[34] !== T0 || $[35] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T0, {
+			value: t11,
+			children: t12
+		});
+		$[34] = T0;
+		$[35] = t12;
+		$[36] = t13;
+	} else t13 = $[36];
+	return t13;
 });
 function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, availability, hidden, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
 	return renderElement("div", {
@@ -160,7 +242,8 @@ function MenuTriggerSubmenu({ render, className, style, disabled, elementProps,
 		]
 	});
 }
+function _temp(event_2) {
+	return event_2.preventDefault();
+}
 //#endregion
 export { MenuTrigger };
-
-//# sourceMappingURL=trigger.js.map

package/dist/default/ui/menu/use-menu-group.js

@@ -1,5 +1,6 @@
 import { MenuGroupContextProvider } from "./context.js";
-import { useCallback, useMemo, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/use-menu-group.tsx
 function hasExplicitLabel(elementProps) {
@@ -11,21 +12,44 @@ function getMenuGroupProps(labelId, elementProps) {
 		"aria-labelledby": hasExplicitLabel(elementProps) ? void 0 : labelId
 	};
 }
-function MenuGroupProvider({ children }) {
+function MenuGroupProvider(t0) {
+	const $ = c(7);
+	const { children } = t0;
 	const [labelId, setLabelId] = useState();
-	const registerLabel = useCallback((id) => {
-		setLabelId(id);
-		return () => {
-			setLabelId((current) => current === id ? void 0 : current);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (id) => {
+			setLabelId(id);
+			return () => {
+				setLabelId((current) => current === id ? void 0 : current);
+			};
 		};
-	}, []);
-	const value = useMemo(() => ({ registerLabel }), [registerLabel]);
-	return /* @__PURE__ */ jsx(MenuGroupContextProvider, {
-		value,
-		children: children(labelId)
-	});
+		$[0] = t1;
+	} else t1 = $[0];
+	const registerLabel = t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { registerLabel };
+		$[1] = t2;
+	} else t2 = $[1];
+	const value = t2;
+	let t3;
+	if ($[2] !== children || $[3] !== labelId) {
+		t3 = children(labelId);
+		$[2] = children;
+		$[3] = labelId;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MenuGroupContextProvider, {
+			value,
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
 }
 //#endregion
 export { MenuGroupProvider, getMenuGroupProps };
-
-//# sourceMappingURL=use-menu-group.js.map

package/dist/default/ui/mute-button/component.js

@@ -14,5 +14,3 @@ const MuteButton = createMediaButton({
 });
 //#endregion
 export { MuteButton };
-
-//# sourceMappingURL=component.js.map

package/dist/default/ui/pip-button/component.js

@@ -14,5 +14,3 @@ const PiPButton = createMediaButton({
 });
 //#endregion
 export { PiPButton };
-
-//# sourceMappingURL=component.js.map

package/dist/default/ui/play-button/component.js

@@ -28,5 +28,3 @@ const PlayButton = createMediaButton({
 });
 //#endregion
 export { PlayButton };
-
-//# sourceMappingURL=component.js.map

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

@@ -27,5 +27,3 @@ function usePlaybackRateOptions(props) {
 }
 //#endregion
 export { usePlaybackRateOptions };
-
-//# sourceMappingURL=use-playback-rate-options.js.map

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

@@ -28,5 +28,3 @@ const PlaybackRateButton = createMediaButton({
 });
 //#endregion
 export { PlaybackRateButton };
-
-//# sourceMappingURL=component.js.map