add split-top option on RowDropArea

Author: JarrodMFlesch

packages/ui/src/elements/TreeView/NestedSectionsTable/RowDropArea/index.scss

@@ -14,9 +14,8 @@
     z-index: 1;
   }
 
-  &--on-split {
-    bottom: 0;
-    transform: translateY(50%);
+  &--on-split-bottom,
+  &--on-split-top {
     min-width: unset;
 
     &.is-dragging.is-over {
@@ -26,6 +25,16 @@
       }
     }
   }
+
+  &--on-split-bottom {
+    bottom: 0;
+    transform: translateY(50%);
+  }
+
+  &--on-split-top {
+    top: 0;
+    transform: translateY(-50%);
+  }
 }
 
 .row-drop-area__split-marker {

packages/ui/src/elements/TreeView/NestedSectionsTable/RowDropArea/index.tsx

@@ -10,7 +10,7 @@ const baseClass = 'row-drop-area'
 const DEFAULT_SEGMENT_WIDTH = 30
 const THROTTLE_MS = 16
 
-type Placement = 'middle' | 'split'
+type Placement = 'middle' | 'split-bottom' | 'split-top'
 
 export type RowDropAreaProps = {
   disabled?: boolean
@@ -30,7 +30,7 @@ export const RowDropArea = ({
   dropContextName,
   isDragging = false,
   onHover,
-  placement = 'split',
+  placement = 'split-bottom',
   segmentWidth = DEFAULT_SEGMENT_WIDTH,
   style,
   targetItems = [],
@@ -83,7 +83,7 @@ export const RowDropArea = ({
           width: '100%',
         }}
       >
-        {placement === 'split' && (
+        {(placement === 'split-bottom' || placement === 'split-top') && (
           <div
             className={`${baseClass}__split-marker`}
             style={{

packages/ui/src/elements/TreeView/NestedSectionsTable/index.tsx

@@ -387,6 +387,27 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                   ),
                 )}
                 <div>
+                  {/* Add split-top drop area for first root-level row */}
+                  {level === 0 && sectionRowIndex === 0 && (
+                    <RowDropArea
+                      disabled={isInvalidTarget}
+                      dropContextName={dropContextName}
+                      isDragging={isDragging}
+                      onHover={(data) => {
+                        onDroppableHover({ ...data, hoveredRowID: rowItem.rowID })
+                      }}
+                      placement="split-top"
+                      segmentWidth={segmentWidth}
+                      style={{
+                        left: 0,
+                        width: '100%',
+                      }}
+                      targetItems={[null]}
+                      xDragOffset={firstCellXOffset + firstCellWidth + 28}
+                      xSplitOffset={`calc(${firstCellWidth + 28}px + var(--cell-inline-padding-start))`}
+                    />
+                  )}
+                  {/* Add row-drop-area on row */}
                   <RowDropArea
                     disabled={isInvalidTarget}
                     dropContextName={dropContextName}
@@ -399,15 +420,15 @@ export const DivTableSection: React.FC<DivTableSectionProps> = ({
                     style={{ left: 0, width: '100%' }}
                     targetItems={[rowItem]}
                   />
-
+                  {/* Add split-bottom drop area on row */}
                   <RowDropArea
                     disabled={isInvalidTarget}
                     dropContextName={dropContextName}
                     isDragging={isDragging}
                     onHover={(data) => {
                       onDroppableHover({ ...data, hoveredRowID: rowItem.rowID })
                     }}
-                    placement="split"
+                    placement="split-bottom"
                     segmentWidth={segmentWidth}
                     style={{
                       left: 0,