Expose --input-width and --button-width CSS variables on the ComboboxOptions component (#3057)

* add both `--input-width` and `--button-width` to `ComboboxOptions`

* use `--input-width` and `--button-width` in combobox countries example

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Accept optional `strategy` for the `anchor` prop ([#3034](https://github.com/tailwindlabs/headlessui/pull/3034))
+- Expose `--input-width` and `--button-width` CSS variables on the `ComboboxOptions` component ([#3057](https://github.com/tailwindlabs/headlessui/pull/3057))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -13,6 +13,7 @@ import React, {
   useReducer,
   useRef,
   useState,
+  type CSSProperties,
   type ElementType,
   type MutableRefObject,
   type FocusEvent as ReactFocusEvent,
@@ -24,6 +25,7 @@ import { useActivePress } from '../../hooks/use-active-press'
 import { useByComparator, type ByComparator } from '../../hooks/use-by-comparator'
 import { useControllable } from '../../hooks/use-controllable'
 import { useDisposables } from '../../hooks/use-disposables'
+import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
 import { useId } from '../../hooks/use-id'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
@@ -1604,7 +1606,11 @@ function OptionsFn<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     'aria-multiselectable': data.mode === ValueMode.Multi ? true : undefined,
     id,
     ref: optionsRef,
-    ...(style ? { style } : {}),
+    style: {
+      ...style,
+      '--input-width': useElementSize(data.inputRef, true).width,
+      '--button-width': useElementSize(data.buttonRef, true).width,
+    } as CSSProperties,
   })
 
   // Map the children in a scrollable container when virtualization is enabled

playgrounds/react/pages/combobox/combobox-countries.tsx

@@ -72,8 +72,8 @@ export default function Home() {
                 </Combobox.Button>
               </span>
 
-              <div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
-                <Combobox.Options className="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+              <div className="absolute mt-1 rounded-md bg-white shadow-lg">
+                <Combobox.Options className="shadow-xs max-h-60 w-[calc(var(--input-width)+var(--button-width))] overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
                   {countries.map((country) => (
                     <Combobox.Option
                       key={country}