@remotion/studio 4.0.483 → 4.0.485

package/dist/components/ColorPicker/ColorPicker.js

@@ -8,6 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
+const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
 const z_index_1 = require("../../state/z-index");
 const is_menu_item_1 = require("../Menu/is-menu-item");
 const portals_1 = require("../Menu/portals");
@@ -36,6 +39,23 @@ const fillStyle = {
     inset: 0,
     display: 'block',
 };
+const controlStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 3,
+    flex: '0 0 auto',
+};
+const eyedropperButtonBaseStyle = {
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    color: colors_1.LIGHT_TEXT,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: '0 0 auto',
+};
 const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
     const [opened, setOpened] = (0, react_1.useState)(false);
     const triggerRef = (0, react_1.useRef)(null);
@@ -65,6 +85,24 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
         };
     }, [borderRadius, customStyle, disabled, height, width]);
+    const eyedropperButtonSize = Math.max(15, Math.min(28, height));
+    const eyedropperIconSize = Math.max(12, Math.min(18, eyedropperButtonSize - 2));
+    const eyedropperButtonStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...eyedropperButtonBaseStyle,
+            width: eyedropperButtonSize,
+            height: eyedropperButtonSize,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+        };
+    }, [disabled, eyedropperButtonSize]);
+    const eyedropperIconStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: eyedropperIconSize,
+            height: eyedropperIconSize,
+            pointerEvents: 'none',
+        };
+    }, [eyedropperIconSize]);
     // Toggle on pointerdown (matches Combobox) so the state flips before the
     // HigherZIndex outside-click detection runs on pointerup. If we toggled in
     // onClick, the popup would close in pointerup and immediately re-open in
@@ -98,6 +136,28 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
             return !prev;
         });
     }, [disabled, refresh]);
