fix(Popper): disable pointer events when hidden

This patch sets `pointer-events: none` when the `<PopperContent>` is
hidden so that the UI behaves as if it is not there at all. This ensures
that users can interact with elements beneath the `<PopperContent>`
uninterrupted.

Ref: #2743 (comment)

Fixes: e5ba0d9 ("fix(Popper): use `visibility` to hide instead of `opacity` (#2744)")

packages/react/popper/src/Popper.tsx

@@ -268,7 +268,10 @@ const PopperContent = React.forwardRef<PopperContentElement, PopperContentProps>
               // we prevent animations so that users's animation don't kick in too early referring wrong sides
               animation: !isPositioned ? 'none' : undefined,
               // hide the content if using the hide middleware and should be hidden
+              // set visibility to hidden and disable pointer events so the UI behaves
+              // as if the PopperContent isn't there at all
               visibility: middlewareData.hide?.referenceHidden ? 'hidden' : undefined,
+              pointerEvents: middlewareData.hide?.referenceHidden ? 'none' : undefined,
             }}
           />
         </PopperContentProvider>