use stable unconditional sync refs

The `PopoverButton` and `DisclosureButton` act as a `CloseButton` when
used inside of a panel. We conditionally handled the `ref` when it's
inside a panel. We wanted to make sure that the callback is stable and
used `useEvent`.

This seemed to be ok (even though we break the rules of hooks) because a
button can only be in a panel or not be in a panel, but it can't switch
during the lifetime of the button.

But it can, because the way we know whether we are in a Panel relies
on a state value which comes from context.

The reason we didn't catch this in the `Disclosure`, is because all the
state is stable and known by the time the `Panel` opens. But if you use
the `defaultOpen` prop, it is already open and then the state is not
ready yet.

Long story short, moved the `isWithinPanel` check inside the
`useEvent(…)` hook that holds the stable function which means that we
don't call this hook unconditionally anymore.

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

@@ -299,9 +299,10 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
   let buttonRef = useSyncRefs(
     internalButtonRef,
     ref,
-    !isWithinPanel
-      ? useEvent((element) => dispatch({ type: ActionTypes.SetButtonElement, element }))
-      : null
+    useEvent((element) => {
+      if (isWithinPanel) return
+      return dispatch({ type: ActionTypes.SetButtonElement, element })
+    })
   )
   let mergeRefs = useMergeRefsFn()
 

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

@@ -535,24 +535,23 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     internalButtonRef,
     ref,
     useFloatingReference(),
-    isWithinPanel
-      ? null
-      : useEvent((button) => {
-          if (button) {
-            state.buttons.current.push(uniqueIdentifier)
-          } else {
-            let idx = state.buttons.current.indexOf(uniqueIdentifier)
-            if (idx !== -1) state.buttons.current.splice(idx, 1)
-          }
+    useEvent((button) => {
+      if (isWithinPanel) return
+      if (button) {
+        state.buttons.current.push(uniqueIdentifier)
+      } else {
+        let idx = state.buttons.current.indexOf(uniqueIdentifier)
+        if (idx !== -1) state.buttons.current.splice(idx, 1)
+      }
 
-          if (state.buttons.current.length > 1) {
-            console.warn(
-              'You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported.'
-            )
-          }
+      if (state.buttons.current.length > 1) {
+        console.warn(
+          'You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported.'
+        )
+      }
 
-          button && dispatch({ type: ActionTypes.SetButton, button })
-        })
+      button && dispatch({ type: ActionTypes.SetButton, button })
+    })
   )
   let withinPanelButtonRef = useSyncRefs(internalButtonRef, ref)
   let ownerDocument = useOwnerDocument(internalButtonRef)