Resupport trees 🌲

[alexreardon]

In order to get 12.0 #1487 across the line, we needed to temporarily remove tree behaviours from rbd core. We would like to re-add this behaviour.

For now, we recommend you continue to use 11.x if using tree behaviour

[farzansalimian]

@alexreardon Could you update on status of this issue? Is there an estimated date for this?

[oziniak]

It's been a year. Version 13 is out and the docs still refer 12th version with

We do plan on supporting this type of behaviour again in a future minor release.

[danieldelcore]

Hi all 👋

There have been a lot of requests for Tree support to return to the library. As a relatively new maintainer, I don't have all of the context as to why this isn't working but I'm going to try my best to consolidate the information here so we can start to form a clear path forward.

For newcomers here's the TL;DR:

• Trees & nested draggable containers are no longer supported since v11.x
• The previous tree implementation was available via Atlaskit as @atlaskit/tree.

There have been several implementations of trees and hierarchical lists made by the community, check them out, but I'm not fully aware of their functionality/drawbacks (let me know 😄):

• Share your creations! 👩‍🎨 #1109 (comment)
• Share your creations! 👩‍🎨 #1109 (comment)
• https://codesandbox.io/s/vertical-list-58g70

Related tickets + discussion:

• Proposal: merge @atlaskit/tree into react-beautiful-dnd #1277
• Hierarchical data sorting (without @atlaskit/tree) #1438

[cmmartin]

The example in the docs from @atlaskit/tree links to a private or deleted repository. Is this still open source?

[Pines-Cheng]

Any updates on this?

[Pines-Cheng]

found a single nested tree Demo：https://codesandbox.io/s/5v2yvpjn7n?file=/index.js
and can drag cross the parent node .

[100terres]

@Pines-Cheng this is something I'll try to tackle in this fork https://github.com/react-forked/dnd of rbd. I've wrote a blog post about this 🙂

[ethange7]

Found an issue with isNestingEnabled and offsetPerLevel={0} dragging an item to an expanded node as very last child will result in an issue, the destination.index will return NaN in onDragEnd() params
The reason we are setting offset to 0 is that our designer want to style the level inside our component, I understand the offset is used to determine the which level this item will be in, but being able to fully customize the offset by ourself is also important.

[ethange7]

One workaround is that we set the offset to maybe 16 and do a margin-left: -16px on the outmost renderItem component, but it feels hacky

[bassamIHabash]

Hi All,

I'm not able to use @atlaskit/tree for the last version of react 18.2.0. are there any changes to support that ? as I did the upgrade for my project from react 16 to react 18.2.0