@remotion/studio 4.0.472 → 4.0.473

package/dist/api/rename-static-file.d.ts

@@ -0,0 +1,6 @@
+import type { RenameStaticFileResponse } from '@remotion/studio-shared';
+export declare const renameStaticFile: ({ oldRelativePath, newRelativePath, }: {
+    oldRelativePath: string;
+    newRelativePath: string;
+}) => Promise<RenameStaticFileResponse>;
+export { RenameStaticFileResponse };

package/dist/api/rename-static-file.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renameStaticFile = void 0;
+const remotion_1 = require("remotion");
+const call_api_1 = require("../components/call-api");
+const renameStaticFile = ({ oldRelativePath, newRelativePath, }) => {
+    if (!(0, remotion_1.getRemotionEnvironment)().isStudio) {
+        throw new Error('renameStaticFile() is only available in the Studio');
+    }
+    if (window.remotion_isReadOnlyStudio) {
+        throw new Error('renameStaticFile() is not available in Read-Only Studio');
+    }
+    return (0, call_api_1.callApi)('/api/rename-static-file', {
+        oldRelativePath,
+        newRelativePath,
+    });
+};
+exports.renameStaticFile = renameStaticFile;

package/dist/components/AssetSelector.js

@@ -1,7 +1,37 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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.AssetSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -13,7 +43,7 @@ const colors_1 = require("../helpers/colors");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_boolean_map_1 = require("../helpers/persist-boolean-map");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
+const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const folders_1 = require("../state/folders");
 const z_index_1 = require("../state/z-index");
 const AssetSelectorItem_1 = require("./AssetSelectorItem");
@@ -82,13 +112,24 @@ const AssetSelector = ({ readOnlyStudio }) => {
         setDropLocation,
     });
     const onDragOver = (0, react_1.useCallback)((e) => {
+        if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+            return;
+        }
         e.preventDefault();
     }, []);
     const onDrop = (0, react_1.useCallback)(async (e) => {
         try {
+            if (!(0, use_asset_drag_events_1.isFileDragEvent)(e)) {
+                setDropLocation(null);
+                return;
+            }
             e.preventDefault();
             e.stopPropagation();
             const { files } = e.dataTransfer;
+            if (files.length === 0) {
+                setDropLocation(null);
+                return;
+            }
             const assetPath = dropLocation !== null && dropLocation !== void 0 ? dropLocation : null;
             const makePath = (file) => {
                 return [assetPath, file.name].filter(Boolean).join('/');

package/dist/components/AssetSelectorItem.js

@@ -32,25 +32,27 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFolderTree = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
+const studio_shared_1 = require("@remotion/studio-shared");
+const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const mobile_layout_1 = require("../helpers/mobile-layout");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const url_state_1 = require("../helpers/url-state");
-const use_asset_drag_events_1 = __importDefault(require("../helpers/use-asset-drag-events"));
+const use_asset_drag_events_1 = __importStar(require("../helpers/use-asset-drag-events"));
 const clipboard_1 = require("../icons/clipboard");
 const file_1 = require("../icons/file");
 const folder_1 = require("../icons/folder");
+const modals_1 = require("../state/modals");
 const sidebar_1 = require("../state/sidebar");
+const ContextMenu_1 = require("./ContextMenu");
+const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
@@ -128,13 +130,19 @@ const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dr
     return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
             backgroundColor: isDropDiv ? colors_1.CLEAR_HOVER : colors_1.BACKGROUND,
         }, children: [
-            jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: () => {
+            jsx_runtime_1.jsx("div", { style: folderStyle, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
+                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                        return;
+                    }
                     if (!item.expanded) {
                         openFolderTimerRef.current = window.setTimeout(() => {
                             toggleFolder(item.name, parentFolder);
                         }, 1000);
                     }
-                }, onDragLeave: () => {
+                }, onDragLeave: (event) => {
+                    if (!(0, use_asset_drag_events_1.isFileDragEvent)(event)) {
+                        return;
+                    }
                     if (openFolderTimerRef.current) {
                         clearTimeout(openFolderTimerRef.current);
                     }
@@ -156,7 +164,11 @@ exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
     const onPointerEnter = (0, react_1.useCallback)(() => {
         setHovered(true);
     }, []);
@@ -171,6 +183,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         }
         return false;
     }, [canvasContent, relativePath]);
+    const canDragAsset = (0, react_1.useMemo)(() => {
+        return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
+    }, [readOnlyStudio, relativePath]);
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
@@ -195,6 +210,18 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         setCanvasContent,
         setSidebarCollapsedState,
     ]);
+    const onDragStart = (0, react_1.useCallback)((e) => {
+        if (!canDragAsset) {
+            e.preventDefault();
+            return;
+        }
+        setIsDragging(true);
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData(studio_shared_1.ASSET_DRAG_MIME_TYPE, JSON.stringify((0, studio_shared_1.makeAssetDragData)(relativePath)));
+    }, [canDragAsset, relativePath]);
+    const onDragEnd = (0, react_1.useCallback)(() => {
+        setIsDragging(false);
+    }, []);
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
@@ -221,21 +248,17 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const renderCopyAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
     }, []);
