@remotion/studio 4.0.472 → 4.0.474

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -8,13 +8,17 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
 const format_file_location_1 = require("../../helpers/format-file-location");
+const install_required_package_1 = require("../../helpers/install-required-package");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
+const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const use_select_asset_1 = require("../use-select-asset");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const save_sequence_prop_1 = require("./save-sequence-prop");
+const timeline_asset_link_1 = require("./timeline-asset-link");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineItemStack_1 = require("./TimelineItemStack");
@@ -37,6 +41,68 @@ const effectDropHighlight = {
     outline: '1px solid rgba(0, 155, 255, 0.75)',
     outlineOffset: -1,
 };
+const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+let currentSequenceDrag = null;
+const sequenceReorderWrapper = {
+    position: 'relative',
+};
+const sequenceReorderLineBase = {
+    backgroundColor: '#0b84ff',
+    height: 2,
+    left: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 0,
+    zIndex: 1,
+};
+const sequenceReorderRejectionStyle = {
+    backgroundColor: 'rgba(0, 0, 0, 0.85)',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 4,
+    color: 'white',
+    fontSize: 11,
+    lineHeight: 1.2,
+    maxWidth: 260,
+    padding: '3px 6px',
+    pointerEvents: 'none',
+    position: 'absolute',
+    right: 6,
+    top: 2,
+    zIndex: 2,
+};
+const hasSequenceReorderDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).includes(SEQUENCE_REORDER_MIME_TYPE);
+};
+const isSequenceReorderDrag = (dataTransfer) => {
+    return (currentSequenceDrag !== null || hasSequenceReorderDragType(dataTransfer));
+};
+const getSequenceReorderDragData = (dataTransfer) => {
+    if (currentSequenceDrag) {
+        return currentSequenceDrag;
+    }
+    const value = dataTransfer.getData(SEQUENCE_REORDER_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(value);
+        if (typeof parsed.nodePathKey === 'string' &&
+            typeof parsed.trackIndex === 'number' &&
+            (typeof parsed.parentId === 'string' || parsed.parentId === null) &&
+            typeof parsed.fileName === 'string' &&
+            parsed.nodePath &&
+            Array.isArray(parsed.nodePath.nodePath)) {
+            return parsed;
+        }
+    }
+    catch (_a) {
+        return null;
+    }
+    return null;
+};
+const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
+    return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
+};
 const hasEffectDragType = (dataTransfer) => {
     return Array.from(dataTransfer.types).some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE ||
         type === 'application/json' ||
@@ -59,20 +125,22 @@ const getEffectDragData = (dataTransfer) => {
     }
     return null;
 };
