@gridsuite/commons-ui 0.140.0 → 0.142.0

package/dist/components/muiTable/OverflowableTableCell.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { TableCell } from "@mui/material";
+import { OverflowableText } from "../overflowableText/OverflowableText.js";
+function OverflowableTableCell(overflowableTextProps) {
+  return /* @__PURE__ */ jsx(TableCell, { sx: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(OverflowableText, { sx: { flex: "1 1 0", width: 0, display: "block" }, ...overflowableTextProps }) });
+}
+export {
+  OverflowableTableCell,
+  OverflowableTableCell as default
+};

package/dist/components/muiTable/OverflowableTableCellWithCheckbox.d.ts

@@ -0,0 +1,6 @@
+import { OverflowableTextProps } from '../overflowableText';
+export interface OverflowableTableCellProps extends OverflowableTextProps {
+    checked: boolean;
+}
+export declare function OverflowableTableCellWithCheckbox({ checked, ...overflowableTextProps }: Readonly<OverflowableTableCellProps>): import("react/jsx-runtime").JSX.Element;
+export default OverflowableTableCellWithCheckbox;

package/dist/components/muiTable/OverflowableTableCellWithCheckbox.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TableCell, Checkbox } from "@mui/material";
+import { OverflowableText } from "../overflowableText/OverflowableText.js";
+function OverflowableTableCellWithCheckbox({
+  checked,
+  ...overflowableTextProps
+}) {
+  return /* @__PURE__ */ jsxs(TableCell, { padding: "checkbox", sx: { display: "flex", alignItems: "center", width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Checkbox, { checked }),
+    /* @__PURE__ */ jsx(OverflowableText, { sx: { flex: "1 1 0", width: 0, display: "block" }, ...overflowableTextProps })
+  ] });
+}
+export {
+  OverflowableTableCellWithCheckbox,
+  OverflowableTableCellWithCheckbox as default
+};

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

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 './OverflowableTableCell';
+export * from './OverflowableTableCellWithCheckbox';

package/dist/components/muiTable/index.js

@@ -0,0 +1,6 @@
+import { OverflowableTableCell } from "./OverflowableTableCell.js";
+import { OverflowableTableCellWithCheckbox } from "./OverflowableTableCellWithCheckbox.js";
+export {
+  OverflowableTableCell,
+  OverflowableTableCellWithCheckbox
+};

package/dist/components/overflowableText/OverflowableText.js

