From 94bc4e15fdd4699bb5db79733ab456ba7bcf65d1 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 28 May 2024 15:37:33 +0200
Subject: [PATCH] Merge incoming `style` prop on `ComboboxOptions`,
 `ListboxOptions`, `MenuItems`, and `PopoverPanel` components (#3250)

* merge incoming `style` prop

We were overriding the `style` prop entirely on the `<ComboboxOptions>`,
`<ListboxOptions>`, `<MenuItems>`, and `<PopoverPanel>` for anchoring
purposes, as well as provided some CSS variables.

This now ensures that the incoming `style` prop gets merged in.

* update changelog
---
 packages/@headlessui-react/CHANGELOG.md                         | 1 +
 packages/@headlessui-react/src/components/combobox/combobox.tsx | 1 +
 packages/@headlessui-react/src/components/listbox/listbox.tsx   | 1 +
 packages/@headlessui-react/src/components/menu/menu.tsx         | 1 +
 packages/@headlessui-react/src/components/popover/popover.tsx   | 1 +
 5 files changed, 5 insertions(+)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 84cdbd7..6f0cd46 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Keep `<Combobox />` open when clicking scrollbar in `<ComboboxOptions>` ([#3249](https://github.com/tailwindlabs/headlessui/pull/3249))
+- Merge incoming `style` prop on `ComboboxOptions`, `ListboxOptions`, `MenuItems`, and `PopoverPanel` components ([#3250](https://github.com/tailwindlabs/headlessui/pull/3250))
 
 ## [2.0.4] - 2024-05-25
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 7b745a1..bab5dd7 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1695,6 +1695,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     id,
     ref: optionsRef,
     style: {
+      ...theirProps.style,
       ...style,
       '--input-width': useElementSize(data.inputRef, true).width,
       '--button-width': useElementSize(data.buttonRef, true).width,
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index 467f0f4..2c2a8c9 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -1095,6 +1095,7 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     role: 'listbox',
     tabIndex: 0,
     style: {
+      ...theirProps.style,
       ...style,
       '--button-width': useElementSize(data.buttonRef, true).width,
     } as CSSProperties,
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 1ab43ab..8c11ef7 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -774,6 +774,7 @@ function ItemsFn<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     tabIndex: 0,
     ref: itemsRef,
     style: {
+      ...theirProps.style,
       ...style,
       '--button-width': useElementSize(state.buttonRef, true).width,
     } as CSSProperties,
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index ca5876d..0574097 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -943,6 +943,7 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
         : undefined,
     tabIndex: -1,
     style: {
+      ...theirProps.style,
       ...style,
       '--button-width': useElementSize(state.button, true).width,
     } as React.CSSProperties,