From beaae6a3f34633938046324b9a835a9cf6633f35 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 29 Apr 2024 17:16:04 +0200
Subject: [PATCH] Use `var(--anchor-max-height)` when using the `anchor` prop
 (#3148)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
```

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md              | 1 +
 packages/@headlessui-react/src/internal/floating.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 81fe59f334..d406cc4714 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `portal` prop to `Combobox`, `Listbox`, `Menu` and `Popover` components ([#3124](https://github.com/tailwindlabs/headlessui/pull/3124))
 - Add frozen value to `ComboboxOptions` component ([#3126](https://github.com/tailwindlabs/headlessui/pull/3126))
 - Add string shorthand for the `anchor` prop ([#3133](https://github.com/tailwindlabs/headlessui/pull/3133))
+- Use `var(--anchor-max-height)` when using the `anchor` prop ([#3148](https://github.com/tailwindlabs/headlessui/pull/3148))
 
 ## [1.7.19] - 2024-04-15
 
diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx
index 398b126a5d..9dfa654f8c 100644
--- a/packages/@headlessui-react/src/internal/floating.tsx
+++ b/packages/@headlessui-react/src/internal/floating.tsx
@@ -316,7 +316,7 @@ export function FloatingProvider({
           Object.assign(elements.floating.style, {
             overflow: 'auto',
             maxWidth: `${availableWidth - padding}px`,
-            maxHeight: `${availableHeight - padding}px`,
+            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight - padding}px)`,
           })
         },
       }),