Collapsibility hook/component

[JayPanoz]

We want action icons to be collapsible, that is to say depending on the size available in the header (a grid area whose dimensions are unknown), action icons will be moved into/removed from the overflow menu.

On desktop/large screen:

If you decrease the size of the window, the Table of Contents action can’t be displayed any longer and moves to the overflow menu:

If you decrease the size of the window again, then another action (fullscreen) moves into the overflow menu:

So the idea is to not have breakpoints here, but check how many action icons can be displayed in their container, whose dimensions are unknown, and triage depending on that.

PoC can be tested here, hook can be accessed here, but has a couple of issues:

• It’s super easy to create infinite loops with ResizeObserver + React so it’s actually added to the header, and not the actions wrapper whose dimensions are altered when migrating actions;
• if you set width: 100% on the actions wrapper, it no longer works (as it’s relying on actions wrapper overflowing);
• initial state is dark magic that relies on unobserving then observing again while triaging, remove that and the useCollapsibility hook can’t set things up properly on smaller screens – that could actually even be considered a side-effect of a performance optimisation since it’s there to not fire the observer while altering the actions wrapper;
• it obviously has to be debounced, but that creates an issue where resizing too fast will not migrate as many actions as possible when increasing the browser window on desktop;
• so a loop has to be used, which creates some visible stuttering when resizing slowly;
• in theory throttling instead of debouncing solves this issue… but then creates other issues the other way around (+ initial state);
• there is an awful lot of filtering to do because you occasionally get false negatives (as it’s relying on actions wrapper overflowing);
• it doesn't address the case where the wrapper is still overflowing but there's no collapsible item left to move;
• keeping focus has not been tackled yet.

Which is why I’m not really happy with this PoC – it has the potential to become an over-engineered and unsustainable hook as edge cases surface.

This demo could serve as inspiration and is using a similar approach with ResizeObserver but the way things are currently triaged must be entirely revamped so I’ll have to allocate some time to do that. It’s the best one I could find since such a collapsible overflow component is pretty rare in various libraries and exist mainly as demoes with lots of issues.