@@ -40,7 +40,7 @@ const OverflowableText = styled(
     sx,
     ...props
   }) => {
-    const element = useRef();
+    const element = useRef(void 0);
     const isMultiLine = useMemo(() => maxLineCount && maxLineCount > 1, [maxLineCount]);
     const [overflowed, setOverflowed] = useState(false);
     const checkOverflow = useCallback(() => {

package/dist/components/parameters/common/parameters-creation-dialog.js

@@ -2,11 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import "react-intl";
 import "../../../utils/types/equipmentType.js";
-import { createParameter, updateParameter } from "../../../services/explore.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import "../../../utils/yupConfig.js";
+import { createParameter, updateParameter } from "../../../services/explore.js";
 import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";

package/dist/components/parameters/loadflow/use-load-flow-parameters-form.js

@@ -8,12 +8,12 @@ import "react/jsx-runtime";
 import "@mui/material";
 import "react-intl";
 import "../../../utils/types/equipmentType.js";
-import { updateParameter } from "../../../services/explore.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/yupConfig.js";
+import { updateParameter } from "../../../services/explore.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";

package/dist/components/parameters/network-visualizations/use-network-visualizations-parameters-form.js

@@ -7,11 +7,11 @@ import "react-intl";
 import "@mui/material";
 import "../../overflowableText/OverflowableText.js";
 import "../../../utils/types/equipmentType.js";
-import { updateParameter } from "../../../services/explore.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import { ElementType } from "../../../utils/types/elementType.js";
+import { updateParameter } from "../../../services/explore.js";
 import { setStudyNetworkVisualizationParameters } from "../../../services/study.js";
 import { getNetworkVisualizationsParameters } from "../../../services/study-config.js";
 import "localized-countries";

package/dist/components/parameters/sensi/use-sensitivity-analysis-parameters.js

@@ -6,13 +6,13 @@ import "react/jsx-runtime";
 import "@mui/material";
 import "react-intl";
 import "../../../utils/types/equipmentType.js";
-import { updateParameter } from "../../../services/explore.js";
 import { FieldConstants } from "../../../utils/constants/fieldConstants.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/yupConfig.js";
+import { updateParameter } from "../../../services/explore.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";

package/dist/components/parameters/short-circuit/use-short-circuit-parameters-form.js

@@ -7,11 +7,11 @@ import "react-intl";
 import "@mui/material";
 import "../../overflowableText/OverflowableText.js";
 import "../../../utils/types/equipmentType.js";
-import { updateParameter } from "../../../services/explore.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import { ElementType } from "../../../utils/types/elementType.js";
+import { updateParameter } from "../../../services/explore.js";
 import { setStudyShortCircuitParameters, invalidateStudyShortCircuitStatus } from "../../../services/study.js";
 import "localized-countries";
 import "localized-countries/data/fr";

package/dist/components/parameters/voltage-init/use-voltage-init-parameters-form.js

@@ -7,12 +7,12 @@ import "react-intl";
 import "@mui/material";
 import "../../overflowableText/OverflowableText.js";
 import "../../../utils/types/equipmentType.js";
-import { updateParameter } from "../../../services/explore.js";
 import { ID, FILTERS } from "../../../utils/constants/filterConstant.js";
 import { isBlankOrEmpty } from "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "@mui/icons-material";
 import { ElementType } from "../../../utils/types/elementType.js";
+import { updateParameter } from "../../../services/explore.js";
 import { updateVoltageInitParameters } from "../../../services/study.js";
 import { getVoltageInitParameters } from "../../../services/voltage-init.js";
 import "localized-countries";

package/dist/components/resizablePanels/ResizeHandle.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material';
+interface ResizeHandleProps {
+    visible?: boolean;
+    rotated?: boolean;
+    style?: (theme: Theme) => React.CSSProperties;
+}
+export declare function ResizeHandle({ visible, rotated, style }: Readonly<ResizeHandleProps>): import("react/jsx-runtime").JSX.Element;
+export default ResizeHandle;

package/dist/components/resizablePanels/ResizeHandle.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { PanelResizeHandle } from "react-resizable-panels";
+import { DragIndicator } from "@mui/icons-material";
+import { useTheme } from "@mui/material";
+const getStyles = (theme, visible, rotated, customStyle) => ({
+  handle: {
+    display: visible ? "flex" : "none",
+    alignItems: "center",
+    backgroundColor: theme.palette.background.paper,
+    borderLeft: rotated ? "none" : `1px solid ${theme.palette.divider}`,
+    borderRight: rotated ? "none" : `1px solid ${theme.palette.divider}`,
+    borderBottom: rotated ? `1px solid ${theme.palette.divider}` : "none",
+    borderTop: rotated ? `1px solid ${theme.palette.divider}` : "none",
+    justifyContent: "center",
+    ...customStyle ? customStyle(theme) : {}
+  },
+  icon: {
+    transform: rotated ? "rotate(90deg)" : "none",
+    transition: "transform 0.2s",
+    color: "inherit",
+    cursor: "ns-resize"
+  }
+});
+function ResizeHandle({ visible = true, rotated = false, style }) {
+  const theme = useTheme();
+  const styles = getStyles(theme, visible, rotated, style);
+  return /* @__PURE__ */ jsx(PanelResizeHandle, { style: styles.handle, children: /* @__PURE__ */ jsx(DragIndicator, { fontSize: "small", style: styles.icon }) });
+}
+export {
+  ResizeHandle,
+  ResizeHandle as default
+};

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 './ResizeHandle';

package/dist/components/resizablePanels/index.js

@@ -0,0 +1,4 @@
+import { ResizeHandle } from "./ResizeHandle.js";
+export {
+  ResizeHandle
+};

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

@@ -2,12 +2,14 @@ import { ReactNode } from 'react';
 import { SxStyle } from '../../utils/styles';
 export interface GridLogoProps extends Omit<LogoTextProps, 'style'> {
     appLogo: ReactNode;
+    dense?: boolean;
 }
-export declare function LogoText({ appName, appColor, style, onClick }: Partial<LogoTextProps>): import("react/jsx-runtime").JSX.Element;
-export declare function GridLogo({ appLogo, appName, appColor, onClick }: Partial<GridLogoProps>): import("react/jsx-runtime").JSX.Element;
+export declare function LogoText({ appName, appColor, style, onClick, dense }: Readonly<Partial<LogoTextProps>>): import("react/jsx-runtime").JSX.Element;
+export declare function GridLogo({ appLogo, appName, appColor, onClick, dense }: Readonly<Partial<GridLogoProps>>): import("react/jsx-runtime").JSX.Element;
 export interface LogoTextProps {
     appName: string;
     appColor: string;
     style: SxStyle;
     onClick: () => void;
+    dense?: boolean;
 }

package/dist/components/topBar/GridLogo.js

@@ -1,32 +1,50 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Typography, Box } from "@mui/material";
 import { BrokenImage } from "@mui/icons-material";
+import { useMemo } from "react";
 import { mergeSx } from "../../utils/styles.js";
-const styles = {
-  logo: {
-    flexShrink: 0,
-    width: 48,
-    height: 48,
-    marginBottom: "8px"
-  },
-  title: {
-    marginLeft: "18px",
-    display: { xs: "none", lg: "block" }
-  },
-  clickable: {
-    cursor: "pointer"
-  }
+const LOGO_WIDTH = 32;
+const LOGO_HEIGHT = 32;
+const LOGO_WIDTH_DENSE = 26;
+const LOGO_HEIGHT_DENSE = 26;
+const getStyles = (dense = false) => {
+  return {
+    container: {
+      display: "flex",
+      alignItems: "center"
+    },
+    logo: (_theme) => ({
+      flexShrink: 0,
+      width: dense ? LOGO_WIDTH_DENSE : LOGO_WIDTH,
+      height: dense ? LOGO_HEIGHT_DENSE : LOGO_HEIGHT,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }),
+    title: (theme) => ({
+      marginLeft: theme.spacing(dense ? 0.5 : 1),
+      display: { xs: "none", lg: "block" },
+      ...dense && {
+        fontSize: 18
+      }
+    }),
+    clickable: {
+      cursor: "pointer"
+    }
+  };
 };
-function LogoText({ appName, appColor, style, onClick }) {
-  return /* @__PURE__ */ jsxs(Typography, { variant: "h4", sx: mergeSx(style, onClick && styles.clickable), onClick, children: [
+function LogoText({ appName, appColor, style, onClick, dense = false }) {
+  const styles = useMemo(() => getStyles(dense), [dense]);
+  return /* @__PURE__ */ jsxs(Typography, { sx: mergeSx(style, onClick && styles.clickable), onClick, children: [
     /* @__PURE__ */ jsx("span", { style: { fontWeight: "bold" }, children: "Grid" }),
     /* @__PURE__ */ jsx("span", { style: { color: appColor }, children: appName })
   ] });
 }
-function GridLogo({ appLogo, appName, appColor, onClick }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { sx: mergeSx(styles.logo, onClick && styles.clickable), onClick, children: appLogo || /* @__PURE__ */ jsx(BrokenImage, {}) }),
-    /* @__PURE__ */ jsx(LogoText, { appName, appColor, onClick, style: styles.title })
+function GridLogo({ appLogo, appName, appColor, onClick, dense = false }) {
+  const styles = useMemo(() => getStyles(dense), [dense]);
+  return /* @__PURE__ */ jsxs(Box, { sx: mergeSx(styles.container, onClick && styles.clickable), onClick, children: [
+    /* @__PURE__ */ jsx(Box, { sx: styles.logo, children: appLogo || /* @__PURE__ */ jsx(BrokenImage, {}) }),
+    /* @__PURE__ */ jsx(LogoText, { appName, appColor, style: styles.title, dense })
   ] });
 }
 export {

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

@@ -20,5 +20,6 @@ export type TopBarProps = Omit<GridLogoProps, 'onClick'> & Omit<LogoutProps, 'di
     language: GsLang;
     developerMode?: boolean;
     onDeveloperModeClick?: (value: boolean) => void;
+    dense?: boolean;
 };
-export declare function TopBar({ appName, appColor, appLogo, appVersion, appLicense, logoAboutDialog, onLogoutClick, onLogoClick, user, children, appsAndUrls, onAboutClick, globalVersionPromise, additionalModulesPromise, onThemeClick, theme, developerMode, onDeveloperModeClick, onEquipmentLabellingClick, equipmentLabelling, onLanguageClick, language, }: PropsWithChildren<TopBarProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TopBar({ appName, appColor, appLogo, appVersion, appLicense, logoAboutDialog, onLogoutClick, onLogoClick, user, children, appsAndUrls, onAboutClick, globalVersionPromise, additionalModulesPromise, onThemeClick, theme, developerMode, onDeveloperModeClick, onEquipmentLabellingClick, equipmentLabelling, onLanguageClick, language, dense, }: PropsWithChildren<TopBarProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/topBar/TopBar.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
-import { styled, Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, darken, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton } from "@mui/material";
+import { styled, Menu, MenuItem, ListItemIcon, AppBar, Toolbar, Box, IconButton, ListItemText, Button, Popper, Paper, ClickAwayListener, MenuList, Typography, ToggleButtonGroup, ToggleButton, darken } from "@mui/material";
 import { Apps, ArrowDropUp, ArrowDropDown, Person, Badge, ManageAccounts, HelpOutline, WbSunny, Brightness3, Computer, ExitToApp } from "@mui/icons-material";
 import { GridLogo } from "./GridLogo.js";
 import { AboutDialog } from "./AboutDialog.js";
@@ -11,63 +11,77 @@ 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 { DevModeBanner } from "./DevModeBanner.js";
-const styles = {
-  grow: {
-    flexGrow: 1,
-    display: "flex",
-    overflow: "hidden"
-  },
-  menuContainer: {
-    marginLeft: 1
-  },
-  link: {
-    textDecoration: "none",
-    color: "inherit"
-  },
-  name: (theme) => ({
-    backgroundColor: darken(theme.palette.background.paper, 0.1),
-    paddingTop: "10px",
-    borderRadius: "100%",
-    fontWeight: "400",
-    textTransform: "uppercase",
-    height: "48px",
-    width: "48px"
-  }),
-  arrowIcon: {
-    fontSize: "40px"
-  },
-  userMail: {
-    fontSize: "14px",
-    display: "block"
-  },
-  borderBottom: {
-    borderBottom: "1px solid #ccc"
-  },
-  settingsMenu: {
-    maxWidth: "385px",
-    zIndex: 60
-  },
-  sizeLabel: {
-    fontSize: "16px"
-  },
-  showHideMenu: {
-    padding: "0",
-    borderRadius: "25px"
-  },
-  toggleButtonGroup: {
-    marginLeft: "15px",
-    pointerEvents: "auto"
-  },
-  toggleButton: {
-    height: "30px",
-    width: "48px",
-    padding: "7px",
-    textTransform: "capitalize"
-  },
-  languageToggleButton: {
-    height: "30px",
-    width: "48px"
-  }
+const getStyles = (dense = false) => {
+  return {
+    toolbar: (theme) => ({
+      ...dense && {
+        minHeight: `${theme.spacing(6)} !important`,
+        paddingLeft: `${theme.spacing(0.875)} !important`,
+        paddingRight: `${theme.spacing(0.875)} !important`
+      }
+    }),
+    grow: {
+      flexGrow: 1,
+      display: "flex",
+      overflow: "hidden"
+    },
+    menuContainer: (theme) => ({
+      marginLeft: theme.spacing(dense ? 0.5 : 1)
+    }),
+    link: {
+      textDecoration: "none",
+      color: "inherit"
+    },
+    name: (theme) => ({
+      backgroundColor: darken(theme.palette.background.paper, 0.1),
+      paddingTop: theme.spacing(dense ? 0.625 : 1.25),
+      borderRadius: "100%",
+      fontWeight: "400",
+      textTransform: "uppercase",
+      height: theme.spacing(dense ? 4.5 : 6),
+      width: theme.spacing(dense ? 4.5 : 6)
+    }),
+    arrowIcon: (theme) => ({
+      fontSize: theme.spacing(dense ? 4 : 5)
+    }),
+    userMail: {
+      fontSize: "14px",
+      display: "block"
+    },
+    borderBottom: {
+      borderBottom: "1px solid #ccc"
+    },
+    borderTop: {
+      borderTop: "1px solid #ccc"
+    },
+    settingsMenu: {
+      maxWidth: "385px",
+      zIndex: 60
+    },
+    sizeLabel: {
+      fontSize: "16px"
+    },
+    showHideMenu: (theme) => ({
+      padding: 0,
+      borderRadius: "50%",
+      minWidth: theme.spacing(dense ? 5 : 6.875),
+      minHeight: theme.spacing(dense ? 5 : 6.875)
+    }),
+    toggleButtonGroup: {
+      marginLeft: "15px",
+      pointerEvents: "auto"
+    },
+    toggleButton: {
+      height: "30px",
+      width: "48px",
+      padding: "7px",
+      textTransform: "capitalize"
+    },
+    languageToggleButton: {
+      height: "30px",
+      width: "48px"
+    }
+  };
 };
 const StyledMenu = styled((props) => /* @__PURE__ */ jsx(
   Menu,
@@ -130,8 +144,10 @@ function TopBar({
   onEquipmentLabellingClick,
   equipmentLabelling,
   onLanguageClick,
-  language
+  language,
+  dense = false
 }) {
+  const styles = useMemo(() => getStyles(dense), [dense]);
   const [anchorElSettingsMenu, setAnchorElSettingsMenu] = useState(null);
   const [anchorElAppsMenu, setAnchorElAppsMenu] = useState(null);
   const {
@@ -196,15 +212,15 @@ function TopBar({
     openUserSettingsDialog();
   };
   const logoClickable = useMemo(
-    () => /* @__PURE__ */ jsx(GridLogo, { onClick: onLogoClick, appLogo, appName, appColor }),
-    [onLogoClick, appLogo, appName, appColor]
+    () => /* @__PURE__ */ jsx(GridLogo, { onClick: onLogoClick, appLogo, appName, appColor, dense }),
+    [onLogoClick, appLogo, appName, appColor, dense]
   );
   return /* @__PURE__ */ jsxs(AppBar, { position: "static", color: "default", children: [
     user && developerMode && /* @__PURE__ */ jsx(DevModeBanner, {}),
-    /* @__PURE__ */ jsxs(Toolbar, { children: [
+    /* @__PURE__ */ jsxs(Toolbar, { variant: dense ? "dense" : "regular", sx: styles.toolbar, children: [
       logoClickable,
       /* @__PURE__ */ jsx(Box, { sx: styles.grow, children }),
-      user && /* @__PURE__ */ jsxs(Box, { children: [
+      user && !dense && /* @__PURE__ */ jsxs(Box, { children: [
         /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -273,7 +289,7 @@ function TopBar({
             "data-testid": "SettingsMenu",
             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 })
+              !dense && (anchorElSettingsMenu ? /* @__PURE__ */ jsx(ArrowDropUp, { sx: styles.arrowIcon }) : /* @__PURE__ */ jsx(ArrowDropDown, { sx: styles.arrowIcon }))
             ]
           }
         ),

package/dist/hooks/useIntlRef.d.ts

@@ -4,4 +4,4 @@
  * 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 declare function useIntlRef(): import('react').MutableRefObject<import('react-intl').IntlShape>;
+export declare function useIntlRef(): import('react').RefObject<import('react-intl').IntlShape>;

package/dist/hooks/usePrevious.js

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 function usePrevious(value) {
-  const ref = useRef();
+  const ref = useRef(void 0);
   useEffect(() => {
     ref.current = value;
   }, [value]);