Commits on Apr 26, 2024

1. use var(--anchor-max-height) if available …

   When using the `anchor` prop, we try to position the anchored element
   within the viewport. We use the size middleware of Floating UI to ensure
   we are working in a constrained `max-width` and `max-height`.
   
   However, if you want to limit the height of let's say a
   `ComboboxOptions` then you instinctively add `max-h-60` for example. The
   problem is that the `max-height` set by Floating UI will win because
   it's inline styles.
   
   You could use `!max-h-60` which makes it `!important`, but then you can
   run into an issue where the max height set by the user is larger than
   the available space which results in combobox options that are
   unavailable.
   
   To solve this, we want best of both worlds by ensuring we prefer the
   size from the user, but constrain it with the value we know.
   
   We now read from a `var(--anchor-max-height)` variable where you can set
   your own preferred max height.
   
   E.g.:
   
   ```ts
   <Combobox>
     <ComboboxInput />
     <ComboboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-4)] [--anchor-max-height:var(--spacing-60)]">
       …
     </ComboboxOptions>
   </Combobox>
   ```

   

   RobinMalfait committed Apr 26, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 82f2075
   • Browse repository at this point

   Copy the full SHA

   82f2075 View commit details

   Browse the repository at this point in the history

2. update changelog

   

   RobinMalfait committed Apr 26, 2024
   Configuration menu

   • View commit details
   • Copy full SHA for 41cb9c1
   • Browse repository at this point

   Copy the full SHA

   41cb9c1 View commit details

   Browse the repository at this point in the history