@gridsuite/commons-ui 0.117.0 → 0.118.0

package/dist/components/directoryItemSelector/DirectoryItemSelector.js

@@ -180,27 +180,27 @@ function DirectoryItemSelector({
   const fetchDirectoryChildren = useCallback(
     (nodeId) => {
       const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
-      fetchDirectoryContent(nodeId, typeList).then((children) => {
+      return fetchDirectoryContent(nodeId, typeList).then((children) => {
         const childrenMatchedTypes = children.filter(
           (item) => contentFilter().has(item.type)
         );
         if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
-          fetchElementsInfos(
+          return fetchElementsInfos(
             childrenMatchedTypes.map((e) => e.elementUuid),
             types,
             equipmentTypes
           ).then((childrenWithMetadata) => {
-            const filtredChildren = itemFilter ? childrenWithMetadata.filter((val) => {
+            const filteredChildren = itemFilter ? childrenWithMetadata.filter((val) => {
               if (val.type === ElementType.DIRECTORY) {
                 return true;
               }
               return itemFilter(val);
             }) : childrenWithMetadata;
-            addToDirectory(nodeId, filtredChildren);
+            addToDirectory(nodeId, filteredChildren);
           });
-        } else {
-          addToDirectory(nodeId, childrenMatchedTypes);
         }
+        addToDirectory(nodeId, childrenMatchedTypes);
+        return Promise.resolve();
       }).catch((error) => {
         console.warn(`Could not update subs (and content) of '${nodeId}' : ${error.message}`);
       });
@@ -208,13 +208,11 @@ function DirectoryItemSelector({
     [types, equipmentTypes, itemFilter, contentFilter, addToDirectory]
   );
   const fetchNodeChildrenIfNeeded = useCallback(
-    (nodeId, delay = 0) => {
-      setTimeout(() => {
-        const node = nodeMap.current[nodeId];
-        if (node && (!node.children || node.children.length === 0) && node.type === ElementType.DIRECTORY) {
-          fetchDirectoryChildren(nodeId);
-        }
-      }, delay);
+    async (nodeId) => {
+      const node = nodeMap.current[nodeId];
+      if (node && (!node.children || node.children.length === 0) && node.type === ElementType.DIRECTORY) {
+        await fetchDirectoryChildren(nodeId);
+      }
     },
     [fetchDirectoryChildren]
   );
@@ -224,15 +222,15 @@ function DirectoryItemSelector({
     }
     const expandedArray = await getExpansionPathsForSelected(selected, expanded);
     setAutoExpandedNodes(expandedArray);
-    fetchChildrenForExpandedNodes(expandedArray, fetchNodeChildrenIfNeeded);
+    await fetchChildrenForExpandedNodes(expandedArray, fetchNodeChildrenIfNeeded);
     return true;
   }, [selected, expanded, fetchNodeChildrenIfNeeded]);
-  const handleProvidedExpansion = useCallback(() => {
+  const handleProvidedExpansion = useCallback(async () => {
     if (!expanded || expanded.length === 0) {
       return false;
     }
     setAutoExpandedNodes(expanded);
-    fetchChildrenForExpandedNodes(expanded, fetchNodeChildrenIfNeeded);
+    await fetchChildrenForExpandedNodes(expanded, fetchNodeChildrenIfNeeded);
     return true;
   }, [expanded, fetchNodeChildrenIfNeeded]);
   const handleLastSelectedExpansion = useCallback(async () => {
@@ -241,14 +239,18 @@ function DirectoryItemSelector({
       return false;
     }
     setAutoExpandedNodes(expandPath);
-    fetchChildrenForExpandedNodes(expandPath, fetchNodeChildrenIfNeeded);
+    await fetchChildrenForExpandedNodes(expandPath, fetchNodeChildrenIfNeeded);
     return true;
   }, [fetchNodeChildrenIfNeeded]);
   const initializeExpansion = useCallback(async () => {
     const selectedSuccess = await handleSelectedExpansion();
-    if (selectedSuccess) return;
-    const expandedSuccess = handleProvidedExpansion();
-    if (expandedSuccess) return;
+    if (selectedSuccess) {
+      return;
+    }
+    const expandedSuccess = await handleProvidedExpansion();
+    if (expandedSuccess) {
+      return;
+    }
     await handleLastSelectedExpansion();
   }, [handleSelectedExpansion, handleProvidedExpansion, handleLastSelectedExpansion]);
   useEffect(() => {

package/dist/components/directoryItemSelector/utils.d.ts

@@ -26,10 +26,14 @@ export declare function fetchDirectoryPathSafe(directoryId: UUID): Promise<Eleme
  */
 export declare function initializeFromLastSelected(): Promise<UUID[] | null>;
 /**
- * Fetches expansion paths for multiple selected items
+ * Fetches expansion paths for multiple selected items, collecting unique parent directories
+ * (excluding the selected items themselves) and sorting them by their minimum depth across
+ * all paths. This ensures parents appear before their descendants in the returned array,
+ * which is crucial for sequential fetching to avoid loading children before parents are
+ * fully populated in the node map.
  * @param selectedIds Array of selected item UUIDs
  * @param expanded Optional existing expanded nodes
- * @returns Promise resolving to combined expansion array
+ * @returns Promise resolving to combined expansion array sorted by depth
  */
 export declare function getExpansionPathsForSelected(selectedIds: UUID[], expanded?: UUID[]): Promise<UUID[]>;
 /**
@@ -44,9 +48,8 @@ export declare function saveLastSelectedDirectoryFromNode(node: {
     }>;
 }): Promise<void>;
 /**
- * Fetches children for expanded nodes with staggered delay to avoid overwhelming the server
+ * Fetches children for expanded nodes sequentially to ensure parent nodes are loaded before children
  * @param expandedNodes Array of node UUIDs to fetch children for
  * @param fetchChildrenCallback Function to fetch children for a single node
- * @param delayBetweenRequests Delay in milliseconds between requests (default: 100ms)
  */
-export declare function fetchChildrenForExpandedNodes(expandedNodes: UUID[], fetchChildrenCallback: (nodeId: UUID, delay: number) => void, delayBetweenRequests?: number): void;
+export declare function fetchChildrenForExpandedNodes(expandedNodes: UUID[], fetchChildrenCallback: (nodeId: UUID) => Promise<void>): Promise<void>;

package/dist/components/directoryItemSelector/utils.js

@@ -54,18 +54,23 @@ async function initializeFromLastSelected() {
 }
 async function getExpansionPathsForSelected(selectedIds, expanded = []) {
   const expandedSet = new Set(expanded);
-  const fetchPromises = selectedIds.map(async (selectedId) => {
-    const path = await fetchDirectoryPathSafe(selectedId);
-    if (path && path.length > 0) {
-      path.forEach((element, index) => {
-        if (index < path.length - 1) {
-          expandedSet.add(element.elementUuid);
+  const idToMinIndex = /* @__PURE__ */ new Map();
+  const paths = await Promise.all(selectedIds.map(fetchDirectoryPathSafe));
+  paths.filter((p) => !!p && p.length > 0).forEach((path) => {
+    path.forEach((element, index) => {
+      if (index < path.length - 1) {
+        const id = element.elementUuid;
+        expandedSet.add(id);
+        if (!idToMinIndex.has(id) || index < idToMinIndex.get(id)) {
+          idToMinIndex.set(id, index);
         }
-      });
-    }
+      }
+    });
   });
-  await Promise.all(fetchPromises);
-  return Array.from(expandedSet);
+  const expandedArray = Array.from(expandedSet).sort(
+    (a, b) => (idToMinIndex.get(a) ?? Infinity) - (idToMinIndex.get(b) ?? Infinity)
+  );
+  return expandedArray;
 }
 async function saveLastSelectedDirectoryFromNode(node) {
   let lastSelectedDirId;
@@ -78,10 +83,11 @@ async function saveLastSelectedDirectoryFromNode(node) {
     await saveLastSelectedDirectory(lastSelectedDirId);
   }
 }
-function fetchChildrenForExpandedNodes(expandedNodes, fetchChildrenCallback, delayBetweenRequests = 100) {
-  expandedNodes.forEach((nodeId, index) => {
-    fetchChildrenCallback(nodeId, index * delayBetweenRequests);
-  });
+async function fetchChildrenForExpandedNodes(expandedNodes, fetchChildrenCallback) {
+  await expandedNodes.reduce(async (promise, nodeId) => {
+    await promise;
+    return fetchChildrenCallback(nodeId);
+  }, Promise.resolve());
 }
 export {
   clearLastSelectedDirectory,

package/dist/components/dnd-table/dnd-table.d.ts

@@ -23,6 +23,7 @@ interface DndTableProps {
     uploadButtonMessageId?: string;
     handleResetButton?: () => void;
     resetButtonMessageId?: string;
+    maxRows?: number;
 }
 export declare function DndTable(props: Readonly<DndTableProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dnd-table/dnd-table.js

@@ -5,7 +5,7 @@ import { Grid, TableContainer, Table, TableHead, TableRow, TableCell, Box, Table
 import { DragIndicator } from "@mui/icons-material";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
 import { useIntl } from "react-intl";
-import { SELECTED, MAX_ROWS_NUMBER, DndColumnType } from "./dnd-table.type.js";
+import { MAX_ROWS_NUMBER, SELECTED, DndColumnType } from "./dnd-table.type.js";
 import { DndTableBottomLeftButtons } from "./dnd-table-bottom-left-buttons.js";
 import { DndTableBottomRightButtons } from "./dnd-table-bottom-right-buttons.js";
 import { DndTableAddRowsDialog } from "./dnd-table-add-rows-dialog.js";
@@ -29,9 +29,8 @@ import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { TableNumericalInput } from "../inputs/reactHookForm/tableInputs/table-numerical-input.js";
 import { TableTextInput } from "../inputs/reactHookForm/tableInputs/table-text-input.js";
-import "../../utils/types/equipmentType.js";
-import "notistack";
 import "../../utils/conversionUtils.js";
+import "../../utils/types/equipmentType.js";
 import "../../utils/yupConfig.js";
 import "@react-querybuilder/material";
 import "../filter/expert/expertFilterConstants.js";
@@ -163,7 +162,8 @@ function DndTable(props) {
     handleUploadButton = void 0,
     uploadButtonMessageId = void 0,
     handleResetButton = void 0,
-    resetButtonMessageId = void 0
+    resetButtonMessageId = void 0,
+    maxRows = MAX_ROWS_NUMBER
   } = props;
   const intl = useIntl();
   const { getValues, setValue, setError, clearErrors } = useFormContext();
@@ -192,7 +192,7 @@ function DndTable(props) {
     );
   }
   const addNewRows = (numberOfRows) => {
-    if (currentRows.length + numberOfRows > MAX_ROWS_NUMBER) {
+    if (currentRows.length + numberOfRows > maxRows) {
       setError(arrayFormName, {
         type: "custom",
         message: intl.formatMessage(
@@ -200,7 +200,7 @@ function DndTable(props) {
             id: "MaximumRowNumberError"
           },
           {
-            value: MAX_ROWS_NUMBER
+            value: maxRows
           }
         )
       });

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

@@ -14,6 +14,6 @@ export interface UniqueNameInputProps {
     fullWidth?: boolean;
 }
 /**
- * Input component that constantly check if the field's value is available or not
+ * Input component that constantly checks if the field's value is available or not
  */
 export declare function UniqueNameInput({ name, label, elementType, autoFocus, onManualChangeCallback, formProps, currentName, activeDirectory, sx, fullWidth, }: Readonly<UniqueNameInputProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
 import { FormattedMessage } from "react-intl";
 import { TextField, InputAdornment, CircularProgress } from "@mui/material";
 import { Check } from "@mui/icons-material";
-import { useController, useFormContext } from "react-hook-form";
-import "../../../../utils/types/equipmentType.js";
-import { elementAlreadyExists } from "../../../../services/directory.js";
-import { useDebounce } from "../../../../hooks/useDebounce.js";
-import "localized-countries";
-import "localized-countries/data/fr";
-import "localized-countries/data/en";
-import "notistack";
-import { FieldConstants } from "../../../../utils/constants/fieldConstants.js";
-import "../../../../utils/conversionUtils.js";
-import "../../../../utils/yupConfig.js";
+import { useController } from "react-hook-form";
+import { useUniqueNameValidation } from "../../../../hooks/use-unique-name-validation.js";
 function UniqueNameInput({
   name,
   label,
@@ -26,77 +16,18 @@ function UniqueNameInput({
   sx,
   fullWidth = true
 }) {
-  var _a;
   const {
     field: { onChange, onBlur, value, ref },
-    fieldState: { error, isDirty }
+    fieldState: { error }
   } = useController({
     name
   });
-  const {
-    field: { value: selectedDirectory }
-  } = useController({
-    name: FieldConstants.DIRECTORY
+  const { isValidating } = useUniqueNameValidation({
+    name,
+    currentName,
+    elementType,
+    activeDirectory
   });
-  const {
-    setError,
-    clearErrors,
-    trigger,
-    formState: { errors }
-  } = useFormContext();
-  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
-  const directory = selectedDirectory || activeDirectory;
-  const handleCheckName = useCallback(
-    (nameValue) => {
-      if (nameValue !== currentName && directory) {
-        elementAlreadyExists(directory, nameValue, elementType).then((alreadyExist) => {
-          if (alreadyExist) {
-            setError(name, {
-              type: "validate",
-              message: "nameAlreadyUsed"
-            });
-          }
-        }).catch((e) => {
-          setError(name, {
-            type: "validate",
-            message: "nameValidityCheckErrorMsg"
-          });
-          console.error(e == null ? void 0 : e.message);
-        }).finally(() => {
-          clearErrors("root.isValidating");
-          trigger("root.isValidating");
-        });
-      } else {
-        trigger("root.isValidating");
-      }
-    },
-    [currentName, directory, elementType, setError, name, clearErrors, trigger]
-  );
-  const debouncedHandleCheckName = useDebounce(handleCheckName, 700);
-  useEffect(() => {
-    const trimmedValue = value.trim();
-    if (selectedDirectory) {
-      debouncedHandleCheckName(trimmedValue);
-    }
-    if (!isDirty) {
-      clearErrors(name);
-      return;
-    }
-    if (trimmedValue) {
-      clearErrors(name);
-      setError("root.isValidating", {
-        type: "validate",
-        message: "cantSubmitWhileValidating"
-      });
-      debouncedHandleCheckName(trimmedValue);
-    } else {
-      clearErrors("root.isValidating");
-      setError(name, {
-        type: "validate",
-        message: "nameEmpty"
-      });
-    }
-  }, [debouncedHandleCheckName, setError, clearErrors, name, value, isDirty, selectedDirectory]);
   const handleManualChange = (e) => {
     onChange(e.target.value);
     onManualChangeCallback == null ? void 0 : onManualChangeCallback();

package/dist/components/parameters/common/limitreductions/columns-definitions.js

@@ -8,12 +8,8 @@ import "@mui/icons-material";
 import "react-hook-form";
 import "../../../inputs/reactHookForm/provider/CustomFormProvider.js";
 import * as yup from "yup";
-import "../../../../utils/types/equipmentType.js";
-import "localized-countries";
-import "localized-countries/data/fr";
-import "localized-countries/data/en";
-import "notistack";
 import "../../../../utils/conversionUtils.js";
+import "../../../../utils/types/equipmentType.js";
 import "../../../filter/HeaderFilterForm.js";
 import { getNameElementEditorSchema } from "../name-element-editor/name-element-editor-utils.js";
 const LIMIT_REDUCTIONS_FORM = "limitReductionsForm";

package/dist/hooks/use-unique-name-validation.d.ts

@@ -0,0 +1,16 @@
+import { UUID } from 'crypto';
+import { ElementType } from '../utils';
+interface UseUniqueNameValidationParams {
+    name: string;
+    currentName?: string;
+    elementType: ElementType;
+    activeDirectory?: string;
+    elementExists?: (directory: UUID, name: string, type: ElementType) => Promise<boolean>;
+}
+export declare function useUniqueNameValidation({ name, currentName, elementType, activeDirectory, elementExists, }: UseUniqueNameValidationParams): {
+    isValidating: Partial<{
+        type: string | number;
+        message: import('react-hook-form').Message;
+    }> | undefined;
+};
+export {};

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

@@ -0,0 +1,92 @@
+import { useCallback, useEffect } from "react";
+import { useFormContext, useController } from "react-hook-form";
+import { FieldConstants } from "../utils/constants/fieldConstants.js";
+import "../utils/conversionUtils.js";
+import "react/jsx-runtime";
+import "@mui/icons-material";
+import "../utils/types/equipmentType.js";
+import "../utils/yupConfig.js";
+import { useDebounce } from "./useDebounce.js";
+import { elementAlreadyExists } from "../services/directory.js";
+function useUniqueNameValidation({
+  name,
+  currentName = "",
+  elementType,
+  activeDirectory,
+  elementExists = elementAlreadyExists
+}) {
+  var _a;
+  const {
+    setError,
+    clearErrors,
+    trigger,
+    formState: { errors, defaultValues }
+  } = useFormContext();
+  const {
+    field: { value },
+    fieldState: { isDirty }
+  } = useController({ name });
+  const {
+    field: { value: selectedDirectory }
+  } = useController({
+    name: FieldConstants.DIRECTORY
+  });
+  const defaultFieldValue = defaultValues == null ? void 0 : defaultValues[name];
+  const directory = selectedDirectory || activeDirectory;
+  const isValidating = (_a = errors.root) == null ? void 0 : _a.isValidating;
+  const handleCheckName = useCallback(
+    (nameValue) => {
+      if (nameValue !== currentName && directory) {
+        elementExists(directory, nameValue, elementType).then((alreadyExist) => {
+          if (alreadyExist) {
+            setError(name, {
+              type: "validate",
+              message: "nameAlreadyUsed"
+            });
+          }
+        }).catch(() => {
+          setError(name, {
+            type: "validate",
+            message: "nameValidityCheckErrorMsg"
+          });
+        }).finally(() => {
+          clearErrors("root.isValidating");
+          trigger("root.isValidating");
+        });
+      } else {
+        trigger("root.isValidating");
+      }
+    },
+    [currentName, directory, elementType, name, setError, clearErrors, trigger, elementExists]
+  );
+  const debouncedHandleCheckName = useDebounce(handleCheckName, 700);
+  useEffect(() => {
+    var _a2, _b;
+    const trimmedValue = (_a2 = value == null ? void 0 : value.trim) == null ? void 0 : _a2.call(value);
+    if (!trimmedValue) {
+      clearErrors("root.isValidating");
+      setError(name, {
+        type: "validate",
+        message: "nameEmpty"
+      });
+      return;
+    }
+    if (!isDirty || ((_b = defaultFieldValue == null ? void 0 : defaultFieldValue.trim) == null ? void 0 : _b.call(defaultFieldValue)) === trimmedValue) {
+      clearErrors(name);
+      return;
+    }
+    setError("root.isValidating", {
+      type: "validate",
+      message: "cantSubmitWhileValidating"
+    });
+    if (directory) {
+      debouncedHandleCheckName(trimmedValue);
+    }
+  }, [value, debouncedHandleCheckName, setError, clearErrors, name, isDirty, defaultFieldValue, directory]);
+  return {
+    isValidating
+  };
+}
+export {
+  useUniqueNameValidation
+};

package/dist/hooks/useModificationLabelComputer.js

@@ -54,6 +54,7 @@ const useModificationLabelComputer = () => {
           });
         case MODIFICATION_TYPES.CREATE_COUPLING_DEVICE.type:
         case MODIFICATION_TYPES.CREATE_VOLTAGE_LEVEL_TOPOLOGY.type:
+        case MODIFICATION_TYPES.CREATE_VOLTAGE_LEVEL_SECTION.type:
           return modificationMetadata.voltageLevelId;
         default:
           return modificationMetadata.equipmentId || "";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.117.0",
+    "version": "0.118.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",