@remotion/studio 4.0.517 → 4.0.519

package/dist/components/AssetSelectorItem.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AssetFolderTree = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
+exports.AssetFolderTree = exports.getAssetFolderContextMenuItems = exports.getAssetContextMenuItems = exports.getCanDragAsset = exports.getAssetActionAvailability = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_protocol_1 = require("@remotion/studio-protocol");
 const react_1 = require("react");
@@ -45,19 +45,21 @@ const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
 const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
 const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
+const hoverable_1 = require("../helpers/hoverable");
 const open_in_remotion_convert_1 = require("../helpers/open-in-remotion-convert");
 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 = __importStar(require("../helpers/use-asset-drag-events"));
 const use_image_metadata_1 = require("../helpers/use-image-metadata");
 const use_media_metadata_1 = require("../helpers/use-media-metadata");
-const clipboard_1 = require("../icons/clipboard");
+const ellipsis_1 = require("../icons/ellipsis");
 const folder_1 = require("../icons/folder");
 const modals_1 = require("../state/modals");
 const AssetFileIcon_1 = require("./AssetFileIcon");
 const ContextMenu_1 = require("./ContextMenu");
 const import_assets_1 = require("./import-assets");
 const InlineAction_1 = require("./InlineAction");
+const InlineDropdown_1 = require("./InlineDropdown");
 const layout_1 = require("./layout");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const open_in_new_window_1 = require("./open-in-new-window");
