@remotion/studio 4.0.518 → 4.0.519

package/dist/components/AppLaunchButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ComboboxValue } from './NewComposition/ComboBox';
+export declare const AppLaunchButton: React.FC<{
+    readonly actionButtonId: string | null;
+    readonly ariaLabel: string;
+    readonly children: React.ReactNode;
+    readonly disabled: boolean;
+    readonly menuAriaLabel: string;
+    readonly menuButtonId: string | null;
+    readonly menuItems: ComboboxValue[];
+    readonly onConfigureApps: (() => void) | null;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly size: 'compact' | 'default';
+    readonly style: React.CSSProperties | null;
+    readonly title: string;
+}>;

package/dist/components/AppLaunchButton.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppLaunchButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const get_open_in_menu_items_1 = require("./get-open-in-menu-items");
+const SegmentedButton_1 = require("./SegmentedButton");
+const compactMainSegmentStyle = {
+    fontFamily: 'inherit',
+    gap: 6,
+    padding: '0 9px',
+};
+const defaultMainSegmentStyle = {
+    ...compactMainSegmentStyle,
+    fontSize: 14,
+    lineHeight: '21px',
+};
+const dropdownSegmentStyle = {
+    fontFamily: 'inherit',
+    padding: 0,
+    width: 20,
+};
+const dropdownIconStyle = {
+    display: 'flex',
+    transform: 'translateY(-1px)',
+};
+const AppLaunchButton = ({ actionButtonId, ariaLabel, children, disabled, menuAriaLabel, menuButtonId, menuItems, onConfigureApps, onClick, size, style, title, }) => {
+    const items = (0, react_1.useMemo)(() => {
+        return [
+            ...menuItems,
+            ...(0, get_open_in_menu_items_1.getConfigureDefaultAppsMenuItems)({
+                hasPreviousItems: menuItems.length > 0,
+                onConfigureApps,
+            }),
+        ];
+    }, [menuItems, onConfigureApps]);
+    const segments = (0, react_1.useMemo)(() => {
+        return [
+            {
+                ariaLabel,
+                buttonId: actionButtonId,
+                disabled,
+                idleColor: colors_1.LIGHT_TEXT,
+                onClick,
+                onPointerDown: null,
+                renderContent: () => children,
+                segmentId: 'preferred-app',
+                style: size === 'default'
+                    ? defaultMainSegmentStyle
+                    : compactMainSegmentStyle,
+                title,
+                type: 'action',
+            },
+            ...(items.length > 0
+                ? [
+                    {
+                        ariaLabel: menuAriaLabel,
+                        buttonId: menuButtonId,
+                        disabled: false,
+                        idleColor: colors_1.LIGHT_TEXT,
+                        leaveLeftSpace: true,
+                        onOpenChange: null,
+                        renderContent: (color) => (jsx_runtime_1.jsx("span", { style: dropdownIconStyle, children: jsx_runtime_1.jsx(caret_1.CaretDown, { color: color }) })),
+                        segmentId: 'another-app',
+                        selectedId: null,
+                        style: dropdownSegmentStyle,
+                        title: menuAriaLabel,
+                        type: 'menu',
+                        values: items,
+                    },
+                ]
+                : []),
+        ];
+    }, [
+        actionButtonId,
+        ariaLabel,
+        children,
+        disabled,
+        items,
+        menuAriaLabel,
+        menuButtonId,
+        onClick,
+        size,
+        title,
+    ]);
+    return (jsx_runtime_1.jsx(SegmentedButton_1.SegmentedButton, { segments: segments, style: { ...(size === 'default' ? { height: 41 } : null), ...style }, title: null }));
+};
+exports.AppLaunchButton = AppLaunchButton;

package/dist/components/AssetSelector.js

@@ -177,7 +177,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
             setDropLocation(null);
         }
     }, [dropLocation, writeFilesToPublicFolder]);
