From c28b55eea1402ffb0d7be876e6bab399554314e5 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 28 May 2024 14:54:03 +0200
Subject: [PATCH] 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.
---
 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 +
 4 files changed, 4 insertions(+)

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index de477fd0c3..1a9ec8262b 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1683,6 +1683,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 467f0f4804..2c2a8c9662 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 1ab43ab257..3a4321ce87 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,
       '--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 ca5876d0da..057409734f 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,