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 `` open when clicking scrollbar in `` ([#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( 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( 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( 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( : undefined, tabIndex: -1, style: { + ...theirProps.style, ...style, '--button-width': useElementSize(state.button, true).width, } as React.CSSProperties,