@remotion/studio 4.0.472 → 4.0.473

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.ContextMenu = void 0;
+exports.ContextMenuForTarget = exports.ContextMenu = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,8 +47,8 @@ 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 ContextMenuPortal = ({ containerRef, currentZIndex, onHide, opened, values }) => {
-    const size = player_1.PlayerInternals.useElementSize(containerRef, {
+const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+    const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
     });
@@ -134,7 +134,9 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         const onClick = (e) => {
             e.preventDefault();
             e.stopPropagation();
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+            if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
+                return false;
+            }
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -147,6 +149,48 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
         setOpened({ type: 'not-open' });
     }, []);
     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, { containerRef: 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, values: values })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
+const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+    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)(() => {
+        // Access document.body after mount so importing this component stays safe
+        // in DOM-less test environments.
+        setBody(document.body);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const { current } = triggerRef;
+        if (!current) {
+            return;
+        }
+        const onClick = async (event) => {
+            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) {
+                return false;
+            }
+            setOpenedValues(nextValues);
+            setOpened({ type: 'open', left: e.clientX, top: e.clientY });
+            return false;
+        };
+        current.addEventListener('contextmenu', onClick);
+        return () => {
+            current.removeEventListener('contextmenu', onClick);
+        };
+    }, [onOpen, triggerRef, values]);
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened({ type: 'not-open' });
+    }, []);
+    return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
+};
+exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/CurrentAsset.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 export declare const CURRENT_ASSET_HEIGHT = 80;
+export declare const getCurrentAssetMetadataSource: (assetName: string | null) => string | null;
 export declare const CurrentAsset: React.FC;

package/dist/components/CurrentAsset.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CurrentAsset = exports.CURRENT_ASSET_HEIGHT = void 0;
+exports.CurrentAsset = exports.getCurrentAssetMetadataSource = exports.CURRENT_ASSET_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const format_media_duration_1 = require("../helpers/format-media-duration");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
 const use_static_files_1 = require("./use-static-files");
 exports.CURRENT_ASSET_HEIGHT = 80;
@@ -38,6 +39,16 @@ const row = {
     lineHeight: '18px',
     backgroundColor: colors_1.BACKGROUND,
 };
+const getCurrentAssetMetadataSource = (assetName) => {
+    if (!assetName) {
+        return null;
+    }
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(assetName);
+    return fileType === 'audio' || fileType === 'video'
+        ? (0, remotion_1.staticFile)(assetName)
+        : null;
+};
+exports.getCurrentAssetMetadataSource = getCurrentAssetMetadataSource;
 const CurrentAsset = () => {
     var _a;
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
@@ -51,7 +62,7 @@ const CurrentAsset = () => {
         const file = staticFiles.find((f) => f.name === assetName);
         return (_a = file === null || file === void 0 ? void 0 : file.sizeInBytes) !== null && _a !== void 0 ? _a : null;
     }, [assetName, staticFiles]);
-    const src = assetName ? (0, remotion_1.staticFile)(assetName) : null;
+    const src = (0, exports.getCurrentAssetMetadataSource)(assetName);
     const mediaMetadata = (0, use_media_metadata_1.useMediaMetadata)(src);
     if (!assetName) {
         return jsx_runtime_1.jsx("div", { style: container });

package/dist/components/EditorContent.js

@@ -9,8 +9,10 @@ const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
 const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
+const should_clear_selection_on_pointer_down_1 = require("./Timeline/should-clear-selection-on-pointer-down");
 const Timeline_1 = require("./Timeline/Timeline");
 const TimelineEmptyState_1 = require("./Timeline/TimelineEmptyState");
+const TimelineKeyframeDragState_1 = require("./Timeline/TimelineKeyframeDragState");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const noop = () => undefined;
 const container = {
@@ -19,13 +21,24 @@ const container = {
     flex: 1,
     height: 0,
 };
+const StudioClearSelectionArea = ({ children }) => {
+    const { clearSelection } = (0, TimelineSelection_1.useTimelineSelection)();
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(e)) {
+            return;
+        }
+        clearSelection();
+    }, [clearSelection]);
+    return (jsx_runtime_1.jsx("div", { style: container, onPointerDown: onPointerDown, children: children }));
+};
 const EditorContent = ({ readOnlyStudio, children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
     const content = (jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
             jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })
         ] }));
