[BUG] Carousel component can't contain dynamic data list

[esmeetewinkel]

Describe the bug
The carousel component can render content form a begin_items end_items loop, but not from a begin_data_items end_data_items.

App version
v0.16.36

Deployment Sheet(s)
Want to use this structure in the PLH Kids TZ deployment in the Resource Centre (activity_carousel) and in the Library (lib_books).

When using dynamic data for this, we can immediately store the "favourite" and "accessed timestamps" on the relevant row of the dynamic data list.

Screenshots and videos

[jfmcquade]

@chrismclarke, you've been looking at code in this area a lot recently, do you have an idea of how difficult this would be to fix?

As I understand it, this issue is due to the fact that rows within a standard items loop are processed at the template row level and are rendered at the same level as standard template rows in a sense, whereas rows within a data-items loop are further processed by a specific data-items component and are rendered inside a container associated with that component. The carousel logic is such that it renders a new "slide" for each of its child rows, and in the case of a data-items loop, the immediate child is the data items component itself, so the whole container gets put in a single slide.

The same issue, where the data-items loop can't be used to render a list of component-specific elements, would apply to other components that loop over their child rows to render each one in a certain way (e.g. accordion, display-group, animated-slides etc.), I think we just haven't encountered these use cases yet.

For that reason I think a fix would ideally involve a change at the data-items level rather than at the level of these parent components. However, I'm not sure how we could rework the data-items component to add its children to the DOM in a way that didn't wrap them in a single parent component element.

[esmeetewinkel]

Same holds for display_grid component (works for items but with data_items it just shows the items in a single column).