@gridsuite/commons-ui 0.58.0 → 0.59.0

package/dist/components/TopBar/TopBar.js

@@ -130,7 +130,9 @@ const TopBar = ({
   language
 }) => {
   const [anchorElSettingsMenu, setAnchorElSettingsMenu] = useState(null);
-  const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(null);
+  const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(
+    null
+  );
   const handleToggleSettingsMenu = (event) => {
     setAnchorElSettingsMenu(event.currentTarget);
   };
@@ -157,17 +159,17 @@ const TopBar = ({
       return tab[0] + tab[tab.length - 1];
     }
   };
-  const changeTheme = (event, value) => {
+  const changeTheme = (_, value) => {
     if (onThemeClick && value !== null) {
       onThemeClick(value);
     }
   };
-  const changeEquipmentLabelling = (event, value) => {
+  const changeEquipmentLabelling = (_, value) => {
     if (onEquipmentLabellingClick && value !== null) {
       onEquipmentLabellingClick(value);
     }
   };
-  const changeLanguage = (event, value) => {
+  const changeLanguage = (_, value) => {
     if (onLanguageClick && value !== null) {
       onLanguageClick(value);
     }
@@ -193,401 +195,408 @@ const TopBar = ({
     ),
     [onLogoClick, appLogo, appName, appColor]
   );
-  return /* @__PURE__ */ jsx(AppBar, { position: "static", color: "default", sx: styles.appBar, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
-    logo_clickable,
-    /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
-    user && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          "aria-label": "apps",
-          "aria-controls": "apps-menu",
-          "aria-haspopup": "true",
-          onClick: handleClickAppsMenu,
-          color: "inherit",
-          children: /* @__PURE__ */ jsx(Apps, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        StyledMenu,
-        {
-          id: "apps-menu",
-          anchorEl: anchorElAppsMenu,
-          keepMounted: true,
-          open: Boolean(anchorElAppsMenu),
-          onClose: handleCloseAppsMenu,
-          children: appsAndUrls && appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => /* @__PURE__ */ jsx(
-            Box,
-            {
-              component: "a",
-              href: item.url,
-              sx: styles.link,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              children: /* @__PURE__ */ jsx(
-                StyledMenuItem,
+  return (
+    //@ts-ignore appBar style is not defined
+    /* @__PURE__ */ jsx(AppBar, { position: "static", color: "default", sx: styles.appBar, children: /* @__PURE__ */ jsxs(Toolbar, { children: [
+      logo_clickable,
+      /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
+      user && /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            "aria-label": "apps",
+            "aria-controls": "apps-menu",
+            "aria-haspopup": "true",
+            onClick: handleClickAppsMenu,
+            color: "inherit",
+            children: /* @__PURE__ */ jsx(Apps, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledMenu,
+          {
+            id: "apps-menu",
+            anchorEl: anchorElAppsMenu,
+            keepMounted: true,
+            open: Boolean(anchorElAppsMenu),
+            onClose: handleCloseAppsMenu,
+            children: appsAndUrls && appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => {
+              var _a;
+              return /* @__PURE__ */ jsx(
+                Box,
                 {
-                  onClick: handleCloseAppsMenu,
-                  children: /* @__PURE__ */ jsxs(ListItemText, { children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          fontWeight: "bold"
-                        },
-                        children: "Grid"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        style: {
-                          color: item.appColor === void 0 ? "grey" : item.appColor,
-                          fontWeight: "bold"
-                        },
-                        children: item.name
-                      }
-                    )
-                  ] })
-                }
-              )
-            },
-            item.name
-          ))
-        }
-      )
-    ] }),
-    user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainerg, children: [
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "aria-controls": "settings-menu",
-          "aria-haspopup": "true",
-          sx: styles.showHideMenu,
-          onClick: handleToggleSettingsMenu,
-          color: "inherit",
-          style: Boolean(anchorElSettingsMenu) ? { cursor: "initial" } : { cursor: "pointer" },
-          children: [
-            /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user !== null ? abbreviationFromUserName(
-              user.profile.name
-            ) : "" }),
-            anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Popper,
-        {
-          sx: styles.settingsMenu,
-          open: Boolean(anchorElSettingsMenu),
-          anchorEl: anchorElSettingsMenu,
-          children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(
-            ClickAwayListener,
-            {
-              onClickAway: handleCloseSettingsMenu,
-              children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
-                /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    sx: styles.borderBottom,
-                    disabled: true,
-                    style: { opacity: "1" },
-                    children: [
-                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
-                      /* @__PURE__ */ jsx(ListItemText, { disabled: false, children: user !== null && /* @__PURE__ */ jsxs(
-                        Box,
-                        {
-                          component: "span",
-                          sx: styles.sizeLabel,
-                          children: [
-                            user.profile.name,
-                            " ",
-                            /* @__PURE__ */ jsx("br", {}),
-                            /* @__PURE__ */ jsx(
-                              Box,
+                  component: "a",
+                  href: (_a = item.url) == null ? void 0 : _a.toString(),
+                  sx: styles.link,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  children: /* @__PURE__ */ jsx(
+                    StyledMenuItem,
+                    {
+                      onClick: handleCloseAppsMenu,
+                      children: /* @__PURE__ */ jsxs(ListItemText, { children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              fontWeight: "bold"
+                            },
+                            children: "Grid"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              color: item.appColor === void 0 ? "grey" : item.appColor,
+                              fontWeight: "bold"
+                            },
+                            children: item.name
+                          }
+                        )
+                      ] })
+                    }
+                  )
+                },
+                item.name
+              );
+            })
+          }
+        )
+      ] }),
+      user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainer, children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-controls": "settings-menu",
+            "aria-haspopup": "true",
+            sx: styles.showHideMenu,
+            onClick: handleToggleSettingsMenu,
+            color: "inherit",
+            style: Boolean(anchorElSettingsMenu) ? { cursor: "initial" } : { cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user !== null ? abbreviationFromUserName(
+                //@ts-ignore name could be undefined, how to handle this case ?
+                user.profile.name
+              ) : "" }),
+              anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popper,
+          {
+            sx: styles.settingsMenu,
+            open: Boolean(anchorElSettingsMenu),
+            anchorEl: anchorElSettingsMenu,
+            children: /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsx(
+              ClickAwayListener,
+              {
+                onClickAway: handleCloseSettingsMenu,
+                children: /* @__PURE__ */ jsxs(MenuList, { id: "settings-menu", children: [
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      sx: styles.borderBottom,
+                      disabled: true,
+                      style: { opacity: "1" },
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Person, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: user !== null && /* @__PURE__ */ jsxs(
+                          Box,
+                          {
+                            component: "span",
+                            sx: styles.sizeLabel,
+                            children: [
+                              user.profile.name,
+                              " ",
+                              /* @__PURE__ */ jsx("br", {}),
+                              /* @__PURE__ */ jsx(
+                                Box,
+                                {
+                                  component: "span",
+                                  sx: styles.userMail,
+                                  children: user.profile.email
+                                }
+                              )
+                            ]
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
                               {
-                                component: "span",
-                                sx: styles.userMail,
-                                children: user.profile.email
+                                id: "top-bar/displayMode",
+                                defaultMessage: "Display mode"
                               }
                             )
-                          ]
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    disabled: true,
-                    style: {
-                      opacity: "1",
-                      paddingTop: "10px",
-                      paddingBottom: "10px",
-                      backgroundColor: "transparent"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          sx: styles.sizeLabel,
-                          children: /* @__PURE__ */ jsx(
-                            FormattedMessage,
-                            {
-                              id: "top-bar/displayMode",
-                              defaultMessage: "Display mode"
-                            }
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs(
-                        ToggleButtonGroup,
-                        {
-                          exclusive: true,
-                          value: theme,
-                          size: "large",
-                          sx: styles.toggleButtonGroup,
-                          onChange: changeTheme,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
-                              {
-                                value: LIGHT_THEME,
-                                "aria-label": LIGHT_THEME,
-                                sx: styles.toggleButton,
-                                children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: theme,
+                            size: "large",
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeTheme,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LIGHT_THEME,
+                                  "aria-label": LIGHT_THEME,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(WbSunny, { fontSize: "small" })
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: DARK_THEME,
+                                  "aria-label": DARK_THEME,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        // padding: '0',
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
                               {
-                                value: DARK_THEME,
-                                "aria-label": DARK_THEME,
-                                sx: styles.toggleButton,
-                                children: /* @__PURE__ */ jsx(Brightness3, { fontSize: "small" })
+                                id: "top-bar/equipmentLabel",
+                                defaultMessage: "Equipment label"
                               }
                             )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                onEquipmentLabellingClick && /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    disabled: true,
-                    style: {
-                      opacity: "1",
-                      // padding: '0',
-                      paddingTop: "10px",
-                      paddingBottom: "10px",
-                      backgroundColor: "transparent"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          sx: styles.sizeLabel,
-                          children: /* @__PURE__ */ jsx(
-                            FormattedMessage,
-                            {
-                              id: "top-bar/equipmentLabel",
-                              defaultMessage: "Equipment label"
-                            }
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs(
-                        ToggleButtonGroup,
-                        {
-                          exclusive: true,
-                          value: equipmentLabelling,
-                          sx: styles.toggleButtonGroup,
-                          onChange: changeEquipmentLabelling,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
-                              {
-                                value: false,
-                                sx: styles.toggleButton,
-                                children: /* @__PURE__ */ jsx(
-                                  FormattedMessage,
-                                  {
-                                    id: "top-bar/id",
-                                    defaultMessage: "Id"
-                                  }
-                                )
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: equipmentLabelling,
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeEquipmentLabelling,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: false,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(
+                                    FormattedMessage,
+                                    {
+                                      id: "top-bar/id",
+                                      defaultMessage: "Id"
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: true,
+                                  sx: styles.toggleButton,
+                                  children: /* @__PURE__ */ jsx(
+                                    FormattedMessage,
+                                    {
+                                      id: "top-bar/name",
+                                      defaultMessage: "Name"
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      disabled: true,
+                      style: {
+                        opacity: "1",
+                        paddingTop: "10px",
+                        paddingBottom: "10px",
+                        backgroundColor: "transparent"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
                               {
-                                value: true,
-                                sx: styles.toggleButton,
-                                children: /* @__PURE__ */ jsx(
-                                  FormattedMessage,
-                                  {
-                                    id: "top-bar/name",
-                                    defaultMessage: "Name"
-                                  }
-                                )
+                                id: "top-bar/language",
+                                defaultMessage: "Language"
                               }
                             )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    disabled: true,
-                    style: {
-                      opacity: "1",
-                      paddingTop: "10px",
-                      paddingBottom: "10px",
-                      backgroundColor: "transparent"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          sx: styles.sizeLabel,
-                          children: /* @__PURE__ */ jsx(
-                            FormattedMessage,
-                            {
-                              id: "top-bar/language",
-                              defaultMessage: "Language"
-                            }
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs(
-                        ToggleButtonGroup,
-                        {
-                          exclusive: true,
-                          value: language,
-                          sx: styles.toggleButtonGroup,
-                          onChange: changeLanguage,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
-                              {
-                                value: LANG_SYSTEM,
-                                "aria-label": LANG_SYSTEM,
-                                sx: styles.languageToggleButton,
-                                children: /* @__PURE__ */ jsx(Computer, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs(
+                          ToggleButtonGroup,
+                          {
+                            exclusive: true,
+                            value: language,
+                            sx: styles.toggleButtonGroup,
+                            onChange: changeLanguage,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_SYSTEM,
+                                  "aria-label": LANG_SYSTEM,
+                                  sx: styles.languageToggleButton,
+                                  children: /* @__PURE__ */ jsx(Computer, {})
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_ENGLISH,
+                                  "aria-label": LANG_ENGLISH,
+                                  sx: styles.languageToggleButton,
+                                  children: EN
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                ToggleButton,
+                                {
+                                  value: LANG_FRENCH,
+                                  "aria-label": LANG_FRENCH,
+                                  sx: styles.toggleButton,
+                                  children: FR
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  onParametersClick && /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      onClick: onParametersClicked,
+                      sx: styles.borderTop,
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Settings, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
                               {
-                                value: LANG_ENGLISH,
-                                "aria-label": LANG_ENGLISH,
-                                sx: styles.languageToggleButton,
-                                children: EN
+                                id: "top-bar/settings",
+                                defaultMessage: "Settings"
                               }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              ToggleButton,
+                            )
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    StyledMenuItem,
+                    {
+                      sx: styles.borderBottom,
+                      style: { opacity: "1" },
+                      onClick: onAboutClicked,
+                      children: [
+                        /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
+                        /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            sx: styles.sizeLabel,
+                            children: /* @__PURE__ */ jsx(
+                              FormattedMessage,
                               {
-                                value: LANG_FRENCH,
-                                "aria-label": LANG_FRENCH,
-                                sx: styles.toggleButton,
-                                children: FR
+                                id: "top-bar/about",
+                                defaultMessage: "About"
                               }
                             )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                onParametersClick && /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    onClick: onParametersClicked,
-                    sx: styles.borderTop,
-                    children: [
-                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Settings, { fontSize: "small" }) }),
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          sx: styles.sizeLabel,
-                          children: /* @__PURE__ */ jsx(
-                            FormattedMessage,
-                            {
-                              id: "top-bar/settings",
-                              defaultMessage: "Settings"
-                            }
-                          )
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    sx: styles.borderBottom,
-                    style: { opacity: "1" },
-                    onClick: onAboutClicked,
-                    children: [
-                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small" }) }),
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          sx: styles.sizeLabel,
-                          children: /* @__PURE__ */ jsx(
-                            FormattedMessage,
-                            {
-                              id: "top-bar/about",
-                              defaultMessage: "About"
-                            }
-                          )
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
-                  /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
-                  /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      sx: styles.sizeLabel,
-                      children: /* @__PURE__ */ jsx(
-                        FormattedMessage,
-                        {
-                          id: "top-bar/logout",
-                          defaultMessage: "Logout"
-                        }
-                      )
+                          }
+                        ) })
+                      ]
                     }
-                  ) })
+                  ),
+                  /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onLogoutClick, children: [
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ExitToApp, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        sx: styles.sizeLabel,
+                        children: /* @__PURE__ */ jsx(
+                          FormattedMessage,
+                          {
+                            id: "top-bar/logout",
+                            defaultMessage: "Logout"
+                          }
+                        )
+                      }
+                    ) })
+                  ] })
                 ] })
-              ] })
-            }
-          ) })
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        AboutDialog,
+        {
+          open: isAboutDialogOpen,
+          onClose: () => setAboutDialogOpen(false),
+          appName,
+          appVersion,
+          appLicense,
+          globalVersionPromise,
+          additionalModulesPromise
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx(
-      AboutDialog,
-      {
-        open: isAboutDialogOpen,
-        onClose: () => setAboutDialogOpen(false),
-        appName,
-        appVersion,
-        appLicense,
-        globalVersionPromise,
-        additionalModulesPromise
-      }
-    )
-  ] }) });
+    ] }) })
+  );
 };
 TopBar.propTypes = {
   onParametersClick: PropTypes.func,