Disable or override projection when dragging over disallowed depths (Sortable / Tree)

[NikAtNight]

Description

I’m building a hierarchical sortable UI (similar to a “property groups” tree). Items have a defined depth, and I only allow moving items to certain depths.

Everything works correctly from a logic standpoint — invalid drops are rejected.
However, there’s a UX problem:

👉 The projection line still renders when the dragged item hovers over a depth that is not allowed.

This gives the user the impression that dropping is valid, even though my code will not accept the drop.

---

Example scenario

In the screenshot below:

• Basic is a depth 0 item (a top-level group)
• I drag it over a depth 1 item
• The projection line animates as if I could drop it into that group — but I actually disallow that

This UI feedback is misleading because the drop is not permitted.

---

What I want to do

I would like to disable the projection animation entirely when the hovered depth exceeds the allowed max depth.

For example:

• If dragging a depth-0 item
  → Do not render projection when hovering depth ≥ 1
• If dragging a depth-1 item
  → Only project within allowed sibling groups, etc.

---

Question

Is there a supported way to disable / override the projection when the projected depth is not allowed?

If not, would you consider adding support for:

• A shouldProject callback, or
• Allowing a custom projection renderer, or
• Allowing projection to be disabled entirely

Any of these would allow preventing misleading UI feedback for invalid drop targets.

---

Reference

This is the implementation I copied

https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features