@gridsuite/commons-ui 0.98.0 → 0.100.0

package/dist/components/topBar/TopBar.js

@@ -10,7 +10,7 @@ import UserInformationDialog from "./UserInformationDialog.js";
 import UserSettingsDialog from "./UserSettingsDialog.js";
 import { LIGHT_THEME, DARK_THEME } from "../../utils/styles.js";
 import { LANG_SYSTEM, LANG_ENGLISH, LANG_FRENCH } from "../../utils/langs.js";
-import MessageBanner from "./MessageBanner.js";
+import { DevModeBanner } from "./DevModeBanner.js";
 const styles = {
   grow: {
     flexGrow: 1,
@@ -199,323 +199,320 @@ function TopBar({
     () => /* @__PURE__ */ jsx(GridLogo, { onClick: onLogoClick, appLogo, appName, appColor }),
     [onLogoClick, appLogo, appName, appColor]
   );
-  return (
-    // @ts-expect-error appBar style is not defined
-    /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", sx: styles.appBar, children: [
-      user && developerMode && /* @__PURE__ */ jsx(MessageBanner, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/developerModeWarning", defaultMessage: "Developer mode" }) }),
-      /* @__PURE__ */ jsxs(Toolbar, { children: [
-        logoClickable,
-        /* @__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,
-                  {
-                    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: anchorElSettingsMenu ? { cursor: "initial" } : { cursor: "pointer" },
-              children: [
-                /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user.profile.name !== void 0 ? 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, { 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 })
-                  ] }) })
-                ] }),
-                !isHiddenUserInformation() && /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    style: { opacity: "1" },
-                    onClick: onUserInformationDialogClicked,
-                    children: [
-                      /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Badge, { fontSize: "small" }) }),
-                      /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
-                        FormattedMessage,
-                        {
-                          id: "top-bar/userInformation",
-                          defaultMessage: "User information"
-                        }
-                      ) }) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onUserSettingsDialogClicked, sx: styles.borderBottom, children: [
-                  /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ManageAccounts, { fontSize: "small" }) }),
-                  /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
-                    FormattedMessage,
-                    {
-                      id: "top-bar/userSettings",
-                      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,
-                  {
-                    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,
-                              {
-                                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,
-                        {
-                          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, { value: true, sx: styles.toggleButton, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/name", defaultMessage: "Name" }) })
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  StyledMenuItem,
-                  {
-                    disabled: true,
-                    sx: styles.borderBottom,
-                    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,
-                              {
-                                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"
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__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" }) }) })
-                ] })
-              ] }) }) })
-            }
-          )
-        ] }),
+  return /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", children: [
+    user && developerMode && /* @__PURE__ */ jsx(DevModeBanner, {}),
+    /* @__PURE__ */ jsxs(Toolbar, { children: [
+      logoClickable,
+      /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
+      user && /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(
-          UserInformationDialog,
+          IconButton,
           {
-            openDialog: userInformationDialogOpen && !!user,
-            user,
-            onClose: closeUserInformationDialog
+            "aria-label": "apps",
+            "aria-controls": "apps-menu",
+            "aria-haspopup": "true",
+            onClick: handleClickAppsMenu,
+            color: "inherit",
+            children: /* @__PURE__ */ jsx(Apps, {})
           }
         ),
         /* @__PURE__ */ jsx(
-          UserSettingsDialog,
+          StyledMenu,
+          {
+            id: "apps-menu",
+            anchorEl: anchorElAppsMenu,
+            keepMounted: true,
+            open: Boolean(anchorElAppsMenu),
+            onClose: handleCloseAppsMenu,
+            children: appsAndUrls == null ? void 0 : appsAndUrls.filter((item) => !item.hiddenInAppsMenu).map((item) => {
+              var _a;
+              return /* @__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 ?? "grey",
+                          fontWeight: "bold"
+                        },
+                        children: item.name
+                      }
+                    )
+                  ] }) })
+                },
+                item.name
+              );
+            })
+          }
+        )
+      ] }),
+      user && /* @__PURE__ */ jsxs(Box, { sx: styles.menuContainer, children: [
+        /* @__PURE__ */ jsxs(
+          Button,
           {
-            openDialog: userSettingsDialogOpen && !!user,
-            onClose: closeUserSettingsDialog,
-            developerMode,
-            onDeveloperModeClick
+            "aria-controls": "settings-menu",
+            "aria-haspopup": "true",
+            sx: styles.showHideMenu,
+            onClick: handleToggleSettingsMenu,
+            color: "inherit",
+            style: anchorElSettingsMenu ? { cursor: "initial" } : { cursor: "pointer" },
+            children: [
+              /* @__PURE__ */ jsx(Box, { component: "span", sx: styles.name, children: user.profile.name !== void 0 ? abbreviationFromUserName(user.profile.name) : "" }),
+              anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
-          AboutDialog,
+          Popper,
           {
-            open: isAboutDialogOpen && !!user,
-            onClose: () => setAboutDialogOpen(false),
-            appName,
-            appVersion,
-            appLicense,
-            globalVersionPromise,
-            additionalModulesPromise,
-            logo: logoAboutDialog
+            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: /* @__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 })
+                ] }) })
+              ] }),
+              !isHiddenUserInformation() && /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  style: { opacity: "1" },
+                  onClick: onUserInformationDialogClicked,
+                  children: [
+                    /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(Badge, { fontSize: "small" }) }),
+                    /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                      FormattedMessage,
+                      {
+                        id: "top-bar/userInformation",
+                        defaultMessage: "User information"
+                      }
+                    ) }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(StyledMenuItem, { onClick: onUserSettingsDialogClicked, sx: styles.borderBottom, children: [
+                /* @__PURE__ */ jsx(CustomListItemIcon, { children: /* @__PURE__ */ jsx(ManageAccounts, { fontSize: "small" }) }),
+                /* @__PURE__ */ jsx(ListItemText, { children: /* @__PURE__ */ jsx(Typography, { sx: styles.sizeLabel, children: /* @__PURE__ */ jsx(
+                  FormattedMessage,
+                  {
+                    id: "top-bar/userSettings",
+                    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,
+                {
+                  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,
+                            {
+                              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,
+                      {
+                        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, { value: true, sx: styles.toggleButton, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "top-bar/name", defaultMessage: "Name" }) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                StyledMenuItem,
+                {
+                  disabled: true,
+                  sx: styles.borderBottom,
+                  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,
+                            {
+                              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"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__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(
+        UserInformationDialog,
+        {
+          openDialog: userInformationDialogOpen && !!user,
+          user,
+          onClose: closeUserInformationDialog
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        UserSettingsDialog,
+        {
+          openDialog: userSettingsDialogOpen && !!user,
+          onClose: closeUserSettingsDialog,
+          developerMode,
+          onDeveloperModeClick
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AboutDialog,
+        {
+          open: isAboutDialogOpen && !!user,
+          onClose: () => setAboutDialogOpen(false),
+          appName,
+          appVersion,
+          appLicense,
+          globalVersionPromise,
+          additionalModulesPromise,
+          logo: logoAboutDialog
+        }
+      )
     ] })
-  );
+  ] });
 }
 export {
   TopBar

package/dist/components/topBar/UserInformationDialog.js

@@ -3,7 +3,7 @@ import { Dialog, DialogTitle, DialogContent, Grid, Typography, Box, DialogAction
 import { FormattedMessage } from "react-intl";
 import { useState, useEffect } from "react";
 import { CancelButton } from "../inputs/reactHookForm/utils/CancelButton.js";
-import fetchUserDetails from "../../services/userAdmin.js";
+import { fetchUserDetails } from "../../services/userAdmin.js";
 const styles = {
   DialogTitle: { fontSize: "1.5rem" },
   DialogContent: { marginTop: "10px" },

package/dist/components/topBar/index.d.ts

@@ -4,6 +4,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
-export * from './TopBar';
-export * from './GridLogo';
 export * from './AboutDialog';
+export * from './GridLogo';
+export * from './DevModeBanner';
+export * from './TopBar';

package/dist/components/topBar/index.js

@@ -1,8 +1,10 @@
-import { TopBar } from "./TopBar.js";
-import { GridLogo, LogoText } from "./GridLogo.js";
 import { AboutDialog } from "./AboutDialog.js";
+import { GridLogo, LogoText } from "./GridLogo.js";
+import { DevModeBanner } from "./DevModeBanner.js";
+import { TopBar } from "./TopBar.js";
 export {
   AboutDialog,
+  DevModeBanner,
   GridLogo,
   LogoText,
   TopBar

package/dist/hooks/index.d.ts

@@ -15,3 +15,4 @@ export * from './usePrevious';
 export * from './useSnackMessage';
 export * from './useFormatLabelWithUnit';
 export * from './useSelectAppearance';
+export * from './use-parameters-backend';