-    const uploadAssets = (0, react_1.useCallback)(async () => {
+    const uploadAssets = (0, react_1.useCallback)(async (assetPath) => {
         try {
             const files = await (0, import_assets_1.pickFilesToImport)();
             if (files.length === 0) {
@@ -185,12 +185,13 @@ const AssetSelector = ({ readOnlyStudio }) => {
             }
             const wereWritten = await writeFilesToPublicFolder({
                 files,
-                assetPath: null,
+                assetPath,
             });
             if (wereWritten) {
+                const destination = assetPath ? `'${assetPath}'` : 'public folder';
                 (0, NotificationCenter_1.showNotification)(files.length === 1
-                    ? `Uploaded ${files[0].name} to public folder`
-                    : `Uploaded ${files.length} assets to public folder`, 3000);
+                    ? `Uploaded ${files[0].name} to ${destination}`
+                    : `Uploaded ${files.length} assets to ${destination}`, 3000);
             }
         }
         catch (error) {
@@ -204,7 +205,7 @@ const AssetSelector = ({ readOnlyStudio }) => {
                 keyHint: null,
                 label: 'Upload...',
                 leftItem: null,
-                onClick: uploadAssets,
+                onClick: () => uploadAssets(null),
                 quickSwitcherLabel: 'Upload assets...',
                 subMenu: null,
                 type: 'item',
@@ -219,6 +220,6 @@ const AssetSelector = ({ readOnlyStudio }) => {
                         " in the root of your project and place a file in it."] }) }))) : (jsx_runtime_1.jsx("div", { className: "__remotion-vertical-scrollbar", style: {
                     ...list,
                     backgroundColor: isDropDiv ? colors_1.WHITE_ALPHA_06 : colors_1.BACKGROUND,
-                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio }) }))] }));
+                }, onDragEnter: onDragEnter, onDragLeave: onDragLeave, children: jsx_runtime_1.jsx(AssetSelectorItem_1.AssetFolderTree, { item: assetTree, level: 0, parentFolder: null, name: null, tabIndex: tabIndex, toggleFolder: toggleFolder, dropLocation: dropLocation, setDropLocation: setDropLocation, readOnlyStudio: readOnlyStudio, uploadAssets: uploadAssets }) }))] }));
 };
 exports.AssetSelector = AssetSelector;

package/dist/components/AssetSelectorItem.d.ts

@@ -28,6 +28,17 @@ export declare const getAssetContextMenuItems: ({ relativePath, fileManagerName,
     fileExplorerDisabled: boolean;
     mutationsDisabled: boolean;
 }) => ComboboxValue[];
+export declare const getAssetFolderContextMenuItems: ({ folderPath, fileManagerName, copyFolderPath, copyAbsolutePath, openFolderInExplorer, uploadAssets, fileExplorerAvailable, fileExplorerDisabled, mutationsDisabled, }: {
+    folderPath: string;
+    fileManagerName: string;
+    copyFolderPath: () => void;
+    copyAbsolutePath: (() => void) | null;
+    openFolderInExplorer: () => void;
+    uploadAssets: () => void;
+    fileExplorerAvailable: boolean;
+    fileExplorerDisabled: boolean;
+    mutationsDisabled: boolean;
+}) => ComboboxValue[];
 export declare const AssetFolderTree: React.FC<{
     readonly item: AssetStructure;
     readonly name: string | null;
@@ -38,4 +49,5 @@ export declare const AssetFolderTree: React.FC<{
     readonly dropLocation: string | null;
     readonly setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
     readonly readOnlyStudio: boolean;
+    readonly uploadAssets: (assetPath: string | null) => void;
 }>;

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");
@@ -71,7 +71,6 @@ const iconStyle = {
     flexShrink: 0,
 };
 const itemStyle = {
-    paddingRight: 10,
     paddingTop: 5,
     paddingBottom: 5,
     fontSize: 13,
@@ -86,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',
@@ -109,11 +107,19 @@ const ellipsisIconStyle = {
         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',
     };
@@ -226,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,
+            ...(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 label = (0, react_1.useMemo)(() => {
-        return {
-            ...labelStyle,
-            color: hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT,
-        };
-    }, [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));
             })] }));
@@ -294,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)(() => {
@@ -319,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)({
@@ -376,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 renderContextMenuAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { svgProps: ellipsisIconStyle, fill: color });
-    }, []);
     const copyFileName = (0, react_1.useCallback)(() => {
         (0, copy_text_1.copyText)(item.name)
             .then(() => {
@@ -484,8 +602,8 @@ const AssetSelectorItem = ({ item, tabIndex, level, parentFolder, readOnlyStudio
         e.stopPropagation();
         openAssetInExplorer();
     }, [openAssetInExplorer]);
-    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: [
+    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);