@nyaruka/temba-components 0.156.4 → 0.156.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.156.4",
+  "version": "0.156.6",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/flow/CanvasNode.ts

@@ -5,7 +5,8 @@ import { ACTION_GROUP_METADATA, SPLIT_GROUP_METADATA } from './types';
 import { Action, Exit, Node, NodeUI, Router } from '../store/flow-definition';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
-import { getClasses } from '../utils';
+import { generateUUID, getClasses } from '../utils';
+import { SortableList } from '../list/SortableList';
 import { isRightClick, localizeAction, renderClamped } from './utils';
 import { Plumber } from './Plumber';
 import { getStore } from '../store/Store';
@@ -363,6 +364,7 @@ export class CanvasNode extends RapidElement {
       /* Localizable category - yellow background */
       .category.localizable {
         background-color: #fff8dc;
+        border-color: #e8daa0;
       }
 
       .action-exits {
@@ -594,6 +596,8 @@ export class CanvasNode extends RapidElement {
       this.handleExternalActionDragLeave.bind(this);
     this.handleActionShowGhost = this.handleActionShowGhost.bind(this);
     this.handleActionHideGhost = this.handleActionHideGhost.bind(this);
+    this.handleActionShowOriginal = this.handleActionShowOriginal.bind(this);
+    this.handleActionHideOriginal = this.handleActionHideOriginal.bind(this);
   }
 
   connectedCallback() {
@@ -620,6 +624,14 @@ export class CanvasNode extends RapidElement {
       'action-hide-ghost',
       this.handleActionHideGhost as EventListener
     );
+    this.addEventListener(
+      'action-show-original',
+      this.handleActionShowOriginal as EventListener
+    );
+    this.addEventListener(
+      'action-hide-original',
+      this.handleActionHideOriginal as EventListener
+    );
 
     // Observe size changes to revalidate plumbing connections
     this.resizeObserver = new ResizeObserver(() => {
@@ -731,6 +743,14 @@ export class CanvasNode extends RapidElement {
       'action-hide-ghost',
       this.handleActionHideGhost as EventListener
     );
+    this.removeEventListener(
+      'action-show-original',
+      this.handleActionShowOriginal as EventListener
+    );
+    this.removeEventListener(
+      'action-hide-original',
+      this.handleActionHideOriginal as EventListener
+    );
 
     // Clear any pending exit removal timeouts
     this.exitRemovalTimeouts.forEach((timeoutId) => {
@@ -1551,11 +1571,32 @@ export class CanvasNode extends RapidElement {
     }
   }
 
+  private handleActionShowOriginal(_event: CustomEvent): void {
+    const sortableList = this.querySelector(
+      'temba-sortable-list'
+    ) as SortableList;
+    sortableList?.setOriginalVisible(true);
+    this.showLastActionPlaceholder = false;
+    this.requestUpdate();
+  }
+
+  private handleActionHideOriginal(_event: CustomEvent): void {
+    const sortableList = this.querySelector(
+      'temba-sortable-list'
+    ) as SortableList;
+    sortableList?.setOriginalVisible(false);
+    // Restore the placeholder if this is the last action
+    if (this.node.actions.length === 1) {
+      this.showLastActionPlaceholder = true;
+    }
+    this.requestUpdate();
+  }
+
   private handleExternalActionDrop(event: CustomEvent): void {
     // Only handle if this is an execute_actions node
     if (this.ui.type !== 'execute_actions') return;
 
-    const { action, sourceNodeUuid, actionIndex } = event.detail;
+    const { action, sourceNodeUuid, actionIndex, isCopy } = event.detail;
 
     // Don't accept drops from the same node
     if (sourceNodeUuid === this.node.uuid) return;
@@ -1581,30 +1622,52 @@ export class CanvasNode extends RapidElement {
 
     // IMPORTANT: Add the action to this node FIRST, before removing from source
     // This ensures we don't lose the action if the source node gets deleted
+    const droppedAction = isCopy
+      ? { ...action, uuid: generateUUID() }
+      : action;
     const newActions = [...this.node.actions];
-    newActions.splice(dropIndex, 0, action);
+    newActions.splice(dropIndex, 0, droppedAction);
 
     const updatedNode = { ...this.node, actions: newActions };
     getStore()?.getState().updateNode(this.node.uuid, updatedNode);
 
-    // Now remove the action from the source node
-    const updatedSourceActions = sourceNode.actions.filter(
-      (_a, idx) => idx !== actionIndex
-    );
+    // Copy localizations from the original action to the new one
+    if (isCopy) {
+      const localization = flowDefinition.localization;
+      if (localization) {
+        for (const langCode of Object.keys(localization)) {
+          const entry = localization[langCode]?.[action.uuid];
+          if (entry) {
+            store.getState().updateLocalization(
+              langCode,
+              droppedAction.uuid,
+              JSON.parse(JSON.stringify(entry))
+            );
+          }
+        }
+      }
+    }
 
-    // If source node has no actions left, remove it
-    if (updatedSourceActions.length === 0) {
-      // Fire event to Editor so it can clean up jsPlumb connections properly
-      this.fireCustomEvent(CustomEventType.NodeDeleted, {
-        uuid: sourceNodeUuid
-      });
-    } else {
-      // Update source node
-      const updatedSourceNode = {
-        ...sourceNode,
-        actions: updatedSourceActions
-      };
-      getStore()?.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+    if (!isCopy) {
+      // Remove the action from the source node
+      const updatedSourceActions = sourceNode.actions.filter(
+        (_a, idx) => idx !== actionIndex
+      );
+
+      // If source node has no actions left, remove it
+      if (updatedSourceActions.length === 0) {
+        // Fire event to Editor so it can clean up jsPlumb connections properly
+        this.fireCustomEvent(CustomEventType.NodeDeleted, {
+          uuid: sourceNodeUuid
+        });
+      } else {
+        // Update source node
+        const updatedSourceNode = {
+          ...sourceNode,
+          actions: updatedSourceActions
+        };
+        getStore()?.getState().updateNode(sourceNodeUuid, updatedSourceNode);
+      }
     }
 
     // Request update and notify that this node's size changed

package/src/flow/Editor.ts

@@ -104,8 +104,9 @@ export interface SelectionBox {
 }
 
 const DRAG_THRESHOLD = 5;
-const AUTO_SCROLL_EDGE_ZONE = 100;
+const AUTO_SCROLL_EDGE_ZONE = 150;
 const AUTO_SCROLL_MAX_SPEED = 15;
+const AUTO_SCROLL_BEYOND_MULTIPLIER = 5;
 
 type TranslationType = 'property' | 'category';
 
@@ -499,6 +500,19 @@ export class Editor extends RapidElement {
   // Track previous target node to clear placeholder when moving between nodes
   private previousActionDragTargetNodeUuid: string | null = null;
 
+  // Track action external drag state for shift-copy support
+  private isActionExternalDrag = false;
+  private actionDragIsCopy = false;
+  private actionDragLastDetail: {
+    action: Action;
+    nodeUuid: string;
+    actionIndex: number;
+    mouseX: number;
+    mouseY: number;
+    actionHeight: number;
+    isLastAction: boolean;
+  } | null = null;
+
   // Connection placeholder state for dropping connections on empty canvas
   @state()
   private connectionPlaceholder: {
@@ -633,6 +647,7 @@ export class Editor extends RapidElement {
 
       #canvas.shift-held {
         --shift-held-cursor: copy;
+        cursor: copy;
       }
 
       #canvas.viewing-revision {
@@ -1415,6 +1430,11 @@ export class Editor extends RapidElement {
   }
 
   private makeConnection(info) {
+    this.stopAutoScroll();
+    this.autoScrollDeltaX = 0;
+    this.autoScrollDeltaY = 0;
+    this.lastPointerPos = null;
+
     if (this.sourceId && this.targetId && this.isValidTarget) {
       // going to the same target, just put it back
       if (info.target.id === this.targetId) {
@@ -2311,7 +2331,7 @@ export class Editor extends RapidElement {
     if (event.key === 'Shift') {
       this.querySelector('#canvas')?.classList.add('shift-held');
 
-      // Toggle to copy mode mid-drag
+      // Toggle to copy mode mid-drag (nodes)
       if (this.isDragging && !this.currentDragIsCopy) {
         this.hideDragHint();
         this.performShiftDragCopy();
@@ -2322,6 +2342,18 @@ export class Editor extends RapidElement {
           this.updateDragPositions();
         });
       }
+
+      // Toggle to copy mode mid-drag (actions)
+      if (this.isActionExternalDrag && !this.actionDragIsCopy) {
+        this.actionDragIsCopy = true;
+        this.hideDragHint();
+        this.showActionOriginal(true);
+        // If this is a last-action drag, now show the canvas preview
+        if (this.actionDragLastDetail?.isLastAction) {
+          this.reprocessActionDrag();
+        }
+        this.requestUpdate();
+      }
     }
 
     // Cmd/Ctrl+F opens flow search (unless a dialog is already open)
@@ -2357,11 +2389,23 @@ export class Editor extends RapidElement {
     if (event.key === 'Shift') {
       this.querySelector('#canvas')?.classList.remove('shift-held');
 
-      // Toggle back to move mode mid-drag
+      // Toggle back to move mode mid-drag (nodes)
       if (this.isDragging && this.currentDragIsCopy) {
         this.revertShiftDragCopy();
         requestAnimationFrame(() => this.updateDragPositions());
       }
+
+      // Toggle back to move mode mid-drag (actions)
+      if (this.isActionExternalDrag && this.actionDragIsCopy) {
+        this.actionDragIsCopy = false;
+        this.showDragHint();
+        this.showActionOriginal(false);
+        // If this is a last-action drag, hide the canvas preview again
+        if (this.actionDragLastDetail?.isLastAction) {
+          this.reprocessActionDrag();
+        }
+        this.requestUpdate();
+      }
     }
   }
 
@@ -2373,6 +2417,16 @@ export class Editor extends RapidElement {
       this.revertShiftDragCopy();
       requestAnimationFrame(() => this.updateDragPositions());
     }
+
+    // Revert action copy mode on blur
+    if (this.isActionExternalDrag && this.actionDragIsCopy) {
+      this.actionDragIsCopy = false;
+      this.showActionOriginal(false);
+      if (this.actionDragLastDetail?.isLastAction) {
+        this.reprocessActionDrag();
+      }
+      this.requestUpdate();
+    }
   }
 
   // --- Flow settings cookie (LRU, max 50 flows) ---
@@ -3513,6 +3567,9 @@ export class Editor extends RapidElement {
     }
 
     if (this.plumber.connectionDragging) {
+      this.lastPointerPos = { clientX: event.clientX, clientY: event.clientY };
+      this.startAutoScroll();
+
       const targetNode = document.querySelector('temba-flow-node:hover');
 
       // Clear previous target styles
@@ -3716,6 +3773,11 @@ export class Editor extends RapidElement {
 
     this.currentDragIsCopy = false;
 
+    // The remove calls above set dirtyDate, but we're just reverting a
+    // mid-drag copy — there's nothing to save yet.  Clear it so no
+    // revision is created while the drag is still in progress.
+    getStore().getState().setDirtyDate(null);
+
     // Restore drag context to originals
     this.currentDragItem = { ...this.originalDragItem };
     if (this.originalSelectedItems) {
@@ -3772,7 +3834,10 @@ export class Editor extends RapidElement {
     if (!editor) return;
 
     const tick = () => {
-      if (!this.isDragging || !this.lastPointerPos) {
+      if (
+        (!this.isDragging && !this.plumber?.connectionDragging) ||
+        !this.lastPointerPos
+      ) {
         this.autoScrollAnimationId = null;
         return;
       }
@@ -3784,32 +3849,56 @@ export class Editor extends RapidElement {
       let scrollDx = 0;
       let scrollDy = 0;
 
-      // Left edge
+      // Left edge (including beyond)
       const distFromLeft = mouseX - editorRect.left;
-      if (distFromLeft >= 0 && distFromLeft < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromLeft / AUTO_SCROLL_EDGE_ZONE;
-        scrollDx = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      if (distFromLeft < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromLeft < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromLeft / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDx = -(ratio * speed);
       }
 
-      // Right edge
+      // Right edge (including beyond)
       const distFromRight = editorRect.right - mouseX;
-      if (distFromRight >= 0 && distFromRight < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromRight / AUTO_SCROLL_EDGE_ZONE;
-        scrollDx = ratio * AUTO_SCROLL_MAX_SPEED;
+      if (distFromRight < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromRight < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromRight / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDx = ratio * speed;
       }
 
-      // Top edge
+      // Top edge (including beyond)
       const distFromTop = mouseY - editorRect.top;
-      if (distFromTop >= 0 && distFromTop < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromTop / AUTO_SCROLL_EDGE_ZONE;
-        scrollDy = -(ratio * AUTO_SCROLL_MAX_SPEED);
+      if (distFromTop < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromTop < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromTop / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDy = -(ratio * speed);
       }
 
-      // Bottom edge
+      // Bottom edge (including beyond)
       const distFromBottom = editorRect.bottom - mouseY;
-      if (distFromBottom >= 0 && distFromBottom < AUTO_SCROLL_EDGE_ZONE) {
-        const ratio = 1 - distFromBottom / AUTO_SCROLL_EDGE_ZONE;
-        scrollDy = ratio * AUTO_SCROLL_MAX_SPEED;
+      if (distFromBottom < AUTO_SCROLL_EDGE_ZONE) {
+        const beyond = distFromBottom < 0;
+        const ratio = Math.min(
+          1,
+          1 - distFromBottom / AUTO_SCROLL_EDGE_ZONE
+        );
+        const speed =
+          AUTO_SCROLL_MAX_SPEED * (beyond ? AUTO_SCROLL_BEYOND_MULTIPLIER : 1);
+        scrollDy = ratio * speed;
       }
 
       if (scrollDx !== 0 || scrollDy !== 0) {
@@ -3823,7 +3912,7 @@ export class Editor extends RapidElement {
             (editor.scrollLeft + editor.clientWidth + scrollDx) / this.zoom;
           const neededHeight =
             (editor.scrollTop + editor.clientHeight + scrollDy) / this.zoom;
-          getStore().getState().expandCanvas(neededWidth, neededHeight);
+          getStore()?.getState()?.expandCanvas(neededWidth, neededHeight);
         }
 
         editor.scrollLeft += scrollDx;
@@ -4941,6 +5030,32 @@ export class Editor extends RapidElement {
       isLastAction = false
     } = event.detail;
 
+    // Track action external drag state for shift-copy support
+    const isFirstExternalEvent = !this.isActionExternalDrag;
+    this.isActionExternalDrag = true;
+    this.actionDragLastDetail = {
+      action,
+      nodeUuid,
+      actionIndex,
+      mouseX,
+      mouseY,
+      actionHeight,
+      isLastAction
+    };
+
+    // Initialize copy mode from current shift state (handles shift held before drag)
+    if (isFirstExternalEvent) {
+      const shiftHeld =
+        this.querySelector('#canvas')?.classList.contains('shift-held') ??
+        false;
+      if (shiftHeld) {
+        this.actionDragIsCopy = true;
+        this.showActionOriginal(true);
+      } else {
+        this.showDragHint();
+      }
+    }
+
     // Check if mouse is over another execute_actions node
     const targetNode = this.getNodeAtPosition(mouseX, mouseY);
 
@@ -5037,9 +5152,9 @@ export class Editor extends RapidElement {
       `temba-flow-node[data-node-uuid="${nodeUuid}"]`
     );
 
-    // Show canvas drop preview only if this is NOT the last action
-    // Last actions can only be dropped on other nodes, not on canvas
-    if (!isLastAction) {
+    // Show canvas drop preview if this is not the last action,
+    // or if shift-copy is active (copying allows canvas drop for last action too)
+    if (!isLastAction || this.actionDragIsCopy) {
       // Hide ghost when showing canvas preview (for canvas drops)
       if (sourceElement) {
         sourceElement.dispatchEvent(
@@ -5061,7 +5176,7 @@ export class Editor extends RapidElement {
         actionHeight
       };
     } else {
-      // For last action, keep ghost visible (can't drop on canvas)
+      // For last action without copy, keep ghost visible (can't drop on canvas)
       if (sourceElement) {
         sourceElement.dispatchEvent(
           new CustomEvent('action-show-ghost', {
@@ -5098,6 +5213,75 @@ export class Editor extends RapidElement {
 
     this.canvasDropPreview = null;
     this.actionDragTargetNodeUuid = null;
+    this.isActionExternalDrag = false;
+    this.actionDragIsCopy = false;
+    this.hideDragHint();
+    this.actionDragLastDetail = null;
+  }
+
+  /** Show or hide the original action element in the source node. */
+  private showActionOriginal(visible: boolean): void {
+    if (!this.actionDragLastDetail) return;
+    const sourceElement = this.querySelector(
+      `temba-flow-node[data-node-uuid="${this.actionDragLastDetail.nodeUuid}"]`
+    );
+    if (sourceElement) {
+      sourceElement.dispatchEvent(
+        new CustomEvent(
+          visible ? 'action-show-original' : 'action-hide-original',
+          { detail: {}, bubbles: false }
+        )
+      );
+    }
+  }
+
+  /**
+   * Reprocess the last action drag event with the current shift-copy state.
+   * Used when shift is toggled mid-drag to show/hide the canvas preview
+   * for last-action drags.
+   */
+  private reprocessActionDrag(): void {
+    if (!this.actionDragLastDetail) return;
+    const { action, nodeUuid, actionIndex, mouseX, mouseY, actionHeight } =
+      this.actionDragLastDetail;
+
+    const sourceElement = this.querySelector(
+      `temba-flow-node[data-node-uuid="${nodeUuid}"]`
+    );
+
+    // Only relevant when not hovering a target node
+    if (this.actionDragTargetNodeUuid) return;
+
+    if (this.actionDragIsCopy) {
+      // Shift pressed: show canvas preview
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-hide-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
+      const position = this.calculateCanvasDropPosition(mouseX, mouseY, false);
+      this.canvasDropPreview = {
+        action,
+        nodeUuid,
+        actionIndex,
+        position,
+        actionHeight
+      };
+    } else {
+      // Shift released: hide canvas preview, show ghost
+      if (sourceElement) {
+        sourceElement.dispatchEvent(
+          new CustomEvent('action-show-ghost', {
+            detail: {},
+            bubbles: false
+          })
+        );
+      }
+      this.canvasDropPreview = null;
+    }
   }
 
   private handleActionDropExternal(event: CustomEvent): void {
@@ -5110,6 +5294,15 @@ export class Editor extends RapidElement {
       isLastAction = false
     } = event.detail;
 
+    const isCopy = this.actionDragIsCopy;
+
+    // Reset action drag state
+    this.isActionExternalDrag = false;
+    this.actionDragIsCopy = false;
+    this.actionDragLastDetail = null;
+    this.previousActionDragTargetNodeUuid = null;
+    this.hideDragHint();
+
     // Check if we're dropping on an existing execute_actions node
     const targetNodeUuid = this.actionDragTargetNodeUuid;
 
@@ -5126,7 +5319,8 @@ export class Editor extends RapidElement {
               sourceNodeUuid: nodeUuid,
               actionIndex,
               mouseX,
-              mouseY
+              mouseY,
+              isCopy
             },
             bubbles: false
           })
@@ -5139,9 +5333,9 @@ export class Editor extends RapidElement {
       return;
     }
 
-    // If this is the last action and we're not dropping on another node, do nothing
+    // If this is the last action and not copying, do nothing
     // Last actions can only be moved to other nodes, not dropped on canvas
-    if (isLastAction) {
+    if (isLastAction && !isCopy) {
       this.canvasDropPreview = null;
       this.actionDragTargetNodeUuid = null;
       return;
@@ -5151,28 +5345,36 @@ export class Editor extends RapidElement {
     // Snap to grid for the final drop position
     const position = this.calculateCanvasDropPosition(mouseX, mouseY, true);
 
-    // remove the action from the original node
-    const originalNode = this.definition.nodes.find((n) => n.uuid === nodeUuid);
-    if (!originalNode) return;
+    if (!isCopy) {
+      // remove the action from the original node
+      const originalNode = this.definition.nodes.find(
+        (n) => n.uuid === nodeUuid
+      );
+      if (!originalNode) return;
 
-    const updatedActions = originalNode.actions.filter(
-      (_a, idx) => idx !== actionIndex
-    );
+      const updatedActions = originalNode.actions.filter(
+        (_a, idx) => idx !== actionIndex
+      );
 
-    // if no actions remain, delete the node
-    if (updatedActions.length === 0) {
-      // Use deleteNodes to properly clean up Plumber connections before removing
-      this.deleteNodes([nodeUuid]);
-    } else {
-      // update the node
-      const updatedNode = { ...originalNode, actions: updatedActions };
-      getStore()?.getState().updateNode(nodeUuid, updatedNode);
+      // if no actions remain, delete the node
+      if (updatedActions.length === 0) {
+        // Use deleteNodes to properly clean up Plumber connections before removing
+        this.deleteNodes([nodeUuid]);
+      } else {
+        // update the node
+        const updatedNode = { ...originalNode, actions: updatedActions };
+        getStore()?.getState().updateNode(nodeUuid, updatedNode);
+      }
     }
 
     // create a new execute_actions node with the dropped action
+    // When copying, generate a fresh UUID so the clone doesn't share the original's
+    const droppedAction = isCopy
+      ? { ...action, uuid: generateUUID() }
+      : action;
     const newNode: Node = {
       uuid: generateUUID(),
-      actions: [action],
+      actions: [droppedAction],
       exits: [
         {
           uuid: generateUUID(),
@@ -5190,6 +5392,11 @@ export class Editor extends RapidElement {
     // add the new node
     getStore()?.getState().addNode(newNode, newNodeUI);
 
+    // Copy localizations from the original action to the new one
+    if (isCopy) {
+      this.copyActionLocalizations(action.uuid, droppedAction.uuid);
+    }
+
     // clear the preview
     this.canvasDropPreview = null;
     this.actionDragTargetNodeUuid = null;
@@ -5200,6 +5407,27 @@ export class Editor extends RapidElement {
     });
   }
 
+  /** Copy all localization entries from one action UUID to another. */
+  private copyActionLocalizations(
+    sourceUuid: string,
+    targetUuid: string
+  ): void {
+    const localization = this.definition?.localization;
+    if (!localization) return;
+    const store = getStore()?.getState();
+    if (!store) return;
+    for (const langCode of Object.keys(localization)) {
+      const entry = localization[langCode]?.[sourceUuid];
+      if (entry) {
+        store.updateLocalization(
+          langCode,
+          targetUuid,
+          JSON.parse(JSON.stringify(entry))
+        );
+      }
+    }
+  }
+
   private getLocalizationLanguages(): Array<{ code: string; name: string }> {
     if (!this.definition) {
       return [];

package/src/form/select/Select.ts

@@ -168,6 +168,7 @@ export class Select<T extends SelectOption> extends FieldElement {
       }
 
       .selected {
+        flex: 1;
         display: flex;
         flex-direction: row;
         align-items: stretch;

package/src/list/SortableList.ts

@@ -731,6 +731,12 @@ export class SortableList extends RapidElement {
   }
   /* c8 ignore stop */
 
+  /** Show or hide the original element that is being dragged. */
+  public setOriginalVisible(visible: boolean): void {
+    if (!this.downEle) return;
+    this.downEle.style.display = visible ? this.originalDownDisplay : 'none';
+  }
+
   public render(): TemplateResult {
     return html`
       <div