Sticky list headers

[nikita-kart]

Proposed Changes

Related to bpmn-io/bpmn-js-properties-panel#1103

These changes allow list headers to become sticky to the properties panel when scrolled past. This is particularly useful when managing long lists of values, as it eliminates the need to constantly scroll back up to add new elements to a list or map. It is especially convenient for maps where each entry contains multiple fields making scrolling distance quite long.

Additionally, there is the ability to set nesting levels for headers, which is useful when working with multiple nested lists or maps. This value is used to set z-index and top margin for the sticky position and to properly detect stickiness with useStickyIntersectionObserver hook.

A value of 1 means that the list is at the first nesting level within its group section. If this property is not set, the header will behave as before.

How it looks like

Checklist

To ensure you provided everything we need to look at your PR:

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[CLAassistant]

All committers have signed the CLA.