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

package/dist/dev/ui/hotkey/use-hotkey.js

@@ -1,6 +1,7 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { createHotkey } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/hotkey/use-hotkey.ts
 /**
@@ -9,25 +10,50 @@ import { useEffect } from "react";
 * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.
 */
 function useHotkey(options) {
-	const { keys, target = "player", repeatable = true, disabled = false } = options;
+	const $ = c(13);
+	const { keys, target: t0, repeatable: t1, disabled: t2 } = options;
+	const target = t0 === void 0 ? "player" : t0;
+	const repeatable = t1 === void 0 ? true : t1;
+	const disabled = t2 === void 0 ? false : t2;
 	const container = useContainer();
 	const onActivateRef = useLatestRef(options.onActivate);
-	useEffect(() => {
-		if (!container || !keys || disabled) return;
-		return createHotkey(container, {
+	let t3;
+	if ($[0] !== container || $[1] !== disabled || $[2] !== keys || $[3] !== onActivateRef || $[4] !== repeatable || $[5] !== target) {
+		t3 = () => {
+			if (!container || !keys || disabled) return;
+			return createHotkey(container, {
+				keys,
+				target,
+				repeatable,
+				disabled,
+				onActivate: (event, key) => onActivateRef.current(event, key)
+			});
+		};
+		$[0] = container;
+		$[1] = disabled;
+		$[2] = keys;
+		$[3] = onActivateRef;
+		$[4] = repeatable;
+		$[5] = target;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== container || $[8] !== disabled || $[9] !== keys || $[10] !== repeatable || $[11] !== target) {
+		t4 = [
+			container,
 			keys,
 			target,
 			repeatable,
-			disabled,
-			onActivate: (event, key) => onActivateRef.current(event, key)
-		});
-	}, [
-		container,
-		keys,
-		target,
-		repeatable,
-		disabled
-	]);
+			disabled
+		];
+		$[7] = container;
+		$[8] = disabled;
+		$[9] = keys;
+		$[10] = repeatable;
+		$[11] = target;
+		$[12] = t4;
+	} else t4 = $[12];
+	useEffect(t3, t4);
 }
 //#endregion
 export { useHotkey };

