mui / mui/base-ui

[popover][positioner] Add JS access to `--available-width` and `--available-height`

Open
#2,177 2 comments 0 reactions 0 assignees View on GitHub
component: popover has workaround
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Summary

Expose `--available-width` and `--available-height` from Positioner to JavaScript via a prop or change handler. These values are currently available only as CSS variables, but accessing them in JS would unlock more flexible behavior. Maybe something like `onAvailableDimensionChange`?

## Motivation

I need these values in JavaScript to calculate a fixed height for an element rendering virtualized list inside. Having access to --available-height would allow me to dynamically adjust layout and improve performance. I tried to get values from CSS via refs and MutationObserver, but I got ugly code that didn't work completely. For some reason I get multiple cleanups from Positioner and fall into an infinite loop.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.