@gridsuite/commons-ui 0.54.0 → 0.56.0

package/dist/components/TreeViewFinder/TreeViewFinder.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect } from "react";
 import { useIntl } from "react-intl";
-import PropTypes from "prop-types";
 import { toNestedGlobalSelectors, makeComposeClasses } from "../../utils/styles.js";
 import { styled } from "@mui/system";
 import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Typography } from "@mui/material";
@@ -39,7 +38,7 @@ const composeClasses = makeComposeClasses(generateTreeViewFinderClass);
 const TreeViewFinder = (props) => {
   const intl = useIntl();
   const {
-    classes,
+    classes = {},
     title,
     contentText,
     open,
@@ -49,52 +48,63 @@ const TreeViewFinder = (props) => {
     onClose,
     onTreeBrowse,
     validationButtonText,
-    onlyLeaves,
-    multiselect,
+    onlyLeaves = true,
+    multiSelect = false,
     sortMethod,
     className,
-    cancelButtonProps
+    cancelButtonProps,
+    selected: selectedProp,
+    expanded: expandedProp
   } = props;
   const [mapPrintedNodes, setMapPrintedNodes] = useState({});
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const [selected, setSelected] = useState(defaultSelected);
+  const [expanded, setExpanded] = useState(
+    defaultExpanded ?? []
+  );
+  const [selected, setSelected] = useState(
+    defaultSelected ?? []
+  );
+  const scrollRef = useRef([]);
+  const [autoScrollAllowed, setAutoScrollAllowed] = useState(true);
   const isSelectable = (node) => {
     return onlyLeaves ? isLeaf(node) : true;
   };
   const isLeaf = (node) => {
     return node && node.children === void 0;
   };
-  const computeMapPrintedNodes = useCallback((nodes) => {
-    let newMapPrintedNodes = {};
-    nodes.forEach((node) => {
-      newMapPrintedNodes[node.id] = node;
-      if (!isLeaf(node)) {
-        Object.assign(
-          newMapPrintedNodes,
-          computeMapPrintedNodes(node.children)
-        );
-      }
-    });
-    return newMapPrintedNodes;
-  }, []);
+  const isValidationDisabled = () => {
+    return (selected == null ? void 0 : selected.length) === 0 || (selected == null ? void 0 : selected.length) === (selectedProp == null ? void 0 : selectedProp.length) && (selected == null ? void 0 : selected.every((nodeId) => selectedProp == null ? void 0 : selectedProp.includes(nodeId)));
+  };
+  const computeMapPrintedNodes = useCallback(
+    (nodes) => {
+      let newMapPrintedNodes = {};
+      nodes == null ? void 0 : nodes.forEach((node) => {
+        newMapPrintedNodes[node.id] = node;
+        if (!isLeaf(node)) {
+          Object.assign(
+            newMapPrintedNodes,
+            computeMapPrintedNodes(node.children)
+          );
+        }
+      });
+      return newMapPrintedNodes;
+    },
+    []
+  );
   useEffect(() => {
     let newMapPrintedNodes = computeMapPrintedNodes(data);
-    console.debug(
-      "data updated, new mapPrintedNodes (nbNodes = ",
-      Object.keys(newMapPrintedNodes).length,
-      ") : ",
-      newMapPrintedNodes
-    );
     setMapPrintedNodes(newMapPrintedNodes);
   }, [data, computeMapPrintedNodes]);
   const computeSelectedNodes = () => {
-    return selected.map((nodeId) => {
+    if (!selected) {
+      return [];
+    }
+    return selected == null ? void 0 : selected.map((nodeId) => {
       return mapPrintedNodes[nodeId];
     });
   };
-  const handleNodeToggle = (e, nodeIds) => {
+  const handleNodeToggle = (_e, nodeIds) => {
     nodeIds.every((nodeId) => {
-      if (!expanded.includes(nodeId)) {
+      if (!(expanded == null ? void 0 : expanded.includes(nodeId))) {
         onTreeBrowse && onTreeBrowse(nodeId);
         return false;
       }
@@ -102,18 +112,61 @@ const TreeViewFinder = (props) => {
     });
     setExpanded(nodeIds);
   };
-  const handleNodeSelect = (e, values) => {
-    if (multiselect) {
+  useEffect(() => {
+    if (!selectedProp) {
+      return;
+    }
+    if (selectedProp.length > 0) {
+      setSelected((oldSelectedNodes) => [
+        ...oldSelectedNodes ? oldSelectedNodes : [],
+        ...selectedProp
+      ]);
+    }
+  }, [selectedProp]);
+  useEffect(() => {
+    if (!expandedProp || expandedProp.length === 0) {
+      return;
+    }
+    if (expandedProp.length > 0) {
+      setExpanded((oldExpandedNodes) => [
+        ...oldExpandedNodes ? oldExpandedNodes : [],
+        ...expandedProp
+      ]);
+    }
+  }, [expandedProp]);
+  useEffect(() => {
+    if (!selectedProp) {
+      return;
+    }
+    if (selectedProp.length > 0 && autoScrollAllowed) {
+      const isNodeExpanded = expandedProp == null ? void 0 : expandedProp.every(
+        (nodeId) => expanded == null ? void 0 : expanded.includes(nodeId)
+      );
+      const lastScrollRef = scrollRef.current[scrollRef.current.length - 1];
+      if (isNodeExpanded && lastScrollRef) {
+        lastScrollRef.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+          inline: "center"
+        });
+        setAutoScrollAllowed(false);
+      }
+    }
+  }, [expanded, selectedProp, expandedProp, data, autoScrollAllowed]);
+  const handleNodeSelect = (_e, values) => {
+    if (multiSelect && Array.isArray(values)) {
       setSelected(
         values.filter((nodeId) => isSelectable(mapPrintedNodes[nodeId]))
       );
     } else {
-      if (selected.includes(values)) {
-        setSelected([]);
-      } else {
-        setSelected(
-          isSelectable(mapPrintedNodes[values]) ? [values] : []
-        );
+      if (!Array.isArray(values)) {
+        if (selected == null ? void 0 : selected.includes(values)) {
+          setSelected([]);
+        } else {
+          setSelected(
+            isSelectable(mapPrintedNodes[values]) ? [values] : []
+          );
+        }
       }
     }
   };
@@ -121,10 +174,16 @@ const TreeViewFinder = (props) => {
     if (validationButtonText) {
       return validationButtonText;
     } else {
+      let buttonLabelId = "";
+      if (Array.isArray(selectedProp)) {
+        buttonLabelId = (selectedProp == null ? void 0 : selectedProp.length) > 0 ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+      } else {
+        buttonLabelId = selectedProp ? "treeview_finder/replaceElementsValidation" : "treeview_finder/addElementsValidation";
+      }
       return intl.formatMessage(
-        { id: "treeview_finder/addElementsValidation" },
+        { id: buttonLabelId },
         {
-          nbElements: selected.length
+          nbElements: selected == null ? void 0 : selected.length
         }
       );
     }
@@ -133,7 +192,7 @@ const TreeViewFinder = (props) => {
     if (!node) {
       return null;
     }
-    if (isSelectable(node) && selected.find((nodeId) => nodeId === node.id)) {
+    if (isSelectable(node) && (selected == null ? void 0 : selected.find((nodeId) => nodeId === node.id))) {
       return /* @__PURE__ */ jsx(Check, { className: composeClasses(classes, cssLabelIcon) });
     } else {
       if (node.icon) {
@@ -173,18 +232,35 @@ const TreeViewFinder = (props) => {
             className: composeClasses(classes, cssIcon)
           }
         ) : null,
+        ref: (element) => {
+          if (selectedProp == null ? void 0 : selectedProp.includes(node.id)) {
+            scrollRef.current.push(element);
+          }
+        },
         children: Array.isArray(node.children) ? node.children.length ? node.children.sort(sortMethod).map((child) => renderTree(child)) : [false] : null
       },
       node.id
     );
   };
+  const getTreeViewSelectionProps = () => {
+    if (!multiSelect) {
+      return {
+        multiSelect: false,
+        selected: selected && selected.length > 0 ? selected.at(0) : ""
+      };
+    }
+    return {
+      multiSelect: true,
+      selected: selected ?? []
+    };
+  };
   return /* @__PURE__ */ jsxs(
     Dialog,
     {
       open,
       onClose: (e, r) => {
         if (r === "escapeKeyDown" || r === "backdropClick") {
-          onClose([]);
+          onClose && onClose([]);
           setSelected([]);
         }
       },
@@ -196,21 +272,20 @@ const TreeViewFinder = (props) => {
       children: [
         /* @__PURE__ */ jsx(DialogTitle, { id: "TreeViewFindertitle", children: title ? title : intl.formatMessage(
           { id: "treeview_finder/finderTitle" },
-          { multiselect }
+          { multiSelect }
         ) }),
         /* @__PURE__ */ jsxs(DialogContent, { children: [
           /* @__PURE__ */ jsx(DialogContentText, { children: contentText ? contentText : intl.formatMessage(
             { id: "treeview_finder/contentText" },
-            { multiselect }
+            { multiSelect }
           ) }),
           /* @__PURE__ */ jsx(
             TreeView,
             {
               expanded,
-              selected,
               onNodeToggle: handleNodeToggle,
               onNodeSelect: handleNodeSelect,
-              multiSelect: multiselect,
+              ...getTreeViewSelectionProps(),
               children: data && Array.isArray(data) ? data.sort(sortMethod).map((child) => renderTree(child)) : null
             }
           )
@@ -221,8 +296,9 @@ const TreeViewFinder = (props) => {
             {
               style: { float: "left", margin: "5px" },
               onClick: () => {
-                onClose([]);
+                onClose && onClose([]);
                 setSelected([]);
+                setAutoScrollAllowed(true);
               },
               ...cancelButtonProps
             }
@@ -233,10 +309,11 @@ const TreeViewFinder = (props) => {
               variant: "outlined",
               style: { float: "left", margin: "5px" },
               onClick: () => {
-                onClose(computeSelectedNodes());
+                onClose && onClose(computeSelectedNodes());
                 setSelected([]);
+                setAutoScrollAllowed(true);
               },
-              disabled: selected.length === 0,
+              disabled: isValidationDisabled(),
               children: getValidationButtonText()
             }
           )
@@ -245,39 +322,6 @@ const TreeViewFinder = (props) => {
     }
   );
 };
-TreeViewFinder.propTypes = {
-  // Controlled
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func,
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string.isRequired,
-      name: PropTypes.string.isRequired,
-      children: PropTypes.array
-    })
-  ).isRequired,
-  onTreeBrowse: PropTypes.func,
-  //uncontrolled
-  classes: PropTypes.object,
-  title: PropTypes.string,
-  contentText: PropTypes.string,
-  validationButtonText: PropTypes.string,
-  defaultSelected: PropTypes.arrayOf(PropTypes.string),
-  defaultExpanded: PropTypes.arrayOf(PropTypes.string),
-  onlyLeaves: PropTypes.bool,
-  multiselect: PropTypes.bool,
-  sortMethod: PropTypes.func,
-  cancelButtonProps: PropTypes.object,
-  className: PropTypes.string
-};
-TreeViewFinder.defaultProps = {
-  defaultSelected: [],
-  defaultExpanded: [],
-  onlyLeaves: true,
-  multiselect: false,
-  sortMethod: void 0,
-  classes: {}
-};
 const nestedGlobalSelectorsStyles = toNestedGlobalSelectors(
   defaultStyles,
   generateTreeViewFinderClass

package/dist/components/dialogs/custom-mui-dialog.d.ts

@@ -0,0 +1,21 @@
+import { MergedFormContextProps } from '../react-hook-form/provider/custom-form-provider';
+import { FieldErrors, UseFormReturn } from 'react-hook-form';
+import { default as React, FunctionComponent } from 'react';
+
+import * as yup from 'yup';
+interface ICustomMuiDialog {
+    open: boolean;
+    formSchema: yup.AnySchema;
+    formMethods: UseFormReturn<any> | MergedFormContextProps;
+    onClose: (event: React.MouseEvent) => void;
+    onSave: (data: any) => void;
+    onValidationError?: (errors: FieldErrors) => void;
+    titleId: string;
+    disabledSave?: boolean;
+    removeOptional?: boolean;
+    onCancel?: () => void;
+    children: React.ReactNode;
+    isDataFetching?: boolean;
+}
+declare const CustomMuiDialog: FunctionComponent<ICustomMuiDialog>;
+export default CustomMuiDialog;

package/dist/components/dialogs/custom-mui-dialog.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormattedMessage } from "react-intl";
+import { Dialog, LinearProgress, DialogTitle, Grid, DialogContent, DialogActions } from "@mui/material";
+import SubmitButton from "../react-hook-form/utils/submit-button.js";
+import CancelButton from "../react-hook-form/utils/cancel-button.js";
+import CustomFormProvider from "../react-hook-form/provider/custom-form-provider.js";
+const styles = {
+  dialogPaper: {
+    ".MuiDialog-paper": {
+      width: "auto",
+      minWidth: "1100px",
+      margin: "auto"
+    }
+  }
+};
+const CustomMuiDialog = ({
+  open,
+  formSchema,
+  formMethods,
+  onClose,
+  onSave,
+  isDataFetching = false,
+  onValidationError,
+  titleId,
+  disabledSave,
+  removeOptional = false,
+  onCancel,
+  children
+}) => {
+  const { handleSubmit } = formMethods;
+  const handleCancel = (event) => {
+    onCancel && onCancel();
+    onClose(event);
+  };
+  const handleClose = (event, reason) => {
+    if (reason === "backdropClick" && onCancel) {
+      onCancel();
+    }
+    onClose(event);
+  };
+  const handleValidate = (data) => {
+    onSave(data);
+    onClose(data);
+  };
+  const handleValidationError = (errors) => {
+    onValidationError && onValidationError(errors);
+  };
+  return /* @__PURE__ */ jsx(
+    CustomFormProvider,
+    {
+      ...formMethods,
+      validationSchema: formSchema,
+      removeOptional,
+      children: /* @__PURE__ */ jsxs(
+        Dialog,
+        {
+          sx: styles.dialogPaper,
+          open,
+          onClose: handleClose,
+          fullWidth: true,
+          children: [
+            isDataFetching && /* @__PURE__ */ jsx(LinearProgress, {}),
+            /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 11, children: /* @__PURE__ */ jsx(FormattedMessage, { id: titleId }) }) }),
+            /* @__PURE__ */ jsx(DialogContent, { children }),
+            /* @__PURE__ */ jsxs(DialogActions, { children: [
+              /* @__PURE__ */ jsx(CancelButton, { onClick: handleCancel }),
+              /* @__PURE__ */ jsx(
+                SubmitButton,
+                {
+                  variant: "outlined",
+                  disabled: disabledSave,
+                  onClick: handleSubmit(
+                    handleValidate,
+                    handleValidationError
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  CustomMuiDialog as default
+};

package/dist/components/dialogs/description-modification-dialog.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+
+export interface IDescriptionModificationDialog {
+    elementUuid: string;
+    description: string;
+    open: boolean;
+    onClose: () => void;
+    updateElement: (uuid: string, data: Record<string, string>) => Promise<void>;
+}
+declare const DescriptionModificationDialog: FunctionComponent<IDescriptionModificationDialog>;
+export default DescriptionModificationDialog;

package/dist/components/dialogs/description-modification-dialog.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import "../../utils/yup-config.js";
+import { FieldConstants } from "../filter/constants/field-constants.js";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useSnackMessage } from "../../hooks/useSnackMessage.js";
+import CustomMuiDialog from "./custom-mui-dialog.js";
+import ExpandingTextField from "../react-hook-form/ExpandingTextField.js";
+import { Box } from "@mui/material";
+import * as yup from "yup";
+const schema = yup.object().shape({
+  [FieldConstants.DESCRIPTION]: yup.string().max(500, "descriptionLimitError")
+});
+const DescriptionModificationDialog = ({ elementUuid, description, open, onClose, updateElement }) => {
+  const { snackError } = useSnackMessage();
+  const emptyFormData = {
+    [FieldConstants.DESCRIPTION]: description ?? ""
+  };
+  const methods = useForm({
+    defaultValues: emptyFormData,
+    resolver: yupResolver(schema)
+  });
+  const { reset } = methods;
+  const onCancel = () => {
+    reset({
+      [FieldConstants.DESCRIPTION]: ""
+    });
+    onClose();
+  };
+  const onSubmit = useCallback(
+    (data) => {
+      updateElement(elementUuid, {
+        [FieldConstants.DESCRIPTION]: data[FieldConstants.DESCRIPTION].trim()
+      }).catch((error) => {
+        snackError({
+          messageTxt: error.message,
+          headerId: "descriptionModificationError"
+        });
+      });
+    },
+    [elementUuid, updateElement, snackError]
+  );
+  return /* @__PURE__ */ jsxs(
+    CustomMuiDialog,
+    {
+      open,
+      onClose: onCancel,
+      onSave: onSubmit,
+      formSchema: schema,
+      formMethods: methods,
+      titleId: "description",
+      removeOptional: true,
+      children: [
+        /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
+          ExpandingTextField,
+          {
+            name: FieldConstants.DESCRIPTION,
+            label: "descriptionProperty",
+            minRows: 3,
+            rows: 5
+          }
+        ) }),
+        " "
+      ]
+    }
+  );
+};
+export {
+  DescriptionModificationDialog as default
+};

package/dist/components/dialogs/popup-confirmation-dialog.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponent } from 'react';
+
+export interface PopupConfirmationDialogProps {
+    message: string;
+    validateButtonLabel: string;
+    openConfirmationPopup: boolean;
+    setOpenConfirmationPopup: (value: boolean) => void;
+    handlePopupConfirmation: () => void;
+}
+declare const PopupConfirmationDialog: FunctionComponent<PopupConfirmationDialogProps>;
+export default PopupConfirmationDialog;

package/dist/components/dialogs/popup-confirmation-dialog.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import { DialogContentText } from "@mui/material";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { FormattedMessage } from "react-intl";
+import CancelButton from "../react-hook-form/utils/cancel-button.js";
+const PopupConfirmationDialog = ({
+  message,
+  validateButtonLabel,
+  openConfirmationPopup,
+  setOpenConfirmationPopup,
+  handlePopupConfirmation
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: openConfirmationPopup,
+      "aria-labelledby": "dialog-title-change-equipment-type",
+      children: [
+        /* @__PURE__ */ jsx(DialogTitle, { id: "dialog-title-change-equipment-type", children: "Confirmation" }),
+        /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContentText, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: message }) }) }),
+        /* @__PURE__ */ jsxs(DialogActions, { children: [
+          /* @__PURE__ */ jsx(CancelButton, { onClick: () => setOpenConfirmationPopup(false) }),
+          /* @__PURE__ */ jsx(Button, { onClick: handlePopupConfirmation, variant: "outlined", children: /* @__PURE__ */ jsx(FormattedMessage, { id: validateButtonLabel ?? "validate" }) })
+        ] })
+      ]
+    }
+  );
+};
+PopupConfirmationDialog.defaultProps = {
+  validateButtonLabel: void 0
+};
+export {
+  PopupConfirmationDialog as default
+};

package/dist/components/filter/constants/equipment-types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2021, 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 declare const Line: {
+    label: string;
+    type: string;
+};
+export declare const Generator: {
+    label: string;
+    type: string;
+};
+export declare const Load: {
+    label: string;
+    type: string;
+};
+export declare const Battery: {
+    label: string;
+    type: string;
+};
+export declare const SVC: {
+    label: string;
+    type: string;
+};
+export declare const DanglingLine: {
+    label: string;
+    type: string;
+};
+export declare const LCC: {
+    label: string;
+    type: string;
+};
+export declare const VSC: {
+    label: string;
+    type: string;
+};
+export declare const Hvdc: {
+    label: string;
+    type: string;
+};
+export declare const BusBar: {
+    label: string;
+    type: string;
+};
+export declare const TwoWindingTransfo: {
+    label: string;
+    type: string;
+};
+export declare const ThreeWindingTransfo: {
+    label: string;
+    type: string;
+};
+export declare const ShuntCompensator: {
+    label: string;
+    type: string;
+};
+export declare const VoltageLevel: {
+    label: string;
+    type: string;
+};
+export declare const Substation: {
+    label: string;
+    type: string;
+};
+export declare const noSelectionForCopy: {
+    sourceCaseUuid: null;
+    name: null;
+    description: null;
+    parentDirectoryUuid: null;
+};