Make Popover aware of the viewport and doesn't exceed its height

[emadabdulrahim]

Is it possible to make Popover's height aware/not exceed the viewport height?

Here's an example of the behavior I'm trying to achieve

CleanShot.2022-01-12.at.21.04.22.mp4

[benoitgrelard]

Hi @emadabdulrahim, yeah that isn't something we do for now, but we could look at potentially exposing a CSS variable for example which you could then use as a maxHeight if you wanted to opt-in for the behaviour.

[Francisco-RP]

@benoitgrelard thank you for providing an example, I agree that this should be done by the consumer of the lib.

One request with the example though, in it you're using import { useRect } from "@radix-ui/react-use-rect";

When I go to the npm page for that react-use-rect I see this:

This is an internal utility, not intended for public usage.

Is it safe for the public to use this package? (It's a really useful looking package!)
Or, could you update that example to not use an internal package?

Some people might see this and think the only way to achieve this is by including that package.

[jjenzz]

There are many ways to achieve it. The gist is to get the size of the gap from the top of the window to the bottom of the trigger (including any offsets if used) and deduct that from the content height: https://codesandbox.io/s/determined-wind-rbg0ti?file=/src/App.js

Is it safe for the public to use this package?

These packages are stable but we mark them as private as we do not have the capacity to support any feature requests/issues reported against these packages and it allows us to change them at will without risk of breaking changes to consumers.

Feel free to copy/paste them into your own projects though if you would like guaranteed stability.

[Francisco-RP]

Thank you for the alternative example! and for the info about the package!

[dcastil]

Just in case anyone searches for this: Radix now exposes CSS variables for this within the Content component. E.g. for the available height it's --radix-popper-available-height.

Would it make sense to include this info in the Radix docs?

[benoitgrelard]

Hey @dcastil, yep! However Popper is considered internal, so we usually re-namespace the variable for each components. We have done that already but the change hasn't been released yet.

See #1942

When we publish the next release, the docs will be updated accordingly.