@gridsuite/commons-ui 0.124.0 → 0.126.0

package/dist/components/checkBoxList/checkBoxList.type.d.ts

@@ -1,18 +1,18 @@
 import { ReactElement, ReactNode } from 'react';
 import { DraggableProvided, DragStart, DropResult } from '@hello-pangea/dnd';
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../utils/styles';
 export type CheckBoxListItemSx = {
-    checkBoxIcon?: SxProps<Theme>;
-    listItemText?: SxProps<Theme>;
-    label?: SxProps<Theme>;
-    checkboxListItem?: SxProps<Theme>;
-    checkboxButton?: SxProps<Theme>;
-    checkbox?: SxProps<Theme>;
-    dragButton?: SxProps<Theme>;
+    checkBoxIcon?: SxStyle;
+    listItemText?: SxStyle;
+    label?: SxStyle;
+    checkboxListItem?: SxStyle;
+    checkboxButton?: SxStyle;
+    checkbox?: SxStyle;
+    dragButton?: SxStyle;
 };
 export type CheckBoxListSx = {
-    dragAndDropContainer?: SxProps<Theme>;
-    checkboxList?: SxProps<Theme>;
+    dragAndDropContainer?: SxStyle;
+    checkboxList?: SxStyle;
 };
 export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
 type CheckBoxListItemSxProps<T> = CheckBoxListSx & {

package/dist/components/customAGGrid/customAggrid.style.d.ts

@@ -1,7 +1,6 @@
-import { Theme } from '@mui/material';
 export declare const CUSTOM_AGGRID_THEME = "custom-aggrid-theme";
 export declare const styles: {
-    readonly grid: (theme: Theme) => {
+    readonly grid: (theme: import('@mui/material').Theme) => {
         width: string;
         height: string;
         position: "relative";

package/dist/components/dialogs/customMuiDialog/CustomMuiDialog.d.ts

@@ -30,26 +30,26 @@ export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogPr
  * </fullHeightDialog>
  */
 export declare const unscrollableDialogStyles: {
-    fullHeightDialog: {
-        '.MuiDialog-paper': {
-            minWidth: string;
-            margin: string;
-            height: string;
+    readonly fullHeightDialog: {
+        readonly '.MuiDialog-paper': {
+            readonly minWidth: "90vw";
+            readonly margin: "auto";
+            readonly height: "95vh";
         };
     };
-    unscrollableContainer: {
-        display: string;
-        flexDirection: string;
-        overflowY: string;
+    readonly unscrollableContainer: {
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly overflowY: "hidden";
     };
-    unscrollableHeader: {
-        flex: string;
-        padding: number;
+    readonly unscrollableHeader: {
+        readonly flex: "none";
+        readonly padding: 1;
     };
-    scrollableContent: {
-        flex: string;
-        overflowY: string;
-        padding: number;
+    readonly scrollableContent: {
+        readonly flex: "auto";
+        readonly overflowY: "auto";
+        readonly padding: 1;
     };
 };
 export declare function CustomMuiDialog<T extends FieldValues = FieldValues>({ open, formSchema, formMethods, onClose, onSave, isDataFetching, onValidationError, titleId, disabledSave, removeOptional, onCancel, children, language, confirmationMessageKey, unscrollableFullHeight, ...dialogProps }: Readonly<CustomMuiDialogProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/elementSearch/elementItem/EquipmentItem.d.ts

@@ -1,6 +1,6 @@
-import { SxProps, Theme } from '@mui/material';
 import { EquipmentInfos } from '../../../utils/types/equipmentType';
 import { TagRenderer } from '../tagRenderer/TagRenderer';
+import { SxStyle } from '../../../utils/styles';
 export interface EquipmentItemProps {
     inputValue: string;
     suffixRenderer?: typeof TagRenderer;
@@ -14,11 +14,11 @@ export interface EquipmentItemProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        result?: SxProps<Theme>;
-        equipmentOption?: SxProps<Theme>;
-        equipmentTag?: SxProps<Theme>;
-        equipmentTypeTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        result?: SxStyle;
+        equipmentOption?: SxStyle;
+        equipmentTag?: SxStyle;
+        equipmentTypeTag?: SxStyle;
+        equipmentVlTag?: SxStyle;
     };
 }
 export declare function EquipmentItem({ inputValue, suffixRenderer, element, showsJustText, ...props }: EquipmentItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/elementSearch/tagRenderer/TagRenderer.d.ts

@@ -1,5 +1,5 @@
-import { SxProps, Theme } from '@mui/material';
 import { EquipmentInfos } from '../../../utils/types/equipmentType';
+import { SxStyle } from '../../../utils/styles';
 export interface TagRendererProps {
     element: EquipmentInfos;
     classes?: {
@@ -7,8 +7,8 @@ export interface TagRendererProps {
         equipmentVlTag?: string;
     };
     styles?: {
-        equipmentTag?: SxProps<Theme>;
-        equipmentVlTag?: SxProps<Theme>;
+        equipmentTag?: SxStyle;
+        equipmentVlTag?: SxStyle;
     };
 }
 export declare function TagRenderer({ element, ...props }: TagRendererProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/expandableGroup/ExpandableGroup.js

@@ -4,12 +4,12 @@ import { useState } from "react";
 import { ExpandCircleDown, ExpandMore } from "@mui/icons-material";
 import { FormattedMessage } from "react-intl";
 const styles = {
-  accordion: () => ({
+  accordion: {
     "&:before": {
       display: "none"
     },
     background: "none"
-  }),
+  },
   accordionSummary: (theme) => ({
     flexDirection: "row-reverse",
     // place icon at the left
@@ -31,10 +31,10 @@ const styles = {
       transform: "rotate(0deg)"
     }
   }),
-  accordionDetails: () => ({
+  accordionDetails: {
     padding: 0
     // reset default left right space in details
-  })
+  }
 };
 function ExpandableGroup({ renderHeader, children }) {
   const [mouseHover, setMouseHover] = useState(false);

package/dist/components/filter/HeaderFilterForm.d.ts

@@ -1,13 +1,13 @@
 import { UUID } from 'crypto';
 import { default as yup } from '../../utils/yupConfig';
 export declare const filterStyles: {
-    textField: {
-        minWidth: string;
-        width: string;
+    readonly textField: {
+        readonly minWidth: "250px";
+        readonly width: "33%";
     };
-    description: {
-        minWidth: string;
-        width: string;
+    readonly description: {
+        readonly minWidth: "250px";
+        readonly width: "50%";
     };
 };
 export interface FilterFormProps {

package/dist/components/filter/expert/ExpertFilterForm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { formatQuery } from "react-querybuilder";
+import { formatQuery } from "react-querybuilder/formatQuery";
 import { useFormContext, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { v4 } from "uuid";

package/dist/components/grid/grid-section.d.ts

@@ -1,8 +1,8 @@
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../utils/styles';
 export interface GridSectionProps {
     title: string;
     heading?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: number;
-    customStyle?: SxProps<Theme>;
+    customStyle?: SxStyle;
 }
 export default function GridSection({ title, heading, size, customStyle }: Readonly<GridSectionProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/chip-items-input.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { FormControl, Chip, TextField } from "@mui/material";
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useFieldArray, useController } from "react-hook-form";
 import "react-intl";
 import "../../../utils/types/equipmentType.js";
@@ -19,6 +19,26 @@ import { OverflowableText } from "../../overflowableText/OverflowableText.js";
 import { RawReadOnlyInput } from "./RawReadOnlyInput.js";
 import { ErrorInput } from "./errorManagement/ErrorInput.js";
 import { MidFormError } from "./errorManagement/MidFormError.js";
+const styles = {
+  chipContainer: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    border: "2px solid lightgray",
+    borderRadius: "4px",
+    overflow: "hidden"
+  },
+  chipItem: {
+    display: "flex",
+    gap: "8px",
+    flexWrap: "wrap",
+    flexDirection: "row",
+    marginTop: 0,
+    padding: 1,
+    overflow: "hidden"
+  }
+};
 function ChipItemsInput({ label, name, hideErrorMessage }) {
   const [textEntered, setTextEntered] = useState("");
   const { snackError } = useSnackMessage();
@@ -63,29 +83,13 @@ function ChipItemsInput({ label, name, hideErrorMessage }) {
   const handleChange = (e) => {
     setTextEntered(e.target.value);
   };
-  const styles = {
-    chipContainer: {
-      display: "flex",
-      gap: "8px",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      border: "2px solid lightgray",
-      borderRadius: "4px",
-      overflow: "hidden",
-      borderColor: (error == null ? void 0 : error.message) ? "error.main" : null
-    },
-    chipItem: {
-      display: "flex",
-      gap: "8px",
-      flexWrap: "wrap",
-      flexDirection: "row",
-      marginTop: 0,
-      padding: 1,
-      overflow: "hidden"
-    }
-  };
+  const hasError = !!(error == null ? void 0 : error.message);
+  const containerStyle = useMemo(
+    () => ({ ...styles.chipContainer, borderColor: hasError ? "error.main" : null }),
+    [hasError]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(FormControl, { sx: styles.chipContainer, error: !!(error == null ? void 0 : error.message), children: [
+    /* @__PURE__ */ jsxs(FormControl, { sx: containerStyle, error: hasError, children: [
       (elements == null ? void 0 : elements.length) === 0 && label && /* @__PURE__ */ jsx(FieldLabel, { label, optional: !isFieldRequired(name, validationSchema, getValues()) }),
       (elements == null ? void 0 : elements.length) > 0 && /* @__PURE__ */ jsx(FormControl, { sx: styles.chipItem, children: elements.map((item, index) => /* @__PURE__ */ jsx(
         Chip,

package/dist/components/inputs/reactHookForm/text/DescriptionField.d.ts

@@ -1,5 +1,5 @@
-import { SxProps, Theme } from '@mui/material';
+import { SxStyle } from '../../../../utils/styles';
 export interface DescriptionFieldProps {
-    expandingTextSx?: SxProps<Theme>;
+    expandingTextSx?: SxStyle;
 }
 export declare function DescriptionField({ expandingTextSx }: Readonly<DescriptionFieldProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/reactHookForm/text/ExpandingTextField.js

@@ -16,10 +16,7 @@ function ExpandingTextField({
 }) {
   const [isFocused, setIsFocused] = useState(false);
   const { control } = useCustomFormContext();
-  const descriptionWatch = useWatch({
-    name,
-    control
-  });
+  const descriptionWatch = useWatch({ name, control });
   const handleFocus = () => {
     setIsFocused(true);
   };

package/dist/components/inputs/reactHookForm/text/UniqueNameInput.d.ts

@@ -1,6 +1,7 @@
-import { SxProps, TextFieldProps, Theme } from '@mui/material';
+import { TextFieldProps } from '@mui/material';
 import { UUID } from 'crypto';
 import { ElementType } from '../../../../utils';
+import { SxStyle } from '../../../../utils/styles';
 export interface UniqueNameInputProps {
     name: string;
     label?: string;
@@ -10,7 +11,7 @@ export interface UniqueNameInputProps {
     formProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'name' | 'label' | 'inputRef' | 'inputProps' | 'InputProps'>;
     activeDirectory?: UUID;
     currentName?: string;
-    sx?: SxProps<Theme>;
+    sx?: SxStyle;
     fullWidth?: boolean;
 }
 /**

package/dist/components/inputs/reactQueryBuilder/CustomReactQueryBuilder.js

@@ -4,7 +4,8 @@ import { QueryBuilderDnD } from "@react-querybuilder/dnd";
 import * as ReactDnD from "react-dnd";
 import * as ReactDndHtml5Backend from "react-dnd-html5-backend";
 import { QueryBuilderMaterial } from "@react-querybuilder/material";
-import { defaultTranslations, formatQuery, QueryBuilder } from "react-querybuilder";
+import { defaultTranslations, QueryBuilder } from "react-querybuilder";
+import { formatQuery } from "react-querybuilder/formatQuery";
 import { useIntl } from "react-intl";
 import { useFormContext } from "react-hook-form";
 import { useCallback, useMemo } from "react";

package/dist/components/menus/custom-nested-menu.d.ts

@@ -1,8 +1,9 @@
 import { PropsWithChildren } from 'react';
 import { NestedMenuItemProps } from 'mui-nested-menu';
-import { MenuItemProps, SxProps, Theme } from '@mui/material';
+import { MenuItemProps } from '@mui/material';
+import { SxStyle } from '../../utils/styles';
 interface CustomNestedMenuItemProps extends PropsWithChildren, Omit<NestedMenuItemProps, 'parentMenuOpen'> {
-    sx?: SxProps<Theme>;
+    sx?: SxStyle;
 }
 export declare function CustomNestedMenuItem({ sx, children, ...other }: Readonly<CustomNestedMenuItemProps>): import("react/jsx-runtime").JSX.Element;
 export declare function CustomMenuItem({ sx, ...other }: Readonly<MenuItemProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/menus/custom-nested-menu.js

@@ -2,11 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { NestedMenuItem } from "mui-nested-menu";
 import { Box, MenuItem } from "@mui/material";
-import "../../utils/conversionUtils.js";
-import "@mui/icons-material";
 import { mergeSx } from "../../utils/styles.js";
-import "../../utils/types/equipmentType.js";
-import "../../utils/yupConfig.js";
 const styles = {
   highlightedParentLine: {
     backgroundColor: "action.hover",

package/dist/components/overflowableText/OverflowableText.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
-import { BoxProps, SxProps, Theme } from '@mui/material';
+import { BoxProps } from '@mui/material';
 import { Style } from 'node:util';
+import { SxStyle } from '../../utils/styles';
 export interface OverflowableTextProps extends BoxProps {
     text?: ReactNode;
     maxLineCount?: number;
     tooltipStyle?: Style;
-    tooltipSx?: SxProps<Theme>;
+    tooltipSx?: SxStyle;
 }
-export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import('@mui/system').MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const OverflowableText: import('@emotion/styled').StyledComponent<OverflowableTextProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/dist/components/parameters/common/computing-type.js

@@ -26,6 +26,8 @@ const formatComputingTypeLabel = (type) => {
       return "NonEvacuatedEnergy";
     case "SHORT_CIRCUIT":
       return "ShortCircuit";
+    case "SHORT_CIRCUIT_ONE_BUS":
+      return "OneBusShortCircuitAnalysis";
     case "VOLTAGE_INITIALIZATION":
       return "VoltageInit";
     case "DYNAMIC_SIMULATION":

package/dist/components/parameters/common/limitreductions/limit-reduction-table-cell.js

@@ -35,7 +35,7 @@ function LimitReductionTableCell({
   column,
   limits
 }) {
-  return column.dataKey === VOLTAGE_LEVELS_FORM ? /* @__PURE__ */ jsx(
+  return column.dataKey === VOLTAGE_LEVELS_FORM && limits[rowIndex] ? /* @__PURE__ */ jsx(
     Tooltip,
     {
       title: /* @__PURE__ */ jsx(
@@ -50,7 +50,7 @@ function LimitReductionTableCell({
       ),
       children: /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: "bold" }, children: /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}` }) })
     }
-  ) : /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: "bold" }, children: /* @__PURE__ */ jsx(FloatInput, { name: `${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}` }) });
+  ) : /* @__PURE__ */ jsx(TableCell, { sx: { fontWeight: "bold" }, children: column.dataKey === VOLTAGE_LEVELS_FORM ? /* @__PURE__ */ jsx(RawReadOnlyInput, { name: `${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}` }) : /* @__PURE__ */ jsx(FloatInput, { name: `${LIMIT_REDUCTIONS_FORM}[${rowIndex}].${column.dataKey}` }) });
 }
 export {
   LimitReductionTableCell

package/dist/components/parameters/common/voltage-level-table/custom-voltage-level-table.d.ts

@@ -3,7 +3,7 @@ interface LimitReductionsTableProps {
     columnsDefinition: LimitReductionIColumnsDef[];
     tableHeight: number;
     formName: string;
-    limits: ILimitReductionsByVoltageLevel[];
+    limits?: ILimitReductionsByVoltageLevel[];
 }
 export declare function CustomVoltageLevelTable({ formName, columnsDefinition, tableHeight, limits, }: Readonly<LimitReductionsTableProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/parameters/common/voltage-level-table/custom-voltage-level-table.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { TableContainer, Table, TableHead, TableRow, Tooltip, TableCell, TableBody } from "@mui/material";
-import { useMemo } from "react";
 import { useFieldArray } from "react-hook-form";
 import { LIMIT_REDUCTIONS_FORM } from "../limitreductions/columns-definitions.js";
 import { LimitReductionTableRow } from "../limitreductions/limit-reduction-table-row.js";
@@ -14,10 +13,6 @@ function CustomVoltageLevelTable({
   const { fields: rows } = useFieldArray({
     name: formName
   });
-  const TableRowComponent = useMemo(
-    () => formName === LIMIT_REDUCTIONS_FORM ? LimitReductionTableRow : CustomVoltageLevelTableRow,
-    [formName]
-  );
   return /* @__PURE__ */ jsx(
     TableContainer,
     {
@@ -37,16 +32,25 @@ function CustomVoltageLevelTable({
           },
           column.dataKey
         ) })) }) }),
-        /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, index) => /* @__PURE__ */ jsx(
-          TableRowComponent,
-          {
-            columnsDefinition,
-            index,
-            formName,
-            limits
-          },
-          `${row.id}`
-        )) })
+        /* @__PURE__ */ jsx(TableBody, { children: rows.map(
+          (row, index) => formName === LIMIT_REDUCTIONS_FORM && limits ? /* @__PURE__ */ jsx(
+            LimitReductionTableRow,
+            {
+              columnsDefinition,
+              index,
+              limits
+            },
+            `${row.id}`
+          ) : /* @__PURE__ */ jsx(
+            CustomVoltageLevelTableRow,
+            {
+              columnsDefinition,
+              index,
+              formName
+            },
+            `${row.id}`
+          )
+        ) })
       ] })
     }
   );

package/dist/components/parameters/common/widget/parameter-line-slider.d.ts

@@ -1,4 +1,4 @@
-import { Mark } from '@mui/base';
+import { Mark } from '@mui/material/Slider/useSlider.types';
 export declare function sanitizePercentageValue(value: number): number;
 type SliderParameterLineProps = {
     name: string;

package/dist/components/parameters/loadflow/load-flow-parameters-form.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { UseLoadFlowParametersFormReturn } from './use-load-flow-parameters-form';
-import { GsLang } from '../../../utils';
+import { GsLang } from '../../../utils/langs';
 interface LoadFlowParametersFormProps {
     loadflowMethods: UseLoadFlowParametersFormReturn;
     language: GsLang;

package/dist/components/parameters/parameters-style.d.ts

@@ -1,147 +1,152 @@
-import { Theme } from '@mui/material';
+/**
+ * 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/.
+ */
 /**
  * Styles use in parameter forms
  */
 export declare const parametersStyles: {
-    title: (theme: Theme) => {
+    readonly title: (theme: import('@mui/material').Theme) => {
         padding: string;
     };
-    minWidthMedium: (theme: Theme) => {
+    readonly minWidthMedium: (theme: import('@mui/material').Theme) => {
         minWidth: string;
     };
-    parameterName: (theme: Theme) => {
+    readonly parameterName: (theme: import('@mui/material').Theme) => {
         fontWeight: string;
         marginTop: string;
     };
-    controlItem: {
-        justifyContent: string;
-        flexGrow: number;
+    readonly controlItem: {
+        readonly justifyContent: "flex-end";
+        readonly flexGrow: 1;
     };
-    controlParametersItem: {
-        justifyContent: string;
-        flexGrow: number;
-        height: string;
-        paddingBottom: number;
+    readonly controlParametersItem: {
+        readonly justifyContent: "flex-start";
+        readonly flexGrow: 1;
+        readonly height: "fit-content";
+        readonly paddingBottom: 4;
     };
-    button: (theme: Theme) => {
+    readonly button: (theme: import('@mui/material').Theme) => {
         marginBottom: string;
         marginLeft: string;
     };
-    subgroupParameters: (theme: Theme) => {
+    readonly subgroupParameters: (theme: import('@mui/material').Theme) => {
         marginTop: string;
         marginBottom: string;
     };
-    subgroupParametersAccordion: {
-        '&:before': {
-            display: string;
+    readonly subgroupParametersAccordion: {
+        readonly '&:before': {
+            readonly display: "none";
         };
-        background: string;
+        readonly background: "none";
     };
-    subgroupParametersAccordionSummary: (theme: Theme) => {
-        flexDirection: string;
+    readonly subgroupParametersAccordionSummary: (theme: import('@mui/material').Theme) => {
+        flexDirection: "row-reverse";
         '& .MuiAccordionSummary-expandIconWrapper': {
-            transform: string;
+            transform: "rotate(-90deg)";
         };
         '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
-            transform: string;
+            transform: "rotate(0deg)";
         };
         '& .MuiAccordionSummary-content': {
             marginLeft: string;
         };
     };
-    subgroupParametersAccordionDetails: (theme: Theme) => {
+    readonly subgroupParametersAccordionDetails: (theme: import('@mui/material').Theme) => {
         padding: string;
     };
-    marginTopButton: {
-        marginTop: string;
-        position: string;
-        bottom: number;
+    readonly marginTopButton: {
+        readonly marginTop: "10px";
+        readonly position: "sticky";
+        readonly bottom: 0;
     };
-    scrollableGrid: (theme: Theme) => {
-        overflowY: string;
-        overflowX: string;
+    readonly scrollableGrid: (theme: import('@mui/material').Theme) => {
+        overflowY: "auto";
+        overflowX: "hidden";
         maxHeight: string;
         paddingRight: string;
         paddingTop: string;
         paddingBottom: string;
         flexGrow: number;
     };
-    singleItem: (theme: Theme) => {
-        display: string;
+    readonly singleItem: (theme: import('@mui/material').Theme) => {
+        display: "flex";
         flex: string;
-        alignItems: string;
-        justifyContent: string;
+        alignItems: "flex-start";
+        justifyContent: "space-between";
         marginTop: string;
         marginBottom: string;
     };
-    firstTextField: (theme: Theme) => {
+    readonly firstTextField: (theme: import('@mui/material').Theme) => {
         marginLeft: string;
     };
-    secondTextField: (theme: Theme) => {
+    readonly secondTextField: (theme: import('@mui/material').Theme) => {
         marginLeft: string;
         marginRight: string;
     };
-    singleTextField: (theme: Theme) => {
-        display: string;
+    readonly singleTextField: (theme: import('@mui/material').Theme) => {
+        display: "flex";
         marginRight: string;
         marginLeft: string;
     };
-    tooltip: (theme: Theme) => {
+    readonly tooltip: (theme: import('@mui/material').Theme) => {
         marginLeft: string;
     };
-    text: (theme: Theme) => {
-        display: string;
+    readonly text: (theme: import('@mui/material').Theme) => {
+        display: "flex";
         marginBottom: string;
         marginTop: string;
     };
-    multipleItems: (theme: Theme) => {
-        display: string;
+    readonly multipleItems: (theme: import('@mui/material').Theme) => {
+        display: "flex";
         flex: string;
-        alignItems: string;
-        justifyContent: string;
+        alignItems: "flex-start";
+        justifyContent: "space-between";
         marginTop: string;
         marginBottom: string;
     };
-    tabWithError: (theme: Theme) => {
+    readonly tabWithError: (theme: import('@mui/material').Theme) => {
         '&.Mui-selected': {
             color: string;
         };
         color: string;
     };
-    tabWithErrorIndicator: (theme: Theme) => {
+    readonly tabWithErrorIndicator: (theme: import('@mui/material').Theme) => {
         backgroundColor: string;
     };
-    panel: (theme: Theme) => {
+    readonly panel: (theme: import('@mui/material').Theme) => {
         marginTop: string;
         marginBottom: string;
     };
-    adjustExistingLimitsInfo: (theme: Theme) => {
-        display: string;
-        alignItems: string;
+    readonly adjustExistingLimitsInfo: (theme: import('@mui/material').Theme) => {
+        display: "flex";
+        alignItems: "center";
         marginTop: string;
         marginBottom: string;
     };
-    circularProgress: (theme: Theme) => {
+    readonly circularProgress: (theme: import('@mui/material').Theme) => {
         marginRight: string;
         color: string;
     };
-    icon: (theme: Theme) => {
+    readonly icon: (theme: import('@mui/material').Theme) => {
         width: string;
     };
-    modificationsTitle: (theme: Theme) => {
-        display: string;
-        alignItems: string;
+    readonly modificationsTitle: (theme: import('@mui/material').Theme) => {
+        display: "flex";
+        alignItems: "center";
         margin: string;
         padding: string;
         backgroundColor: string;
         color: string;
-        overflow: string;
+        overflow: "hidden";
     };
 };
-export declare function getTabIndicatorStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: Theme) => {
+export declare function getTabIndicatorStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: import('@mui/material').Theme) => {
     backgroundColor: string;
 }) | undefined;
-export declare function getTabStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: Theme) => {
+export declare function getTabStyle<T extends number | string>(tabIndexesWithError: T[], index: T): ((theme: import('@mui/material').Theme) => {
     '&.Mui-selected': {
         color: string;
     };

package/dist/components/parameters/short-circuit/short-circuit-fields.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import { Grid } from "@mui/material";
-import { red, green } from "@mui/material/colors";
+import { green, red } from "@mui/material/colors";
 import { Lens } from "@mui/icons-material";
 import { useWatch } from "react-hook-form";
 import { SHORT_CIRCUIT_INITIAL_VOLTAGE_PROFILE_MODE, SHORT_CIRCUIT_PREDEFINED_PARAMS, SHORT_CIRCUIT_WITH_LOADS, SHORT_CIRCUIT_WITH_SHUNT_COMPENSATORS, SHORT_CIRCUIT_WITH_VSC_CONVERTER_STATIONS, SHORT_CIRCUIT_WITH_NEUTRAL_POSITION, intlPredefinedParametersOptions, intlInitialVoltageProfileMode, PredefinedParameters, InitialVoltage, SHORT_CIRCUIT_WITH_FEEDER_RESULT } from "./constants.js";
@@ -77,21 +77,11 @@ function ShortCircuitFields({ resetAll }) {
   const initialVoltageProfileMode = useMemo(() => {
     return intlInitialVoltageProfileMode();
   }, []);
-  const getStatus = (state, styles) => {
-    const color = state === "SUCCESS" ? styles.succeed : styles.fail;
-    return /* @__PURE__ */ jsx(Lens, { fontSize: "medium", sx: color });
-  };
-  const statusToShow = useMemo(() => {
-    const styles = {
-      succeed: {
-        color: green[500]
-      },
-      fail: {
-        color: red[500]
-      }
-    };
-    return getStatus(status, styles);
-  }, [status]);
+  const statusColor = useMemo(
+    () => ({ color: status === "SUCCESS" ? green[500] : red[500] }),
+    [status]
+  );
+  const statusToShow = /* @__PURE__ */ jsx(Lens, { fontSize: "medium", sx: statusColor });
   const onPredefinedParametersManualChange = (event) => {
     const newPredefinedParameters = event.target.value;
     console.debug("onPredefinedParametersManualChange new:", newPredefinedParameters);

package/dist/components/parameters/voltage-init/voltage-init-parameters-form.d.ts

@@ -1,19 +1,18 @@
-import { Theme } from '@mui/material';
 import { ReactNode } from 'react';
 import { UseVoltageInitParametersFormReturn } from './use-voltage-init-parameters-form';
 export declare const styles: {
-    gridWithActions: (theme: Theme) => {
-        overflowY: string;
-        overflowX: string;
+    readonly gridWithActions: (theme: import('@mui/material').Theme) => {
+        overflowY: "auto";
+        overflowX: "hidden";
         paddingRight: string;
         paddingTop: string;
         paddingBottom: string;
         flexGrow: number;
         maxHeight: string;
     };
-    gridWithoutActions: (theme: Theme) => {
-        overflowY: string;
-        overflowX: string;
+    readonly gridWithoutActions: (theme: import('@mui/material').Theme) => {
+        overflowY: "auto";
+        overflowX: "hidden";
         paddingRight: string;
         paddingTop: string;
         paddingBottom: string;

package/dist/components/topBar/AboutDialog.js

@@ -22,12 +22,8 @@ const styles = {
     textAlign: "center",
     marginTop: 0
   },
-  versionField: (isUnknown) => isUnknown ? {
-    fontSize: "1.5em",
-    fontWeight: "bold"
-  } : {
-    fontStyle: "italic"
-  },
+  versionField: { fontStyle: "italic" },
+  versionFieldUnknown: { fontSize: "1.5em", fontWeight: "bold" },
   detailsSection: {
     ".MuiAccordionSummary-content > .MuiSvgIcon-root": {
       marginRight: "0.5rem"
@@ -301,7 +297,7 @@ function AboutDialog({
                       Typography,
                       {
                         component: "span",
-                        sx: styles.versionField(!loadingGlobalVersion && !!actualGlobalVersion),
+                        sx: !loadingGlobalVersion && !!actualGlobalVersion ? styles.versionFieldUnknown : styles.versionField,
                         children: actualGlobalVersion || "unknown"
                       }
                     )

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

@@ -1,5 +1,5 @@
-import { SxProps } from '@mui/material';
 import { ReactNode } from 'react';
+import { SxStyle } from '../../utils/styles';
 export interface GridLogoProps extends Omit<LogoTextProps, 'style'> {
     appLogo: ReactNode;
 }
@@ -8,6 +8,6 @@ export declare function GridLogo({ appLogo, appName, appColor, onClick }: Partia
 export interface LogoTextProps {
     appName: string;
     appColor: string;
-    style: SxProps;
+    style: SxStyle;
     onClick: () => void;
 }

package/dist/hooks/use-unique-name-validation.js

@@ -20,11 +20,10 @@ function useUniqueNameValidation({
     setError,
     clearErrors,
     trigger,
-    formState: { errors, defaultValues }
+    formState: { errors, defaultValues, isDirty: formIsDirty }
   } = useFormContext();
   const {
-    field: { value },
-    fieldState: { isDirty }
+    field: { value }
   } = useController({ name });
   const {
     field: { value: selectedDirectory }
@@ -65,10 +64,13 @@ function useUniqueNameValidation({
     if (selectedDirectory) {
       debouncedHandleCheckName(trimmedValue);
     }
-    if (!isDirty) {
+    if (!formIsDirty) {
       clearErrors(name);
       return;
     }
+    if (trimmedValue === defaultFieldValue && trimmedValue.length > 0) {
+      return;
+    }
     if (trimmedValue) {
       clearErrors(name);
       setError("root.isValidating", {
@@ -89,7 +91,7 @@ function useUniqueNameValidation({
     setError,
     clearErrors,
     name,
-    isDirty,
+    formIsDirty,
     defaultFieldValue,
     directory,
     selectedDirectory

package/dist/utils/mapper/getFileIcon.d.ts

@@ -1,3 +1,3 @@
-import { SxProps, Theme } from '@mui/material';
 import { ElementType } from '../types/elementType';
-export declare function getFileIcon(type: ElementType, style: SxProps<Theme>): import("react/jsx-runtime").JSX.Element | undefined;
+import { SxStyle } from '../styles';
+export declare function getFileIcon(type: ElementType, style: SxStyle): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/utils/styles.d.ts

@@ -7,3 +7,5 @@ export declare const toNestedGlobalSelectors: (styles: object, generateGlobalCla
     [k: string]: any;
 };
 export declare const mergeSx: (...allSx: (SxProps<Theme> | undefined)[]) => (boolean | import('@mui/system').SystemStyleObject<{}> | ((theme: {}) => import('@mui/system').SystemStyleObject<{}>) | ((theme: {}) => import('@mui/system').SystemStyleObject<{}>))[];
+export type SxStyle = SxProps<Theme>;
+export type MuiStyles = Record<string, SxStyle>;

package/dist/utils/types/equipmentType.d.ts

@@ -1,38 +1,37 @@
-import { Theme } from '@mui/material';
 export declare const TYPE_TAG_MAX_SIZE = "90px";
 export declare const VL_TAG_MAX_SIZE = "100px";
 export declare const equipmentStyles: {
-    equipmentOption: {
-        display: string;
-        gap: string;
-        width: string;
-        margin: string;
-        padding: string;
-        alignItems: string;
-        justifyContent: string;
+    readonly equipmentOption: {
+        readonly display: "flex";
+        readonly gap: "20px";
+        readonly width: "100%";
+        readonly margin: "0px";
+        readonly padding: "0px";
+        readonly alignItems: "center";
+        readonly justifyContent: "space-between";
     };
-    equipmentTag: (theme: string | Theme) => {
+    readonly equipmentTag: (theme: import('@mui/material').Theme) => {
         borderRadius: string;
         padding: string;
         fontSize: string;
-        textAlign: string;
-        color: string;
+        textAlign: "center";
+        color: "inherit" | "black";
     };
-    equipmentTypeTag: {
-        minWidth: string;
-        maxWidth: string;
-        background: string;
+    readonly equipmentTypeTag: {
+        readonly minWidth: "90px";
+        readonly maxWidth: "90px";
+        readonly background: "lightblue";
     };
-    equipmentVlTag: {
-        width: string;
-        minWidth: string;
-        maxWidth: string;
-        background: string;
-        fontStyle: string;
+    readonly equipmentVlTag: {
+        readonly width: "100px";
+        readonly minWidth: "100px";
+        readonly maxWidth: "100px";
+        readonly background: "lightgray";
+        readonly fontStyle: "italic";
     };
-    result: {
-        width: string;
-        padding: string;
+    readonly result: {
+        readonly width: "100%";
+        readonly padding: "2px";
     };
 };
 /**

package/dist/utils/types/equipmentType.js

@@ -1,4 +1,3 @@
-import { LIGHT_THEME } from "../styles.js";
 const TYPE_TAG_MAX_SIZE = "90px";
 const VL_TAG_MAX_SIZE = "100px";
 const equipmentStyles = {
@@ -18,10 +17,7 @@ const equipmentStyles = {
       padding: "4px",
       fontSize: "x-small",
       textAlign: "center",
-      color: (
-        // TODO remove first condition when gridstudy is updated
-        theme === LIGHT_THEME || typeof theme !== "string" && ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.mode) === "light" ? "inherit" : "black"
-      )
+      color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.mode) === "light" ? "inherit" : "black"
     };
   },
   equipmentTypeTag: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.124.0",
+    "version": "0.126.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",
@@ -34,17 +34,16 @@
         "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\""
     },
     "dependencies": {
-        "@ag-grid-community/locale": "^33.1.0",
+        "@ag-grid-community/locale": "^33.3.2",
         "@hello-pangea/dnd": "^18.0.1",
-        "@material-symbols/svg-400": "^0.31.2",
-        "@mui/base": "^5.0.0-beta.40-0",
-        "@react-querybuilder/dnd": "^8.2.0",
-        "@react-querybuilder/material": "^8.2.0",
+        "@material-symbols/svg-400": "^0.31.9",
+        "@react-querybuilder/dnd": "^8.8.4",
+        "@react-querybuilder/material": "^8.8.4",
         "autosuggest-highlight": "^3.3.4",
         "clsx": "^2.1.1",
-        "mui-nested-menu": "^4.0.0",
         "jwt-decode": "^4.0.0",
         "localized-countries": "^2.0.0",
+        "mui-nested-menu": "^4.0.1",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
         "react-csv-downloader": "^3.3.0",
@@ -52,8 +51,8 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-querybuilder": "^8.2.0",
         "reconnecting-websocket": "^4.4.0",
-        "type-fest": "^4.34.1",
-        "uuid": "^11.0.5"
+        "type-fest": "^4.41.0",
+        "uuid": "^11.1.0"
     },
     "peerDependencies": {
         "@emotion/react": "^11.14.0",
@@ -62,7 +61,7 @@
         "@mui/icons-material": "^5.16.14",
         "@mui/lab": "5.0.0-alpha.175",
         "@mui/material": "^5.16.14",
-        "@mui/x-tree-view": "^7.28.1",
+        "@mui/x-tree-view": "^7.29.1",
         "ag-grid-community": "^33.0.3",
         "ag-grid-react": "^33.0.4",
         "notistack": "^3.0.2",
@@ -75,20 +74,20 @@
         "yup": "^1.6.1"
     },
     "devDependencies": {
-        "@babel/helper-builder-react-jsx": "^7.25.9",
-        "@babel/preset-env": "^7.26.8",
-        "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
+        "@babel/helper-builder-react-jsx": "^7.27.1",
+        "@babel/preset-env": "^7.28.3",
+        "@babel/preset-react": "^7.27.1",
+        "@babel/preset-typescript": "^7.27.1",
         "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.0",
-        "@hookform/resolvers": "^4.0.0",
+        "@emotion/styled": "^11.14.1",
+        "@hookform/resolvers": "^4.1.3",
         "@jest/globals": "^29.7.0",
-        "@mui/icons-material": "^5.16.14",
+        "@mui/icons-material": "^5.18.0",
         "@mui/lab": "5.0.0-alpha.175",
-        "@mui/material": "^5.16.14",
+        "@mui/material": "^5.18.0",
         "@react-hook/window-size": "^3.1.1",
-        "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^16.2.0",
+        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/autosuggest-highlight": "^3.2.3",
         "@types/eslint": "^8.56.12",
@@ -97,53 +96,53 @@
         "@types/json-logic-js": "^2.0.8",
         "@types/license-checker": "^25.0.6",
         "@types/localized-countries": "^2.0.3",
-        "@types/node": "^22.13.4",
-        "@types/prop-types": "^15.7.14",
-        "@types/react": "^18.3.18",
-        "@types/react-dom": "^18.3.5",
+        "@types/node": "^22.18.1",
+        "@types/prop-types": "^15.7.15",
+        "@types/react": "^18.3.24",
+        "@types/react-dom": "^18.3.7",
         "@types/react-resizable": "^3.0.8",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@typescript-eslint/parser": "^7.18.0",
-        "@vitejs/plugin-react": "^4.3.4",
+        "@vitejs/plugin-react": "^4.7.0",
         "ag-grid-community": "^33.1.0",
-        "ag-grid-react": "^33.1.0",
+        "ag-grid-react": "^33.3.2",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",
         "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^18.0.0",
-        "eslint-config-prettier": "^10.1.1",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-flowtype": "^8.0.3",
-        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-jsx-a11y": "^6.10.2",
-        "eslint-plugin-prettier": "^5.2.5",
-        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^4.6.2",
-        "glob": "^11.0.1",
+        "glob": "^11.0.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "license-checker": "^25.0.1",
         "notistack": "^3.0.2",
-        "prettier": "^3.5.3",
+        "prettier": "^3.6.2",
         "prettier-plugin-properties": "^0.3.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-hook-form": "^7.54.2",
-        "react-intl": "^7.1.6",
+        "react-hook-form": "^7.62.0",
+        "react-intl": "^7.1.11",
         "react-papaparse": "^4.4.0",
         "react-resizable": "^3.0.5",
-        "react-router": "^7.4.1",
+        "react-router": "^7.8.2",
         "svgo": "^3.3.2",
         "ts-node": "^10.9.2",
-        "typescript": "~5.5.4",
-        "vite": "^6.2.1",
-        "vite-plugin-dts": "^4.5.3",
+        "typescript": "~5.6.3",
+        "vite": "^6.3.6",
+        "vite-plugin-dts": "^4.5.4",
         "vite-plugin-eslint": "^1.8.1",
-        "vite-plugin-lib-inject-css": "^2.2.1",
-        "vite-plugin-svgr": "^4.3.0",
-        "yup": "^1.6.1"
+        "vite-plugin-lib-inject-css": "^2.2.2",
+        "vite-plugin-svgr": "^4.5.0",
+        "yup": "^1.7.0"
     }
 }