package/dist/dev/ui/hotkey/use-hotkey.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n  keys: string;\n  onActivate: (event: KeyboardEvent, key: string) => void;\n  target?: 'player' | 'document';\n  repeatable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Registers a keyboard shortcut through the current player's hotkey coordinator.\n *\n * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n  const { keys, target = 'player', repeatable = true, disabled = false } = options;\n  const container = useContainer();\n  const onActivateRef = useLatestRef(options.onActivate);\n\n  useEffect(() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}
+{"version":3,"file":"use-hotkey.js","names":["target = 'player'","repeatable = true","disabled = false","() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }","[container, keys, target, repeatable, disabled]"],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n  keys: string;\n  onActivate: (event: KeyboardEvent, key: string) => void;\n  target?: 'player' | 'document';\n  repeatable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Registers a keyboard shortcut through the current player's hotkey coordinator.\n *\n * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n  const { keys, target = 'player', repeatable = true, disabled = false } = options;\n  const container = useContainer();\n  const onActivateRef = useLatestRef(options.onActivate);\n\n  useEffect(() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;;CACzD,MAAM,EAAE,MAAM,QAAA,IAAmB,YAAA,IAAmB,UAAA,OAAqB;CAA3D,MAAA,SAAA,OAAA,KAAA,IAAS,WAATA;CAAmB,MAAA,aAAA,OAAA,KAAA,IAAa,OAAbC;CAAmB,MAAA,WAAA,OAAA,KAAA,IAAW,QAAXC;CACpD,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAE3CC,IAAAA;CACH,IAAA,EAAA,OAAA,aAAA,EAAA,OAAsB,YAAA,EAAA,OAAR,QAAA,EAAA,OAOW,iBAAA,EAAA,OAF5B,cAAA,EAAA,OADA,QAAA;EALM,WAAM;GACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;GAErC,OAAO,aAAa,WAAW;IAC7B;IACA;IACA;IACA;IACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;GAC9D,CAAC;EACH;EATO,EAAA,KAAA;EAAsB,EAAA,KAAA;EAAR,EAAA,KAAA;EAOW,EAAA,KAAA;EAF5B,EAAA,KAAA;EADA,EAAA,KAAA;;;CAKDC,IAAAA;CAAC,IAAA,EAAA,OAAA,aAAA,EAAA,OAAqC,YAAA,EAAA,OAA1B,QAAA,EAAA,QAAc,cAAA,EAAA,QAAR,QAAA;EAAlB,KAAA;GAAC;GAAW;GAAM;GAAQ;GAAY;EAAQ;EAA7C,EAAA,KAAA;EAAqC,EAAA,KAAA;EAA1B,EAAA,KAAA;EAAc,EAAA,MAAA;EAAR,EAAA,MAAA;;;CAVrB,UAAUD,IAUPC,EAA+C;AACpD"}

package/dist/dev/ui/input-indicator/use-indicator-visibility.js

@@ -1,22 +1,49 @@
 import { useContainer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useEffect, useRef, useState } from "react";
 //#region src/ui/input-indicator/use-indicator-visibility.ts
 function useIndicatorVisibility(close) {
+	const $ = c(8);
 	const container = useContainer();
 	const closeRef = useLatestRef(close);
 	const coordinatorRef = useRef(null);
-	const [handle] = useState(() => ({ close: () => closeRef.current() }));
-	useEffect(() => {
-		if (!container) return;
-		const coordinator = getIndicatorVisibilityCoordinator(container);
-		coordinatorRef.current = coordinator;
-		return coordinator.register(handle);
-	}, [container, handle]);
-	return useCallback(() => {
-		coordinatorRef.current?.show(handle);
-	}, [handle]);
+	let t0;
+	if ($[0] !== closeRef) {
+		t0 = () => ({ close: () => closeRef.current() });
+		$[0] = closeRef;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [handle] = useState(t0);
+	let t1;
+	let t2;
+	if ($[2] !== container || $[3] !== handle) {
+		t1 = () => {
+			if (!container) return;
+			const coordinator = getIndicatorVisibilityCoordinator(container);
+			coordinatorRef.current = coordinator;
+			return coordinator.register(handle);
+		};
+		t2 = [container, handle];
+		$[2] = container;
+		$[3] = handle;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[6] !== handle) {
+		t3 = () => {
+			coordinatorRef.current?.show(handle);
+		};
+		$[6] = handle;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 }
 //#endregion
 export { useIndicatorVisibility };

package/dist/dev/ui/input-indicator/use-indicator-visibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAE/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}
+{"version":3,"file":"use-indicator-visibility.js","names":["() => ({\n    close: () => closeRef.current(),\n  })","() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }","[container, handle]","() => {\n    coordinatorRef.current?.show(handle);\n  }","useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle])"],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;;AAOA,SAAgB,uBAAuB,OAA+B;;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC1CA,IAAAA;CACtC,IAAA,EAAA,OAAA,UAAA;EADsC,YAAO,EAC1D,aAAa,SAAS,QAAQ,EAChC;EADe,EAAA,KAAA;;;CADf,MAAM,CAAC,UAAU,SAAoCA,EAEnD;CAEQC,IAAAA;CAQPC,IAAAA;CAPI,IAAA,EAAA,OAAA,aAAA,EAAA,OAMuB,QAAA;EAPpB,WAAM;GACd,IAAI,CAAC,WAAW;GAEhB,MAAM,cAAc,kCAAkC,SAAS;GAE/D,eAAe,UAAU;GAEzB,OAAO,YAAY,SAAS,MAAM;EACpC;EAAG,KAAA,CAAC,WAAW,MAAM;EAPd,EAAA,KAAA;EAMuB,EAAA,KAAA;;;;;;;CAP9B,UAAUD,IAQPC,EAAmB;CAEHC,IAAAA;CACY,IAAA,EAAA,OAAA,QAAA;EADZ,WAAM;GACvB,eAAe,SAAS,KAAK,MAAM;EACrC;EAD+B,EAAA,KAAA;;;CAD/B,OAAOC;AAGT"}

package/dist/dev/ui/input-indicator/use-input-action-subscription.js

@@ -1,19 +1,35 @@
 import { useContainer, usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/ui/input-indicator/use-input-action-subscription.ts
 function useInputActionSubscription(callback) {
+	const $ = c(6);
 	const container = useContainer();
 	const store = usePlayer();
 	const callbackRef = useLatestRef(callback);
 	const storeRef = useLatestRef(store);
-	useEffect(() => {
-		if (!container) return;
-		return subscribeToInputActions(container, (event) => {
-			callbackRef.current(event, getMediaSnapshot(storeRef.current));
-		});
-	}, [container]);
+	let t0;
+	if ($[0] !== callbackRef || $[1] !== container || $[2] !== storeRef) {
+		t0 = () => {
+			if (!container) return;
+			return subscribeToInputActions(container, (event) => {
+				callbackRef.current(event, getMediaSnapshot(storeRef.current));
+			});
+		};
+		$[0] = callbackRef;
+		$[1] = container;
+		$[2] = storeRef;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== container) {
+		t1 = [container];
+		$[4] = container;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
 }
 //#endregion
 export { useInputActionSubscription };

package/dist/dev/ui/input-indicator/use-input-action-subscription.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}
+{"version":3,"file":"use-input-action-subscription.js","names":["() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }","storeRef.current","[container]"],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;;AAOA,SAAgB,2BAA2B,UAA4E;;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEzBA,IAAAA;CAIN,IAAA,EAAA,OAAA,eAAA,EAAA,OAHG,aAAA,EAAA,OAGyCC,UAAAA;EAJtC,WAAM;GACd,IAAI,CAAC,WAAW;GAEhB,OAAO,wBAAwB,YAAY,UAAU;IACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;GAC/D,CAAC;EACH;EAFI,EAAA,KAAA;EAHG,EAAA,KAAA;EAGyCA,EAAAA,KAAAA;;;CAE7CC,IAAAA;CAAC,IAAA,EAAA,OAAA,WAAA;EAAD,KAAA,CAAC,SAAS;EAAT,EAAA,KAAA;;;CANJ,UAAUF,IAMPE,EAAW;AAChB"}

package/dist/dev/ui/input-indicator/use-input-indicator-root.js

@@ -2,17 +2,50 @@ import { useDestroy } from "../../utils/use-destroy.js";
 import { useIndicatorVisibility } from "./use-indicator-visibility.js";
 import { useInputActionSubscription } from "./use-input-action-subscription.js";
 import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
+import { c } from "react-compiler-runtime";
 import { useState, useSyncExternalStore } from "react";
 //#region src/ui/input-indicator/use-input-indicator-root.ts
 function useInputIndicatorRoot(createCore, props, options) {
+	const $ = c(10);
 	const [core] = useState(createCore);
 	useDestroy(core);
 	core.setProps(props);
-	const showIndicator = useIndicatorVisibility(() => core.close());
-	useInputActionSubscription((event, snapshot) => {
-		if (core.processEvent(event, snapshot)) showIndicator();
-	});
-	const currentState = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	let t0;
+	if ($[0] !== core) {
+		t0 = () => core.close();
+		$[0] = core;
+		$[1] = t0;
+	} else t0 = $[1];
+	const showIndicator = useIndicatorVisibility(t0);
+	let t1;
+	if ($[2] !== core || $[3] !== showIndicator) {
+		t1 = (event, snapshot) => {
+			if (core.processEvent(event, snapshot)) showIndicator();
+		};
+		$[2] = core;
+		$[3] = showIndicator;
+		$[4] = t1;
+	} else t1 = $[4];
+	useInputActionSubscription(t1);
+	let t2;
+	if ($[5] !== core.state) {
+		t2 = (callback) => core.state.subscribe(callback);
+		$[5] = core.state;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	let t4;
+	if ($[7] !== core.state.current) {
+		t3 = () => core.state.current;
+		t4 = () => core.state.current;
+		$[7] = core.state.current;
+		$[8] = t3;
+		$[9] = t4;
+	} else {
+		t3 = $[8];
+		t4 = $[9];
+	}
+	const currentState = useSyncExternalStore(t2, t3, t4);
 	return useRenderedIndicatorState(currentState, options);
 }
 //#endregion

package/dist/dev/ui/input-indicator/use-input-indicator-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAED,MAAM,eAAe,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}
+{"version":3,"file":"use-input-indicator-root.js","names":["() => core.close()","(event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  }","(callback) => core.state.subscribe(callback)","state","() => core.state.current","current"],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CAC0BA,IAAAA;CAAM,IAAA,EAAA,OAAA,MAAA;EAAN,WAAM,KAAK,MAAM;EAAX,EAAA,KAAA;;;CAAnD,MAAM,gBAAgB,uBAAuBA,EAAkB;CAEpCC,IAAAA;CACrB,IAAA,EAAA,OAAA,QAAA,EAAA,OAAoC,eAAA;EADf,MAAC,OAAO,aAAa;GAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;EACxD;EADM,EAAA,KAAA;EAAoC,EAAA,KAAA;;;CAD1C,2BAA2BA,EAE1B;CAGCC,IAAAA;CAAmBC,IAAAA,EAAAA,OAAAA,KAAAA,OAAAA;EAAnB,MAAC,aAAa,KAAK,MAAM,UAAU,QAAQ;EAAxBA,EAAAA,KAAAA,KAAAA;;;CACnBC,IAAAA;CACAA,IAAAA;CADiBC,IAAAA,EAAAA,OAAAA,KAAN,MAAM,SAAA;EAAjB,WAAM,KAAK,MAAM;EACjB,WAAM,KAAK,MAAM;EADAA,EAAAA,KAAAA,KAAN,MAAM;;;;;;;CAFnB,MAAM,eAAe,qBACnBH,IACAE,IACAA,EACF;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}

package/dist/dev/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
 		]

package/dist/dev/ui/menu/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","names":[],"sources":["../../../../src/ui/menu/content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const { popup, element: popupElement } = useMenuPopupContext();\n  const isSubmenu = parent !== null;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n  const cleanupRegistrationRef = useRef<(() => void) | null>(null);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightFirstItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    },\n    [isSubmenu, menu, parent?.menu, popup]\n  );\n  const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    },\n    [isSubmenu, menu, onKeyDown]\n  );\n\n  const inactive = isSubmenu && !isActive && state.status !== 'ending';\n  if (inactive) return null;\n\n  const contentNode = renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MenuContentDataAttrs,\n      ref: composedRef,\n      props: [\n        { id: contentId, ...core.getContentAttrs() },\n        {\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: handleKeyDown,\n          onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          },\n        },\n        elementProps,\n      ],\n    }\n  );\n\n  return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,gBAClD,cACA;CACA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/D,sBAAsB;EACpB,IAAI,CAAC,WAAW,OAAO,KAAA;EAEvB,MAAM,YAAY,aAAa;EAE/B,aAAa,UAAU;EAEvB,IAAI,YAAY,CAAC,WAAW;GAC1B,MAAM,QAAQ,4BAA4B,KAAK,mBAAmB,EAAE,eAAe,KAAK,CAAC,CAAC;GAE1F,aAAa,qBAAqB,KAAK;EACzC;CAGF,GAAG;EAAC;EAAU;EAAW;CAAI,CAAC;CAE9B,MAAM,oBAAoB,aACvB,YAAmC;EAClC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAEjC,IAAI,CAAC,SAAS;GACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;GAExC;EACF;EAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;EAE3C,uBAAuB,UAAU,MAAM,gBAAgB;GACrD;GACA,QAAQ,QAAQ,QAAQ;GACxB;EACF,CAAC;CACH,GACA;EAAC;EAAW;EAAM,QAAQ;EAAM;CAAK,CACvC;CACA,MAAM,cAAc,gBAAgB,cAAc,iBAAiB;CAEnE,MAAM,gBAAgB,aACnB,UAA+C;EAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;EACA,MAAM,kBAAkB,oBAAoB,KAAK;EAEjD,KAAK,aAAa,UAAU,KAAK;EAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;GACjG,MAAM,eAAe;GACrB,KAAK,MAAM,QAAQ;EACrB;EAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;CACvE,GACA;EAAC;EAAW;EAAM;CAAS,CAC7B;CAGA,IADiB,aAAa,CAAC,YAAY,MAAM,WAAW,UAC9C,OAAO;CAErB,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,SAAS,UAA4C;KACnD,SAAS,KAAK;KAEd,IAAI,WAAW,KAAK,aAAa,WAAW,KAAK;IACnD;GACF;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}
+{"version":3,"file":"content.js","names":["{ render, className, style, onKeyDown, onBlur, ...elementProps }","() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightInitialItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }","[isActive, isSubmenu, menu]","(element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    }","menu","useCallback(\n    (element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    },\n    [isSubmenu, menu, parent?.menu, popup]\n  )","(event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    }","menu.contentProps","useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    },\n    [isSubmenu, menu, onKeyDown]\n  )","(event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          }","event"],"sources":["../../../../src/ui/menu/content.tsx"],"sourcesContent":["import { MenuContentDataAttrs, type MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuContext, useMenuPopupContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\nexport interface MenuContentProps extends UIComponentProps<'div', MenuState> {}\n\n/** Accessible item and focus scope for exactly one root or nested menu page. */\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(function MenuContent(\n  { render, className, style, onKeyDown, onBlur, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId } = useMenuContext();\n  const { popup, element: popupElement } = useMenuPopupContext();\n  const isSubmenu = parent !== null;\n  const isActive = isSubmenu && state.open;\n  const wasActiveRef = useRef(false);\n  const cleanupRegistrationRef = useRef<(() => void) | null>(null);\n\n  useLayoutEffect(() => {\n    if (!isSubmenu) return undefined;\n\n    const wasActive = wasActiveRef.current;\n\n    wasActiveRef.current = isActive;\n\n    if (isActive && !wasActive) {\n      const frame = requestAnimationFrame(() => menu.highlightInitialItem({ preventScroll: true }));\n\n      return () => cancelAnimationFrame(frame);\n    }\n\n    return undefined;\n  }, [isActive, isSubmenu, menu]);\n\n  const setContentElement = useCallback(\n    (element: HTMLDivElement | null) => {\n      cleanupRegistrationRef.current?.();\n      cleanupRegistrationRef.current = null;\n\n      if (!element) {\n        if (isSubmenu) menu.setPopupElement(null);\n\n        return;\n      }\n\n      if (isSubmenu) menu.setPopupElement(element);\n\n      cleanupRegistrationRef.current = popup.registerContent({\n        menu,\n        parent: parent?.menu ?? null,\n        element,\n      });\n    },\n    [isSubmenu, menu, parent?.menu, popup]\n  );\n  const composedRef = useComposedRefs(forwardedRef, setContentElement);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(\n        onKeyDown as React.KeyboardEventHandler<HTMLDivElement> | undefined,\n        event\n      );\n      const isNavigationKey = isMenuNavigationKey(event);\n\n      menu.contentProps.onKeyDown(event);\n\n      if (isSubmenu && (event.key === 'ArrowLeft' || event.key === 'Escape') && !defaultPreventedByUser) {\n        event.preventDefault();\n        menu.close('escape');\n      }\n\n      if (event.key !== 'Escape' && isNavigationKey) event.stopPropagation();\n    },\n    [isSubmenu, menu, onKeyDown]\n  );\n\n  const inactive = isSubmenu && !isActive && state.status !== 'ending';\n  if (inactive) return null;\n\n  const contentNode = renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MenuContentDataAttrs,\n      ref: composedRef,\n      props: [\n        { id: contentId, ...core.getContentAttrs() },\n        {\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: handleKeyDown,\n          onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n            onBlur?.(event);\n\n            if (isSubmenu) menu.contentProps.onFocusOut(event);\n          },\n        },\n        elementProps,\n      ],\n    }\n  );\n\n  return isSubmenu && popupElement ? createPortal(contentNode, popupElement) : contentNode;\n});\n\nexport namespace MenuContent {\n  export type Props = MenuContentProps;\n  export type State = MenuState;\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,cAAc,WAA6C,SAAS,YAAA,IAE/E,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,WAAW,QAAQ,GAAG,iBAAlDA;CAGA,MAAM,EAAE,MAAM,MAAM,QAAQ,OAAO,cAAc,eAAe;CAChE,MAAM,EAAE,OAAO,SAAS,iBAAiB,oBAAoB;CAC7D,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,yBAAyB,OAA4B,IAAI;CAE/CC,IAAAA;CAcbC,IAAAA;CATsB,IAAA,EAAA,OAAA,YAAA,EAAA,OAJlB,aAAA,EAAA,OAOuC,MAAA;EAR9B,WAAM;GACpB,IAAI,CAAC,WAAW;GAEhB,MAAM,YAAY,aAAa;GAE/B,aAAa,UAAU;GAEvB,IAAI,YAAY,CAAC,WAAW;IAC1B,MAAM,QAAQ,4BAA4B,KAAK,qBAAqB,EAAE,eAAe,KAAK,CAAC,CAAC;IAE5F,aAAa,qBAAqB,KAAK;GACzC;EAGF;EAAG,KAAA;GAAC;GAAU;GAAW;EAAI;EATJ,EAAA,KAAA;EAJlB,EAAA,KAAA;EAOuC,EAAA,KAAA;;;;;;;CAR9C,gBAAgBD,IAcbC,EAA2B;CAG5BC,IAAAA;CAKQ,IAAA,EAAA,OAAA,aAAA,EAAA,OAAW,QAAA,EAAA,OASCC,QAAAA,QAAAA,EAAAA,OAFe,OAAA;EAZnC,MAAC,YAAmC;GAClC,uBAAuB,UAAU;GACjC,uBAAuB,UAAU;GAEjC,IAAI,CAAC,SAAS;IACZ,IAAI,WAAW,KAAK,gBAAgB,IAAI;IAExC;GACF;GAEA,IAAI,WAAW,KAAK,gBAAgB,OAAO;GAE3C,uBAAuB,UAAU,MAAM,gBAAgB;IACrD;IACA,QAAQ,QAAQ,QAAQ;IACxB;GACF,CAAC;EACH;EAZQ,EAAA,KAAA;EAAW,EAAA,KAAA;EASCA,EAAAA,KAAAA,QAAAA;EAFe,EAAA,KAAA;;;CAMjB,QAAQ;CAE5B,MAAM,cAAc,gBAAgB,cAAc,EAAiB;CAGjEE,IAAAA;CASM,IAAA,EAAA,QAAA,aAAA,EAAA,QAFJC,QAAAA,EAAAA,QALE,WAAA;EAFJ,MAAC,UAA+C;GAC9C,MAAM,yBAAyB,mBAC7B,WACA,KACF;GACA,MAAM,kBAAkB,oBAAoB,KAAK;GAEjD,KAAK,aAAa,UAAU,KAAK;GAEjC,IAAI,cAAc,MAAM,QAAQ,eAAe,MAAM,QAAQ,aAAa,CAAC,wBAAwB;IACjG,MAAM,eAAe;IACrB,KAAK,MAAM,QAAQ;GACrB;GAEA,IAAI,MAAM,QAAQ,YAAY,iBAAiB,MAAM,gBAAgB;EACvE;EANM,EAAA,MAAA;EAFJA,EAAAA,MAAAA;EALE,EAAA,MAAA;;;CAHN,MAAM,gBAAgBC;CAqBtB,IADiB,aAAa,CAAC,YAAY,MAAM,WAAW,UAC9C,OAAO;CAcLC,IAAAA;CAGF,IAAA,EAAA,QAAA,aAAA,EAAA,QAAWF,QAAAA,EAAAA,QAFf,QAAA;EADM,MAAC,YAA4C;GACnD,SAASG,OAAK;GAEd,IAAI,WAAW,KAAK,aAAa,WAAWA,OAAK;EACnD;EADM,EAAA,MAAA;EAAWH,EAAAA,MAAAA;EAFf,EAAA,MAAA;;;CAbV,MAAM,cAAc,cAClB,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK;EACL,OAAO;GACL;IAAE,IAAI;IAAW,GAAG,KAAK,gBAAgB;GAAE;GAC3C;IACE,kBAAkB;IAClB,WAAW;IACX,QAAQE;GAKV;GACA;EACF;CACF,CACF;CAEA,OAAO,aAAa,eAAe,aAAa,aAAa,YAAY,IAAI;AAC/E,CAAC"}

package/dist/dev/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;

package/dist/dev/ui/menu/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext, useLayoutEffect, useState } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  optionState: MenuOptionState | null;\n  setOptionState: (source: symbol, state: MenuOptionState | null) => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n  return ctx;\n}\n\n/** Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n/** Publishes a specialized option group's selected value and availability to its enclosing menu. */\nexport function useMenuOptionState(state: MenuOptionState): void {\n  const menu = useOptionalMenuContext();\n  const setOptionState = menu?.setOptionState;\n  const [source] = useState(() => Symbol('menu-option'));\n  const { value, disabled, hidden, availability } = state;\n\n  useLayoutEffect(() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }, [availability, disabled, hidden, setOptionState, source, value]);\n}\n\nexport interface MenuPopupContextValue {\n  popup: MenuPopupApi;\n  element: HTMLElement | null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue | null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n  const ctx = useContext(MenuPopupContext);\n  if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAmBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;;AAGA,SAAgB,mBAAmB,OAA8B;CAE/D,MAAM,iBADO,uBACa,CAAC,EAAE;CAC7B,MAAM,CAAC,UAAU,eAAe,OAAO,aAAa,CAAC;CACrD,MAAM,EAAE,OAAO,UAAU,QAAQ,iBAAiB;CAElD,sBAAsB;EACpB,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,eAAe,QAAQ;GAAE;GAAO;GAAU;GAAQ;EAAa,CAAC;EAEhE,aAAa,eAAe,QAAQ,IAAI;CAC1C,GAAG;EAAC;EAAc;EAAU;EAAQ;EAAgB;EAAQ;CAAK,CAAC;AACpE;AAOA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}
+{"version":3,"file":"context.js","names":["() => Symbol('menu-option')","() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }","[availability, disabled, hidden, setOptionState, source, value]"],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext, useLayoutEffect, useState } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  optionState: MenuOptionState | null;\n  setOptionState: (source: symbol, state: MenuOptionState | null) => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n  return ctx;\n}\n\n/** Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n/** Publishes a specialized option group's selected value and availability to its enclosing menu. */\nexport function useMenuOptionState(state: MenuOptionState): void {\n  const menu = useOptionalMenuContext();\n  const setOptionState = menu?.setOptionState;\n  const [source] = useState(() => Symbol('menu-option'));\n  const { value, disabled, hidden, availability } = state;\n\n  useLayoutEffect(() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }, [availability, disabled, hidden, setOptionState, source, value]);\n}\n\nexport interface MenuPopupContextValue {\n  popup: MenuPopupApi;\n  element: HTMLElement | null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue | null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n  const ctx = useContext(MenuPopupContext);\n  if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;;AAmBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;;AAGA,SAAgB,mBAAmB,OAA8B;;CAE/D,MAAM,iBADO,uBACU,CAAA,EAAM;CAC7B,MAAM,CAAC,UAAU,SAASA,KAA2B;CACrD,MAAM,EAAE,OAAO,UAAU,QAAQ,iBAAiB;CAElCC,IAAAA;CAMbC,IAAAA;CAHiD,IAAA,EAAA,OAAA,gBAAA,EAAA,OAAlB,YAAA,EAAA,OAAU,UAAA,EAAA,OAFrC,kBAAA,EAAA,OAEU,UAAA,EAAA,OAAU,OAAA;EAHX,WAAM;GACpB,IAAI,CAAC,gBAAgB;GAErB,eAAe,QAAQ;IAAE;IAAO;IAAU;IAAQ;GAAa,CAAC;GAEhE,aAAa,eAAe,QAAQ,IAAI;EAC1C;EAAG,KAAA;GAAC;GAAc;GAAU;GAAQ;GAAgB;GAAQ;EAAK;EAHb,EAAA,KAAA;EAAlB,EAAA,KAAA;EAAU,EAAA,KAAA;EAFrC,EAAA,KAAA;EAEU,EAAA,KAAA;EAAU,EAAA,KAAA;;;;;;;CAH3B,gBAAgBD,IAMbC,EAA+D;AACpE;AAV4B,SAAA,QAAA;CAAM,OAAA,OAAO,aAAa;;AAiBtD,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}