+    const onPickWithEyeDropper = (0, react_1.useCallback)(() => {
+        if (disabled) {
+            return;
+        }
+        const Ctor = window.EyeDropper;
+        if (!Ctor) {
+            return;
+        }
+        setOpened(false);
+        const dropper = new Ctor();
+        dropper
+            .open()
+            .then((result) => {
+            onChangeComplete((0, color_conversion_1.formatRgba)((0, ColorPickerPopup_1.parseEyeDropperColor)(result.sRGBHex)));
+        })
+            .catch(() => {
+            // Aborted; ignore.
+        });
+    }, [disabled, onChangeComplete]);
+    const onEyeDropperPointerDown = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+    }, []);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!opened || !size) {
             return null;
@@ -139,10 +199,12 @@ const ColorPicker = ({ value, onChange, onChangeComplete, disabled, width = 45,
         window.addEventListener('blur', onWindowBlur);
         return () => window.removeEventListener('blur', onWindowBlur);
     }, [opened]);
+    const showEyeDropper = (0, ColorPickerPopup_1.hasEyeDropper)();
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
-                    .filter(Boolean)
-                    .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), portalStyle
+            jsx_runtime_1.jsxs("span", { style: controlStyle, children: [
+                    jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
+                            .filter(Boolean)
+                            .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", disabled: disabled, style: eyedropperButtonStyle, onPointerDown: onEyeDropperPointerDown, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: eyedropperIconStyle, color: "currentColor" }) })) : null] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/ColorPicker/ColorPickerPopup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const POPUP_WIDTH = 240;
+export declare const hasEyeDropper: () => boolean;
 export declare const parseEyeDropperColor: (pickedColor: string) => {
     r: number;
     g: number;

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.POPUP_WIDTH = void 0;
+exports.ColorPickerPopup = exports.parseEyeDropperColor = exports.hasEyeDropper = exports.POPUP_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const color_conversion_1 = require("../../helpers/color-conversion");
@@ -100,6 +100,7 @@ const eyedropperButtonStyle = {
     flex: '0 0 auto',
 };
 const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+exports.hasEyeDropper = hasEyeDropper;
 const parseEyeDropperColor = (pickedColor) => {
     const parsed = (0, color_conversion_1.parseAnyColor)(pickedColor);
     return {
@@ -268,7 +269,7 @@ const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
             backgroundColor: formatted,
         };
     }, [formatted]);
-    const showEyeDropper = hasEyeDropper();
+    const showEyeDropper = (0, exports.hasEyeDropper)();
     return (jsx_runtime_1.jsxs("div", { style: popupShellStyle, children: [
             jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: "currentColor" }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
                             jsx_runtime_1.jsx(HueSlider_1.HueSlider, { hue: hsva.h, onChange: onHueChange, onChangeComplete: onHueComplete }), jsx_runtime_1.jsx(AlphaSlider_1.AlphaSlider, { hue: hsva.h, saturation: hsva.s, value: hsva.v, alpha: hsva.a, onChange: onAlphaChange, onChangeComplete: onAlphaComplete })

package/dist/components/ContextMenu.js

@@ -47,7 +47,25 @@ const z_index_1 = require("../state/z-index");
 const portals_1 = require("./Menu/portals");
 const styles_1 = require("./Menu/styles");
 const MenuContent_1 = require("./NewComposition/MenuContent");
+const CONTEXT_MENU_Z_INDEX = 1001;
+const contextMenuFullScreenOverlay = {
+    ...styles_1.fullScreenOverlay,
+    pointerEvents: 'none',
+    zIndex: CONTEXT_MENU_Z_INDEX,
+};
+const contextMenuOuterPortal = {
+    ...styles_1.outerPortal,
+    pointerEvents: 'auto',
+};
+const contextMenuOpenedEvent = 'remotion-context-menu-opened';
+let nextContextMenuId = 0;
+const notifyContextMenuOpened = (id) => {
+    window.dispatchEvent(new CustomEvent(contextMenuOpenedEvent, {
+        detail: id,
+    }));
+};
 const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }) => {
+    const menuRef = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(sizeSource, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,
@@ -103,6 +121,34 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
         spaceToTop,
         spaceToBottom,
     ]);
+    (0, react_1.useEffect)(() => {
+        const preventNativeContextMenu = (event) => {
+            event.preventDefault();
+        };
+        window.addEventListener('contextmenu', preventNativeContextMenu, true);
+        return () => {
+            window.removeEventListener('contextmenu', preventNativeContextMenu, true);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const dismissWithoutClickThrough = (event) => {
+            var _a;
+            if (event.button !== 0) {
+                return;
+            }
+            if ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            onHide();
+        };
+        window.addEventListener('pointerdown', dismissWithoutClickThrough, true);
+        return () => {
+            window.removeEventListener('pointerdown', dismissWithoutClickThrough, true);
+        };
+    }, [onHide]);
     // Prevent deselection of a selected item
     const onMenuPointerDown = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
@@ -110,10 +156,11 @@ const ContextMenuPortal = ({ sizeSource, currentZIndex, onHide, opened, values }
     if (!portalStyle) {
         return null;
     }
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: contextMenuFullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: contextMenuOuterPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, outsideClickButton: "primary", children: jsx_runtime_1.jsx("div", { ref: menuRef, style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: false, topItemCanBeUnselected: false, fixedHeight: null }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex));
 };
 exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, style = undefined, className = undefined, onPointerDown = undefined, }, forwardedRef) => {
     const ref = (0, react_1.useRef)(null);
+    const idRef = (0, react_1.useRef)(nextContextMenuId++);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const setRef = (0, react_1.useCallback)((node) => {
@@ -137,6 +184,7 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
             if ((onOpen === null || onOpen === void 0 ? void 0 : onOpen()) === false) {
                 return false;
             }
+            notifyContextMenuOpened(idRef.current);
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
         };
@@ -148,11 +196,24 @@ exports.ContextMenu = react_1.default.forwardRef(({ children, values, onOpen, st
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    (0, react_1.useEffect)(() => {
+        const onOtherContextMenuOpened = (event) => {
+            if (event.detail === idRef.current) {
+                return;
+            }
+            onHide();
+        };
+        window.addEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        return () => {
+            window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        };
+    }, [onHide]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsx("div", { ref: setRef, onContextMenu: () => false, style: style, className: className, onPointerDown: onPointerDown, children: children }), opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: ref, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: values })) : null] }));
 });
 exports.ContextMenu.displayName = 'ContextMenu';
 const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
+    const idRef = (0, react_1.useRef)(nextContextMenuId++);
     const [opened, setOpened] = (0, react_1.useState)({ type: 'not-open' });
     const [openedValues, setOpenedValues] = (0, react_1.useState)(values);
     const [body, setBody] = (0, react_1.useState)(null);
