@remotion/studio 4.0.504 → 4.0.505

package/dist/components/AssetSelectorItem.js

@@ -424,7 +424,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             relativePath,
         });
     }, [relativePath, setSelectedModal]);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, exports.getAssetContextMenuItems)({
             relativePath,
             fileManagerName,
@@ -455,7 +455,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         copyStaticFilePath();
     }, [copyStaticFilePath]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { ref: rowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, draggable: canDragAsset, onDragStart: onDragStart, onDragEnd: onDragEnd, tabIndex: tabIndex, title: item.name, children: [
                     jsx_runtime_1.jsx(AssetFileIcon_1.AssetFileIcon, { fileType: previewFileType, style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered && !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), fileExplorerDisabled ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                     jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: `Show in ${fileManagerName}`, renderAction: renderFileExplorerAction, onClick: revealInExplorer })

package/dist/components/AudioWaveform.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay } from 'remotion';
-export declare const AudioWaveform: React.FC<{
+export declare const AudioWaveform: React.NamedExoticComponent<{
     readonly src: string;
     readonly height: number;
     readonly visualizationWidth: number;

package/dist/components/AudioWaveform.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioWaveform = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_utils_1 = require("@remotion/timeline-utils");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -76,7 +109,7 @@ const drawLoopedWaveform = ({ canvas, peaks, volume, visualizationWidth, loopWid
     ctx.fillStyle = pattern;
     ctx.fillRect(0, 0, w, h);
 };
-const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
+const AudioWaveformInner = ({ src, height, startFrom, durationInFrames, visualizationWidth, volume, doesVolumeChange, playbackRate, loopDisplay, }) => {
     const [peaks, setPeaks] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const [waveformCanvasKey, setWaveformCanvasKey] = (0, react_1.useState)(0);
@@ -300,4 +333,4 @@ const AudioWaveform = ({ src, height, startFrom, durationInFrames, visualization
     return (jsx_runtime_1.jsxs("div", { style: getContainerStyle(height), children: [
             jsx_runtime_1.jsx("canvas", { ref: waveformCanvas, style: waveformCanvasStyle }, waveformCanvasKey), shouldRenderVolumeOverlay ? (jsx_runtime_1.jsx("canvas", { ref: volumeCanvas, style: volumeCanvasStyle })) : null] }));
 };
-exports.AudioWaveform = AudioWaveform;
+exports.AudioWaveform = react_1.default.memo(AudioWaveformInner);

package/dist/components/CompositionContextButton.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
 export declare const CompositionContextButton: React.FC<{
     readonly visible: boolean;
-    readonly values: ComboboxValue[];
+    readonly getItems: () => ComboboxValue[];
 }>;

package/dist/components/CompositionContextButton.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const ellipsis_1 = require("../icons/ellipsis");
 const InlineDropdown_1 = require("./InlineDropdown");
-const CompositionContextButton = ({ visible, values }) => {
+const CompositionContextButton = ({ visible, getItems }) => {
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
@@ -22,6 +22,6 @@ const CompositionContextButton = ({ visible, values }) => {
     if (!visible || connectionStatus !== 'connected') {
         return null;
     }
-    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, values: values, variant: null }));
+    return (jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: renderAction, getItems: getItems, variant: null }));
 };
 exports.CompositionContextButton = CompositionContextButton;

package/dist/components/CompositionSelector.js

@@ -90,7 +90,7 @@ const CompositionSelector = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const rootContextMenuItems = (0, react_1.useMemo)(() => {
+    const getRootContextMenuItems = (0, react_1.useCallback)(() => {
         return (0, root_composition_menu_items_1.getRootCompositionMenuItems)({
             connectionStatus,
             readOnlyStudio: window.remotion_isReadOnlyStudio,
@@ -234,7 +234,7 @@ const CompositionSelector = () => {
         }
     }, [compositions, stopCompositionListAutoScroll]);
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, values: rootContextMenuItems, onOpen: null }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
+            jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: listRef, getItems: getRootContextMenuItems }), jsx_runtime_1.jsx(ExplorerQuickSwitcherTrigger_1.ExplorerQuickSwitcherTrigger, { mode: "compositions", showShortcut: true, tabIndex: tabIndex }), jsx_runtime_1.jsx("div", { ref: listRef, className: "__remotion-vertical-scrollbar", style: list, onDragOverCapture: onCompositionListDragOverCapture, onDragEndCapture: stopCompositionListAutoScroll, onDragOver: onRootDragOver, onDragLeave: onRootDragLeave, onDropCapture: stopCompositionListAutoScroll, onDrop: onRootDrop, children: items.map((c) => {
                     return (jsx_runtime_1.jsx(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: canvasContent && canvasContent.type === 'composition'
                             ? canvasContent.compositionId
                             : null, selectComposition: selectComposition, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover, tabIndex: tabIndex, item: c }, c.key + c.type));

package/dist/components/CompositionSelectorItem.js

@@ -120,7 +120,7 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : item.folder.stack);
-    const contextMenu = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         if (item.type === 'composition') {
             return (0, composition_menu_items_1.getCompositionContextMenuItems)({
                 closeMenu: noop_1.noop,
@@ -241,13 +241,13 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
     }, [clearRootDragHover, item, toggleFolder]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered })
+                jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("div", { style: style, className: "__remotion-composition-selector-item", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, onDragOver: onFolderDragOver, onDragLeave: onFolderDragLeave, onDrop: onFolderDrop, title: item.folderName, role: "button", children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered })
                             ] }) }) }), item.expanded ? (jsx_runtime_1.jsx("div", { onDragOver: onFolderChildListDragOver, onDrop: onFolderDrop, children: item.items.map((childItem) => {
                         return (jsx_runtime_1.jsx(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder, clearRootDragHover: clearRootDragHover }, childItem.key + childItem.type));
                     }) })) : null] }));
     }
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenu, onOpen: null, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
-                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { values: contextMenu, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx(layout_1.Row, { align: "center", children: jsx_runtime_1.jsxs("a", { ref: compositionRowRef, style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, draggable: !window.remotion_isReadOnlyStudio, onDragStart: onCompositionDragStart, onDragEnd: onCompositionDragEnd, type: "button", title: item.composition.id, className: "__remotion-composition __remotion-composition-selector-item", "data-compname": item.composition.id, children: [
+                    jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { composition: item.composition, color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.composition.id }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(CompositionContextButton_1.CompositionContextButton, { getItems: getContextMenuItems, visible: hovered && !isDragging }), jsx_runtime_1.jsx(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered && !isDragging, composition: item.composition })
                 ] }) }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/components/ContextMenu.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-type ContextMenuOpenHandler = () => false | void;
-type ContextMenuTargetOpenResult = false | void | readonly ComboboxValue[];
-type ContextMenuTargetOpenHandler = (event: MouseEvent) => ContextMenuTargetOpenResult | Promise<ContextMenuTargetOpenResult>;
+type ContextMenuItemsResult = false | readonly ComboboxValue[];
+export type ContextMenuItemsFactory = (event: MouseEvent) => ContextMenuItemsResult | Promise<ContextMenuItemsResult>;
+export declare const resolveContextMenuItems: (getItems: ContextMenuItemsFactory, event: MouseEvent) => Promise<readonly ComboboxValue[] | null>;
 type ContextMenuProps = {
     readonly children: React.ReactNode;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
@@ -14,7 +13,6 @@ type ContextMenuProps = {
 export declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuForTarget: React.FC<{
     readonly triggerRef: React.RefObject<HTMLElement | SVGElement | null>;
-    readonly values: ComboboxValue[];
-    readonly onOpen: ContextMenuTargetOpenHandler | null;
+    readonly getItems: ContextMenuItemsFactory;
 }>;
 export {};

package/dist/components/ContextMenu.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContextMenuForTarget = exports.ContextMenu = void 0;
+exports.ContextMenuForTarget = exports.ContextMenu = exports.resolveContextMenuItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,6 +47,14 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
+const resolveContextMenuItems = async (getItems, event) => {
+    const result = await getItems(event);
+    if (result === false || result.length === 0) {
+        return null;
+    }
+    return [...result];
+};
+exports.resolveContextMenuItems = resolveContextMenuItems;
 const contextMenuFullScreenOverlay = {
     ...styles_1.fullScreenOverlay,
     pointerEvents: 'none',
@@ -62,7 +70,7 @@ const notifyContextMenuOpened = (id) => {
         detail: id,
     }));
 };
-const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened }) => {
     const menuRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
@@ -154,11 +162,14 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: opened.values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
-exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
+exports.ContextMenu = react_1.default.forwardRef(({ children, getItems, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const setRef = (0, react_1.useCallback)((node) => {
@@ -177,21 +188,34 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         if (!current) {
             return;
         }
-        const onClick = (e) => {
+        const onClick = async (e) => {
             e.preventDefault();
             e.stopPropagation();
-            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen]);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -208,13 +232,15 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         };
     }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
+            jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
-const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+const ContextMenuForTarget = ({ triggerRef, getItems }) => {
     const idRef = (0, react_1.useRef)(nextContextMenuId++);
+    const invocationRef = (0, react_1.useRef)(0);
+    const getItemsRef = (0, react_1.useRef)(getItems);
+    getItemsRef.current = getItems;
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
-    const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
     const [body, setBody] = (0, react_1.useState)(null);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     (0, react_1.useEffect)(() => {
@@ -231,24 +257,31 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             const e = event;
             e.preventDefault();
             e.stopPropagation();
-            const result = await (onOpen === null || onOpen === void 0 ? void 0 : onOpen(e));
-            if (result === false) {
-                return false;
-            }
-            const nextValues = Array.isArray(result) ? result : values;
-            if (nextValues.length === 0) {
+            const currentInvocation = ++invocationRef.current;
+            const values = await (0, exports.resolveContextMenuItems)(getItemsRef.current, e);
+            if (currentInvocation !== invocationRef.current || values === null) {
                 return false;
             }
             notifyContextMenuOpened(idRef.current);
-            setOpenedValues(nextValues);
-            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            setOpened({
+                type: 'open',
+                left: e.clientX,
+                top: e.clientY,
+                values,
+            });
             return false;
         };
         current.addEventListener('contextmenu', onClick);
         return () => {
             current.removeEventListener('contextmenu', onClick);
         };
-    }, [onOpen, triggerRef, values]);
+    }, [triggerRef]);
+    (0, react_1.useEffect)(() => {
+        const invocation = invocationRef;
+        return () => {
+            invocation.current++;
+        };
+    }, []);
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
@@ -264,6 +297,6 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
         };
     }, [onHide]);
