fix(popover): replace displayName checks (#21550)

Author: adamalston

packages/react/src/components/Popover/__tests__/Popover-test.js

@@ -6,7 +6,7 @@
  */
 
 import { render, screen } from '@testing-library/react';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 import userEvent from '@testing-library/user-event';
 import { waitForPosition } from '../../ListBox/test-helpers';
@@ -17,6 +17,11 @@ import { default as Checkbox } from '../../Checkbox';
 const prefix = 'cds';
 
 describe('Popover', () => {
+  const TriggerWithPopoverContentDisplayName = forwardRef((props, ref) => (
+    <button type="button" ref={ref} {...props} />
+  ));
+  TriggerWithPopoverContentDisplayName.displayName = 'PopoverContent';
+
   it('should support a ref on the outermost element', () => {
     const ref = jest.fn();
     const { container } = render(
@@ -112,6 +117,24 @@ describe('Popover', () => {
       expect(caretContainer).toHaveStyle({ left: '0px', top: '-7px' });
     });
 
+    it('should auto align when trigger component shares `PopoverContent` `displayName`', async () => {
+      render(
+        <Popover open align="bottom" data-testid="test" autoAlign>
+          <TriggerWithPopoverContentDisplayName>
+            Settings
+          </TriggerWithPopoverContentDisplayName>
+          <PopoverContent />
+        </Popover>
+      );
+
+      await waitForPosition();
+
+      const caretContainer =
+        screen.getByTestId('test').lastChild.lastChild.firstChild;
+
+      expect(caretContainer).toHaveStyle({ left: '0px', top: '-6px' });
+    });
+
     it('should forward additional props on the outermost element', () => {
       const { container } = render(
         <PopoverContent id="test" data-testid="test">

packages/react/src/components/Popover/index.tsx

@@ -16,6 +16,7 @@ import React, {
   type ElementType,
 } from 'react';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
+import { isComponentElement } from '../../internal';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 import { usePrefix } from '../../internal/usePrefix';
 import { useWindowEvent, useEvent } from '../../internal/useEvent';
@@ -475,7 +476,13 @@ export const Popover: PopoverComponent & {
   const mappedChildren = React.Children.map(children, (child) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
     const item = child as any;
-    const displayName = item?.type?.displayName;
+    // TODO: Stop relying on `displayName` checks by moving `Toggletip`
+    // subcomponents into their own files that avoid the `Popover` <->
+    // `Toggletip` circular dependency. Then replace these `displayName` checks
+    // with `isComponentElement(item, ...)` checks.
+    const isToggletipButton = item?.type?.displayName === 'ToggletipButton';
+    const isToggletipContent = item?.type?.displayName === 'ToggletipContent';
+    const isPopoverContent = isComponentElement(item, PopoverContent);
 
     /**
      * Only trigger elements (button) or trigger components (ToggletipButton) should be
@@ -485,13 +492,9 @@ export const Popover: PopoverComponent & {
      * is on, even if they are a trigger element.
      */
     const isTriggerElement = item?.type === 'button';
-    const isTriggerComponent =
-      enableFloatingStyles &&
-      displayName &&
-      ['ToggletipButton'].includes(displayName);
+    const isTriggerComponent = enableFloatingStyles && isToggletipButton;
     const isAllowedTriggerComponent =
-      enableFloatingStyles &&
-      !['ToggletipContent', 'PopoverContent'].includes(displayName);
+      enableFloatingStyles && !isToggletipContent && !isPopoverContent;
 
     if (
       React.isValidElement(item) &&
@@ -523,11 +526,7 @@ export const Popover: PopoverComponent & {
           // For a toggletip there is a specific trigger component, ToggletipButton.
           // In either of these cases we want to set this as the reference node for floating-ui autoAlign
           // positioning.
-          if (
-            (enableFloatingStyles && item?.type !== PopoverContent) ||
-            (enableFloatingStyles &&
-              item?.type['displayName'] === 'ToggletipButton')
-          ) {
+          if (enableFloatingStyles && !isPopoverContent) {
             // Set the reference element for floating-ui
             refs.setReference(node);
           }