@@ -179,6 +240,7 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
             if (nextValues.length === 0) {
                 return false;
             }
+            notifyContextMenuOpened(idRef.current);
             setOpenedValues(nextValues);
             setOpened({ type: 'open', left: e.clientX, top: e.clientY });
             return false;
@@ -191,6 +253,18 @@ const ContextMenuForTarget = ({ triggerRef, values, onOpen }) => {
     const onHide = (0, react_1.useCallback)(() => {
         setOpened({ type: 'not-open' });
     }, []);
+    (0, react_1.useEffect)(() => {
+        const onOtherContextMenuOpened = (event) => {
+            if (event.detail === idRef.current) {
+                return;
+            }
+            onHide();
+        };
+        window.addEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        return () => {
+            window.removeEventListener(contextMenuOpenedEvent, onOtherContextMenuOpened);
+        };
+    }, [onHide]);
     return opened.type === 'open' ? (jsx_runtime_1.jsx(ContextMenuPortal, { sizeSource: body, currentZIndex: currentZIndex, onHide: onHide, opened: opened, values: [...openedValues] })) : null;
 };
 exports.ContextMenuForTarget = ContextMenuForTarget;

package/dist/components/CurrentComposition.js

@@ -7,13 +7,14 @@ const remotion_1 = require("remotion");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const render_frame_1 = require("../state/render-frame");
+const InlineCompositionName_1 = require("./InlineCompositionName");
 const InspectorInfoHeader_1 = require("./InspectorInfoHeader");
 const InspectorSourceLocation_1 = require("./InspectorSourceLocation");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 exports.CURRENT_COMPOSITION_HEIGHT = InspectorInfoHeader_1.INSPECTOR_INFO_HEADER_MIN_HEIGHT;
 const CurrentComposition = () => {
-    var _a;
+    var _a, _b;
     const video = remotion_1.Internals.useVideo();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const currentComposition = (0, react_1.useMemo)(() => {
@@ -44,6 +45,6 @@ const CurrentComposition = () => {
         });
     }, [validatedLocation]);
     return (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoHeader, { children: video ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoTitle, { children: video.id }), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
+                jsx_runtime_1.jsx(InlineCompositionName_1.InlineCompositionName, { compositionId: video.id, stack: (_b = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _b !== void 0 ? _b : null, compositions: compositions }, video.id), jsx_runtime_1.jsx(InspectorSourceLocation_1.InspectorSourceLocation, { location: validatedLocation, canOpen: validatedLocation !== null, onOpen: openFileLocation }), jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? (jsx_runtime_1.jsx(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: "Still" })) : (jsx_runtime_1.jsxs(InspectorInfoHeader_1.InspectorInfoSubtitle, { children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })) : null }));
 };
 exports.CurrentComposition = CurrentComposition;

package/dist/components/InlineCompositionName.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+import type { _InternalTypes } from 'remotion';
+export declare const InlineCompositionName: React.FC<{
+    readonly compositionId: string;
+    readonly stack: string | null;
+    readonly compositions: _InternalTypes['AnyComposition'][];
+}>;

package/dist/components/InlineCompositionName.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineCompositionName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const resolved_stack_to_symbolicated_1 = require("../helpers/resolved-stack-to-symbolicated");
+const use_rename_composition_1 = require("../helpers/use-rename-composition");
+const InlineEditableTitle_1 = require("./InlineEditableTitle");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
+const InlineCompositionName = ({ compositionId, stack, compositions }) => {
+    const canRename = !window.remotion_isReadOnlyStudio;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const { getValidationMessage, renameComposition } = (0, use_rename_composition_1.useRenameComposition)({
+        compositions,
+        currentId: compositionId,
+        newId: compositionId,
+    });
+    const commit = (0, react_1.useCallback)((newId) => {
+        if (newId === compositionId) {
+            return;
+        }
+        const compNameErrMessage = getValidationMessage(newId);
+        if (compNameErrMessage) {
+            (0, NotificationCenter_1.showNotification)(compNameErrMessage, 2000);
+            return;
+        }
+        if (!stack || !symbolicatedStack) {
+            (0, NotificationCenter_1.showNotification)('Could not determine where this composition is defined', 2000);
+            return;
+        }
+        const notification = (0, NotificationCenter_1.showNotification)('Renaming...', null);
+        renameComposition({
+            newCompositionId: newId,
+            signal: new AbortController().signal,
+            symbolicatedStack,
+        })
+            .then((result) => {
+            if (!result.success) {
+                notification.replaceContent(`Could not rename composition: ${result.reason}`, 2000);
+                return;
+            }
+            notification.replaceContent(`Renamed to ${newId}`, 2000);
+        })
+            .catch((err) => {
+            notification.replaceContent(`Could not rename composition: ${err.message}`, 2000);
+        });
+    }, [
+        compositionId,
+        getValidationMessage,
+        renameComposition,
+        stack,
+        symbolicatedStack,
+    ]);
+    return (jsx_runtime_1.jsx(InlineEditableTitle_1.InlineEditableTitle, { value: compositionId, canRename: canRename, onCommit: commit }));
+};
+exports.InlineCompositionName = InlineCompositionName;