-    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/EditorGuides/Guide.js

@@ -165,7 +165,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             .filter(no_react_1.NoReactInternals.truthy)
             .join(' ');
     }, [activeClassName]);
-    const values = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         return [
             {
                 id: '1',
@@ -191,6 +191,6 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             },
         ];
     }, [clearSelection, guide.id, selected, setGuidesList]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: values, onOpen: null, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsx("div", { style: guideStyle, onPointerDown: onPointerDown, onClick: onClick, className: "__remotion_editor_guide", [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("div", { style: guideContentStyle, className: guideClassName }) }) }));
 };
 exports.default = (0, react_1.memo)(GuideComp);

package/dist/components/EffectPickerModal.js

@@ -131,7 +131,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
     const onClick = (0, react_1.useCallback)(() => {
         onSelected(item);
     }, [item, onSelected]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
         const documentationLink = (0, studio_shared_1.getEffectDocumentationLink)(item);
         return [
             {
@@ -150,7 +150,7 @@ const EffectPickerResult = ({ item, selected, onSelected }) => {
             },
         ];
     }, [item]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: null, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: jsx_runtime_1.jsxs("div", { ref: ref, style: style, onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [
                 jsx_runtime_1.jsx(effects_1.EffectsIcon, { color: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, style: iconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelContainer, children: jsx_runtime_1.jsx("div", { style: labelStyle, children: item.label }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: category, children: item.category })
             ] }) }));
 };