-    const revealInExplorer = react_1.default.useCallback((e) => {
-        e.stopPropagation();
-        (0, actions_1.openInFileExplorer)({
-            directory: window.remotion_publicFolderExists +
-                '/' +
-                parentFolder +
-                '/' +
-                item.name,
-        }).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+    const copyFileName = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(item.name)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${item.name}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [item.name, parentFolder]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        const content = `staticFile("${[parentFolder, item.name].join('/')}")`;
+    }, [item.name]);
+    const copyStaticFilePath = (0, react_1.useCallback)(() => {
+        const content = `staticFile("${relativePath}")`;
         (0, copy_text_1.copyText)(content)
             .then(() => {
             (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
@@ -243,10 +266,113 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             .catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
-    }, [item.name, parentFolder]);
-    return (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, tabIndex: tabIndex, title: item.name, children: [
-                jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: colors_1.LIGHT_TEXT }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.name }), hovered ? (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, { title: "Copy staticFile() name", renderAction: renderCopyAction, onClick: copyToClipboard }), readOnlyStudio ? 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, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })
-                            ] }))] })) : null] }) }));
+    }, [relativePath]);
+    const openAssetInExplorer = (0, react_1.useCallback)(() => {
+        if (!window.remotion_publicFolderExists) {
+            (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
+            return;
+        }
+        (0, actions_1.openInFileExplorer)({
+            directory: window.remotion_publicFolderExists + '/' + relativePath,
+        }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [relativePath]);
+    const serverActionDisabled = readOnlyStudio || connectionStatus !== 'connected';
+    const contextMenu = (0, react_1.useMemo)(() => {
+        return [
+            {
+                id: 'copy-asset-file-name',
+                keyHint: null,
+                label: 'Copy file name',
+                leftItem: null,
+                onClick: copyFileName,
+                quickSwitcherLabel: 'Copy asset file name',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-file-name',
+            },
+            {
+                id: 'copy-asset-static-file-path',
+                keyHint: null,
+                label: 'Copy staticFile() path',
+                leftItem: null,
+                onClick: copyStaticFilePath,
+                quickSwitcherLabel: 'Copy staticFile() path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-static-file-path',
+            },
+            {
+                type: 'divider',
+                id: 'asset-file-actions-divider',
+            },
+            {
+                id: 'open-asset-in-explorer',
+                keyHint: null,
+                label: 'Open in Explorer',
+                leftItem: null,
+                onClick: openAssetInExplorer,
+                quickSwitcherLabel: 'Open asset in Explorer',
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-in-explorer',
+                disabled: serverActionDisabled || window.remotion_publicFolderExists === null,
+            },
+            {
+                id: 'rename-asset',
+                keyHint: null,
+                label: 'Rename...',
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({
+                        type: 'rename-static-file',
+                        relativePath,
+                    });
+                },
+                quickSwitcherLabel: 'Rename asset...',
+                subMenu: null,
+                type: 'item',
+                value: 'rename-asset',
+                disabled: serverActionDisabled,
+            },
+            {
+                id: 'delete-asset',
+                keyHint: null,
+                label: 'Delete...',
+                leftItem: null,
+                onClick: () => {
+                    setSelectedModal({
+                        type: 'delete-static-file',
+                        relativePath,
+                    });
+                },
+                quickSwitcherLabel: 'Delete asset...',
+                subMenu: null,
+                type: 'item',
+                value: 'delete-asset',
+                disabled: serverActionDisabled,
+            },
+        ];
+    }, [
+        copyFileName,
+        copyStaticFilePath,
+        openAssetInExplorer,
+        relativePath,
+        serverActionDisabled,
+        setSelectedModal,
+    ]);
+    const revealInExplorer = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        openAssetInExplorer();
+    }, [openAssetInExplorer]);
+    const copyToClipboard = (0, react_1.useCallback)((e) => {
+        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: [
+                    jsx_runtime_1.jsx(file_1.FileIcon, { style: iconStyle, color: 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, { title: "Copy staticFile() path", renderAction: renderCopyAction, onClick: copyToClipboard }), serverActionDisabled ? 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, { title: "Open in Explorer", renderAction: renderFileExplorerAction, onClick: revealInExplorer })
+                                ] }))] })) : null] }) }) }));
 };

