Revert "Fix ActionMenu with IconButton (#2084)"

This reverts commit 3204599.

Author: siddharthkp

src/Tooltip/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {useSSRSafeId} from '@react-aria/ssr'
 import type {AnchorPosition, AnchorSide, AnchorAlignment} from '@primer/behaviors'
 import Box from '../Box'
-import {useAnchoredPosition, useProvidedRefOrCreate} from '../hooks'
+import {useAnchoredPosition} from '../hooks'
 import {SxProp, merge, BetterSystemStyleObject} from '../sx'
 
 type TooltipDirection = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
@@ -21,7 +21,7 @@ export type TooltipProps = {
   /** Use aria-describedby or aria-labelledby */
   type?: 'description' | 'label'
   /** Tooltip target */
-  children: React.ReactElement & {ref?: React.RefObject<HTMLElement>}
+  children: React.ReactElement
   /** When set to true, tooltip appears without any delay */
   noDelay?: boolean
   /** @deprecated Always set to true now. */
@@ -55,16 +55,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
   sx = {},
   ...props
 }) => {
-  const tooltipId = useSSRSafeId()
-
-  const childRef = children.ref
-  const anchorElementRef = useProvidedRefOrCreate(childRef)
   const tooltipRef = React.useRef<HTMLDivElement>(null)
-
-  const child = React.cloneElement(children, {
-    ref: anchorElementRef,
-    [type === 'description' ? 'aria-describedby' : 'aria-labelledby']: tooltipId
-  })
+  const anchorElementRef = React.useRef<HTMLElement>(null)
 
   const {position} = useAnchoredPosition({
     side: directionToPosition[direction].side,
@@ -74,6 +66,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
     anchorElementRef
   })
 
+  const tooltipId = useSSRSafeId()
+
+  const child = React.cloneElement(children, {
+    ref: anchorElementRef,
+    [type === 'description' ? 'aria-describedby' : 'aria-labelledby']: tooltipId
+  })
+
   const tooltipText = text || props['aria-label']
 
   return (

src/__tests__/ActionMenu.test.tsx

@@ -3,11 +3,10 @@ import 'babel-polyfill'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
-import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, IconButton} from '..'
+import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider} from '..'
 import {behavesAsComponent, checkExports, checkStoriesForAxeViolations} from '../utils/testing'
 import {SingleSelection, MixedSelection} from '../stories/ActionMenu/examples.stories'
 import '@testing-library/jest-dom'
-import {TriangleDownIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 function Example(): JSX.Element {
@@ -137,32 +136,6 @@ describe('ActionMenu', () => {
     cleanup()
   })
 
-  it('should open Menu on MenuAnchor click with IconButton', async () => {
-    const component = HTMLRender(
-      <ThemeProvider theme={theme}>
-        <SSRProvider>
-          <BaseStyles>
-            <ActionMenu>
-              <ActionMenu.Anchor>
-                <IconButton aria-label="Toggle Menu" icon={TriangleDownIcon} />
-              </ActionMenu.Anchor>
-              <ActionMenu.Overlay>
-                <ActionList>
-                  <ActionList.Item>New file</ActionList.Item>
-                  <ActionList.Item>Copy link</ActionList.Item>
-                </ActionList>
-              </ActionMenu.Overlay>
-            </ActionMenu>
-          </BaseStyles>
-        </SSRProvider>
-      </ThemeProvider>
-    )
-    const button = component.getByLabelText('Toggle Menu')
-    fireEvent.click(button)
-    expect(component.getByRole('menu')).toBeInTheDocument()
-    cleanup()
-  })
-
   it('should have no axe violations', async () => {
     const {container} = HTMLRender(<Example />)
     const results = await axe(container)