@@ -69,7 +71,6 @@ const iconStyle = {
     flexShrink: 0,
 };
 const itemStyle = {
-    paddingRight: 10,
     paddingTop: 5,
     paddingBottom: 5,
     fontSize: 13,
@@ -84,7 +85,6 @@ const itemStyle = {
     borderRadius: 4,
     width: 'calc(100% - 4px)',
     textAlign: 'left',
-    backgroundColor: colors_1.BACKGROUND,
     height: layout_1.COMPACT_CONTROL_ROW_HEIGHT,
     userSelect: 'none',
     WebkitUserSelect: 'none',
@@ -102,11 +102,24 @@ const revealIconStyle = {
     height: 12,
     color: colors_1.CURRENT_COLOR,
 };
+const ellipsisIconStyle = {
+    style: {
+        height: 12,
+    },
+};
+const inlineActionsStyle = {
+    alignItems: 'center',
+    display: 'flex',
+};
+const renderContextMenuAction = (color) => {
+    return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisIconStyle, fill: color });
+};
 const getAssetActionAvailability = ({ browserStudioCanMutateAssets, readOnlyStudio, connectionStatus, publicFolderExists, }) => {
     return {
         mutationsDisabled: browserStudioCanMutateAssets !== true &&
             (readOnlyStudio || connectionStatus !== 'connected'),
-        fileExplorerDisabled: publicFolderExists === null ||
+        fileExplorerDisabled: browserStudioCanMutateAssets !== null ||
+            publicFolderExists === null ||
             readOnlyStudio ||
             connectionStatus !== 'connected',
     };
@@ -116,7 +129,7 @@ const getCanDragAsset = ({ readOnlyStudio, relativePath, }) => {
     return !readOnlyStudio && (0, import_assets_1.getAssetElementFromPath)(relativePath) !== null;
 };
 exports.getCanDragAsset = getCanDragAsset;
-const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName, copyStaticFilePath, copyAbsolutePath, openAssetInConvert, openAssetInExplorer, renameAsset, deleteAsset, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
     const previewFileType = (0, get_preview_file_type_1.getPreviewFileType)(relativePath);
     const canOpenInConvert = previewFileType === 'audio' || previewFileType === 'video';
     const items = [
@@ -160,6 +173,19 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
             type: 'item',
             value: 'copy-asset-static-file-path',
         },
+        copyAbsolutePath
+            ? {
+                id: 'copy-asset-absolute-path',
+                keyHint: null,
+                label: 'Copy absolute path',
+                leftItem: null,
+                onClick: copyAbsolutePath,
+                quickSwitcherLabel: 'Copy asset absolute path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-absolute-path',
+            }
+            : null,
         {
             type: 'divider',
             id: 'asset-file-actions-divider',
@@ -206,67 +232,191 @@ const getAssetContextMenuItems = ({ relativePath, fileManagerName, copyFileName,
     return items.filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getAssetContextMenuItems = getAssetContextMenuItems;
-const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
+const getAssetFolderContextMenuItems = ({ folderPath, fileManagerName, copyFolderPath, copyAbsolutePath, openFolderInExplorer, uploadAssets, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }) => {
+    const items = [
+        fileExplorerAvailable
+            ? {
+                id: 'open-asset-folder-in-explorer',
+                keyHint: null,
+                label: `Show in ${fileManagerName}`,
+                leftItem: null,
+                onClick: openFolderInExplorer,
+                quickSwitcherLabel: `Show asset folder in ${fileManagerName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-asset-folder-in-explorer',
+                disabled: fileExplorerDisabled,
+            }
+            : null,
+        {
+            id: 'copy-asset-folder-path',
+            keyHint: null,
+            label: 'Copy folder path',
+            leftItem: null,
+            onClick: copyFolderPath,
+            quickSwitcherLabel: 'Copy asset folder path',
+            subMenu: null,
+            type: 'item',
+            value: 'copy-asset-folder-path',
+        },
+        copyAbsolutePath
+            ? {
+                id: 'copy-asset-folder-absolute-path',
+                keyHint: null,
+                label: 'Copy absolute path',
+                leftItem: null,
+                onClick: copyAbsolutePath,
+                quickSwitcherLabel: 'Copy asset folder absolute path',
+                subMenu: null,
+                type: 'item',
+                value: 'copy-asset-folder-absolute-path',
+            }
+            : null,
+        {
+            type: 'divider',
+            id: 'asset-folder-upload-divider',
+        },
+        {
+            id: 'upload-assets-to-folder',
+            keyHint: null,
+            label: 'Upload...',
+            leftItem: null,
+            onClick: uploadAssets,
+            quickSwitcherLabel: `Upload assets to ${folderPath}...`,
+            subMenu: null,
+            type: 'item',
+            value: 'upload-assets-to-folder',
+            disabled: mutationsDisabled,
+        },
+    ];
+    return items.filter(no_react_1.NoReactInternals.truthy);
+};
+exports.getAssetFolderContextMenuItems = getAssetFolderContextMenuItems;
+const AssetFolderItem = ({ tabIndex, item, level, parentFolder, toggleFolder, dropLocation, setDropLocation, readOnlyStudio, uploadAssets, }) => {
     const openFolderTimerRef = (0, react_1.useRef)(null);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const folderPath = (0, react_1.useMemo)(() => {
+        return parentFolder ? `${parentFolder}/${item.name}` : item.name;
+    }, [item.name, parentFolder]);
     const { isDropDiv, onDragEnter, onDragLeave } = (0, use_asset_drag_events_1.default)({
         name: item.name,
         parentFolder,
         dropLocation,
         setDropLocation,
     });
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const folderStyle = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
             paddingLeft: 4 + level * 8,
-            backgroundColor: hovered ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
-        };
-    }, [hovered, level]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: colors_1.TRANSPARENT,
+                hoverBackground: colors_1.WHITE_ALPHA_06,
+                idleColor: colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
         };
-    }, [hovered]);
+    }, [level]);
     const onClick = (0, react_1.useCallback)(() => {
         toggleFolder(item.name, parentFolder);
     }, [item.name, parentFolder, toggleFolder]);
+    const copyFolderPath = (0, react_1.useCallback)(() => {
+        (0, copy_text_1.copyText)(folderPath)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${folderPath}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [folderPath]);
+    const copyAbsolutePath = (0, react_1.useCallback)(() => {
+        if (window.remotion_publicFolderExists === null) {
+            return;
+        }
+        const content = `${window.remotion_publicFolderExists}/${folderPath}`;
+        (0, copy_text_1.copyText)(content)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [folderPath]);
+    const openFolderInExplorer = (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}/${folderPath}`,
+        }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open folder: ${err.message}`, 2000);
+        });
+    }, [folderPath]);
+    const uploadAssetsToFolder = (0, react_1.useCallback)(() => {
+        uploadAssets(folderPath);
+    }, [folderPath, uploadAssets]);
+    const { mutationsDisabled, fileExplorerDisabled } = (0, exports.getAssetActionAvailability)({
+        browserStudioCanMutateAssets: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null ? null : true,
+        readOnlyStudio,
+        connectionStatus,
+        publicFolderExists: window.remotion_publicFolderExists,
+    });
+    const getContextMenuItems = (0, react_1.useCallback)(() => {
+        return (0, exports.getAssetFolderContextMenuItems)({
+            folderPath,
+            fileManagerName,
+            copyFolderPath,
+            copyAbsolutePath: window.remotion_publicFolderExists === null ? null : copyAbsolutePath,
+            openFolderInExplorer,
+            uploadAssets: uploadAssetsToFolder,
+            fileExplorerAvailable: (0, browser_studio_operations_1.getBrowserStudioOperations)() === null,
+            fileExplorerDisabled,
+            mutationsDisabled,
+        });
+    }, [
+        copyAbsolutePath,
+        copyFolderPath,
+        fileExplorerDisabled,
+        fileManagerName,
+        folderPath,
+        mutationsDisabled,
+        openFolderInExplorer,
+        uploadAssetsToFolder,
+    ]);
     const Icon = item.expanded ? folder_1.ExpandedFolderIcon : folder_1.CollapsedFolderIcon;
     return (jsx_runtime_1.jsxs("div", { onDragEnter: onDragEnter, onDragLeave: onDragLeave, style: {
             backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
         }, children: [
-            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.isAssetUploadDragEvent)(event)) {
-                        return;
-                    }
-                    if (!item.expanded) {
-                        openFolderTimerRef.current = window.setTimeout(() => {
-                            toggleFolder(item.name, parentFolder);
-                        }, 1000);
-                    }
-                }, onDragLeave: (event) => {
-                    if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
-                        return;
-                    }
-                    if (openFolderTimerRef.current) {
-                        clearTimeout(openFolderTimerRef.current);
-                    }
-                }, children: jsx_runtime_1.jsxs(layout_1.Row, { children: [
-                        jsx_runtime_1.jsx(Icon, { style: iconStyle, color: hovered ? 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 })
-                    ] }) }), item.expanded ? (jsx_runtime_1.jsx(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }, item.name)) : null] }));
+            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: folderStyle, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, tabIndex: tabIndex, title: item.name, onClick: onClick, onDragEnter: (event) => {
+                            if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
+                                return;
+                            }
+                            if (!item.expanded) {
+                                openFolderTimerRef.current = window.setTimeout(() => {
+                                    toggleFolder(item.name, parentFolder);
+                                }, 1000);
+                            }
+                        }, onDragLeave: (event) => {
+                            if (!(0, use_asset_drag_events_1.isAssetUploadDragEvent)(event)) {
+                                return;
+                            }
+                            if (openFolderTimerRef.current) {
+                                clearTimeout(openFolderTimerRef.current);
+                            }
+                        }, children: [
+                            jsx_runtime_1.jsx(Icon, { style: iconStyle, color: colors_1.CURRENT_COLOR }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.name }), jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineActionsStyle, children: [
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
+                                ] })
+                        ] }) }) }), item.expanded ? (jsx_runtime_1.jsx(exports.AssetFolderTree, { item: item.items, name: item.name, level: level, parentFolder: parentFolder, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio, uploadAssets: uploadAssets }, item.name)) : null] }));
 };
-const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex, dropLocation, setDropLocation, readOnlyStudio, }) => {
+const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabIndex, dropLocation, setDropLocation, readOnlyStudio, uploadAssets, }) => {
     const combinedParents = (0, react_1.useMemo)(() => {
         return [parentFolder, name].filter(no_react_1.NoReactInternals.truthy).join('/');
     }, [name, parentFolder]);
     return (jsx_runtime_1.jsxs("div", { children: [item.folders.map((folder) => {
-                return (jsx_runtime_1.jsx(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }, folder.name));
+                return (jsx_runtime_1.jsx(AssetFolderItem, { item: folder, tabIndex: tabIndex, level: level + 1, parentFolder: combinedParents, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio, uploadAssets: uploadAssets }, folder.name));
             }), item.files.map((file) => {
                 return (jsx_runtime_1.jsx(AssetSelectorItem, { item: file, tabIndex: tabIndex, level: level, parentFolder: combinedParents, readOnlyStudio: readOnlyStudio }, file.src));
             })] }));
@@ -274,14 +424,10 @@ const AssetFolderTree = ({ item, level, name, parentFolder, toggleFolder, tabInd
 exports.AssetFolderTree = AssetFolderTree;
 const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio }) => {
     const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
         .previewServerState.type;
-    const onPointerEnter = (0, react_1.useCallback)(() => {
-        setHovered(true);
-    }, []);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const relativePath = (0, react_1.useMemo)(() => {
@@ -299,9 +445,6 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const canDragAsset = (0, react_1.useMemo)(() => {
         return (0, exports.getCanDragAsset)({ readOnlyStudio, relativePath });
     }, [readOnlyStudio, relativePath]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const rowRef = (0, react_1.useRef)(null);
     (0, react_1.useLayoutEffect)(() => {
         (0, sidebar_scroll_into_view_1.maybeScrollAssetSidebarRowIntoView)({
@@ -356,23 +499,18 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     const style = (0, react_1.useMemo)(() => {
         return {
             ...itemStyle,
-            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-            backgroundColor: hovered || selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: selected ? colors_1.WHITE_ALPHA_06 : colors_1.TRANSPARENT,
+                hoverBackground: colors_1.WHITE_ALPHA_06,
+                idleColor: selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
+                hoverColor: colors_1.WHITE,
+            }),
             paddingLeft: 12 + level * 8,
         };
-    }, [hovered, level, selected]);
-    const label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: hovered || selected ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [hovered, selected]);
+    }, [level, selected]);
     const renderFileExplorerAction = (0, react_1.useCallback)((color) => {
         return jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: revealIconStyle, color: color });
     }, []);
-    const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
-    }, []);
     const copyFileName = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(item.name)
             .then(() => {
@@ -392,6 +530,19 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
         });
     }, [relativePath]);
+    const copyAbsolutePath = (0, react_1.useCallback)(() => {
+        if (window.remotion_publicFolderExists === null) {
+            return;
+        }
+        const content = `${window.remotion_publicFolderExists}/${relativePath}`;
+        (0, copy_text_1.copyText)(content)
+            .then(() => {
+            (0, NotificationCenter_1.showNotification)(`Copied '${content}' to clipboard`, 1000);
+        })
+            .catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not copy: ${err.message}`, 2000);
+        });
+    }, [relativePath]);
     const openAssetInConvert = (0, react_1.useCallback)(() => {
         (0, open_in_remotion_convert_1.openInRemotionConvert)({ relativePath });
     }, [relativePath]);
@@ -425,6 +576,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
             fileManagerName,
             copyFileName,
             copyStaticFilePath,
+            copyAbsolutePath: window.remotion_publicFolderExists === null ? null : copyAbsolutePath,
             openAssetInConvert,
             openAssetInExplorer,
             renameAsset,
@@ -436,6 +588,7 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
     }, [
         copyFileName,
         copyStaticFilePath,
+        copyAbsolutePath,
         deleteAsset,
         fileExplorerDisabled,
         fileManagerName,
@@ -449,13 +602,9 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         openAssetInExplorer();
     }, [openAssetInExplorer]);
