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

Author: RobinMalfait

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
 

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,

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,

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,

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,