Expose the --button-width CSS variable on the PopoverPanel compon…

…ent (#3058)
tailwindlabs · Mar 26, 2024 · bf4dc77 · bf4dc77
1 parent 056b311
commit bf4dc77
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - 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))
+- Expose the `--button-width` CSS variable on the `PopoverPanel` component ([#3058](https://github.com/tailwindlabs/headlessui/pull/3058))
 
 ## [2.0.0-alpha.4] - 2024-01-03
 

diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx
@@ -22,6 +22,12 @@ let act = _act as unknown as <T>(fn: () => T) => PromiseLike<T>
 
 jest.mock('../../hooks/use-id')
 
+// @ts-expect-error
+global.ResizeObserver = class FakeResizeObserver {
+  observe() {}
+  disconnect() {}
+}
+
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {

diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -23,6 +23,7 @@ import React, {
   type Ref,
 } from 'react'
 import { useActivePress } from '../../hooks/use-active-press'
+import { useElementSize } from '../../hooks/use-element-size'
 import { useEvent } from '../../hooks/use-event'
 import { useEventListener } from '../../hooks/use-event-listener'
 import { useId } from '../../hooks/use-id'
@@ -913,7 +914,10 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
           }
         : undefined,
     tabIndex: -1,
-    ...(style ? { style } : {}),
+    style: {
+      ...style,
+      '--button-width': useElementSize(state.button, true).width,
+    } as React.CSSProperties,
   })
 
   let direction = useTabDirection()

diff --git a/packages/@headlessui-react/src/hooks/use-element-size.ts b/packages/@headlessui-react/src/hooks/use-element-size.ts
@@ -7,11 +7,14 @@ function computeSize(element: HTMLElement | null) {
   return { width, height }
 }
 
-export function useElementSize(ref: React.MutableRefObject<HTMLElement | null>, unit = false) {
-  let [size, setSize] = useState(() => computeSize(ref.current))
+export function useElementSize(
+  ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null,
+  unit = false
+) {
+  let element = ref === null ? null : 'current' in ref ? ref.current : ref
+  let [size, setSize] = useState(() => computeSize(element))
 
   useIsoMorphicEffect(() => {
-    let element = ref.current
     if (!element) return
 
     let observer = new ResizeObserver(() => {
@@ -23,7 +26,7 @@ export function useElementSize(ref: React.MutableRefObject<HTMLElement | null>,
     return () => {
       observer.disconnect()
     }
-  }, [ref])
+  }, [element])
 
   if (unit) {
     return {