-    const copyToClipboard = (0, react_1.useCallback)((e) => {
-        e.stopPropagation();
-        copyStaticFilePath();
-    }, [copyStaticFilePath]);
-    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 })
+    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, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.HOVER_GROUP_CLASS_NAME}`, 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: colors_1.CURRENT_COLOR }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: labelStyle, children: item.name }), !isDragging ? (jsx_runtime_1.jsxs("div", { className: hoverable_1.HOVER_GROUP_REVEAL_CLASS_NAME, style: inlineActionsStyle, children: [
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { variant: null, title: "More actions", renderAction: renderContextMenuAction, getItems: getContextMenuItems, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME }), 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, style: hoverable_1.NO_HOVER_BACKGROUND_STYLE, className: hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME })
                                 ] }))] })) : null] }) }) }));
 };

package/dist/components/Button.js

@@ -4,35 +4,48 @@ exports.Button = 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 button = {
-    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
-    borderRadius: 4,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
     appearance: 'none',
+    border: 'none',
+    borderRadius: 6,
+    cursor: 'default',
     fontFamily: 'inherit',
     fontSize: 14,
-    color: colors_1.WHITE,
     flexDirection: 'row',
+    margin: 0,
+    padding: 0,
 };
 const ButtonRefForwardFunction = ({ children, onClick, title, disabled, size = 'default', style, id, autoFocus, buttonContainerStyle, onPointerDown, }, ref) => {
     const combined = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        const idleBackground = (_a = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _a !== void 0 ? _a : colors_1.TRANSPARENT;
+        const idleColor = (_b = style === null || style === void 0 ? void 0 : style.color) !== null && _b !== void 0 ? _b : colors_1.LIGHT_TEXT;
         return {
             ...button,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground,
+                hoverBackground: disabled || (style === null || style === void 0 ? void 0 : style.backgroundColor)
+                    ? idleBackground
+                    : (0, colors_1.getBackgroundFromHoverState)({ hovered: true, selected: false }),
+                idleColor,
+                hoverColor: disabled || (style === null || style === void 0 ? void 0 : style.color) ? idleColor : colors_1.WHITE,
+            }),
             ...(size === 'compact' ? { fontSize: 12 } : null),
             ...(size === 'condensed' ? { fontSize: 11 } : null),
             ...(style !== null && style !== void 0 ? style : {}),
         };
-    }, [size, style]);
+    }, [disabled, size, style]);
     const buttonContainer = (0, react_1.useMemo)(() => {
         return {
             padding: size === 'condensed' ? '2px 7px' : size === 'compact' ? '5px 8px' : 10,
-            cursor: disabled ? 'inherit' : 'pointer',
+            cursor: 'default',
             fontSize: size === 'condensed' ? 11 : size === 'compact' ? 12 : 14,
             lineHeight: size === 'condensed' ? '14px' : size === 'compact' ? '14px' : undefined,
             opacity: disabled ? 0.7 : 1,
             ...(buttonContainerStyle !== null && buttonContainerStyle !== void 0 ? buttonContainerStyle : {}),
         };
     }, [buttonContainerStyle, disabled, size]);
-    return (jsx_runtime_1.jsx("button", { ref: ref, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
+    return (jsx_runtime_1.jsx("button", { ref: ref, className: `${hoverable_1.HOVERABLE_CLASS_NAME} ${hoverable_1.FOCUS_VISIBLE_ONLY_CLASS_NAME}`, id: id, style: combined, type: "button", disabled: disabled, onClick: onClick, onPointerDown: onPointerDown, autoFocus: autoFocus, title: title, children: jsx_runtime_1.jsx("div", { className: "css-reset", style: buttonContainer, children: children }) }));
 };
 exports.Button = (0, react_1.forwardRef)(ButtonRefForwardFunction);