Fills ordered by least recently mounted

[maxkostow]

Issue:

Fills are rendered in reverse order that they are mounted

Expected:

Fills are rendered in their order in the react tree

Example:

https://conscious-violet.glitch.me/ See that the order that you toggle survey/news affects their button order in the toolbar

I'm happy to open a PR if you can think of a way to calculate the order. My only thought was to base it on a timestamp/global counter since I don't think components have access to their siblings but that seems like a poor solution.

[gorangajic]

@maxkostow have you figured this one out? I want to mount only the first component in a tree

<Slot name="modal">
    {slots => slots[0] || null}
</Slot>

[maxkostow]

I have not; my workaround has been to render all fills in their place and include a prop on the fill child (or wrapper) that prevents it from rendering anything.

In your example, that might looks something like

<Slot>
  {fills => fills.find(fill => !fill.props.hidden)}
</Slot>

[camwest]

@maxkostow I'd be happy to accept PRs on this, but I don't have the bandwidth to figure it out myself at the moment.