@finos/legend-application-studio 28.18.69 → 28.18.70

package/src/components/editor/editor-group/mapping-editor/FlatDataPropertyMappingEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type FlatDataPropertyMappingTransformDropTarget,
@@ -55,7 +55,7 @@ import { InlineLambdaEditor } from '@finos/legend-query-builder';
 const SimplePropertyMappingEditor = observer(
   (props: {
     propertyMappingState: FlatDataPropertyMappingState;
-    drop?: ConnectDropTarget | undefined;
+    dropConnector?: ConnectDropTarget | undefined;
     dragItem?: FlatDataPropertyMappingTransformDropTarget | undefined;
     transformProps: {
       disableTransform: boolean;
@@ -63,7 +63,10 @@ const SimplePropertyMappingEditor = observer(
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, dragItem, transformProps } = props;
+    const { propertyMappingState, dropConnector, dragItem, transformProps } =
+      props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const propertyMapping = propertyMappingState.propertyMapping;
     const expectedType =
       propertyMapping.property.value.genericType.value.rawType;
@@ -82,7 +85,7 @@ const SimplePropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <InlineLambdaEditor
             className={clsx({ 'lambda-editor--dnd-match': canDrop })}
             disabled={transformProps.disableTransform}
@@ -101,7 +104,7 @@ const SimplePropertyMappingEditor = observer(
 const EnumerationPropertyMappingEditor = observer(
   (props: {
     propertyMappingState: FlatDataPropertyMappingState;
-    drop?: ConnectDropTarget | undefined;
+    dropConnector?: ConnectDropTarget | undefined;
     dragItem?: FlatDataPropertyMappingTransformDropTarget | undefined;
     transformProps: {
       disableTransform: boolean;
@@ -109,8 +112,15 @@ const EnumerationPropertyMappingEditor = observer(
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, dragItem, transformProps, isReadOnly } =
-      props;
+    const {
+      propertyMappingState,
+      dropConnector,
+      dragItem,
+      transformProps,
+      isReadOnly,
+    } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const editorStore = useEditorStore();
     const mappingEditorState =
       editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
@@ -186,7 +196,7 @@ const EnumerationPropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <div className="property-mapping-editor__entry__enumeration-mapping-selector">
             <CustomSelectorInput
               disabled={options.length <= 1 || isReadOnly}
@@ -262,7 +272,7 @@ export const FlatDataPropertyMappingEditor = observer(
       },
       [disableEditingTransform, flatDataPropertyMappingState],
     );
-    const [{ dragItem }, drop] = useDrop<
+    const [{ dragItem }, dropConnector] = useDrop<
       FlatDataColumnDragSource,
       void,
       { dragItem: FlatDataColumnDragSource | undefined }
@@ -294,7 +304,7 @@ export const FlatDataPropertyMappingEditor = observer(
         return (
           <SimplePropertyMappingEditor
             propertyMappingState={flatDataPropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             dragItem={dragItem}
             transformProps={transformProps}
             isReadOnly={isReadOnly}
@@ -304,7 +314,7 @@ export const FlatDataPropertyMappingEditor = observer(
         return (
           <EnumerationPropertyMappingEditor
             propertyMappingState={flatDataPropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             dragItem={dragItem}
             transformProps={transformProps}
             isReadOnly={isReadOnly}

package/src/components/editor/editor-group/mapping-editor/FlatDataRecordTypeTree.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useDrag } from 'react-dnd';
 import {
   type TreeNodeContainerProps,
@@ -55,8 +55,7 @@ const getRecordTypeTreeData = (
   const rootIds: string[] = [];
   const nodes = new Map<string, FlatDataRecordTypeTreeNodeData>();
   recordType.fields
-    .slice()
-    .sort((a, b) => a.label.toString().localeCompare(b.label.toString()))
+    .toSorted((a, b) => a.label.toString().localeCompare(b.label.toString()))
     .forEach((field) => {
       const recordTypeTreeNodeData = getRecordTypeTreeNodeData(
         field,
@@ -76,22 +75,24 @@ const RecordFieldTreeNodeContainer: React.FC<
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
   const { selectedType } = innerProps;
-  const [, dragRef] = useDrag(
+  const [, dragConnector] = useDrag(
     () => ({
       type: CORE_DND_TYPE.TYPE_TREE_PRIMITIVE,
       item: new FlatDataColumnDragSource(node),
     }),
     [node],
   );
+  const ref = useRef<HTMLDivElement>(null);
+  dragConnector(ref);
   const nodeTypeIcon = <PURE_PrimitiveTypeIcon />;
   const selectNode = (): void => onNodeSelect?.(node);
   const primitiveType = node.field.flatDataDataType._correspondingPrimitiveType;
 
   return (
     <div
+      ref={ref}
       className="tree-view__node__container"
       onClick={selectNode}
-      ref={dragRef}
       style={{
         paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
         display: 'flex',

package/src/components/editor/editor-group/mapping-editor/InstanceSetImplementationEditor.tsx

@@ -250,7 +250,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
         setImplementation,
       ],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+    const [{ isDragOver, canDrop }, dropConnector] = useDrop<
       ElementDragSource,
       void,
       { isDragOver: boolean; canDrop: boolean }
@@ -328,7 +328,7 @@ export const InstanceSetImplementationSourceExplorer = observer(
         </PanelHeader>
         <PanelContent>
           <PanelDropZone
-            dropTargetConnector={dropRef}
+            dropTargetConnector={dropConnector}
             isDragOver={isDragOver && !isReadOnly}
           >
             {!isUnsupported && (

package/src/components/editor/editor-group/mapping-editor/MappingExecutionBuilder.tsx

@@ -356,7 +356,7 @@ const MappingExecutionQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+    const [{ isDragOver, canDrop }, dropConnector] = useDrop<
       MappingElementDragSource,
       void,
       { isDragOver: boolean; canDrop: boolean }
@@ -406,7 +406,7 @@ const MappingExecutionQueryEditor = observer(
         {isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <PanelDropZone
-              dropTargetConnector={dropRef}
+              dropTargetConnector={dropConnector}
               isDragOver={isDragOver}
             >
               <BlankPanelPlaceholder
@@ -515,7 +515,7 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+    const [{ isDragOver, canDrop }, dropConnector] = useDrop<
       MappingElementDragSource,
       void,
       { isDragOver: boolean; canDrop: boolean }
@@ -533,7 +533,10 @@ export const MappingExecutionEmptyInputDataBuilder = observer(
 
     return (
       <PanelContent>
-        <PanelDropZone dropTargetConnector={dropRef} isDragOver={isDragOver}>
+        <PanelDropZone
+          dropTargetConnector={dropConnector}
+          isDragOver={isDragOver}
+        >
           <BlankPanelPlaceholder
             text="Choose a class mapping"
             onClick={showClassMappingSelectorModal}

package/src/components/editor/editor-group/mapping-editor/MappingExplorer.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useCallback, forwardRef } from 'react';
+import { useState, useCallback, forwardRef, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type MappingExplorerDropTarget,
@@ -223,7 +223,7 @@ export const MappingElementExplorer = observer(
       mappingEditorState.openMappingElement(mappingElement, false);
     const mappingElementTarget = getMappingElementTarget(mappingElement);
     // Drag and Drop
-    const [, dragRef] = useDrag(
+    const [, dragConnector] = useDrag(
       () => ({
         type:
           mappingElement instanceof SetImplementation
@@ -233,6 +233,9 @@ export const MappingElementExplorer = observer(
       }),
       [mappingElement],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
+
     // Selection
     const isActive =
       currentMappingElement?.id.value === mappingElement.id.value;
@@ -255,7 +258,7 @@ export const MappingElementExplorer = observer(
         onClose={onContextMenuClose}
       >
         <div
-          ref={dragRef}
+          ref={ref}
           className={clsx(
             'mapping-explorer__item',
             {
@@ -328,7 +331,7 @@ const MappingElementTreeNodeContainer = observer(
             mappingElementTarget.name
           }'`;
     // Drag and Drop
-    const [, dragRef] = useDrag(
+    const [, dragConnector] = useDrag(
       () => ({
         type:
           mappingElement instanceof SetImplementation
@@ -338,9 +341,12 @@ const MappingElementTreeNodeContainer = observer(
       }),
       [mappingElement],
     );
+    const ref = useRef<HTMLDivElement>(null);
+    dragConnector(ref);
+
+    // Selection
     const selectNode = (): void => onNodeSelect?.(node);
     const onExpandIconClick = (): void => onNodeExpand(node);
-    // Selection
     const isActive =
       currentMappingElement?.id.value === mappingElement.id.value;
     const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] =
@@ -366,7 +372,7 @@ const MappingElementTreeNodeContainer = observer(
             { 'mapping-explorer__item--active': isActive },
           )}
           onClick={selectNode}
-          ref={dragRef}
+          ref={ref}
           style={{
             paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1) + 0.5}rem`,
             display: 'flex',
@@ -435,7 +441,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
           }),
     [isReadOnly, mappingEditorState],
   );
-  const [{ isDragOver }, dropRef] = useDrop<
+  const [{ isDragOver }, dropConnector] = useDrop<
     ElementDragSource,
     void,
     { isDragOver: boolean }
@@ -541,7 +547,7 @@ export const MappingExplorer = observer((props: { isReadOnly: boolean }) => {
       >
         <PanelDropZone
           isDragOver={isDragOver && !isReadOnly}
-          dropTargetConnector={dropRef}
+          dropTargetConnector={dropConnector}
         >
           <div className="mapping-explorer__content">
             <TreeView

package/src/components/editor/editor-group/mapping-editor/MappingTestsExplorer.tsx

@@ -346,7 +346,7 @@ export const MappingTestsExplorer = observer(
       },
       [applicationStore.alertUnhandledError, isReadOnly, mappingEditorState],
     );
-    const [{ isDragOver }, dropRef] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       MappingElementDragSource,
       void,
       { isDragOver: boolean }
@@ -471,7 +471,7 @@ export const MappingTestsExplorer = observer(
         >
           <PanelDropZone
             isDragOver={isDragOver && !isReadOnly}
-            dropTargetConnector={dropRef}
+            dropTargetConnector={dropConnector}
           >
             <div className="mapping-test-explorer__content">
               {Boolean(

package/src/components/editor/editor-group/mapping-editor/OperationSetImplementationEditor.tsx

@@ -152,7 +152,7 @@ export const OperationSetImplementationEditor = observer(
       },
       [setImplementation],
     );
-    const [{ isDragOver }, dropRef] = useDrop<
+    const [{ isDragOver }, dropConnector] = useDrop<
       MappingElementDragSource,
       void,
       { isDragOver: boolean }
@@ -221,7 +221,7 @@ export const OperationSetImplementationEditor = observer(
           </PanelHeader>
           <PanelDropZone
             isDragOver={isDragOver && !isReadOnly}
-            dropTargetConnector={dropRef}
+            dropTargetConnector={dropConnector}
           >
             <PanelContent>
               {setImplementation.parameters.map((param) => (

package/src/components/editor/editor-group/mapping-editor/PurePropertyMappingEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   type TransformDropTarget,
@@ -55,7 +55,7 @@ import { InlineLambdaEditor } from '@finos/legend-query-builder';
 const SimplePropertyMappingEditor = observer(
   (props: {
     propertyMappingState: PurePropertyMappingState;
-    drop?: ConnectDropTarget | undefined;
+    dropConnector?: ConnectDropTarget | undefined;
     dragItem?: TransformDropTarget | undefined;
     transformProps: {
       disableTransform: boolean;
@@ -63,7 +63,10 @@ const SimplePropertyMappingEditor = observer(
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, transformProps, drop, dragItem } = props;
+    const { propertyMappingState, transformProps, dropConnector, dragItem } =
+      props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const propertyMapping = propertyMappingState.propertyMapping;
     const expectedType =
       propertyMapping.property.value.genericType.value.rawType;
@@ -81,7 +84,7 @@ const SimplePropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <InlineLambdaEditor
             className={clsx({ 'lambda-editor--dnd-match': canDrop })}
             disabled={transformProps.disableTransform}
@@ -100,7 +103,7 @@ const SimplePropertyMappingEditor = observer(
 const EnumerationPropertyMappingEditor = observer(
   (props: {
     propertyMappingState: PurePropertyMappingState;
-    drop?: ConnectDropTarget | undefined;
+    dropConnector?: ConnectDropTarget | undefined;
     dragItem?: TransformDropTarget | undefined;
     dragItemType: string;
     transformProps: {
@@ -111,7 +114,7 @@ const EnumerationPropertyMappingEditor = observer(
   }) => {
     const {
       propertyMappingState,
-      drop,
+      dropConnector,
       dragItem,
       dragItemType,
       transformProps,
@@ -180,7 +183,10 @@ const EnumerationPropertyMappingEditor = observer(
         }
       }
     };
+
     // DnD
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     // NOTE: when we drag enum, we should highlight if the enumeration where that enum is part of matches
     const canDrop =
       dragItem &&
@@ -190,7 +196,7 @@ const EnumerationPropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <div className="property-mapping-editor__entry__enumeration-mapping-selector">
             <CustomSelectorInput
               disabled={options.length <= 1 || isReadOnly}
@@ -237,7 +243,7 @@ const EnumerationPropertyMappingEditor = observer(
 const ClassPropertyMappingEditor = observer(
   (props: {
     propertyMappingState: PurePropertyMappingState;
-    drop?: ConnectDropTarget | undefined;
+    dropConnector?: ConnectDropTarget | undefined;
     dragItem?: TransformDropTarget | undefined;
     transformProps: {
       disableTransform: boolean;
@@ -245,7 +251,8 @@ const ClassPropertyMappingEditor = observer(
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, dragItem, transformProps } = props;
+    const { propertyMappingState, dropConnector, dragItem, transformProps } =
+      props;
     const editorStore = useEditorStore();
     const mappingEditorState =
       editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
@@ -280,12 +287,13 @@ const ClassPropertyMappingEditor = observer(
       }
     };
     // Drag and Drop
-
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const canDrop = dragItem?.data?.type && dragItem.data.type === expectedType;
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <div className="property-mapping-editor__entry__id">
             <div
               className={clsx('property-mapping-editor__entry__id__label', {
@@ -362,7 +370,7 @@ export const PurePropertyMappingEditor = observer(
       },
       [disableEditingTransform, purePropertyMappingState],
     );
-    const [{ dragItem, dragItemType }, drop] = useDrop<
+    const [{ dragItem, dragItemType }, dropConnector] = useDrop<
       TypeDragSource,
       void,
       {
@@ -402,7 +410,7 @@ export const PurePropertyMappingEditor = observer(
         return (
           <SimplePropertyMappingEditor
             propertyMappingState={purePropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             dragItem={dragItem}
             transformProps={transformProps}
             isReadOnly={isReadOnly}
@@ -412,7 +420,7 @@ export const PurePropertyMappingEditor = observer(
         return (
           <EnumerationPropertyMappingEditor
             propertyMappingState={purePropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             dragItem={dragItem}
             dragItemType={dragItemType}
             transformProps={transformProps}
@@ -423,7 +431,7 @@ export const PurePropertyMappingEditor = observer(
         return (
           <ClassPropertyMappingEditor
             propertyMappingState={purePropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             dragItem={dragItem}
             transformProps={transformProps}
             isReadOnly={isReadOnly}

package/src/components/editor/editor-group/mapping-editor/TypeTree.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import {
   isNonNullable,
   IllegalStateError,
@@ -159,10 +159,13 @@ const TypeTreeNodeContainer: React.FC<
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect, innerProps } = props;
   const { selectedType } = innerProps;
-  const [, dragRef] = useDrag(
+  const [, dragConnector] = useDrag(
     () => ({ type: node.dndType, item: new TypeDragSource(node) }),
     [node],
   );
+  const ref = useRef<HTMLDivElement>(null);
+  dragConnector(ref);
+
   const isExpandable = Boolean(node.childrenIds?.length);
   const nodeTypeIcon = node.type ? (
     getClassPropertyIcon(node.type)
@@ -186,7 +189,7 @@ const TypeTreeNodeContainer: React.FC<
         'type-tree__node__container--highlighted': node.type === selectedType,
       })}
       onClick={selectNode}
-      ref={dragRef}
+      ref={ref}
       style={{
         paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
         display: 'flex',

package/src/components/editor/editor-group/mapping-editor/legacy/DEPRECATED__MappingTestEditor.tsx

@@ -232,7 +232,7 @@ const MappingTestQueryEditor = observer(
       },
       [changeClassMapping],
     );
-    const [{ isDragOver, canDrop }, dropRef] = useDrop<
+    const [{ isDragOver, canDrop }, dropConnector] = useDrop<
       MappingElementDragSource,
       void,
       { isDragOver: boolean; canDrop: boolean }
@@ -314,7 +314,7 @@ const MappingTestQueryEditor = observer(
         {isStubbed_RawLambda(queryState.query) && (
           <PanelContent>
             <PanelDropZone
-              dropTargetConnector={dropRef}
+              dropTargetConnector={dropConnector}
               isDragOver={isDragOver}
             >
               <BlankPanelPlaceholder

package/src/components/editor/editor-group/mapping-editor/relational/RelationalPropertyMappingEditor.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
   EmbeddedRelationalInstanceSetImplementationState,
@@ -56,17 +56,19 @@ import { InlineLambdaEditor } from '@finos/legend-query-builder';
 const SimplePropertyMappingEditor = observer(
   (props: {
     propertyMappingState: RelationalPropertyMappingState;
-    drop?: ConnectDropTarget;
+    dropConnector?: ConnectDropTarget;
     transformProps: {
       disableTransform: boolean;
       forceBackdrop: boolean;
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, transformProps } = props;
+    const { propertyMappingState, dropConnector, transformProps } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <InlineLambdaEditor
             disabled={transformProps.disableTransform}
             lambdaEditorState={propertyMappingState}
@@ -81,14 +83,17 @@ const SimplePropertyMappingEditor = observer(
 const EnumerationPropertyMappingEditor = observer(
   (props: {
     propertyMappingState: RelationalPropertyMappingState;
-    drop?: ConnectDropTarget;
+    dropConnector?: ConnectDropTarget;
     transformProps: {
       disableTransform: boolean;
       forceBackdrop: boolean;
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, transformProps, isReadOnly } = props;
+    const { propertyMappingState, dropConnector, transformProps, isReadOnly } =
+      props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const editorStore = useEditorStore();
     const mappingEditorState =
       editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
@@ -149,7 +154,7 @@ const EnumerationPropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <div className="property-mapping-editor__entry__enumeration-mapping-selector">
             <CustomSelectorInput
               disabled={options.length <= 1 || isReadOnly}
@@ -192,14 +197,16 @@ const EnumerationPropertyMappingEditor = observer(
 const ClassPropertyMappingEditor = observer(
   (props: {
     propertyMappingState: RelationalPropertyMappingState;
-    drop?: ConnectDropTarget;
+    dropConnector?: ConnectDropTarget;
     transformProps: {
       disableTransform: boolean;
       forceBackdrop: boolean;
     };
     isReadOnly: boolean;
   }) => {
-    const { propertyMappingState, drop, transformProps } = props;
+    const { propertyMappingState, dropConnector, transformProps } = props;
+    const ref = useRef<HTMLDivElement>(null);
+    dropConnector?.(ref);
     const editorStore = useEditorStore();
     const mappingEditorState =
       editorStore.tabManagerState.getCurrentEditorState(MappingEditorState);
@@ -237,7 +244,7 @@ const ClassPropertyMappingEditor = observer(
 
     return (
       <div className="property-mapping-editor__entry__container">
-        <div ref={drop} className="property-mapping-editor__entry">
+        <div ref={ref} className="property-mapping-editor__entry">
           <div className="property-mapping-editor__entry__id">
             <div
               className={clsx('property-mapping-editor__entry__id__label', {
@@ -302,7 +309,7 @@ export const RelationalPropertyMappingEditor = observer(
       },
       [disableEditingTransform, relationalPropertyMappingState],
     );
-    const [, drop] = useDrop<TableOrViewTreeNodeDragSource>(
+    const [, dropConnector] = useDrop<TableOrViewTreeNodeDragSource>(
       () => ({
         accept: [TABLE_ELEMENT_DND_TYPE],
         drop: (item) => handleDrop(item),
@@ -326,7 +333,7 @@ export const RelationalPropertyMappingEditor = observer(
         return (
           <SimplePropertyMappingEditor
             propertyMappingState={relationalPropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             transformProps={transformProps}
             isReadOnly={isReadOnly}
           />
@@ -335,7 +342,7 @@ export const RelationalPropertyMappingEditor = observer(
         return (
           <EnumerationPropertyMappingEditor
             propertyMappingState={relationalPropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             transformProps={transformProps}
             isReadOnly={isReadOnly}
           />
@@ -355,7 +362,7 @@ export const RelationalPropertyMappingEditor = observer(
         return (
           <ClassPropertyMappingEditor
             propertyMappingState={relationalPropertyMappingState}
-            drop={drop}
+            dropConnector={dropConnector}
             transformProps={transformProps}
             isReadOnly={isReadOnly}
           />

package/src/components/editor/editor-group/mapping-editor/relational/TableOrViewSourceTree.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useDrag } from 'react-dnd';
 import {
   type TreeNodeContainerProps,
@@ -245,13 +245,16 @@ const RelationalOperationElementTreeNodeContainer: React.FC<
   >
 > = (props) => {
   const { node, level, stepPaddingInRem, onNodeSelect } = props;
-  const [, dragRef] = useDrag(
+  const [, dragConnector] = useDrag(
     () => ({
       type: TABLE_ELEMENT_DND_TYPE,
       item: new TableOrViewTreeNodeDragSource(node),
     }),
     [node],
   );
+  const ref = useRef<HTMLDivElement>(null);
+  dragConnector(ref);
+
   const isExpandable = Boolean(node.childrenIds?.length);
   const nodeTypeIcon =
     node instanceof ColumnNodeData ? (
@@ -274,7 +277,7 @@ const RelationalOperationElementTreeNodeContainer: React.FC<
     <div
       className="tree-view__node__container"
       onClick={selectNode}
-      ref={dragRef}
+      ref={ref}
       style={{
         paddingLeft: `${(level - 1) * (stepPaddingInRem ?? 1)}rem`,
         display: 'flex',