feat: item container margin support (#404)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,9 @@
-<!--
 ### Breaking Changes
 
 ### Features
 
 ### Bug Fixes and Improvements
-- Fix problem with expandSubsequently resolving before expanding all items
+- Fix problem with expandSubsequently resolving before expanding all items (#403)
+- Improve behavior for cases where item containers have margin (#404)
+
 ### Other Changes
--->

packages/core/src/controlledEnvironment/layoutUtils.ts

@@ -4,7 +4,12 @@ export const computeItemHeight = (treeId: string) => {
   const firstItem = getDocument()?.querySelector<HTMLElement>(
     `[data-rct-tree="${treeId}"] [data-rct-item-container="true"]`
   );
-  return firstItem?.offsetHeight ?? 5;
+  if (firstItem) {
+    const style = getComputedStyle(firstItem);
+    // top margin flows into the bottom margin of the previous item, so ignore it
+    return firstItem.offsetHeight + parseFloat(style.marginBottom);
+  }
+  return 5;
 };
 
 export const isOutsideOfContainer = (e: DragEvent, treeBb: DOMRect) =>

packages/core/src/stories/BasicExamples.stories.tsx

@@ -669,3 +669,37 @@ export const RightToLeftRenderers = () => (
     <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
   </UncontrolledTreeEnvironment>
 );
+
+export const ItemContainersWithMargin = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: [
+          'Fruit',
+          'Meals',
+          'America',
+          'Europe',
+          'Asia',
+          'Desserts',
+        ],
+      },
+    }}
+  >
+    <style>
+      {
+        '.rct-tree-item-title-container { margin-top: 10px; margin-bottom: 20px;}'
+      }
+    </style>
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);