-    return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), showTimeline ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: content })) : (content)] }));
+    return (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionProvider, { children: jsx_runtime_1.jsxs(StudioClearSelectionArea, { children: [
+                jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(TimelineKeyframeDragState_1.TimelineKeyframeDragStateProvider, { children: content })
+            ] }) }));
 };
 exports.EditorContent = EditorContent;

package/dist/components/EditorContexts.js

@@ -19,13 +19,14 @@ const ClientRenderQueueProcessor_1 = require("./RenderQueue/ClientRenderQueuePro
 const context_1 = require("./RenderQueue/context");
 const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
 const ShowGuidesProvider_1 = require("./ShowGuidesProvider");
+const ShowOutlinesProvider_1 = require("./ShowOutlinesProvider");
 const ShowRulersProvider_1 = require("./ShowRulersProvider");
 const VisualControlsUndoSync_1 = require("./VisualControls/VisualControlsUndoSync");
 const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
 const EditorContexts = ({ children, readOnlyStudio }) => {
     return (jsx_runtime_1.jsx(get_zod_if_possible_1.ZodProvider, { children: jsx_runtime_1.jsx(VisualControls_1.VisualControlsProvider, { children: jsx_runtime_1.jsxs(client_id_1.PreviewServerConnection, { readOnlyStudio: readOnlyStudio, children: [
                     jsx_runtime_1.jsx(VisualControlsUndoSync_1.VisualControlsUndoSync, {}), jsx_runtime_1.jsxs(context_1.RenderQueueContextProvider, { children: [
-                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) })
+                            jsx_runtime_1.jsx(ClientRenderQueueProcessor_1.ClientRenderQueueProcessor, {}), jsx_runtime_1.jsx(keybindings_1.KeybindingContextProvider, { children: jsx_runtime_1.jsx(CheckerboardProvider_1.CheckerboardProvider, { children: jsx_runtime_1.jsx(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: jsx_runtime_1.jsx(ShowRulersProvider_1.ShowRulersProvider, { children: jsx_runtime_1.jsx(ShowGuidesProvider_1.ShowGuidesProvider, { children: jsx_runtime_1.jsx(ShowOutlinesProvider_1.ShowOutlinesProvider, { children: jsx_runtime_1.jsx(preview_size_1.PreviewSizeProvider, { children: jsx_runtime_1.jsx(ModalsProvider_1.ModalsProvider, { children: jsx_runtime_1.jsx(MediaVolumeProvider_1.MediaVolumeProvider, { children: jsx_runtime_1.jsx(player_1.PlayerInternals.PlayerEmitterProvider, { currentPlaybackRate: null, children: jsx_runtime_1.jsx(sidebar_1.SidebarContextProvider, { children: jsx_runtime_1.jsx(folders_1.FolderContextProvider, { children: jsx_runtime_1.jsx(highest_z_index_1.HighestZIndexProvider, { children: jsx_runtime_1.jsx(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: jsx_runtime_1.jsx(ExpandedTracksProvider_1.ExpandedTracksProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) })
                         ] })
                 ] }) }) }));
 };

package/dist/components/EditorRuler/Ruler.js

@@ -67,6 +67,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
             return;
         }
         e.preventDefault();
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         shouldCreateGuideRef.current = true;
         (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
         const guideId = makeGuideId();

package/dist/components/ExplorerPanel.d.ts

@@ -1,7 +1,3 @@
-export declare const explorerSidebarTabs: import("react").RefObject<{
-    selectAssetsPanel: () => void;
-    selectCompositionPanel: () => void;
-} | null>;
 export declare const ExplorerPanel: React.FC<{
     readOnlyStudio: boolean;
 }>;

package/dist/components/ExplorerPanel.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExplorerPanel = exports.explorerSidebarTabs = void 0;
+exports.ExplorerPanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const AssetSelector_1 = require("./AssetSelector");
 const CompositionSelector_1 = require("./CompositionSelector");
 const CompSelectorRef_1 = require("./CompSelectorRef");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const Tabs_1 = require("./Tabs");
 const container = {
     height: '100%',
@@ -30,7 +31,6 @@ const tabsContainer = {
 const persistSelectedOptionsSidebarPanel = (panel) => {
     localStorage.setItem(localStorageKey, panel);
 };
-exports.explorerSidebarTabs = (0, react_1.createRef)();
 const ExplorerPanel = ({ readOnlyStudio }) => {
     const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
     const onCompositionsSelected = (0, react_1.useCallback)(() => {
@@ -41,7 +41,7 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
         setPanel('assets');
         persistSelectedOptionsSidebarPanel('assets');
     }, []);
-    (0, react_1.useImperativeHandle)(exports.explorerSidebarTabs, () => {
+    (0, react_1.useImperativeHandle)(ExplorerPanelRef_1.explorerSidebarTabs, () => {
         return {
             selectAssetsPanel: () => {
                 setPanel('assets');
@@ -53,7 +53,11 @@ const ExplorerPanel = ({ readOnlyStudio }) => {
             },
         };
     }, []);
-    return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", children: [
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(CompSelectorRef_1.CompSelectorRef, { children: jsx_runtime_1.jsxs("div", { style: container, className: "css-reset", onPointerDown: onPointerDown, children: [
                 jsx_runtime_1.jsx("div", { style: tabsContainer, children: jsx_runtime_1.jsxs(Tabs_1.Tabs, { children: [
                             jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'compositions', onClick: onCompositionsSelected, children: "Compositions" }), jsx_runtime_1.jsx(Tabs_1.Tab, { selected: panel === 'assets', onClick: onAssetsSelected, children: "Assets" })
                         ] }) }), panel === 'compositions' ? (jsx_runtime_1.jsx(CompositionSelector_1.CompositionSelector, {})) : (jsx_runtime_1.jsx(AssetSelector_1.AssetSelector, { readOnlyStudio: readOnlyStudio }))] }) }));

package/dist/components/ExplorerPanelRef.d.ts

@@ -0,0 +1,4 @@
+export declare const explorerSidebarTabs: import("react").RefObject<{
+    selectAssetsPanel: () => void;
+    selectCompositionPanel: () => void;
+} | null>;

package/dist/components/ExplorerPanelRef.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.explorerSidebarTabs = void 0;
+const react_1 = require("react");
+exports.explorerSidebarTabs = (0, react_1.createRef)();

package/dist/components/FilePreview.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AssetMetadata } from '../helpers/get-asset-metadata';
-import type { AssetFileType } from './Preview';
+import type { AssetFileType } from '../helpers/get-preview-file-type';
 export declare const FilePreview: React.FC<{
     readonly src: string;
     readonly fileType: AssetFileType;

package/dist/components/InitialCompositionLoader.d.ts

@@ -1,4 +1,3 @@
 import type React from 'react';
-export declare const useSelectAsset: () => (asset: string) => void;
 export declare const useSelectComposition: () => (c: import("remotion").AnyComposition, push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/components/InitialCompositionLoader.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitialCompositionLoader = exports.useSelectComposition = exports.useSelectAsset = void 0;
+exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
@@ -9,32 +9,10 @@ const persist_open_folders_1 = require("../helpers/persist-open-folders");
 const url_state_1 = require("../helpers/url-state");
 const folders_1 = require("../state/folders");
 const sidebar_1 = require("../state/sidebar");
-const ExplorerPanel_1 = require("./ExplorerPanel");
+const ExplorerPanelRef_1 = require("./ExplorerPanelRef");
 const load_canvas_content_from_url_1 = require("./load-canvas-content-from-url");
+const use_select_asset_1 = require("./use-select-asset");
 const use_static_files_1 = require("./use-static-files");
-const useSelectAsset = () => {
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
-    const { setAssetFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
-    return (0, react_1.useCallback)((asset) => {
-        var _a;
-        setCanvasContent({ type: 'asset', asset });
-        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectAssetsPanel();
-        setAssetFoldersExpanded((ex) => {
-            const split = asset.split('/');
-            const keysToExpand = split.map((_, i) => {
-                return split.slice(0, i).join('/');
-            });
-            const newState = {
-                ...ex,
-            };
-            for (const key of keysToExpand) {
-                newState[key] = true;
-            }
-            return newState;
-        });
-    }, [setAssetFoldersExpanded, setCanvasContent]);
-};
-exports.useSelectAsset = useSelectAsset;
 const useSelectComposition = () => {
     const { setCompositionFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
@@ -45,7 +23,7 @@ const useSelectComposition = () => {
         if (push) {
             (0, url_state_1.pushUrl)(`/${c.id}`);
         }
-        (_a = ExplorerPanel_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
+        (_a = ExplorerPanelRef_1.explorerSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectCompositionPanel();
         setCanvasContent({ type: 'composition', compositionId: c.id });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
@@ -76,7 +54,7 @@ const InitialCompositionLoader = () => {
     const { compositions, canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const selectComposition = (0, exports.useSelectComposition)();
-    const selectAsset = (0, exports.useSelectAsset)();
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     (0, react_1.useEffect)(() => {
         const canvasContentFromUrl = (0, load_canvas_content_from_url_1.deriveCanvasContentFromUrl)();

package/dist/components/Menu/MenuItem.js

@@ -61,6 +61,8 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         setHovered(false);
     }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
         if (e.button !== 0) {
             return;
         }
@@ -73,6 +75,10 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             once: true,
         });
     }, [id, onItemQuit, onItemSelected]);
+    const onMenuPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         const isKeyboardInitiated = e.detail === 0;
@@ -92,7 +98,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
-                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.MenuItem = MenuItem;

package/dist/components/Menu/SubMenu.js

@@ -18,7 +18,11 @@ const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMe
             onQuitFullMenu();
         }
     }, [mobileLayout, onQuitFullMenu, onQuitSubMenu]);
-    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: portalStyle, className: "css-reset", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: onQuitFullMenu, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
                     : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));

package/dist/components/Menu/portals.js

@@ -1,15 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPortal = exports.portals = void 0;
-exports.portals = [
-    document.getElementById('menuportal-0'),
-    document.getElementById('menuportal-1'),
-    document.getElementById('menuportal-2'),
-    document.getElementById('menuportal-3'),
-    document.getElementById('menuportal-4'),
-    document.getElementById('menuportal-5'),
+const portalIds = [
+    'menuportal-0',
+    'menuportal-1',
+    'menuportal-2',
+    'menuportal-3',
+    'menuportal-4',
+    'menuportal-5',
 ];
+exports.portals = 
+// This module is imported by Bun tests that run without a DOM.
+typeof document === 'undefined'
+    ? []
+    : portalIds.map((id) => document.getElementById(id));
 const getPortal = (i) => {
-    return exports.portals[i];
+    const portal = exports.portals[i];
+    if (!portal) {
+        throw new Error(`Expected menu portal ${i} to exist`);
+    }
+    return portal;
 };
 exports.getPortal = getPortal;

package/dist/components/MenuToolbar.js

@@ -90,7 +90,11 @@ const MenuToolbar = ({ readOnlyStudio }) => {
     const onItemQuit = (0, react_1.useCallback)(() => {
         setSelected(null);
     }, [setSelected]);
-    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
             jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
                     }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [readOnlyStudio ? null : jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}), jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControls, {})

package/dist/components/ModalContainer.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalContainer = exports.getMaxModalHeight = exports.getMaxModalWidth = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const z_index_1 = require("../state/z-index");
 const padding = 20;
@@ -29,6 +30,10 @@ const panel = {
     margin: 'auto',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick, noZIndex }) => {
-    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", onPointerDown: onPointerDown, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { disabled: noZIndex, onOutsideClick: onOutsideClick, onEscape: onEscape, children: jsx_runtime_1.jsx("div", { style: panel, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/components/Modals.js

@@ -9,25 +9,29 @@ const react_1 = require("react");
 const client_id_1 = require("../helpers/client-id");
 const modals_1 = require("../state/modals");
 const AskAiModal_1 = require("./AskAiModal");
+const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const InstallPackage_1 = require("./InstallPackage");
 const DeleteComposition_1 = require("./NewComposition/DeleteComposition");
 const DeleteFolder_1 = require("./NewComposition/DeleteFolder");
+const DeleteStaticFile_1 = require("./NewComposition/DeleteStaticFile");
 const DuplicateComposition_1 = require("./NewComposition/DuplicateComposition");
 const RenameComposition_1 = require("./NewComposition/RenameComposition");
 const RenameFolder_1 = require("./NewComposition/RenameFolder");
+const RenameStaticFile_1 = require("./NewComposition/RenameStaticFile");
 const OverrideInputProps_1 = require("./OverrideInputProps");
 const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const KeyframeSettingsModal_1 = require("./Timeline/KeyframeSettingsModal");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
         'connected';
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'delete-static-file' && (jsx_runtime_1.jsx(DeleteStaticFile_1.DeleteStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'keyframe-settings' && (jsx_runtime_1.jsx(KeyframeSettingsModal_1.KeyframeSettingsModal, { state: modalContextType })), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/ComboBox.js

@@ -55,6 +55,10 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
     const onHide = (0, react_1.useCallback)(() => {
         setOpened(false);
     }, []);
+    const onOverlayPointerDown = (0, react_1.useCallback)((e) => {
+        // Prevent deselection of currently selected items
+        e.stopPropagation();
+    }, []);
     (0, react_1.useEffect)(() => {
         const { current } = ref;
         if (!current) {
@@ -62,7 +66,9 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
         }
         const onMouseEnter = () => setIsHovered(true);
         const onMouseLeave = () => setIsHovered(false);
-        const onPointerDown = () => {
+        const onPointerDown = (e) => {
+            // Prevent deselection of currently selected items
+            e.stopPropagation();
             return setOpened((o) => {
                 if (!o) {
                     refresh === null || refresh === void 0 ? void 0 : refresh();
@@ -176,7 +182,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, small = false
                     " ",
                     jsx_runtime_1.jsx(caret_1.CaretDown, { small: small })
                 ] }), 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: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, 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: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
 exports.Combobox = Combobox;

package/dist/components/NewComposition/DeleteStaticFile.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DeleteStaticFileModal: React.FC<{
+    readonly relativePath: string;
+}>;

package/dist/components/NewComposition/DeleteStaticFile.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteStaticFileModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const delete_static_file_1 = require("../../api/delete-static-file");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const styles_1 = require("../Menu/styles");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const DismissableModal_1 = require("./DismissableModal");
+const content = {
+    padding: 16,
+    fontSize: 14,
+    flex: 1,
+    minWidth: 500,
+};
+const DeleteStaticFileModal = ({ relativePath }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const onDelete = (0, react_1.useCallback)(() => {
+        setSubmitting(true);
+        const notification = (0, NotificationCenter_1.showNotification)(`Deleting ${relativePath}...`, null);
+        (0, delete_static_file_1.deleteStaticFile)(relativePath)
+            .then(() => {
+            setSelectedModal(null);
+            notification.replaceContent(`Deleted ${relativePath}`, 2000);
+        })
+            .catch((err) => {
+            setSubmitting(false);
+            notification.replaceContent(`Could not delete ${relativePath}: ${err.message}`, 3000);
+        });
+    }, [relativePath, setSelectedModal]);
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: 'Delete asset' }), jsx_runtime_1.jsxs("div", { style: content, children: ["Do you want to delete the asset", ' ', jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: relativePath }),
+                    " from your public folder?"] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", justify: "flex-end", children: [
+                        jsx_runtime_1.jsx(Button_1.Button, { onClick: () => setSelectedModal(null), children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onDelete, disabled: submitting, children: "Delete" })
+                    ] }) })
+        ] }));
+};
+exports.DeleteStaticFileModal = DeleteStaticFileModal;

package/dist/components/NewComposition/RenameStaticFile.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const RenameStaticFileModal: React.FC<{
+    readonly relativePath: string;
+}>;