-const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset }) => {
+const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, trackIndex, }) => {
     var _a, _b;
-    var _c;
+    var _c, _d;
     const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
+    const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
+    const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
     const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
     const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
         location: originalLocation,
@@ -92,24 +160,35 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
+    const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
+    const parentId = (_d = sequence.parent) !== null && _d !== void 0 ? _d : null;
+    const canReorderSequence = TimelineSelection_1.SELECTION_ENABLED &&
+        previewConnected &&
+        Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
+        (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
+    const canHandleSequenceDrag = TimelineSelection_1.SELECTION_ENABLED && previewConnected;
+    const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
-        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo]).catch(() => undefined);
-    }, [nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
+    }, [confirm, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
         if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const message = 'This sequence is programmatically duplicated ' +
-                nodePathInfo.numberOfSequencesWithThisNodePath +
-                ' times in the code. Deleting removes all instances. Continue?';
-            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-            if (!window.confirm(message)) {
+            const shouldDelete = await confirm({
+                title: 'Delete sequence?',
+                message: 'This sequence is programmatically duplicated ' +
+                    nodePathInfo.numberOfSequencesWithThisNodePath +
+                    ' times in the code. Deleting removes all instances. Continue?',
+                confirmLabel: 'Delete',
+            });
+            if (!shouldDelete) {
                 return;
             }
         }
@@ -132,13 +211,173 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    }, [confirm, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    const getSequenceDropTarget = (0, react_1.useCallback)((e) => {
+        const dragData = getSequenceReorderDragData(e.dataTransfer);
+        if (!dragData) {
+            return null;
+        }
+        if (!nodePath || !nodePathKey || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return {
+                type: 'invalid',
+                reason: 'This sequence cannot be reordered from source.',
+            };
+        }
+        if (dragData.nodePathKey === nodePathKey) {
+            return {
+                type: 'invalid',
+                reason: 'Drop onto another sequence to reorder.',
+            };
+        }
+        if ((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== 1) {
+            return {
+                type: 'invalid',
+                reason: 'Programmatically duplicated sequences cannot be reordered.',
+            };
+        }
+        if (dragData.parentId !== parentId ||
+            dragData.fileName !== validatedLocation.source) {
+            return {
+                type: 'invalid',
+                reason: 'Sequences can only be reordered with direct JSX siblings.',
+            };
+        }
+        const rect = e.currentTarget.getBoundingClientRect();
+        const before = e.clientY < rect.top + rect.height / 2;
+        const insertionIndex = before ? trackIndex : trackIndex + 1;
+        const toIndex = getDestinationIndex({
+            fromIndex: dragData.trackIndex,
+            insertionIndex,
+        });
+        if (toIndex === dragData.trackIndex) {
+            return {
+                type: 'invalid',
+                reason: 'This sequence is already in that position.',
+            };
+        }
+        return {
+            type: 'valid',
+            dragData,
+            position: before ? 'before' : 'after',
+        };
+    }, [
+        nodePath,
+        nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath,
+        nodePathKey,
+        parentId,
+        trackIndex,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onSequenceDragStart = (0, react_1.useCallback)((e) => {
+        if (!canReorderSequence ||
+            !nodePath ||
+            !nodePathKey ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            e.preventDefault();
+            return;
+        }
+        const dragData = {
+            nodePath,
+            nodePathKey,
+            trackIndex,
+            parentId,
+            fileName: validatedLocation.source,
+        };
+        currentSequenceDrag = dragData;
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData(SEQUENCE_REORDER_MIME_TYPE, JSON.stringify(dragData));
+        e.stopPropagation();
+    }, [
+        canReorderSequence,
+        nodePath,
+        nodePathKey,
+        parentId,
+        trackIndex,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
+    const onSequenceDragEnd = (0, react_1.useCallback)(() => {
+        currentSequenceDrag = null;
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+    }, []);
+    const onSequenceDragOver = (0, react_1.useCallback)((e) => {
+        if (!hasSequenceReorderDragType(e.dataTransfer)) {
+            return;
+        }
+        const dropTarget = getSequenceDropTarget(e);
+        if (!dropTarget) {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection(null);
+            return;
+        }
+        if (dropTarget.type === 'invalid') {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection(dropTarget.reason);
+            e.dataTransfer.dropEffect = 'none';
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = 'move';
+        setSequenceDropIndicator(dropTarget.position);
+        setSequenceDropRejection(null);
+    }, [getSequenceDropTarget]);
+    const onSequenceDragLeave = (0, react_1.useCallback)((e) => {
+        if (e.currentTarget.contains(e.relatedTarget)) {
+            return;
+        }
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+    }, []);
+    const onSequenceDrop = (0, react_1.useCallback)(async (e) => {
+        if (!canReorderSequence ||
+            previewServerState.type !== 'connected' ||
+            !nodePath ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return;
+        }
+        const dropTarget = getSequenceDropTarget(e);
+        if (!dropTarget || dropTarget.type === 'invalid') {
+            setSequenceDropIndicator(null);
+            setSequenceDropRejection((dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.type) === 'invalid' ? dropTarget.reason : null);
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setSequenceDropIndicator(null);
+        setSequenceDropRejection(null);
+        currentSequenceDrag = null;
+        try {
+            const result = await (0, call_api_1.callApi)('/api/reorder-sequence', {
+                fileName: validatedLocation.source,
+                sourceNodePath: dropTarget.dragData.nodePath,
+                targetNodePath: nodePath,
+                position: dropTarget.position,
+                clientId: previewServerState.clientId,
+            });
+            if (result.success) {
+                (0, NotificationCenter_1.showNotification)('Reordered sequence', 2000);
+            }
+            else {
+                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            }
+        }
+        catch (err) {
+            (0, NotificationCenter_1.showNotification)(err.message, 4000);
+        }
+    }, [
+        canReorderSequence,
+        getSequenceDropTarget,
+        nodePath,
+        previewServerState,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const mediaSrc = sequence.type === 'audio' ||
         sequence.type === 'video' ||
         sequence.type === 'image'
         ? sequence.src
         : null;
-    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, TimelineMediaInfo_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
+    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
@@ -211,7 +450,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     leftItem: null,
                     disabled: false,
                     onClick: () => {
-                        (0, TimelineMediaInfo_1.openTimelineAssetLink)(assetLinkInfo, setCanvasContent);
+                        (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
                     },
                     quickSwitcherLabel: null,
                     subMenu: null,
@@ -269,8 +508,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         canOpenInEditor,
         openInEditor,
         previewConnected,
+        selectAsset,
         sequence,
-        setCanvasContent,
     ]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
@@ -290,26 +529,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         e.stopPropagation();
         openInEditor();
     }, [canOpenInEditor, openInEditor]);
-    const codeValuesForOverride = (0, react_1.useMemo)(() => {
+    const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
-            ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
+            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
             : undefined;
-    }, [codeValues, nodePath]);
-    const codeHiddenStatus = codeValuesForOverride === null || codeValuesForOverride === void 0 ? void 0 : codeValuesForOverride.hidden;
+    }, [propStatuses, nodePath]);
+    const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
-        const codeValue = codeHiddenStatus && codeHiddenStatus.status === 'static'
+        const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
         const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
-        const effective = (codeValue !== null && codeValue !== void 0 ? codeValue : runtimeValue);
+        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
             !validatedLocation ||
-            !codeValuesForOverride ||
+            !propStatusesForOverride ||
             !codeHiddenStatus ||
             codeHiddenStatus.status !== 'static' ||
             previewServerState.type !== 'connected') {
@@ -321,23 +560,29 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const defaultValue = fieldSchema && fieldSchema.type === 'boolean'
             ? JSON.stringify(fieldSchema.default)
             : null;
-        (0, save_sequence_prop_1.saveSequenceProp)({
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: 'hidden',
-            value: newValue,
-            defaultValue,
-            schema,
-            setCodeValues,
+        (0, save_sequence_prop_1.saveSequenceProps)({
+            changes: [
+                {
+                    fileName: validatedLocation.source,
+                    nodePath,
+                    fieldKey: 'hidden',
+                    value: newValue,
+                    defaultValue,
+                    schema,
+                },
+            ],
+            setPropStatuses,
             clientId: previewServerState.clientId,
+            undoLabel: newValue ? 'Hide sequence' : 'Show sequence',
+            redoLabel: newValue ? 'Hide sequence again' : 'Show sequence again',
         });
     }, [
         codeHiddenStatus,
-        codeValuesForOverride,
+        propStatusesForOverride,
         nodePath,
         previewServerState,
         sequence.controls,
-        setCodeValues,
+        setPropStatuses,
         validatedLocation,
     ]);
     const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
@@ -371,8 +616,19 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         nodePath !== null &&
         validatedLocation !== null &&
         ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
+    const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
+        if (!sequenceDropIndicator) {
+            return null;
+        }
+        return {
+            ...sequenceReorderLineBase,
+            ...(sequenceDropIndicator === 'before' ? { top: -1 } : { bottom: -1 }),
+        };
+    }, [sequenceDropIndicator]);
     const onEffectDragOver = (0, react_1.useCallback)((e) => {
-        if (!canDropEffect || !hasEffectDragType(e.dataTransfer)) {
+        if (!canDropEffect ||
+            isSequenceReorderDrag(e.dataTransfer) ||
+            !hasEffectDragType(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -389,7 +645,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         if (!canDropEffect ||
             previewServerState.type !== 'connected' ||
             nodePath === null ||
-            validatedLocation === null) {
+            validatedLocation === null ||
+            isSequenceReorderDrag(e.dataTransfer) ||
+            !hasEffectDragType(e.dataTransfer)) {
             return;
         }
         e.preventDefault();
@@ -401,6 +659,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             return;
         }
         try {
+            const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(dragData.effect.importPath);
+            await (0, install_required_package_1.installRequiredPackages)(requiredPackage ? [requiredPackage] : []);
             const result = await (0, call_api_1.callApi)('/api/add-effect', {
                 fileName: validatedLocation.source,
                 sequenceNodePath: nodePath,
@@ -425,7 +685,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
             ] }) }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: trackRow })) : (trackRow), previewConnected &&
+    const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&