package/dist/components/Canvas.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = 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 client_id_1 = require("../helpers/client-id");
@@ -12,6 +13,7 @@ const colors_1 = require("../helpers/colors");
 const get_asset_metadata_1 = require("../helpers/get-asset-metadata");
 const get_effective_translation_1 = require("../helpers/get-effective-translation");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
 const smooth_zoom_1 = require("../helpers/smooth-zoom");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const canvas_ref_1 = require("../state/canvas-ref");
@@ -44,6 +46,25 @@ const isFileDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
 };
+const isAssetDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+};
+const isRemoteAssetDragEvent = (event) => {
+    return (!isFileDragEvent(event) &&
+        !isAssetDragEvent(event) &&
+        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
+};
+const getAssetDragPath = (event) => {
+    var _a, _b;
+    var _c;
+    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
+};
 const isDragEventInsideCanvas = (event) => {
     const { current } = canvas_ref_1.canvasRef;
     if (!current) {
@@ -467,7 +488,9 @@ const Canvas = ({ canvasContent, size }) => {
     }, [fetchMetadata]);
     const onDragOver = (0, react_1.useCallback)((event) => {
         if (!canDropAssets ||
-            !isFileDragEvent(event) ||
+            (!isFileDragEvent(event) &&
+                !isAssetDragEvent(event) &&
+                !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
         }
@@ -482,23 +505,49 @@ const Canvas = ({ canvasContent, size }) => {
         if (!canDropAssets ||
             compositionFile === null ||
             currentCompositionId === null ||
-            !isFileDragEvent(event) ||
+            (!isFileDragEvent(event) &&
+                !isAssetDragEvent(event) &&
+                !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
-        const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
-        if (files.length === 0) {
-            return;
-        }
         setIsAddingAsset(true);
         try {
-            await (0, import_assets_1.importAssets)({
-                files,
-                compositionFile,
-                compositionId: currentCompositionId,
-            });
+            if (isFileDragEvent(event)) {
+                const files = Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) !== null && _b !== void 0 ? _b : []);
+                if (files.length === 0) {
+                    return;
+                }
+                await (0, import_assets_1.importAssets)({
+                    files,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
+            else if (isAssetDragEvent(event)) {
+                const assetPath = getAssetDragPath(event);
+                if (assetPath === null) {
+                    return;
+                }
+                await (0, import_assets_1.insertExistingAssets)({
+                    assetPaths: [assetPath],
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
+            else {
+                const url = (0, remote_asset_drag_1.getRemoteAssetUrlFromDataTransfer)(event.dataTransfer);
+                if (url === null) {
+                    return;
+                }
+                await (0, import_assets_1.importRemoteAsset)({
+                    url,
+                    compositionFile,
+                    compositionId: currentCompositionId,
+                });
+            }
         }
         finally {
             setIsAddingAsset(false);

package/dist/components/ConfirmationDialog-types.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+export type ConfirmationDialogOptions = {
+    readonly title: string;
+    readonly message: React.ReactNode;
+    readonly confirmLabel?: string;
+    readonly cancelLabel?: string;
+};
+export type ConfirmationDialogFunction = (options: ConfirmationDialogOptions) => Promise<boolean>;

package/dist/components/ConfirmationDialog-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/ConfirmationDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ConfirmationDialogState } from '../state/modals';
+import type { ConfirmationDialogFunction } from './ConfirmationDialog-types';
+export declare const useConfirmationDialog: () => ConfirmationDialogFunction;
+export declare const ConfirmationDialog: React.FC<{
+    readonly state: ConfirmationDialogState;
+}>;

package/dist/components/ConfirmationDialog.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmationDialog = exports.useConfirmationDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const modals_1 = require("../state/modals");
+const Button_1 = require("./Button");
+const layout_1 = require("./layout");
+const ModalButton_1 = require("./ModalButton");
+const ModalContainer_1 = require("./ModalContainer");
+const ModalFooter_1 = require("./ModalFooter");
+const ModalHeader_1 = require("./ModalHeader");
+const content = {
+    padding: 16,
+    fontSize: 14,
+    flex: 1,
+    minWidth: 420,
+    maxWidth: 560,
+    lineHeight: 1.4,
+};
+const useConfirmationDialog = () => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    return (0, react_1.useCallback)((options) => {
+        return new Promise((resolve) => {
+            var _a, _b;
+            let settled = false;
+            const settle = (result) => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                resolve(result);
+            };
+            setSelectedModal({
+                type: 'confirmation-dialog',
+                id: String(Math.random()),
+                title: options.title,
+                message: options.message,
+                confirmLabel: (_a = options.confirmLabel) !== null && _a !== void 0 ? _a : 'Continue',
+                cancelLabel: (_b = options.cancelLabel) !== null && _b !== void 0 ? _b : 'Cancel',
+                onConfirm: () => settle(true),
+                onCancel: () => settle(false),
+            });
+        });
+    }, [setSelectedModal]);
+};
+exports.useConfirmationDialog = useConfirmationDialog;
+const ConfirmationDialog = ({ state }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const settledRef = (0, react_1.useRef)(false);
+    const closeCurrentModal = (0, react_1.useCallback)(() => {
+        setSelectedModal((modal) => (modal === null || modal === void 0 ? void 0 : modal.type) === 'confirmation-dialog' && modal.id === state.id
+            ? null
+            : modal);
+    }, [setSelectedModal, state.id]);
+    const settle = (0, react_1.useCallback)((confirmed) => {
+        if (settledRef.current) {
+            return;
+        }
+        settledRef.current = true;
+        closeCurrentModal();
+        if (confirmed) {
+            state.onConfirm();
+        }
+        else {
+            state.onCancel();
+        }
+    }, [closeCurrentModal, state]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (settledRef.current) {
+                return;
+            }
+            settledRef.current = true;
+            state.onCancel();
+        };
+    }, [state]);
+    const onCancel = (0, react_1.useCallback)(() => {
+        settle(false);
+    }, [settle]);
+    const onConfirm = (0, react_1.useCallback)(() => {
+        settle(true);
+    }, [settle]);
+    const onSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        onConfirm();
+    }, [onConfirm]);
+    const cancelStyle = (0, react_1.useMemo)(() => {
+        return {
+            minWidth: 90,
+        };
+    }, []);
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { onOutsideClick: onCancel, onEscape: onCancel, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: state.title, onClose: onCancel }), jsx_runtime_1.jsxs("form", { onSubmit: onSubmit, children: [
+                    jsx_runtime_1.jsx("div", { style: content, children: state.message }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
+                                jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onCancel, style: cancelStyle, children: state.cancelLabel }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onConfirm, autoFocus: true, children: [state.confirmLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
+                                    ] })
+                            ] }) })
+                ] })
+        ] }));
+};
+exports.ConfirmationDialog = ConfirmationDialog;

package/dist/components/ContextMenu.d.ts

@@ -1,12 +1,20 @@
 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 ContextMenuProps = {
     readonly children: React.ReactNode;
     readonly values: ComboboxValue[];
-    readonly onOpen: (() => void) | null;
+    readonly onOpen: ContextMenuOpenHandler | null;
     readonly style?: React.CSSProperties;
     readonly className?: string;
     readonly onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
 };
 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;
+}>;
 export {};