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.

[jarekdanielak]

Great contribution! 👏

I think we could consider making stickiness the default behavior for the list headers, like it is for the group headers. What do you think @barmac?

Let's have our designer take a look too. cc. @lmbateman (Task > Inputs > Assignment type > Map > Map entries)

I prepared a test branch in bpmn-js-properties-panel where it's enabled for map entries:

npx @bpmn-io/sr -c="npm run start:platform" -l="nikita-kart/properties-panel#sticky-list-headers" bpmn-io/bpmn-js-properties-panel#header-nesting

I'll continue with a proper code review when we decide if we want to make it the new default.

[jarekdanielak]

position: sticky is now widely available for all major browsers. I think we can skip it.

[lmbateman]

Very nice! I can't think of much to say, except let's try adding a left border and see how it looks. I don't think we need a background, although we can always try it out.

I did notice that I can't seem to get subheaders under Execution Listeners. Will this be extended to all multi-level sections?

[barmac]

I think we could consider making stickiness the default behavior for the list headers, like it is for the group headers. What do you think @barmac?

I agree. It works great for the groups, so there's no reason to not make it the default for lists too.