From 8d293fd65719222bc46959f7a091d5abd6774149 Mon Sep 17 00:00:00 2001
From: arieger <rieger@terrestris.de>
Date: Mon, 5 Dec 2022 11:46:20 +0100
Subject: [PATCH] fix: fix deprecated menu config for dropdown

BREAKING CHANGE: Dropdown doesn't need a full antd Menu component any more.
Instead of this, an object of type MenuProps is expected now.
---
 src/UserChip/UserChip.spec.tsx | 10 ++++++++--
 src/UserChip/UserChip.tsx      | 11 ++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/UserChip/UserChip.spec.tsx b/src/UserChip/UserChip.spec.tsx
index 2c3b7fdab3..8ffbb9c9d4 100644
--- a/src/UserChip/UserChip.spec.tsx
+++ b/src/UserChip/UserChip.spec.tsx
@@ -36,7 +36,13 @@ describe('<UserChip />', () => {
   });
 
   it('should render a dropdown', async () => {
-    render(<UserChip userName="Shinji Kagawa" userMenu={<div role="menu">Example menu</div>} />);
+    const exampleMenu = {
+      items: [{
+        label: <div role="menu">Example menu</div>,
+        key: 'example'
+      }]
+    };
+    render(<UserChip userName="Shinji Kagawa" userMenu={exampleMenu}/>);
     const chip = screen.getByText('SK').parentElement;
     await userEvent.click(chip);
     const menu = screen.getByText('Example menu');
@@ -45,7 +51,7 @@ describe('<UserChip />', () => {
   });
 
   it('should not render a dropdown for invalid configuration', () => {
-    render(<UserChip userName="Shinji Kagawa" userMenu={null} />);
+    render(<UserChip userName="Shinji Kagawa" userMenu={undefined} />);
     const menu = screen.queryByRole('menu');
     expect(menu).not.toBeInTheDocument();
   });
diff --git a/src/UserChip/UserChip.tsx b/src/UserChip/UserChip.tsx
index 0dd0917e77..fdf65bb175 100644
--- a/src/UserChip/UserChip.tsx
+++ b/src/UserChip/UserChip.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import {
   Avatar,
-  Dropdown
+  Dropdown,
+  MenuProps
 } from 'antd';
 
 import { AvatarProps } from 'antd/lib/avatar';
@@ -22,9 +23,9 @@ export interface BaseProps {
    */
   imageSrc?: string;
   /**
-   * The react element representing the user menu
+   * The user menu
    */
-  userMenu?: React.ReactNode;
+  userMenu?: MenuProps;
   /**
    * The user name.
    */
@@ -136,10 +137,10 @@ class UserChip extends React.Component<UserChipProps> {
       userMenu
     } = this.props;
 
-    if (userMenu && React.isValidElement(userMenu)) {
+    if (userMenu?.items) {
       return (
         <Dropdown
-          overlay={userMenu}
+          menu={userMenu}
           trigger={['click']}
           getPopupContainer={() => {
             return document.getElementsByClassName(this._className)[0] as HTMLElement;