remove change from FE

frontend/taipy-gui/src/components/Taipy/Menu.tsx

@@ -11,7 +11,7 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useCallback, useMemo, useState, MouseEvent, CSSProperties } from "react";
+import React, {useCallback, useMemo, useState, MouseEvent, CSSProperties, useEffect} from "react";
 import MenuIco from "@mui/icons-material/Menu";
 import ListItemButton from "@mui/material/ListItemButton";
 import Drawer from "@mui/material/Drawer";
@@ -23,22 +23,21 @@ import Box from "@mui/material/Box";
 import Tooltip from "@mui/material/Tooltip";
 import { Theme, useTheme } from "@mui/system";
 
-import { LovImage } from "./lovUtils";
+import { SingleItem } from "./lovUtils";
 import { createSendActionNameAction } from "../../context/taipyReducers";
 import { MenuProps } from "../../utils/lov";
 import { useClassNames, useDispatch, useModule } from "../../utils/hooks";
-import { emptyArray, getInitials } from "../../utils";
+import { emptyArray } from "../../utils";
 import { getComponentClassName } from "./TaipyStyle";
 
 const boxDrawerStyle = { overflowX: "hidden" } as CSSProperties;
 const headerSx = { padding: 0 };
 const avatarSx = { bgcolor: (theme: Theme) => theme.palette.text.primary };
 const baseTitleProps = { noWrap: true, variant: "h6" } as const;
-const cardSx = { p: 0 } as CSSProperties;
 
 const Menu = (props: MenuProps) => {
     const { label, onAction = "", lov, width, inactiveIds = emptyArray, active = true } = props;
-    const [selectedValue, setSelectedValue] = useState("");
+    const [selectedValue, setSelectedValue] = useState<string | string[]>("");
     const [opened, setOpened] = useState(false);
     const dispatch = useDispatch();
     const theme = useTheme();
@@ -50,17 +49,16 @@ const Menu = (props: MenuProps) => {
         (evt: MouseEvent<HTMLElement>) => {
             if (active) {
                 const { id: key = "" } = evt.currentTarget.dataset;
-                if (props.selected) {
-                    dispatch(createSendActionNameAction("menu", module, onAction, ...props.selected));
-                } else {
-                    setSelectedValue(() => {
-                        dispatch(createSendActionNameAction("menu", module, onAction, key));
-                        return key;
-                    });
-                }
+                setSelectedValue(() => {
+                    dispatch(createSendActionNameAction("menu", module, onAction, key));
+                    if (props.selected) {
+                        return [...(props.selected ?? []), key];
+                    }
+                    return key;
+                });
             }
         },
-        [active, props.selected, dispatch, module, onAction]
+        [active, dispatch, module, onAction, props.selected]
     );
 
     const openHandler = useCallback((evt: MouseEvent<HTMLElement>) => {
@@ -86,6 +84,12 @@ const Menu = (props: MenuProps) => {
         ];
     }, [opened, width, theme]);
 
+    useEffect(() => {
+        if (props.selected) {
+            setSelectedValue(props.selected);
+        }
+    }, [props.selected]);
+
     return lov && lov.length ? (
         <Drawer
             variant="permanent"
@@ -112,32 +116,16 @@ const Menu = (props: MenuProps) => {
                         </ListItemAvatar>
                     </ListItemButton>
                     {lov.map((elt) => (
-                        <ListItemButton
+                        <SingleItem
                             key={elt.id}
-                            onClick={clickHandler}
-                            data-id={elt.id}
-                            selected={props.selected ? props.selected.includes(elt.id) : selectedValue === elt.id}
+                            value={elt.id}
+                            item={elt.item}
+                            selectedValue={selectedValue}
+                            clickHandler={clickHandler}
                             disabled={!active || inactiveIds.includes(elt.id)}
-                        >
-                            {typeof elt.item === "string" ? (
-                                <ListItemAvatar>
-                                    <CardHeader
-                                        sx={cardSx}
-                                        avatar={
-                                            <Tooltip title={elt.item}>
-                                                <Avatar sx={avatarSx}>{getInitials(elt.item)}</Avatar>
-                                            </Tooltip>
-                                        }
-                                        title={elt.item}
-                                        titleTypographyProps={titleProps}
-                                    />
-                                </ListItemAvatar>
-                            ) : (
-                                <ListItemAvatar>
-                                    <LovImage item={elt.item} titleTypographyProps={titleProps} />
-                                </ListItemAvatar>
-                            )}
-                        </ListItemButton>
+                            withAvatar={true}
+                            titleTypographyProps={titleProps}
+                        />
                     ))}
                 </List>
             </Box>

frontend/taipy-gui/src/components/Taipy/MenuCtl.tsx

@@ -11,9 +11,9 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import React, { useMemo, useEffect } from "react";
+import React, {useMemo, useEffect} from "react";
 
-import { LovProps, useLovListMemo } from "./lovUtils";
+import {LovProps, useLovListMemo} from "./lovUtils";
 import {
     useClassNames,
     useDispatch,
@@ -22,8 +22,8 @@ import {
     useIsMobile,
     useModule,
 } from "../../utils/hooks";
-import { createSetMenuAction } from "../../context/taipyReducers";
-import { MenuProps } from "../../utils/lov";
+import {createSetMenuAction} from "../../context/taipyReducers";
+import {MenuProps} from "../../utils/lov";
 
 interface MenuCtlProps extends LovProps<string> {
     label?: string;
@@ -37,7 +37,7 @@ interface MenuCtlProps extends LovProps<string> {
 }
 
 const MenuCtl = (props: MenuCtlProps) => {
-    const { id, label, onAction, defaultLov = "", width = "15vw", width_Mobile_ = "85vw" } = props;
+    const {id, label, onAction, defaultLov = "", width = "15vw", width_Mobile_ = "85vw"} = props;
     const dispatch = useDispatch();
     const isMobile = useIsMobile();
     const module = useModule();
@@ -49,34 +49,31 @@ const MenuCtl = (props: MenuCtlProps) => {
 
     const lovList = useLovListMemo(props.lov, defaultLov, true);
 
-    const { inactiveIds, selected } = useMemo(() => {
-        const result = {
-            inactiveIds: [] as string[],
-            selected: [] as string[],
-        };
-
+    const inactiveIds = useMemo(() => {
         if (props.inactiveIds) {
-            result.inactiveIds = props.inactiveIds;
+            return props.inactiveIds;
         } else if (props.defaultInactiveIds) {
             try {
-                result.inactiveIds = JSON.parse(props.defaultInactiveIds) as string[];
+                return JSON.parse(props.defaultInactiveIds) as string[];
             } catch {
                 console.error("Failed to parse defaultInactiveIds");
             }
         }
+        return [] as string[];
+    }, [props.inactiveIds, props.defaultInactiveIds]);
 
+    const selected = useMemo(() => {
         if (props.selected) {
-            result.selected = props.selected;
+            return props.selected;
         } else if (props.defaultSelected) {
             try {
-                result.selected = JSON.parse(props.defaultSelected) as string[];
+                return JSON.parse(props.defaultSelected) as string[];
             } catch (error) {
                 console.error("Failed to parse defaultSelected:", error);
             }
         }
-
-        return result;
-    }, [props.inactiveIds, props.defaultInactiveIds, props.selected, props.defaultSelected]);
+        return [] as string[];
+    }, [props.selected, props.defaultSelected]);
 
     useEffect(() => {
         dispatch(