@gridsuite/commons-ui 0.239.0 → 0.241.0

package/dist/features/parameters/network-visualizations/network-visualizations-parameters-inline.js

@@ -1,49 +1,47 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
-import { Box, Grid } from "@mui/material";
-import { useIntl, FormattedMessage } from "react-intl";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import "react-intl";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import { getNetworkVisualizationsParameters } from "../../../services/study-config.js";
+import "@mui/material";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
-import "../../../components/ui/overflowableText/OverflowableText.js";
+import { NetworkVisualizationParametersForm } from "./network-visualizations-form.js";
+import { useNetworkVisualizationParametersForm } from "./use-network-visualizations-parameters-form.js";
+import { ParameterLayout } from "../common/parameter-layout/parameter-layout.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import "react-hook-form";
-import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import { SubmitButton } from "../../../components/ui/reactHookForm/utils/SubmitButton.js";
+import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/overflowableText/OverflowableText.js";
 import "yup";
-import { DirectoryItemSelector } from "../../../components/ui/directoryItemSelector/DirectoryItemSelector.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
-import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import { LabelledButton } from "../common/parameters.js";
-import { CreateParameterDialog } from "../common/parameters-creation-dialog.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
 import "../common/contingency-table/columns-definitions.js";
 import "@hookform/resolvers/yup";
 import "../../../components/composite/filter/HeaderFilterForm.js";
