@gridsuite/commons-ui 0.277.0 → 0.279.0

package/dist/features/index.d.ts

@@ -8,6 +8,7 @@ export * from './authentication';
 export * from './cardErrorBoundary';
 export * from './notifications';
 export * from './topBar';
+export * from './side-bar';
 export * from './parameters';
 export * from './network-modifications';
 export * from './node';

package/dist/features/index.js

@@ -18,6 +18,9 @@ import { AboutDialog } from "./topBar/AboutDialog.js";
 import { GridLogo, LogoText } from "./topBar/GridLogo.js";
 import { DevModeBanner } from "./topBar/DevModeBanner.js";
 import { TopBar } from "./topBar/TopBar.js";
+import { default as default3 } from "./topBar/UserInformationDialog.js";
+import { default as default4 } from "./topBar/UserSettingsDialog.js";
+import { AppSideBar } from "./side-bar/AppSideBar.js";
 import { ParameterLayout } from "./parameters/common/parameter-layout/parameter-layout.js";
 import { ParameterLayoutProvider, useParameterLayoutContext } from "./parameters/common/parameter-layout/parameter-layout-provider.js";
 import { formatComputingTypeLabel, isValidComputingType } from "./parameters/common/computing-type.js";
@@ -270,7 +273,7 @@ import { SelectHeaderCell } from "./network-modification-table/renderers/select-
 import { SwitchCell } from "./network-modification-table/renderers/switch-cell.js";
 import { DragCloneRow } from "./network-modification-table/row/drag-row-clone.js";
 import { ModificationRow } from "./network-modification-table/row/modification-row.js";
-import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, isReferenceModification, isTargetChildOfReference, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, containsReferenceModification, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, isReferenceModification, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
 import { AnnouncementBanner } from "./announcement/AnnouncementBanner.js";
 import { AnnouncementNotification } from "./announcement/AnnouncementNotification.js";
 import { useGlobalAnnouncement } from "./announcement/useGlobalAnnouncement.js";
