Support display contents

[cph0]

I have a feature request. There are situations where the items in the list are set to "display:contents;", particularly as Chrome does not support Subgrids yet. This means that the item sizes/positions cannot be determined as they don't have style. We need to be able to say which element it should use for the size/position refs. Maybe have it look at the first child element of each item in the list. At least a Boolean prop to toggle this would be great.

[oleggrishechkin]

I have a feature request. There are situations where the items in the list are set to "display:contents;", particularly as Chrome does not support Subgrids yet. This means that the item sizes/positions cannot be determined as they don't have style. We need to be able to say which element it should use for the size/position refs. Maybe have it look at the first child element of each item in the list. At least a Boolean prop to toggle this would be great.

Hi,
I hard depend on element bounding client rect and clientHeight/clientWidth. So in such cases when item's root element have unexpected behaviour list will not work correctly.

I can provide getBoundingClientRect({ element: Element, index: number }) prop with getClientWidth/ClientHeight props. Then you can return computed item rect and size by children. Is this something you need? I think that using a first child is not a good solution since I need to top and bottom rect props (it can be first child top and last child bottom for example)

Also, could you provide minimal reproduction with display:contents? I want to understand you case correctly.

[cph0]

I have created a codesandbox with an example. It sort of works with itemMinSize but the items are not removed from the DOM when scrolling back up so not virtual anymore.

https://codesandbox.io/s/upbeat-ardinghelli-0oi84g?file=/src/App.js

I meant first child of each item in the list not of the list itself. It is currently using the elements in the list which have no top/bottom/height as they are display contents. Just need a prop to tell it where to look for the sizing/position element, currently it does nextSibling/previousSibling from the spacers I think. It could be a prop to return an element or they can be separate like you suggested.

Currently I'm using the source code with a tweak I put in. But it would be great to get this feature supported so I don't have to keep the code manually up-to-date. Really I want Chrome to support subgrids but not much hope there!

[oleggrishechkin]

I have created a codesandbox with an example. It sort of works with itemMinSize but the items are not removed from the DOM when scrolling back up so not virtual anymore.

Thank you for example. It will be really helpful. I think I can add a propery to support custom element bounds.

Currently I'm using the source code with a tweak I put in. But it would be great to get this feature supported so I don't have to keep the code manually up-to-date. Really I want Chrome to support subgrids but not much hope there!

You said that you made some tweaks in source code. Do you want to contribute?

[cph0]

I had just added a boolean prop of "itemsContents". I don't think I can contribute in the best way that is needed.

Here is the code for interest.

function getNextSibling(element: Element | null, itemsContents = false, isSpacer = false) {
    if (!element)
        return null;

    let next = element.nextSibling as Element | null;

    if (!itemsContents)
        return next;

    if (isSpacer)
        return next?.children[0] ?? null;

    next = element.parentElement?.nextSibling as Element | null;
    return next?.children[0] ?? next;
}

function getPreviousSibling(element: Element | null, itemsContents = false, isSpacer = false) {
    if (!element)
        return null;

    let next = element.previousSibling as Element | null;

    if (!itemsContents)
        return next;

    if (isSpacer)
        return next?.children[0] ?? null;

    next = element.parentElement?.previousSibling as Element | null;
    return next?.children[0] ?? next;
}

//example where they are used
...
const topElement = getNextSibling(topSpacer, itemContents, true) as Element;
const bottomElement = getPreviousSibling(bottomSpacer, itemContents, true) as Element;
const topSecondElement = topElement === bottomSpacer ? bottomSpacer : (getNextSibling(topElement, itemContents) as Element);
const bottomSecondElement = bottomElement === topSpacer ? topSpacer : (getPreviousSibling(bottomElement, itemContents) as Element);
...

[oleggrishechkin]

I want to add getItemBoundingClientRect in #53

Usage:

...
getItemBoundingClientRect={(element) => (element.firstChild as Element).getBoundingClientRect()}
...

Looks like exactly what you need to support display:contents. Also you can combine several children rects to support vertical subgrid layout for each cell:

...
getItemBoundingClientRect={(element) => {
    const firstChildRect = (element.firstChild as Element).getBoundingClientRect();
    const secondChildRect = (element.lastChild as Element).getBoundingClientRect();
    
    return {
        top: firstChildRect.top,
        bottom: secondChildRect.bottom,
        left: firstChildRect.left
        right: firstChildRect.right,
        width: firstChildRect.width,
        height: firstChildRect.height + secondChildRect.height
    };
}
...

[oleggrishechkin]

@cph0 I published beta version of 7.0.0, this release includes getItemBoundingClientRect prop. (FYI 7.0.0 has a several breaking changes)