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

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

@@ -4,65 +4,101 @@ import { useMenuContext, useMenuPopupContext } from "./context.js";
 import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
 import { MenuContentDataAttrs } from "@videojs/core";
 import { isMenuNavigationKey } from "@videojs/core/dom";
-import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useLayoutEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 //#region src/ui/menu/content.tsx
 /** Accessible item and focus scope for exactly one root or nested menu page. */
-const MenuContent = forwardRef(function MenuContent({ render, className, style, onKeyDown, onBlur, ...elementProps }, forwardedRef) {
+const MenuContent = forwardRef(function MenuContent(t0, forwardedRef) {
+	const $ = c(18);
+	const { render, className, style, onKeyDown, onBlur, ...elementProps } = t0;
 	const { core, menu, parent, state, contentId } = useMenuContext();
 	const { popup, element: popupElement } = useMenuPopupContext();
 	const isSubmenu = parent !== null;
 	const isActive = isSubmenu && state.open;
 	const wasActiveRef = useRef(false);
 	const cleanupRegistrationRef = useRef(null);
-	useLayoutEffect(() => {
-		if (!isSubmenu) return void 0;
-		const wasActive = wasActiveRef.current;
-		wasActiveRef.current = isActive;
-		if (isActive && !wasActive) {
-			const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));
-			return () => cancelAnimationFrame(frame);
-		}
-	}, [
-		isActive,
-		isSubmenu,
-		menu
-	]);
-	const setContentElement = useCallback((element) => {
-		cleanupRegistrationRef.current?.();
-		cleanupRegistrationRef.current = null;
-		if (!element) {
-			if (isSubmenu) menu.setPopupElement(null);
-			return;
-		}
-		if (isSubmenu) menu.setPopupElement(element);
-		cleanupRegistrationRef.current = popup.registerContent({
-			menu,
-			parent: parent?.menu ?? null,
-			element
-		});
-	}, [
-		isSubmenu,
-		menu,
-		parent?.menu,
-		popup
-	]);
-	const composedRef = useComposedRefs(forwardedRef, setContentElement);
-	const handleKeyDown = useCallback((event) => {
-		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
-		const isNavigationKey = isMenuNavigationKey(event);
-		menu.contentProps.onKeyDown(event);
-		if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
-			event.preventDefault();
-			menu.close("escape");
-		}
-		if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
-	}, [
-		isSubmenu,
-		menu,
-		onKeyDown
-	]);
+	let t1;
+	let t2;
+	if ($[0] !== isActive || $[1] !== isSubmenu || $[2] !== menu) {
+		t1 = () => {
+			if (!isSubmenu) return;
+			const wasActive = wasActiveRef.current;
+			wasActiveRef.current = isActive;
+			if (isActive && !wasActive) {
+				const frame = requestAnimationFrame(() => menu.highlightInitialItem({ preventScroll: true }));
+				return () => cancelAnimationFrame(frame);
+			}
+		};
+		t2 = [
+			isActive,
+			isSubmenu,
+			menu
+		];
+		$[0] = isActive;
+		$[1] = isSubmenu;
+		$[2] = menu;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[5] !== isSubmenu || $[6] !== menu || $[7] !== parent?.menu || $[8] !== popup) {
+		t3 = (element) => {
+			cleanupRegistrationRef.current?.();
+			cleanupRegistrationRef.current = null;
+			if (!element) {
+				if (isSubmenu) menu.setPopupElement(null);
+				return;
+			}
+			if (isSubmenu) menu.setPopupElement(element);
+			cleanupRegistrationRef.current = popup.registerContent({
+				menu,
+				parent: parent?.menu ?? null,
+				element
+			});
+		};
+		$[5] = isSubmenu;
+		$[6] = menu;
+		$[7] = parent?.menu;
+		$[8] = popup;
+		$[9] = t3;
+	} else t3 = $[9];
+	parent?.menu;
+	const composedRef = useComposedRefs(forwardedRef, t3);
+	let t4;
+	if ($[10] !== isSubmenu || $[11] !== menu || $[12] !== onKeyDown) {
+		t4 = (event) => {
+			const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+			const isNavigationKey = isMenuNavigationKey(event);
+			menu.contentProps.onKeyDown(event);
+			if (isSubmenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPreventedByUser) {
+				event.preventDefault();
+				menu.close("escape");
+			}
+			if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
+		};
+		$[10] = isSubmenu;
+		$[11] = menu;
+		$[12] = onKeyDown;
+		$[13] = t4;
+	} else t4 = $[13];
+	const handleKeyDown = t4;
 	if (isSubmenu && !isActive && state.status !== "ending") return null;
+	let t5;
+	if ($[14] !== isSubmenu || $[15] !== menu || $[16] !== onBlur) {
+		t5 = (event_0) => {
+			onBlur?.(event_0);
+			if (isSubmenu) menu.contentProps.onFocusOut(event_0);
+		};
+		$[14] = isSubmenu;
+		$[15] = menu;
+		$[16] = onBlur;
+		$[17] = t5;
+	} else t5 = $[17];
 	const contentNode = renderElement("div", {
 		render,
 		className,
@@ -79,10 +115,7 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 			{
 				onKeyDownCapture: preventMenuKeyDefault,
 				onKeyDown: handleKeyDown,
-				onBlur: (event) => {
-					onBlur?.(event);
-					if (isSubmenu) menu.contentProps.onFocusOut(event);
-				}
+				onBlur: t5
 			},
 			elementProps
 		]
@@ -91,5 +124,3 @@ const MenuContent = forwardRef(function MenuContent({ render, className, style,
 });
 //#endregion
 export { MenuContent };
-
-//# sourceMappingURL=content.js.map

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

@@ -1,3 +1,4 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext, useLayoutEffect, useState } from "react";
 //#region src/ui/menu/context.tsx
 const MenuContext = createContext(null);
@@ -14,26 +15,47 @@ function useOptionalMenuContext() {
 }
 /** Publishes a specialized option group's selected value and availability to its enclosing menu. */
 function useMenuOptionState(state) {
+	const $ = c(8);
 	const setOptionState = useOptionalMenuContext()?.setOptionState;
-	const [source] = useState(() => Symbol("menu-option"));
+	const [source] = useState(_temp);
 	const { value, disabled, hidden, availability } = state;
-	useLayoutEffect(() => {
-		if (!setOptionState) return void 0;
-		setOptionState(source, {
-			value,
+	let t0;
+	let t1;
+	if ($[0] !== availability || $[1] !== disabled || $[2] !== hidden || $[3] !== setOptionState || $[4] !== source || $[5] !== value) {
+		t0 = () => {
+			if (!setOptionState) return;
+			setOptionState(source, {
+				value,
+				disabled,
+				hidden,
+				availability
+			});
+			return () => setOptionState(source, null);
+		};
+		t1 = [
+			availability,
 			disabled,
 			hidden,
-			availability
-		});
-		return () => setOptionState(source, null);
-	}, [
-		availability,
-		disabled,
-		hidden,
-		setOptionState,
-		source,
-		value
-	]);
+			setOptionState,
+			source,
+			value
+		];
+		$[0] = availability;
+		$[1] = disabled;
+		$[2] = hidden;
+		$[3] = setOptionState;
+		$[4] = source;
+		$[5] = value;
+		$[6] = t0;
+		$[7] = t1;
+	} else {
+		t0 = $[6];
+		t1 = $[7];
+	}
+	useLayoutEffect(t0, t1);
+}
+function _temp() {
+	return Symbol("menu-option");
 }
 const MenuPopupContext = createContext(null);
 const MenuPopupContextProvider = MenuPopupContext.Provider;
@@ -66,5 +88,3 @@ function useOptionalMenuTriggerChildContext() {
 }
 //#endregion
 export { MenuContextProvider, MenuGroupContextProvider, MenuPopupContextProvider, MenuRadioGroupContextProvider, MenuRadioItemContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuOptionState, useMenuPopupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuRadioItemContext, useOptionalMenuTriggerChildContext };
-
-//# sourceMappingURL=context.js.map

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

@@ -24,5 +24,3 @@ const MenuGroupLabel = forwardRef(function MenuGroupLabel({ render, className, s
 });
 //#endregion
 export { MenuGroupLabel };
-
-//# sourceMappingURL=group-label.js.map

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

@@ -1,23 +1,51 @@
 import { renderElement } from "../../utils/use-render.js";
 import { 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/group.tsx
 /** Groups related menu items. Renders a `<div>` with `role="group"`. */
-const MenuGroup = forwardRef(function MenuGroup({ render, className, style, ...elementProps }, forwardedRef) {
+const MenuGroup = forwardRef(function MenuGroup(t0, forwardedRef) {
+	const $ = c(12);
+	let className;
+	let elementProps;
+	let render;
+	let style;
+	if ($[0] !== t0) {
+		({render, className, style, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = elementProps;
+		$[3] = render;
+		$[4] = style;
+	} else {
+		className = $[1];
+		elementProps = $[2];
+		render = $[3];
+		style = $[4];
+	}
 	const { state } = useMenuContext();
-	return /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => renderElement("div", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		ref: [forwardedRef],
-		props: [getMenuGroupProps(labelId, elementProps), elementProps]
-	}) });
+	let t1;
+	if ($[5] !== className || $[6] !== elementProps || $[7] !== forwardedRef || $[8] !== render || $[9] !== state || $[10] !== style) {
+		t1 = /* @__PURE__ */ jsx(MenuGroupProvider, { children: (labelId) => renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef],
+			props: [getMenuGroupProps(labelId, elementProps), elementProps]
+		}) });
+		$[5] = className;
+		$[6] = elementProps;
+		$[7] = forwardedRef;
+		$[8] = render;
+		$[9] = state;
+		$[10] = style;
+		$[11] = t1;
+	} else t1 = $[11];
+	return t1;
 });
 //#endregion
 export { MenuGroup };
-
-//# sourceMappingURL=group.js.map

package/dist/default/ui/menu/index.parts.js

@@ -28,5 +28,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

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

@@ -19,5 +19,3 @@ const MenuItemIndicator = forwardRef(function MenuItemIndicator({ render, classN
 });
 //#endregion
 export { MenuItemIndicator };
-
-//# sourceMappingURL=item-indicator.js.map

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

@@ -1,50 +1,115 @@
 import { renderElement } from "../../utils/use-render.js";
 import { useMenuContext } 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/item.tsx
 /** A single action in the menu. Renders a `<div>` with `role="menuitem"`. */
-const MenuItem = forwardRef(function MenuItem({ render, className, style, onSelect, disabled, onClick, ...elementProps }, forwardedRef) {
+const MenuItem = forwardRef(function MenuItem(t0, forwardedRef) {
+	const $ = c(29);
+	let className;
+	let disabled;
+	let elementProps;
+	let onClick;
+	let onSelect;
+	let render;
+	let style;
+	if ($[0] !== t0) {
+		({render, className, style, onSelect, disabled, onClick, ...elementProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = disabled;
+		$[3] = elementProps;
+		$[4] = onClick;
+		$[5] = onSelect;
+		$[6] = render;
+		$[7] = style;
+	} else {
+		className = $[1];
+		disabled = $[2];
+		elementProps = $[3];
+		onClick = $[4];
+		onSelect = $[5];
+		render = $[6];
+		style = $[7];
+	}
 	const { menu, state } = useMenuContext();
 	const elementRef = useRef(null);
-	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;
-		onSelect?.();
-		completeMenuItemSelection(menu);
-	}, [
-		disabled,
-		onClick,
-		onSelect,
-		menu
-	]);
-	const handlePointerEnter = useCallback(() => {
-		const element = elementRef.current;
-		if (!element || disabled) return;
-		menu.highlight(element, {
-			focus: false,
-			pointer: true
+	let t1;
+	let t2;
+	if ($[8] !== menu) {
+		t1 = () => {
+			const element = elementRef.current;
+			if (!element) return;
+			return menu.registerItem(element);
+		};
+		t2 = [menu];
+		$[8] = menu;
+		$[9] = t1;
+		$[10] = t2;
+	} else {
+		t1 = $[9];
+		t2 = $[10];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[11] !== disabled || $[12] !== menu || $[13] !== onClick || $[14] !== onSelect) {
+		t3 = (event) => {
+			if (disabled) return;
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			onSelect?.();
+			completeMenuItemSelection(menu);
+		};
+		$[11] = disabled;
+		$[12] = menu;
+		$[13] = onClick;
+		$[14] = onSelect;
+		$[15] = t3;
+	} else t3 = $[15];
+	const handleClick = t3;
+	let t4;
+	if ($[16] !== disabled || $[17] !== menu) {
+		t4 = () => {
+			const element_0 = elementRef.current;
+			if (!element_0 || disabled) return;
+			menu.highlight(element_0, {
+				focus: false,
+				pointer: true
+			});
+		};
+		$[16] = disabled;
+		$[17] = menu;
+		$[18] = t4;
+	} else t4 = $[18];
+	const handlePointerEnter = t4;
+	let t5;
+	if ($[19] !== className || $[20] !== disabled || $[21] !== elementProps || $[22] !== forwardedRef || $[23] !== handleClick || $[24] !== handlePointerEnter || $[25] !== render || $[26] !== state || $[27] !== style) {
+		t5 = /* @__PURE__ */ jsx(MenuItemContent, {
+			disabled,
+			elementProps,
+			onClick: handleClick,
+			onPointerEnter: handlePointerEnter,
+			render,
+			className,
+			style,
+			state,
+			forwardedRef,
+			elementRef
 		});
-	}, [menu, disabled]);
-	return /* @__PURE__ */ jsx(MenuItemContent, {
-		disabled,
-		elementProps,
-		onClick: handleClick,
-		onPointerEnter: handlePointerEnter,
-		render,
-		className,
-		style,
-		state,
-		forwardedRef,
-		elementRef
-	});
+		$[19] = className;
+		$[20] = disabled;
+		$[21] = elementProps;
+		$[22] = forwardedRef;
+		$[23] = handleClick;
+		$[24] = handlePointerEnter;
+		$[25] = render;
+		$[26] = state;
+		$[27] = style;
+		$[28] = t5;
+	} else t5 = $[28];
+	return t5;
 });
 function MenuItemContent({ disabled, elementProps, onClick, onPointerEnter, render, className, style, state, forwardedRef, elementRef }) {
 	return renderElement("div", {
@@ -64,5 +129,3 @@ function MenuItemContent({ disabled, elementProps, onClick, onPointerEnter, rend
 }
 //#endregion
 export { MenuItem };
-
-//# sourceMappingURL=item.js.map

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

@@ -27,5 +27,3 @@ function callKeyDownHandler(handler, event) {
 }
 //#endregion
 export { callKeyDownHandler, preventMenuKeyDefault };
-
-//# sourceMappingURL=keyboard.js.map

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

@@ -5,37 +5,76 @@ import { MenuPopupContextProvider, useMenuContext } from "./context.js";
 import { usePopupPosition } from "../popover/use-popup-position.js";
 import { MenuPopupDataAttrs } from "@videojs/core";
 import { MenuPositioningCSSVars, createMenuPopup, getRootPositionOptions } from "@videojs/core/dom";
-import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/menu/popup.tsx
 /** Positioned menu surface that contains one or more sibling Content pages. */
-const MenuPopup = forwardRef(function MenuPopup({ render, className, style, onBlur, keepMounted = false, ...elementProps }, forwardedRef) {
+const MenuPopup = forwardRef(function MenuPopup(t0, forwardedRef) {
+	const $ = c(23);
+	const { render, className, style, onBlur, keepMounted: t1, ...elementProps } = t0;
+	const keepMounted = t1 === void 0 ? false : t1;
 	const { core, menu, parent, state, preferredSide, setPositionedSide, anchorName, boundary, container } = useMenuContext();
 	const [popup] = useState(createMenuPopup);
 	const [popupElement, setPopupElement] = useState(null);
 	const internalRef = useRef(null);
-	const setInternalElement = useCallback((element) => {
-		menu.setPopupElement(element);
-		popup.setElement(element);
-		setPopupElement(element);
-	}, [menu, popup]);
-	const composedRef = useComposedRefs(forwardedRef, internalRef, setInternalElement);
-	const positionOptions = useMemo(() => getRootPositionOptions(preferredSide, state.align), [preferredSide, state.align]);
-	const positioningStyle = usePopupPosition({
-		open: state.open,
-		anchorName,
-		position: positionOptions,
-		triggerSource: menu,
-		popupRef: internalRef,
-		boundary,
-		container,
-		cssVars: MenuPositioningCSSVars,
-		trackResize: false,
-		onSideChange: setPositionedSide
-	});
+	let t2;
+	if ($[0] !== menu || $[1] !== popup) {
+		t2 = (element) => {
+			menu.setPopupElement(element);
+			popup.setElement(element);
+			setPopupElement(element);
+		};
+		$[0] = menu;
+		$[1] = popup;
+		$[2] = t2;
+	} else t2 = $[2];
+	const composedRef = useComposedRefs(forwardedRef, internalRef, t2);
+	let t3;
+	if ($[3] !== preferredSide || $[4] !== state.align) {
+		t3 = getRootPositionOptions(preferredSide, state.align);
+		$[3] = preferredSide;
+		$[4] = state.align;
+		$[5] = t3;
+	} else t3 = $[5];
+	const positionOptions = t3;
+	let t4;
+	if ($[6] !== anchorName || $[7] !== boundary || $[8] !== container || $[9] !== menu || $[10] !== positionOptions || $[11] !== setPositionedSide || $[12] !== state.open) {
+		t4 = {
+			open: state.open,
+			anchorName,
+			position: positionOptions,
+			triggerSource: menu,
+			popupRef: internalRef,
+			boundary,
+			container,
+			cssVars: MenuPositioningCSSVars,
+			trackResize: false,
+			onSideChange: setPositionedSide
+		};
+		$[6] = anchorName;
+		$[7] = boundary;
+		$[8] = container;
+		$[9] = menu;
+		$[10] = positionOptions;
+		$[11] = setPositionedSide;
+		$[12] = state.open;
+		$[13] = t4;
+	} else t4 = $[13];
+	const positioningStyle = usePopupPosition(t4);
 	useDestroy(popup);
 	const inactive = !state.open && state.status !== "ending";
 	if (inactive && !keepMounted) return null;
+	let t5;
+	if ($[14] !== menu.contentProps || $[15] !== onBlur) {
+		t5 = (event) => {
+			onBlur?.(event);
+			menu.contentProps.onFocusOut(event);
+		};
+		$[14] = menu.contentProps;
+		$[15] = onBlur;
+		$[16] = t5;
+	} else t5 = $[16];
 	const popupNode = renderElement("div", {
 		render,
 		className,
@@ -49,10 +88,7 @@ const MenuPopup = forwardRef(function MenuPopup({ render, className, style, onBl
 				style: positioningStyle,
 				...core.getPopupAttrs()
 			},
-			{ onBlur: (event) => {
-				onBlur?.(event);
-				menu.contentProps.onFocusOut(event);
-			} },
+			{ onBlur: t5 },
 			elementProps,
 			{
 				hidden: inactive,
@@ -60,15 +96,27 @@ const MenuPopup = forwardRef(function MenuPopup({ render, className, style, onBl
 			}
 		]
 	});
-	return /* @__PURE__ */ jsx(MenuPopupContextProvider, {
-		value: {
+	let t6;
+	if ($[17] !== popup || $[18] !== popupElement) {
+		t6 = {
 			popup,
 			element: popupElement
-		},
-		children: popupNode
-	});
+		};
+		$[17] = popup;
+		$[18] = popupElement;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== popupNode || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(MenuPopupContextProvider, {
+			value: t6,
+			children: popupNode
+		});
+		$[20] = popupNode;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	return t7;
 });
 //#endregion
 export { MenuPopup };
-
-//# sourceMappingURL=popup.js.map