package/dist/components/InlineEditableTitle.d.ts

@@ -0,0 +1,7 @@
+import type * as React from 'react';
+export declare const InlineEditableTitle: React.FC<{
+    readonly value: string;
+    readonly canRename: boolean;
+    readonly onCommit: (newValue: string) => void;
+    readonly title?: string;
+}>;

package/dist/components/InlineEditableTitle.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEditableTitle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const titleWrapper = {
+    boxSizing: 'border-box',
+    color: 'white',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    marginLeft: -4,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: 'calc(100% + 4px)',
+};
+const titleInner = {
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'inline-grid',
+    fontSize: 12,
+    lineHeight: '18px',
+    maxWidth: '100%',
+    paddingLeft: 4,
+    paddingRight: 4,
+    verticalAlign: 'top',
+};
+const titleGridItem = {
+    fontSize: 12,
+    gridArea: '1 / 1',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+const titleInput = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'white',
+    fontFamily: 'inherit',
+    fontSize: 12,
+    height: 18,
+    lineHeight: '18px',
+    margin: 0,
+    minWidth: 0,
+    outline: 'none',
+    overflow: 'hidden',
+    padding: 0,
+    WebkitAppearance: 'none',
+    width: '100%',
+};
+const InlineEditableTitle = ({ value, canRename, onCommit, title }) => {
+    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [draftValue, setDraftValue] = (0, react_1.useState)(value);
+    const inputRef = (0, react_1.useRef)(null);
+    const cancelledRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isEditing) {
+            setDraftValue(value);
+        }
+    }, [isEditing, value]);
+    const focusInput = (0, react_1.useCallback)((input) => {
+        inputRef.current = input;
+        if (!input) {
+            return;
+        }
+        input.focus();
+        input.select();
+    }, []);
+    const commit = (0, react_1.useCallback)((newValue) => {
+        if (cancelledRef.current) {
+            return;
+        }
+        setIsEditing(false);
+        onCommit(newValue);
+    }, [onCommit]);
+    const startEditing = (0, react_1.useCallback)(() => {
+        if (!canRename) {
+            return;
+        }
+        cancelledRef.current = false;
+        setDraftValue(value);
+        setIsEditing(true);
+    }, [canRename, value]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setDraftValue(e.target.value);
+    }, []);
+    const onBlur = (0, react_1.useCallback)((e) => {
+        commit(e.currentTarget.value);
+    }, [commit]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelledRef.current = true;
+            setDraftValue(value);
+            setIsEditing(false);
+        }
+    }, [value]);
+    const backgroundColor = isEditing
+        ? colors_1.INPUT_BACKGROUND
+        : isHovered && canRename
+            ? colors_1.CLEAR_HOVER
+            : 'transparent';
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...titleInner,
+            backgroundColor,
+            cursor: isEditing ? 'text' : canRename ? 'pointer' : 'default',
+            userSelect: isEditing ? 'text' : 'none',
+            width: isEditing ? '100%' : undefined,
+        };
+    }, [backgroundColor, canRename, isEditing]);
+    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !canRename ? undefined : startEditing, children: [
+                jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
+                        ...titleGridItem,
+                        visibility: isEditing ? 'hidden' : 'visible',
+                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...titleGridItem, ...titleInput }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
+};
+exports.InlineEditableTitle = InlineEditableTitle;