@@ -315,6 +318,7 @@ export {
   ActivePowerControlForm,
   AnnouncementBanner,
   AnnouncementNotification,
+  AppSideBar,
   DataType as AssignmentDataType,
   AuthenticationRouter,
   default2 as AuthenticationRouterErrorDisplay,
@@ -671,7 +675,9 @@ export {
   UPDATE_BUS_VOLTAGE,
   USE_REACTIVE_LIMITS,
   UnauthorizedAccessAlert,
+  default3 as UserInformationDialog,
   UserManagerMock,
+  default4 as UserSettingsDialog,
   VARIABLE_Q_GENERATORS,
   VARIABLE_SHUNT_COMPENSATORS,
   VARIABLE_TRANSFORMERS,
@@ -719,6 +725,7 @@ export {
   computeRatioTapChangerRegulationMode,
   computeSwitchedOnValue,
   computeTagMinSize,
+  containsReferenceModification,
   convertFilterValues,
   convertLimitsToOperationalLimitsGroupFormSchema,
   convertToLineSegmentInfos,
@@ -924,7 +931,6 @@ export {
   isEditingGlobalFilter,
   isProcessType,
   isReferenceModification,
-  isTargetChildOfReference,
   isValidComputingType,
   isValidContingencyRow,
   italicFontTextField,

package/dist/features/network-modification-table/index.js

@@ -14,7 +14,7 @@ import { SelectHeaderCell } from "./renderers/select-header-cell.js";
 import { SwitchCell } from "./renderers/switch-cell.js";
 import { DragCloneRow } from "./row/drag-row-clone.js";
 import { ModificationRow } from "./row/modification-row.js";
-import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, isReferenceModification, isTargetChildOfReference, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, containsReferenceModification, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, isReferenceModification, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
 export {
   AUTO_EXTENSIBLE_COLUMNS,
   BASE_MODIFICATION_TABLE_COLUMNS,
@@ -49,6 +49,7 @@ export {
   SwitchCell,
   SwitchCellRenderer,
   computeTagMinSize,
+  containsReferenceModification,
   createCellBorderColor,
   createCellContentWrapperSx,
   createCellStyle,
@@ -66,7 +67,6 @@ export {
   formatToComposedModification,
   isCompositeModification,
   isReferenceModification,
-  isTargetChildOfReference,
   mergeSubModificationsIntoTree,
   moveSubModificationInTree,
   networkModificationTableStyles,

package/dist/features/network-modification-table/row/modification-row.js

@@ -6,7 +6,7 @@ import { Draggable } from "@hello-pangea/dnd";
 import { useIntl } from "react-intl";
 import { BASE_MODIFICATION_TABLE_COLUMNS, AUTO_EXTENSIBLE_COLUMNS } from "../columns-definition.js";
 import { COLUMNS_WITHOUT_BORDER, createCellContentWrapperSx, createCellStyle, createRowSx, networkModificationTableStyles } from "../network-modification-table-styles.js";
-import { isCompositeModification, isReferenceModification, isTargetChildOfReference } from "../utils.js";
+import { isCompositeModification, isReferenceModification } from "../utils.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
@@ -30,84 +30,76 @@ function ModificationRow({
     },
     [handleCellClick, row.original]
   );
-  return /* @__PURE__ */ jsx(
-    Draggable,
-    {
-      draggableId: row.id,
-      index: virtualRow.index,
-      isDragDisabled: isRowDragDisabled || isTargetChildOfReference(row),
-      children: (provided, snapshot) => {
-        const { style, ...draggablePropsWithoutStyle } = provided.draggableProps;
-        return /* @__PURE__ */ jsx(
-          TableRow,
-          {
-            ref: provided.innerRef,
-            ...draggablePropsWithoutStyle,
-            "data-row-id": row.id,
-            sx: mergeSx(
-              networkModificationTableStyles.tableRow,
-              createRowSx(
-                theme,
-                isHighlighted,
-                snapshot.isDragging,
-                virtualRow,
-                row.depth,
-                isCompositeModification(row.original) || isReferenceModification(row.original)
-              )
-            ),
-            children: row.getVisibleCells().map((cell) => {
-              const isNameColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.NAME.id;
-              const isDragHandle = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id;
-              const isCheckboxColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.SELECT.id;
-              const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
-              const cellWithoutBorders = (isExpanded || row.depth > 0) && COLUMNS_WITHOUT_BORDER.has(cell.column.columnDef.id ?? "");
-              if (isDragHandle) {
-                return /* @__PURE__ */ jsx(
-                  TableCell,
+  return /* @__PURE__ */ jsx(Draggable, { draggableId: row.id, index: virtualRow.index, isDragDisabled: isRowDragDisabled, children: (provided, snapshot) => {
+    const { style, ...draggablePropsWithoutStyle } = provided.draggableProps;
+    return /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        ref: provided.innerRef,
+        ...draggablePropsWithoutStyle,
+        "data-row-id": row.id,
+        sx: mergeSx(
+          networkModificationTableStyles.tableRow,
+          createRowSx(
+            theme,
+            isHighlighted,
+            snapshot.isDragging,
+            virtualRow,
+            row.depth,
+            isCompositeModification(row.original) || isReferenceModification(row.original)
+          )
+        ),
+        children: row.getVisibleCells().map((cell) => {
+          const isNameColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.NAME.id;
+          const isDragHandle = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id;
+          const isCheckboxColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.SELECT.id;
+          const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+          const cellWithoutBorders = (isExpanded || row.depth > 0) && COLUMNS_WITHOUT_BORDER.has(cell.column.columnDef.id ?? "");
+          if (isDragHandle) {
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+                children: /* @__PURE__ */ jsx(
+                  Box,
                   {
-                    sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-                    children: /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        sx: createCellContentWrapperSx(theme, cellWithoutBorders),
-                        ...provided.dragHandleProps,
-                        "aria-label": intl.formatMessage({ id: "moveModification" }),
-                        children: cellContent
-                      }
-                    )
-                  },
-                  cell.id
-                );
-              }
-              if (isCheckboxColumn) {
-                return /* @__PURE__ */ jsx(
-                  TableCell,
-                  {
-                    sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-                    onClick: () => handleCellClickCallback(cell.column.id),
-                    children: /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
-                  },
-                  cell.id
-                );
-              }
-              return /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-                  onClick: () => handleCellClickCallback(cell.column.id),
-                  children: isNameColumn ? (
-                    // NameCell owns its own borders entirely
-                    flexRender(cell.column.columnDef.cell, cell.getContext())
-                  ) : /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
-                },
-                cell.id
-              );
-            })
+                    sx: createCellContentWrapperSx(theme, cellWithoutBorders),
+                    ...provided.dragHandleProps,
+                    "aria-label": intl.formatMessage({ id: "moveModification" }),
+                    children: cellContent
+                  }
+                )
+              },
+              cell.id
+            );
+          }
+          if (isCheckboxColumn) {
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+                onClick: () => handleCellClickCallback(cell.column.id),
+                children: /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
+              },
+              cell.id
+            );
           }
-        );
+          return /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+              onClick: () => handleCellClickCallback(cell.column.id),
+              children: isNameColumn ? (
+                // NameCell owns its own borders entirely
+                flexRender(cell.column.columnDef.cell, cell.getContext())
+              ) : /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
+            },
+            cell.id
+          );
+        })
       }
-    }
-  );
+    );
+  } });
 }
 export {
   ModificationRow

package/dist/features/network-modification-table/use-modifications-drag-and-drop.js

@@ -7,7 +7,7 @@ import "@hello-pangea/dnd";
 import "react-intl";
 import "./columns-definition.js";
 import { DROP_FORBIDDEN_INDICATOR_BOTTOM, DROP_FORBIDDEN_INDICATOR_TOP, DROP_INDICATOR_BOTTOM, DROP_INDICATOR_TOP } from "./network-modification-table-styles.js";
-import { isCompositeModification, isReferenceModification, isTargetChildOfReference, MAX_COMPOSITE_NESTING_DEPTH, findModificationInTree, moveSubModificationInTree } from "./utils.js";
+import { isCompositeModification, isReferenceModification, MAX_COMPOSITE_NESTING_DEPTH, findModificationInTree, containsReferenceModification, moveSubModificationInTree } from "./utils.js";
 import "../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../utils/error.js";
 import "../../utils/types/equipmentType.js";
@@ -55,7 +55,7 @@ const useModificationsDragAndDrop = ({
 }) => {
   const { snackError } = useSnackMessage();
   const { rows } = table.getRowModel();
-  const computeTargetDepth = useCallback(
+  const computeIsDraggingDown = useCallback(
     (sourceRow, targetRow) => {
       const sourceRowIndex = table.getRowModel().flatRows.findIndex((row) => {
         return row.id === sourceRow.id;
@@ -63,26 +63,35 @@ const useModificationsDragAndDrop = ({
       const targetRowIndex = table.getRowModel().flatRows.findIndex((row) => {
         return row.id === targetRow.id;
       });
-      const isDraggingDown = sourceRowIndex < targetRowIndex;
-      return isCompositeModification(targetRow.original) && targetRow.getIsExpanded() && isDraggingDown ? targetRow.depth + 1 : targetRow.depth;
+      return sourceRowIndex < targetRowIndex;
     },
     [table]
   );
+  const computeTargetDepth = useCallback(
+    (sourceRow, targetRow) => {
+      const isDraggingDown = computeIsDraggingDown(sourceRow, targetRow);
+      return isCompositeModification(targetRow.original) && targetRow.getIsExpanded() && isDraggingDown ? targetRow.depth + 1 : targetRow.depth;
+    },
+    [computeIsDraggingDown]
+  );
   const isDropForbidden = useCallback(
     (sourceRow, targetRow) => {
-      if (isCompositeModification(sourceRow.original)) {
-        if (isReferenceModification(targetRow.original) || isTargetChildOfReference(targetRow)) {
-          return true;
-        }
+      const sourceIsCompositeOrReference = isCompositeModification(sourceRow.original) || isReferenceModification(sourceRow.original);
+      if (sourceIsCompositeOrReference) {
         const targetDepth = computeTargetDepth(sourceRow, targetRow);
-        return (sourceRow.original.maxDepth ?? 0) + targetDepth > MAX_COMPOSITE_NESTING_DEPTH || !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.id, [sourceRow.original]));
-      }
-      if (isReferenceModification(sourceRow.original) || isReferenceModification(targetRow.original) || isTargetChildOfReference(targetRow)) {
-        return true;
+        const exceedsNestingLimit = (sourceRow.original.maxDepth ?? 0) + targetDepth > MAX_COMPOSITE_NESTING_DEPTH;
+        const isSelfDrop = !!findModificationInTree(targetRow.id, [sourceRow.original]);
+        const isDraggingDown = computeIsDraggingDown(sourceRow, targetRow);
+        const entersTargetRowItself = (isCompositeModification(targetRow.original) || isReferenceModification(targetRow.original)) && targetRow.getIsExpanded() && isDraggingDown;
+        const enteringParent = entersTargetRowItself ? targetRow.original : targetRow.getParentRow()?.original;
+        const sourceCarriesReference = isReferenceModification(sourceRow.original) || containsReferenceModification(sourceRow.original);
+        const enteringSharedSubtree = isReferenceModification(enteringParent) || enteringParent?.childFromShared === true;
+        const isReferenceIntoReference = sourceCarriesReference && enteringSharedSubtree;
+        return exceedsNestingLimit || isSelfDrop || isReferenceIntoReference;
       }
       return false;
     },
-    [computeTargetDepth]
+    [computeTargetDepth, computeIsDraggingDown]
   );
   const handleDragUpdate = useCallback(
     (update) => {
@@ -125,7 +134,7 @@ const useModificationsDragAndDrop = ({
       const sourceCompositeRowKey = sourceParent?.id ?? null;
       const sourceContainerId = sourceParent?.original.uuid ?? null;
       const isDraggingDown = destination.index > source.index;
-      const droppingIntoExpandedComposite = isDraggingDown && targetRow.getIsExpanded();
+      const droppingIntoExpandedComposite = isDraggingDown && isCompositeModification(targetRow.original) && targetRow.getIsExpanded();
       const isSubRowInvolved = sourceRow.depth > 0 || targetRow.depth > 0;
       const targetComposite = resolveTargetComposite(droppingIntoExpandedComposite, targetRow);
       const targetContainerId = targetComposite.uuid;

package/dist/features/network-modification-table/utils.d.ts

@@ -5,9 +5,7 @@ export declare const MAX_COMPOSITE_NESTING_DEPTH = 5;
 export declare const formatToComposedModification: (modifications: NetworkModificationMetadata[]) => ComposedModificationMetadata[];
 export declare function isCompositeModification(modification: ComposedModificationMetadata | undefined): boolean;
 export declare function isReferenceModification(modification: ComposedModificationMetadata | undefined): boolean;
-export declare function isTargetChildOfReference(targetRow: {
-    original: ComposedModificationMetadata;
-}): boolean;
+export declare function containsReferenceModification(modification: ComposedModificationMetadata | undefined): boolean;
 export declare function findDepth(mods: ComposedModificationMetadata[], uuid: UUID, currentDepth?: number): number;
 export declare function removeUuidsFromTree(mods: ComposedModificationMetadata[], uuidsToRemove: Set<string>): ComposedModificationMetadata[];
 /**

package/dist/features/network-modification-table/utils.js

@@ -18,6 +18,14 @@ function isCompositeModification(modification) {
 function isReferenceModification(modification) {
   return modification?.type === MODIFICATION_TYPES.MODIFICATION_REFERENCE.type;
 }
+function containsReferenceModification(modification) {
+  if (!modification) {
+    return false;
+  }
+  return modification.subModifications.some(
+    (sub) => isReferenceModification(sub) || containsReferenceModification(sub)
+  );
+}
 function normalizeReferenceChild(child) {
   return {
     ...child,
@@ -25,12 +33,6 @@ function normalizeReferenceChild(child) {
     messageValues: child.messageValues ?? "{}"
   };
 }
-function isTargetChildOfReference(targetRow) {
-  if (targetRow.original.childFromShared === true) {
-    return true;
-  }
-  return false;
-}
 function extractReferenceChildren(detail) {
   const referenceInfos = detail?.referenceInfos;
   if (!referenceInfos) {
@@ -224,6 +226,7 @@ async function fetchSubModificationsForExpandedRows(expandedRowKeys, mods, setMo
 }
 export {
   MAX_COMPOSITE_NESTING_DEPTH,
+  containsReferenceModification,
   fetchSubModificationsForExpandedRows,
   findAllLoadedCompositeModifications,
   findDepth,
@@ -231,7 +234,6 @@ export {
   formatToComposedModification,
   isCompositeModification,
   isReferenceModification,
-  isTargetChildOfReference,
   mergeSubModificationsIntoTree,
   moveSubModificationInTree,
   removeUuidsFromTree,

package/dist/features/side-bar/AppSideBar.d.ts

@@ -0,0 +1,27 @@
+import { Breakpoint, Theme } from '@mui/material';
+import { UserProfile } from 'oidc-client-ts';
+import { ReactNode } from 'react';
+import { GridSuiteModule } from '../topBar';
+import { GsLang, GsTheme, Metadata } from '../../utils';
+type SideBarProps = {
+    sideBarTheme: Theme;
+    isDeveloperMode: boolean;
+    smallScreenBreakpoint: number | Breakpoint;
+    handleChangeDeveloperMode: (newValue: boolean) => void;
+    currentTheme: GsTheme;
+    setTheme: (newTheme: GsTheme) => void;
+    selectedLanguage: GsLang;
+    setSelectedLanguage: (newSelectedLanguage: GsLang) => void;
+    userProfile?: UserProfile;
+    appsAndUrls: Metadata[];
+    onLogoutClick?: () => void;
+    appName: string;
+    appNameColor: string;
+    appLogo: ReactNode;
+    appLicense?: string;
+    appVersion?: string;
+    globalVersionPromise: () => Promise<string>;
+    additionalModulesPromise: () => Promise<GridSuiteModule[]>;
+};
+export declare function AppSideBar({ sideBarTheme, isDeveloperMode, smallScreenBreakpoint, handleChangeDeveloperMode, currentTheme, setTheme, selectedLanguage, setSelectedLanguage, userProfile, appsAndUrls, appName, appNameColor, appLogo, appLicense, appVersion, globalVersionPromise, additionalModulesPromise, onLogoutClick, }: Readonly<SideBarProps>): import("react").JSX.Element;
+export {};

package/dist/features/side-bar/AppSideBar.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMediaQuery, ThemeProvider, ScopedCssBaseline, Stack, Box } from "@mui/material";
+import { useState, useEffect } from "react";
+import { AppSideBarHeader } from "./AppSideBarHeader.js";
+import { AppSideBarFooter } from "./footer/AppSideBarFooter.js";
+import { AppSideBarDialogProvider } from "./dialogs/AppSideBarDialogProvider.js";
+import { AppSideBarDialogs } from "./dialogs/AppSideBarDialogs.js";
+function AppSideBar({
+  sideBarTheme,
+  isDeveloperMode,
+  smallScreenBreakpoint,
+  handleChangeDeveloperMode,
+  currentTheme,
+  setTheme,
+  selectedLanguage,
+  setSelectedLanguage,
+  userProfile,
+  appsAndUrls,
+  appName,
+  appNameColor,
+  appLogo,
+  appLicense,
+  appVersion,
+  globalVersionPromise,
+  additionalModulesPromise,
+  onLogoutClick
+}) {
+  const [isMinimized, setIsMinimized] = useState(true);
+  const toggleSideBarMinimized = () => {
+    setIsMinimized((previousIsSideBarMinimized) => !previousIsSideBarMinimized);
+  };
+  const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down(smallScreenBreakpoint));
+  useEffect(() => {
+    if (isSmallScreen) {
+      setIsMinimized(true);
+    }
+  }, [isSmallScreen]);
+  return /* @__PURE__ */ jsxs(AppSideBarDialogProvider, { children: [
+    /* @__PURE__ */ jsx(
+      AppSideBarDialogs,
+      {
+        appLicense,
+        appVersion,
+        additionalModulesPromise,
+        globalVersionPromise,
+        appName,
+        userProfile,
+        isDeveloperMode,
+        handleChangeDeveloperMode
+      }
+    ),
+    /* @__PURE__ */ jsx(ThemeProvider, { theme: sideBarTheme, children: /* @__PURE__ */ jsx(ScopedCssBaseline, { children: /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        component: "aside",
+        sx: {
+          width: isMinimized ? 64 : 224,
+          height: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            AppSideBarHeader,
+            {
+              isMinimized,
+              isLoggedIn: !!userProfile,
+              appName,
+              appNameColor,
+              appLogo,
+              appVersion
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                flex: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AppSideBarFooter,
+            {
+              isMinimized,
+              isSmallScreen,
+              toggleSideBarMinimized,
+              currentTheme,
+              setTheme,
+              selectedLanguage,
+              setSelectedLanguage,
+              userProfile,
+              appsAndUrls,
+              onLogoutClick
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  AppSideBar
+};

package/dist/features/side-bar/AppSideBarHeader.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface AppSideBarHeaderProps {
+    isMinimized: boolean;
+    isLoggedIn: boolean;
+    appName: string;
+    appNameColor: string;
+    appLogo: ReactNode;
+    appVersion?: string;
+}
+export declare function AppSideBarHeader({ isMinimized, isLoggedIn, appName, appNameColor, appLogo, appVersion, }: Readonly<AppSideBarHeaderProps>): import("react").JSX.Element;
+export {};

package/dist/features/side-bar/AppSideBarHeader.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Stack, Typography, Box, Tooltip, IconButton, Divider } from "@mui/material";
+import { Info } from "@mui/icons-material";
+import { useAppSideBarDialogs, SideBarDialogType } from "./dialogs/AppSideBarDialogProvider.js";
+function AppSideBarHeader({
+  isMinimized,
+  isLoggedIn,
+  appName,
+  appNameColor,
+  appLogo,
+  appVersion
+}) {
+  const { setOpenDialog } = useAppSideBarDialogs();
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      sx: {
+        px: 1.5,
+        pt: 3
+      },
+      spacing: 1,
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: isMinimized ? "center" : "flex-start", children: [
+          appLogo,
+          !isMinimized && /* @__PURE__ */ jsxs(Typography, { variant: "h6", children: [
+            "Grid",
+            /* @__PURE__ */ jsx(Box, { component: "span", sx: { color: appNameColor }, children: appName })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Stack,
+          {
+            direction: "row",
+            visibility: isLoggedIn ? "inherit" : "hidden",
+            alignItems: "center",
+            justifyContent: isMinimized ? "center" : "end",
+            spacing: 1,
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              !isMinimized && /* @__PURE__ */ jsxs(Typography, { variant: "caption", children: [
+                "V",
+                appVersion
+              ] }),
+              /* @__PURE__ */ jsx(Tooltip, { title: `V${appVersion}`, disableHoverListener: !isMinimized, children: /* @__PURE__ */ jsx(IconButton, { sx: { padding: 0 }, onClick: () => setOpenDialog(SideBarDialogType.ABOUT), children: /* @__PURE__ */ jsx(Info, { fontSize: "small", color: "disabled" }) }) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {})
+      ]
+    }
+  );
+}
+export {
+  AppSideBarHeader
+};

package/dist/features/side-bar/dialogs/AppSideBarDialogProvider.d.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+export declare enum SideBarDialogType {
+    ABOUT = "ABOUT",
+    PROFILE = "PROFILE",
+    PROFILE_SETTINGS = "PROFILE_SETTINGS"
+}
+type AppSideBarDialogContextValue = {
+    openDialog: SideBarDialogType | null;
+    setOpenDialog: (dialog: SideBarDialogType) => void;
+    closeDialog: () => void;
+};
+export declare function AppSideBarDialogProvider({ children }: Readonly<PropsWithChildren>): import("react").JSX.Element;
+export declare function useAppSideBarDialogs(): AppSideBarDialogContextValue;
+export {};

package/dist/features/side-bar/dialogs/AppSideBarDialogProvider.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo, useContext } from "react";
+var SideBarDialogType = /* @__PURE__ */ ((SideBarDialogType2) => {
+  SideBarDialogType2["ABOUT"] = "ABOUT";
+  SideBarDialogType2["PROFILE"] = "PROFILE";
+  SideBarDialogType2["PROFILE_SETTINGS"] = "PROFILE_SETTINGS";
+  return SideBarDialogType2;
+})(SideBarDialogType || {});
+const AppSideBarDialogContext = createContext(void 0);
+function AppSideBarDialogProvider({ children }) {
+  const [openDialog, setOpenDialog] = useState(null);
+  const closeDialog = useCallback(() => {
+    setOpenDialog(null);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      openDialog,
+      setOpenDialog,
+      closeDialog
+    }),
+    [closeDialog, openDialog]
+  );
+  return /* @__PURE__ */ jsx(AppSideBarDialogContext.Provider, { value: contextValue, children });
+}
+function useAppSideBarDialogs() {
+  const dialogs = useContext(AppSideBarDialogContext);
+  if (!dialogs) {
+    throw new Error("useAppSideBarDialogs must be used within an AppSideBarDialogProvider");
+  }
+  return dialogs;
+}
+export {
+  AppSideBarDialogProvider,
+  SideBarDialogType,
+  useAppSideBarDialogs
+};

package/dist/features/side-bar/dialogs/AppSideBarDialogs.d.ts

@@ -0,0 +1,14 @@
+import { UserProfile } from 'oidc-client-ts';
+import { GridSuiteModule } from '../../topBar';
+type AppSideBarDialogsProps = {
+    isDeveloperMode: boolean;
+    handleChangeDeveloperMode: (newValue: boolean) => void;
+    userProfile?: UserProfile;
+    appName: string;
+    appLicense?: string;
+    appVersion?: string;
+    globalVersionPromise: () => Promise<string>;
+    additionalModulesPromise: () => Promise<GridSuiteModule[]>;
+};
+export declare function AppSideBarDialogs({ appLicense, appVersion, additionalModulesPromise, globalVersionPromise, appName, userProfile, isDeveloperMode, handleChangeDeveloperMode, }: Readonly<AppSideBarDialogsProps>): import("react").JSX.Element;
+export {};