package/dist/components/InlineAction.d.ts

@@ -7,4 +7,4 @@ export type InlineActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
     readonly variant: 'compact' | null;
     readonly style?: React.CSSProperties;
 };
-export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineAction: ({ renderAction, onClick, disabled, title, unhoveredColor, variant, style: customStyle, className, ...buttonProps }: InlineActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineAction.js

@@ -4,23 +4,14 @@ exports.InlineAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
+const hoverable_1 = require("../helpers/hoverable");
 const z_index_1 = require("../state/z-index");
-const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, ...buttonProps }) => {
+const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor = colors_1.LIGHT_TEXT, variant, style: customStyle, className, ...buttonProps }) => {
     var _a;
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const [hovered, setHovered] = (0, react_1.useState)(false);
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
             border: 'none',
-            background: disabled
-                ? colors_1.TRANSPARENT
-                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: variant === 'compact' ? 14 : 24,
             padding: 0,
@@ -30,9 +21,19 @@ const InlineAction = ({ renderAction, onClick, disabled, title, unhoveredColor =
             borderRadius: 3,
             opacity: disabled ? 0.5 : 1,
             pointerEvents: disabled ? 'none' : 'auto',
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: disabled
+                    ? colors_1.TRANSPARENT
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor: unhoveredColor,
+                hoverColor: disabled ? unhoveredColor : colors_1.WHITE,
+            }),
             ...customStyle,
         };
