fix: handle React 19 popover target warnings

Author: joshblack

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -16,6 +16,7 @@ import classes from './AnchoredOverlay.module.css'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
 import {widthMap} from '../Overlay/constants'
+import {reactMajorVersion} from '../utils/environment'
 
 interface AnchoredOverlayPropsWithAnchor {
   /**
@@ -290,6 +291,11 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   })
 
   const popoverId = useId()
+  const popoverTargetProps = shouldRenderAsPopover
+    ? reactMajorVersion >= 19
+      ? {popoverTarget: popoverId}
+      : {popovertarget: popoverId}
+    : {}
   const id = popoverId.replaceAll(':', '_') // popoverId can contain colons which are invalid in CSS custom property names, so we replace them with underscores
   const anchorName = `--anchored-overlay-anchor-${id}`
 
@@ -406,7 +412,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           tabIndex: 0,
           onClick: onAnchorClick,
           onKeyDown: onAnchorKeyDown,
-          ...(shouldRenderAsPopover ? {popovertarget: popoverId} : {}),
+          ...popoverTargetProps,
         })}
       {open ? (
         <Overlay

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -44,11 +44,14 @@ export function getLiveRegion(): LiveRegionElement {
   throw new Error('No live-region found')
 }
 
-const renderWithProp = (element: React.ReactElement, flag?: boolean) => {
+const getFocusManagement = (flag?: boolean) => {
   // true = 'use roving tabindex'
   // false = 'use aria-activedescendant'
-  const focusManagement = flag ? 'roving-tabindex' : 'active-descendant'
-  return render(React.cloneElement(element, {_PrivateFocusManagement: focusManagement}))
+  return flag ? 'roving-tabindex' : 'active-descendant'
+}
+
+const renderWithProp = (element: React.ReactElement, flag?: boolean) => {
+  return render(React.cloneElement(element, {_PrivateFocusManagement: getFocusManagement(flag)}))
 }
 
 const items: SelectPanelProps['items'] = [
@@ -160,12 +163,11 @@ for (const usingRemoveActiveDescendant of [false, true]) {
     it('should close the select panel when clicking outside of the select panel', async () => {
       const user = userEvent.setup()
 
-      renderWithProp(
+      render(
         <>
           <button type="button">outer button</button>
-          <BasicSelectPanel />
+          <BasicSelectPanel _PrivateFocusManagement={getFocusManagement(usingRemoveActiveDescendant)} />
         </>,
-        usingRemoveActiveDescendant,
       )
 
       await user.click(screen.getByText('Select items'))