-import { NetworkVisualizationParametersForm } from "./network-visualizations-form.js";
-import { useNetworkVisualizationParametersForm } from "./use-network-visualizations-parameters-form.js";
 function NetworkVisualizationParametersInline({
   studyUuid,
   setHaveDirtyFields,
@@ -57,15 +55,11 @@ function NetworkVisualizationParametersInline({
     studyUuid,
     parameters
   });
-  const intl = useIntl();
-  const [openCreateParameterDialog, setOpenCreateParameterDialog] = useState(false);
-  const [openSelectParameterDialog, setOpenSelectParameterDialog] = useState(false);
   const { snackError } = useSnackMessage();
   const { reset, getValues, formState, handleSubmit } = networkVisuMethods.formMethods;
   const handleLoadParameters = useCallback(
     (newParams) => {
       if (newParams && newParams.length > 0) {
-        setOpenSelectParameterDialog(false);
         getNetworkVisualizationsParameters(newParams[0].id).then((result) => {
           reset(result, {
             keepDefaultValues: true
@@ -74,7 +68,6 @@ function NetworkVisualizationParametersInline({
           snackWithFallback(snackError, error, { headerId: "paramsRetrievingError" });
         });
       }
-      setOpenSelectParameterDialog(false);
     },
     [reset, snackError]
   );
@@ -82,51 +75,27 @@ function NetworkVisualizationParametersInline({
     setHaveDirtyFields(formState.isDirty);
   }, [formState, setHaveDirtyFields]);
   return /* @__PURE__ */ jsx(
-    NetworkVisualizationParametersForm,
+    CustomFormProvider,
     {
-      userProfile,
-      networkVisuMethods,
-      renderActions: () => {
-        return /* @__PURE__ */ jsxs(Box, { children: [
-          /* @__PURE__ */ jsxs(Grid, { container: true, item: true, children: [
-            /* @__PURE__ */ jsx(
-              LabelledButton,
-              {
-                callback: () => setOpenSelectParameterDialog(true),
-                label: "settings.button.chooseSettings"
-              }
-            ),
-            /* @__PURE__ */ jsx(LabelledButton, { callback: () => setOpenCreateParameterDialog(true), label: "save" }),
-            /* @__PURE__ */ jsx(SubmitButton, { onClick: handleSubmit(networkVisuMethods.onSaveInline), variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: "validate" }) })
-          ] }),
-          openCreateParameterDialog && /* @__PURE__ */ jsx(
-            CreateParameterDialog,
-            {
-              studyUuid,
-              open: openCreateParameterDialog,
-              onClose: () => setOpenCreateParameterDialog(false),
-              parameterValues: () => getValues(),
-              parameterFormatter: (newParams) => newParams,
-              parameterType: ElementType.NETWORK_VISUALIZATIONS_PARAMETERS
-            }
-          ),
-          openSelectParameterDialog && /* @__PURE__ */ jsx(
-            DirectoryItemSelector,
-            {
-              open: openSelectParameterDialog,
-              onClose: handleLoadParameters,
-              types: [ElementType.NETWORK_VISUALIZATIONS_PARAMETERS],
-              title: intl.formatMessage({
-                id: "showSelectParameterDialog"
-              }),
-              multiSelect: false,
-              validationButtonText: intl.formatMessage({
-                id: "validate"
-              })
-            }
-          )
-        ] });
-      }
+      validationSchema: networkVisuMethods.formSchema,
+      ...networkVisuMethods.formMethods,
+      removeOptional: true,
+      children: /* @__PURE__ */ jsx(
+        ParameterLayout,
+        {
+          title: "NetworkVisualizations",
+          isLoading: networkVisuMethods.paramsLoading,
+          parameterType: ElementType.NETWORK_VISUALIZATIONS_PARAMETERS,
+          createParameter: {
+            studyUuid,
+            getParameterValues: getValues,
+            parameterFormatter: (newParams) => newParams
+          },
+          selectParameterHandler: handleLoadParameters,
+          validateHandler: handleSubmit(networkVisuMethods.onSaveInline),
+          children: /* @__PURE__ */ jsx(NetworkVisualizationParametersForm, { userProfile, networkVisuMethods })
+        }
+      )
     }
   );
 }

package/dist/features/parameters/network-visualizations/single-line-diagram-parameters.js

@@ -1,24 +1,20 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { Grid } from "@mui/material";
+import { Grid2 } from "@mui/material";
 import { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
-import "../../../utils/conversionUtils.js";
-import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
-import { LineSeparator } from "../common/line-separator.js";
 import { parametersStyles } from "../parameters-style.js";
+import "../../../components/ui/overflowableText/OverflowableText.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "react-hook-form";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import "notistack";
-import "react-hook-form";
 import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
-import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/overflowableText/OverflowableText.js";
 import "yup";
+import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
 import { SwitchInput } from "../../../components/ui/reactHookForm/booleans/SwitchInput.js";
 import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
 import { MuiSelectInput } from "../../../components/ui/reactHookForm/selectInputs/MuiSelectInput.js";
@@ -27,12 +23,17 @@ import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
 import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
 import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
 import "@material-symbols/svg-400/outlined/add_notes.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
 import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
 import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
 import "mui-nested-menu";
 import "react-resizable-panels";
 import "react-papaparse";
+import { LineSeparator } from "../common/line-separator.js";
+import "../common/parameter-layout/parameter-layout-provider.js";
 import "../common/widget/parameter-line-slider.js";
 import "../common/limitreductions/columns-definitions.js";
 import "../common/contingency-table/contingency-table.js";
@@ -49,12 +50,12 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     return INTL_SUBSTATION_LAYOUT_OPTIONS;
   }, []);
   const labelPosition = (name, label) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, container: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM}.${name}` }) })
+    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: label }) }),
+    /* @__PURE__ */ jsx(Grid2, { container: true, size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(SwitchInput, { name: `${NetworkVisualizationTabValues.SINGLE_LINE_DIAGRAM}.${name}` }) })
   ] });
   const substationLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: SUBSTATION_LAYOUT }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: SUBSTATION_LAYOUT }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -65,8 +66,8 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   const componentLineDropDown = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: COMPONENT_LIBRARY }) }),
-    /* @__PURE__ */ jsx(Grid, { item: true, xs: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Grid2, { size: 8, sx: parametersStyles.parameterName, children: /* @__PURE__ */ jsx(FormattedMessage, { id: COMPONENT_LIBRARY }) }),
+    /* @__PURE__ */ jsx(Grid2, { size: 4, sx: parametersStyles.controlItem, children: /* @__PURE__ */ jsx(
       MuiSelectInput,
       {
         fullWidth: true,
@@ -79,7 +80,7 @@ function SingleLineDiagramParameters({ componentLibraries }) {
     ) })
   ] });
   return /* @__PURE__ */ jsxs(
-    Grid,
+    Grid2,
     {
       container: true,
       spacing: 1,

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

@@ -65,7 +65,6 @@ export declare const parametersStyles: {
     readonly scrollableGrid: (theme: import('@mui/material').Theme) => {
         overflowY: "auto";
         overflowX: "hidden";
-        maxHeight: string;
         paddingRight: string;
         paddingTop: string;
         paddingBottom: string;

package/dist/features/parameters/parameters-style.js

@@ -56,8 +56,6 @@ const parametersStyles = {
   scrollableGrid: (theme) => ({
     overflowY: "auto",
     overflowX: "hidden",
-    maxHeight: "85%",
-    // TODO This needs to be refactored
     paddingRight: theme.spacing(2),
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(1),

package/dist/features/parameters/pcc-min/pcc-min-parameters-dialog.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
 import { CustomMuiDialog } from "../../../components/ui/dialogs/customMuiDialog/CustomMuiDialog.js";
 import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
 import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
@@ -7,7 +8,6 @@ import { ElementType } from "../../../utils/types/elementType.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
 import "react";
-import "@mui/material";
 import "react-intl";
 import "react-hook-form";
 import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
@@ -55,7 +55,7 @@ function PccMinParametersEditionDialog({
     formState: { errors, dirtyFields }
   } = pccMinMethods.formMethods;
   const disableSave = Object.keys(errors).length > 0 || Object.keys(dirtyFields).length === 0;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     CustomMuiDialog,
     {
       open,
@@ -75,22 +75,17 @@ function PccMinParametersEditionDialog({
           // we want the dialog height to be fixed even when switching tabs
         }
       },
-      children: /* @__PURE__ */ jsx(
-        PccMinParametersForm,
-        {
-          pccMinMethods,
-          renderTitleFields: () => {
-            return /* @__PURE__ */ jsx(
-              NameElementEditorForm,
-              {
-                initialElementName: name,
-                activeDirectory,
-                elementType: ElementType.PCC_MIN_PARAMETERS
-              }
-            );
+      children: [
+        /* @__PURE__ */ jsx(Grid2, { container: true, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          NameElementEditorForm,
+          {
+            initialElementName: name,
+            activeDirectory,
+            elementType: ElementType.PCC_MIN_PARAMETERS
           }
-        }
-      )
+        ) }),
+        /* @__PURE__ */ jsx(PccMinParametersForm, {})
+      ]
     }
   );
 }

package/dist/features/parameters/pcc-min/pcc-min-parameters-form.d.ts

@@ -1,29 +1,7 @@
-import { ReactNode } from 'react';
-import { UsePccMinParametersFormReturn } from './use-pcc-min-parameters-form';
-export declare const styles: {
-    readonly gridWithActions: (theme: import('@mui/material').Theme) => {
-        overflowY: "auto";
-        overflowX: "hidden";
-        paddingRight: string;
-        paddingTop: string;
-        paddingBottom: string;
-        flexGrow: number;
-        maxHeight: string;
-    };
-    readonly gridWithoutActions: (theme: import('@mui/material').Theme) => {
-        overflowY: "auto";
-        overflowX: "hidden";
-        paddingRight: string;
-        paddingTop: string;
-        paddingBottom: string;
-        flexGrow: number;
-        maxHeight: string;
-    };
-};
-interface PccMinParametersFormProps {
-    pccMinMethods: UsePccMinParametersFormReturn;
-    renderTitleFields?: () => ReactNode;
-    renderActions?: () => ReactNode;
-}
-export declare function PccMinParametersForm({ pccMinMethods, renderTitleFields, renderActions, }: Readonly<PccMinParametersFormProps>): import("react").JSX.Element;
-export {};
+/**
+ * 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 https://mozilla.org/MPL/2.0/.
+ */
+export declare function PccMinParametersForm(): import("react").JSX.Element;

package/dist/features/parameters/pcc-min/pcc-min-parameters-form.js

@@ -1,118 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Box, Grid, LinearProgress } from "@mui/material";
-import "@mui/icons-material";
-import "react-intl";
-import "../../../components/ui/overflowableText/OverflowableText.js";
+import { jsx } from "react/jsx-runtime";
+import { Grid2 } from "@mui/material";
+import { ParameterLineDirectoryItemsInput } from "../common/widget/parameter-line-directory-items-input.js";
 import { FILTERS } from "../../../utils/constants/filterConstant.js";
 import "../../../utils/conversionUtils.js";
 import { ElementType } from "../../../utils/types/elementType.js";
 import { EquipmentType } from "../../../utils/types/equipmentType.js";
-import "react";
-import "react-hook-form";
-import "localized-countries";
-import "localized-countries/data/fr";
-import "localized-countries/data/en";
-import "notistack";
-import { CustomFormProvider } from "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
-import "yup";
-import "../../../components/ui/treeViewFinder/TreeViewFinder.js";
-import "../../../components/ui/reactHookForm/numbers/RangeInput.js";
-import "@material-symbols/svg-400/outlined/left_panel_open.svg?react";
-import "@material-symbols/svg-400/outlined/arrows_output.svg?react";
-import "@material-symbols/svg-400/outlined/arrows_input.svg?react";
-import "@material-symbols/svg-400/outlined/left_panel_close.svg?react";
-import "@material-symbols/svg-400/outlined/add_notes.svg?react";
-import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
-import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
-import "../../../components/ui/reactHookForm/directory-item-input/directory-item-utils.js";
-import "@hello-pangea/dnd";
-import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
-import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
-import "mui-nested-menu";
-import "react-resizable-panels";
-import "react-papaparse";
-import { ParameterLineDirectoryItemsInput } from "../common/widget/parameter-line-directory-items-input.js";
-import "../common/widget/parameter-line-slider.js";
-import "../common/limitreductions/columns-definitions.js";
-import "../common/contingency-table/contingency-table.js";
-import "../common/contingency-table/columns-definitions.js";
-import "@hookform/resolvers/yup";
-import "../../../components/composite/filter/HeaderFilterForm.js";
-const styles = {
-  gridWithActions: (theme) => ({
-    overflowY: "auto",
-    overflowX: "hidden",
-    paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(1),
-    flexGrow: 1,
-    maxHeight: "85%"
-  }),
-  gridWithoutActions: (theme) => ({
-    overflowY: "auto",
-    overflowX: "hidden",
-    paddingRight: theme.spacing(2),
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(1),
-    flexGrow: 1,
-    maxHeight: "100%"
-  })
-};
-function PccMinParametersForm({
-  pccMinMethods,
-  renderTitleFields,
-  renderActions
-}) {
-  const { formMethods, formSchema, paramsLoading } = pccMinMethods;
-  return /* @__PURE__ */ jsx(CustomFormProvider, { validationSchema: formSchema, ...formMethods, removeOptional: true, children: /* @__PURE__ */ jsxs(
-    Box,
+import "@mui/icons-material";
+import { parametersStyles } from "../parameters-style.js";
+function PccMinParametersForm() {
+  return /* @__PURE__ */ jsx(Grid2, { container: true, sx: parametersStyles.scrollableGrid, children: /* @__PURE__ */ jsx(Grid2, { size: 12, children: /* @__PURE__ */ jsx(
+    ParameterLineDirectoryItemsInput,
     {
-      sx: {
-        height: "100%",
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(Grid, { item: true, container: true, sx: renderActions ? styles.gridWithActions : styles.gridWithoutActions, children: [
-          /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: renderTitleFields?.() }),
-          paramsLoading ? /* @__PURE__ */ jsx(LinearProgress, {}) : /* @__PURE__ */ jsx(
-            Box,
-            {
-              sx: {
-                height: "100%",
-                width: "100%"
-              },
-              children: /* @__PURE__ */ jsx(Grid, { item: true, container: true, direction: "column", children: /* @__PURE__ */ jsx(
-                ParameterLineDirectoryItemsInput,
-                {
-                  name: FILTERS,
-                  equipmentTypes: [EquipmentType.VOLTAGE_LEVEL],
-                  elementType: ElementType.FILTER,
-                  label: "pccMinParamFilter",
-                  hideErrorMessage: false,
-                  allowMultiSelect: false
-                }
-              ) })
-            }
-          )
-        ] }),
-        renderActions && /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            container: true,
-            direction: "column",
-            sx: {
-              position: "fixed",
-              bottom: "15px"
-            },
-            children: renderActions()
-          }
-        )
-      ]
+      name: FILTERS,
+      equipmentTypes: [EquipmentType.VOLTAGE_LEVEL],
+      elementType: ElementType.FILTER,
+      label: "pccMinParamFilter",
+      hideErrorMessage: false,
+      allowMultiSelect: false
     }
-  ) });
+  ) }) });
 }
 export {
-  PccMinParametersForm,
-  styles
+  PccMinParametersForm
 };