-    }, [customStyle, disabled, hovered, variant]);
-    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", disabled: disabled, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(hovered ? colors_1.WHITE : unhoveredColor) }));
+    }, [customStyle, disabled, unhoveredColor, variant]);
+    return (jsx_runtime_1.jsx("button", { ...buttonProps, type: "button", className: className
+            ? `${hoverable_1.HOVERABLE_CLASS_NAME} ${className}`
+            : hoverable_1.HOVERABLE_CLASS_NAME, disabled: disabled, onClick: onClick, style: style, tabIndex: tabIndex, title: title, "aria-label": (_a = buttonProps['aria-label']) !== null && _a !== void 0 ? _a : title, children: renderAction(colors_1.CURRENT_COLOR) }));
 };
 exports.InlineAction = InlineAction;

package/dist/components/InlineDropdown.d.ts

@@ -1,5 +1,6 @@
 import { type InlineActionProps } from './InlineAction';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const InlineDropdown: ({ values, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
-    readonly values: ComboboxValue[];
+export declare const InlineDropdown: ({ values, getItems, unhoveredColor, ...props }: Omit<InlineActionProps, "onClick"> & {
+    readonly values?: ComboboxValue[] | undefined;
+    readonly getItems?: (() => ComboboxValue[]) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InlineDropdown.js

@@ -16,7 +16,8 @@ const InlineAction_1 = require("./InlineAction");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
-const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
+const InlineDropdown = ({ values, getItems, unhoveredColor, ...props }) => {
+    var _a, _b;
     const ref = (0, react_1.useRef)(null);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
@@ -26,10 +27,20 @@ const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
     });
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const onClick = (0, react_1.useCallback)((e) => {
+        var _a;
         e.preventDefault();
         e.stopPropagation();
-        setOpened({ type: 'open', left: e.clientX, top: e.clientY });
-    }, []);
+        const invocationValues = (_a = getItems === null || getItems === void 0 ? void 0 : getItems()) !== null && _a !== void 0 ? _a : null;
+        if ((invocationValues === null || invocationValues === void 0 ? void 0 : invocationValues.length) === 0) {
+            return;
+        }
+        setOpened({
+            type: 'open',
+            left: e.clientX,
+            top: e.clientY,
+            values: invocationValues,
+        });
+    }, [getItems]);
     const spaceToBottom = (0, react_1.useMemo)(() => {
         if (size && opened.type === 'open') {
             return size.windowSize.height - opened.top;
@@ -80,8 +91,8 @@ const InlineDropdown = ({ values, unhoveredColor, ...props }) => {
         setOpened({ type: 'not-open' });
     }, []);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+            jsx_runtime_1.jsx("div", { ref: ref, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: onClick, unhoveredColor: opened.type === 'open' ? colors_1.WHITE : unhoveredColor, ...props }) }), portalStyle && opened.type === 'open'
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: (_b = (_a = opened.values) !== null && _a !== void 0 ? _a : values) !== null && _b !== void 0 ? _b : [], onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.InlineDropdown = InlineDropdown;

package/dist/components/InspectorPanel/ConnectedCompositionsSection.js

@@ -44,7 +44,7 @@ const ConnectedCompositionRow = ({ composition }) => {
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
     const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(composition.stack);
-    const contextMenuItems = (0, react_1.useMemo)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
+    const getContextMenuItems = (0, react_1.useCallback)(() => (0, composition_menu_items_1.getCompositionContextMenuItems)({
         closeMenu: noop_1.noop,
         composition,
         connectionStatus,
@@ -53,5 +53,5 @@ const ConnectedCompositionRow = ({ composition }) => {
         resolvedLocation,
         setSelectedModal,
     }), [composition, connectionStatus, resolvedLocation, setSelectedModal]);
-    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuItems, onOpen: null, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
+    return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, style: compositionContextMenuStyle, children: jsx_runtime_1.jsx(common_1.InspectorInlineAction, { disabled: false, onClick: () => selectComposition(composition, true), renderIcon: (color) => (jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: color, composition: composition, style: compositionIconStyle })), children: composition.id }) }));
 };

package/dist/components/InspectorPanel/SequenceSelectionInspector.js

@@ -72,7 +72,7 @@ const SequenceSourceActions = ({ selection, track, validatedSource }) => {
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const propStatusesForOverride = (0, react_1.useMemo)(() => remotion_1.Internals.getPropStatusesCtx(propStatuses, selection.nodePathInfo.sequenceSubscriptionKey), [propStatuses, selection.nodePathInfo.sequenceSubscriptionKey]);
-    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
+    const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.getSequenceFreezeFrameMenuItem)({
         clientId: previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)()
             ? previewServerState.clientId
             : null,