feat: support popupRender to customize Mentions dropdown menu

Author: EmilyyyLiu

README.md

@@ -114,6 +114,7 @@ Then open `http://localhost:8000`.
 | onResize          | `(size: { width: number; height: number }) => void`        | -             | Triggered when textarea size changes.           |
 | onSearch          | `(text: string, prefix: string) => void`                   | -             | Triggered when a prefix starts a search.        |
 | onSelect          | `(option: OptionProps, prefix: string) => void`            | -             | Triggered when an option is selected.           |
+| popupRender       | `(menu: React.ReactElement) => ReactNode`                  | -             | Customize the dropdown menu rendering           |         
 
 ### Option
 

src/KeywordTrigger.tsx

@@ -52,6 +52,7 @@ interface KeywordTriggerProps {
   getPopupContainer?: () => HTMLElement;
   popupClassName?: string;
   popupStyle?: React.CSSProperties;
+  popupRender?: (menu: React.ReactElement) => React.ReactNode;
 }
 
 const KeywordTrigger: FC<KeywordTriggerProps> = props => {
@@ -66,6 +67,7 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
     popupStyle,
     direction,
     placement,
+    popupRender,
   } = props;
 
   const dropdownPrefix = `${prefixCls}-dropdown`;
@@ -89,11 +91,15 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
     return popupPlacement;
   }, [direction, placement]);
 
+  const dropdownPopup = popupRender
+    ? popupRender(dropdownElement)
+    : dropdownElement;
+
   return (
     <Trigger
       prefixCls={dropdownPrefix}
       popupVisible={visible}
-      popup={dropdownElement}
+      popup={dropdownPopup}
       popupPlacement={dropdownPlacement}
       popupMotion={{ motionName: transitionName }}
       builtinPlacements={BUILT_IN_PLACEMENTS}

src/Mentions.tsx

@@ -85,6 +85,12 @@ export interface MentionsProps extends BaseTextareaAttrs {
     popup?: React.CSSProperties;
   };
   onPopupScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+  /**
+   * Customize the dropdown menu rendering
+   * @param menu The default dropdown menu
+   * @returns The customized dropdown menu
+   */
+  popupRender?: (menu: React.ReactElement) => React.ReactNode;
 }
 
 export interface MentionsRef {
@@ -150,6 +156,7 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
       // @ts-expect-error
       visible,
       onPopupScroll,
+      popupRender,
 
       // Rest
       ...restProps
@@ -607,6 +614,7 @@ const InternalMentions = forwardRef<MentionsRef, InternalMentionsProps>(
                 getPopupContainer={getPopupContainer}
                 popupClassName={clsx(popupClassName, mentionClassNames?.popup)}
                 popupStyle={styles?.popup}
+                popupRender={popupRender}
               >
                 <span>{mergedMeasurePrefix}</span>
               </KeywordTrigger>

tests/Mentions.spec.tsx

@@ -484,4 +484,24 @@ describe('Mentions', () => {
       expect(textarea).toHaveStyle({ resize: 'vertical' });
     });
   });
+
+  describe('popupRender', () => {
+    it('should render custom popup content', () => {
+      const { container, baseElement } = renderMentions({
+        popupRender: menu => (
+          <div className="custom-popup">
+            <div className="custom-header">Custom Header</div>
+            {menu}
+          </div>
+        ),
+      });
+
+      simulateInput(container, '@');
+
+      expect(baseElement.querySelector('.custom-header')).toBeTruthy();
+      expect(
+        baseElement.querySelector('.rc-mentions-dropdown-menu'),
+      ).toBeTruthy();
+    });
+  });
 });