@gridsuite/commons-ui 0.265.0 → 0.266.0

package/dist/features/network-modification-table/renderers/root-network-chip-cell.js

@@ -6,6 +6,7 @@ import { ActivableChip } from "../../../components/ui/inputs/ActivableChip.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "../../../utils/types/equipmentType.js";
+import { ModificationType } from "../../../utils/types/modificationType.js";
 import "@mui/icons-material";
 import { updateModificationStatusByRootNetwork } from "../../../services/networkModification.js";
 import "localized-countries";
@@ -54,6 +55,7 @@ function RootNetworkChipCell(props) {
   const [isLoading, setIsLoading] = useState(false);
   const { snackError } = useSnackMessage();
   const modificationUuid = data.uuid;
+  const isReferenceModificationOrInsideOne = data.type === ModificationType.MODIFICATION_REFERENCE || data.childFromShared;
   const isModificationActivated = useMemo(() => {
     if (rootNetwork.isCreating) {
       return true;
@@ -103,7 +105,7 @@ function RootNetworkChipCell(props) {
       label: rootNetwork.tag,
       tooltipMessage: rootNetwork.name,
       isActivated: isModificationActivated,
-      isDisabled: isLoading || isDisabled,
+      isDisabled: isLoading || isDisabled || isReferenceModificationOrInsideOne,
       onClick: handleModificationActivationByRootNetwork
     }
   );

package/dist/features/network-modification-table/row/modification-row.js

@@ -6,7 +6,7 @@ import { Draggable } from "@hello-pangea/dnd";
 import { useIntl } from "react-intl";
 import { BASE_MODIFICATION_TABLE_COLUMNS, AUTO_EXTENSIBLE_COLUMNS } from "../columns-definition.js";
 import { COLUMNS_WITHOUT_BORDER, createCellContentWrapperSx, createCellStyle, createRowSx, networkModificationTableStyles } from "../network-modification-table-styles.js";
-import { isCompositeModification } from "../utils.js";
+import { isCompositeModification, isReferenceModification, isTargetChildOfReference } from "../utils.js";
 import "../../../utils/conversionUtils.js";
 import "../../../utils/types/equipmentType.js";
 import "@mui/icons-material";
@@ -30,76 +30,84 @@ function ModificationRow({
     },
     [handleCellClick, row.original]
   );
-  return /* @__PURE__ */ jsx(Draggable, { draggableId: row.id, index: virtualRow.index, isDragDisabled: isRowDragDisabled, children: (provided, snapshot) => {
-    const { style, ...draggablePropsWithoutStyle } = provided.draggableProps;
-    return /* @__PURE__ */ jsx(
-      TableRow,
-      {
-        ref: provided.innerRef,
-        ...draggablePropsWithoutStyle,
-        "data-row-id": row.original.uuid,
-        sx: mergeSx(
-          networkModificationTableStyles.tableRow,
-          createRowSx(
-            theme,
-            isHighlighted,
-            snapshot.isDragging,
-            virtualRow,
-            row.depth,
-            isCompositeModification(row.original)
-          )
-        ),
-        children: row.getVisibleCells().map((cell) => {
-          const isNameColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.NAME.id;
-          const isDragHandle = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id;
-          const isCheckboxColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.SELECT.id;
-          const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
-          const cellWithoutBorders = (isExpanded || row.depth > 0) && COLUMNS_WITHOUT_BORDER.has(cell.column.columnDef.id ?? "");
-          if (isDragHandle) {
-            return /* @__PURE__ */ jsx(
-              TableCell,
-              {
-                sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-                children: /* @__PURE__ */ jsx(
-                  Box,
+  return /* @__PURE__ */ jsx(
+    Draggable,
+    {
+      draggableId: row.id,
+      index: virtualRow.index,
+      isDragDisabled: isRowDragDisabled || isTargetChildOfReference(row),
+      children: (provided, snapshot) => {
+        const { style, ...draggablePropsWithoutStyle } = provided.draggableProps;
+        return /* @__PURE__ */ jsx(
+          TableRow,
+          {
+            ref: provided.innerRef,
+            ...draggablePropsWithoutStyle,
+            "data-row-id": row.id,
+            sx: mergeSx(
+              networkModificationTableStyles.tableRow,
+              createRowSx(
+                theme,
+                isHighlighted,
+                snapshot.isDragging,
+                virtualRow,
+                row.depth,
+                isCompositeModification(row.original) || isReferenceModification(row.original)
+              )
+            ),
+            children: row.getVisibleCells().map((cell) => {
+              const isNameColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.NAME.id;
+              const isDragHandle = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.DRAG_HANDLE.id;
+              const isCheckboxColumn = cell.column.id === BASE_MODIFICATION_TABLE_COLUMNS.SELECT.id;
+              const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
+              const cellWithoutBorders = (isExpanded || row.depth > 0) && COLUMNS_WITHOUT_BORDER.has(cell.column.columnDef.id ?? "");
+              if (isDragHandle) {
+                return /* @__PURE__ */ jsx(
+                  TableCell,
                   {
-                    sx: createCellContentWrapperSx(theme, cellWithoutBorders),
-                    ...provided.dragHandleProps,
-                    "aria-label": intl.formatMessage({ id: "moveModification" }),
-                    children: cellContent
-                  }
-                )
-              },
-              cell.id
-            );
-          }
-          if (isCheckboxColumn) {
-            return /* @__PURE__ */ jsx(
-              TableCell,
-              {
-                sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-                onClick: () => handleCellClickCallback(cell.column.id),
-                children: /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
-              },
-              cell.id
-            );
+                    sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: createCellContentWrapperSx(theme, cellWithoutBorders),
+                        ...provided.dragHandleProps,
+                        "aria-label": intl.formatMessage({ id: "moveModification" }),
+                        children: cellContent
+                      }
+                    )
+                  },
+                  cell.id
+                );
+              }
+              if (isCheckboxColumn) {
+                return /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+                    onClick: () => handleCellClickCallback(cell.column.id),
+                    children: /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
+                  },
+                  cell.id
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
+                  onClick: () => handleCellClickCallback(cell.column.id),
+                  children: isNameColumn ? (
+                    // NameCell owns its own borders entirely
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  ) : /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
+                },
+                cell.id
+              );
+            })
           }
-          return /* @__PURE__ */ jsx(
-            TableCell,
-            {
-              sx: createCellStyle(cell, AUTO_EXTENSIBLE_COLUMNS.includes(cell.column.id)),
-              onClick: () => handleCellClickCallback(cell.column.id),
-              children: isNameColumn ? (
-                // NameCell owns its own borders entirely
-                flexRender(cell.column.columnDef.cell, cell.getContext())
-              ) : /* @__PURE__ */ jsx(Box, { sx: createCellContentWrapperSx(theme, cellWithoutBorders), children: cellContent })
-            },
-            cell.id
-          );
-        })
+        );
       }
-    );
-  } });
+    }
+  );
 }
 export {
   ModificationRow

package/dist/features/network-modification-table/use-modifications-drag-and-drop.js

@@ -7,7 +7,7 @@ import "@hello-pangea/dnd";
 import "react-intl";
 import "./columns-definition.js";
 import { DROP_FORBIDDEN_INDICATOR_BOTTOM, DROP_FORBIDDEN_INDICATOR_TOP, DROP_INDICATOR_BOTTOM, DROP_INDICATOR_TOP } from "./network-modification-table-styles.js";
-import { isCompositeModification, MAX_COMPOSITE_NESTING_DEPTH, findModificationInTree, isSharedModification, moveSubModificationInTree } from "./utils.js";
+import { isCompositeModification, isReferenceModification, isTargetChildOfReference, MAX_COMPOSITE_NESTING_DEPTH, findModificationInTree, moveSubModificationInTree } from "./utils.js";
 import "../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../utils/error.js";
 import "../../utils/types/equipmentType.js";
@@ -25,14 +25,18 @@ const clearRowDragIndicators = (container) => {
   });
   container?.querySelectorAll(`[${CHIP_ATTR}]`).forEach((chip) => chip.remove());
 };
-function getTargetCompositeUuid(droppingIntoExpandedComposite, targetRow) {
+function resolveTargetComposite(droppingIntoExpandedComposite, targetRow) {
   if (droppingIntoExpandedComposite) {
-    return targetRow.original.uuid;
+    return { rowKey: targetRow.id, uuid: targetRow.original.uuid };
   }
-  return targetRow.depth > 0 ? targetRow.getParentRow()?.original.uuid ?? null : null;
+  if (targetRow.depth > 0) {
+    const parent = targetRow.getParentRow();
+    return { rowKey: parent?.id ?? null, uuid: parent?.original.uuid ?? null };
+  }
+  return { rowKey: null, uuid: null };
 }
-function getTargetSiblings(targetCompositeUuid, rows) {
-  return targetCompositeUuid ? rows.filter((r) => r.depth > 0 && r.getParentRow()?.original.uuid === targetCompositeUuid) : rows.filter((r) => r.depth === 0);
+function getTargetSiblings(targetCompositeRowKey, rows) {
+  return targetCompositeRowKey ? rows.filter((r) => r.depth > 0 && r.getParentRow()?.id === targetCompositeRowKey) : rows.filter((r) => r.depth === 0);
 }
 function getContainerShadow(forbidden, isMovingDown) {
   if (forbidden) {
@@ -67,10 +71,15 @@ const useModificationsDragAndDrop = ({
   const isDropForbidden = useCallback(
     (sourceRow, targetRow) => {
       if (isCompositeModification(sourceRow.original)) {
+        if (isReferenceModification(targetRow.original) || isTargetChildOfReference(targetRow)) {
+          return true;
+        }
         const targetDepth = computeTargetDepth(sourceRow, targetRow);
-        return (sourceRow.original.maxDepth ?? 0) + targetDepth > MAX_COMPOSITE_NESTING_DEPTH || !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.original.uuid, [sourceRow.original]));
+        return (sourceRow.original.maxDepth ?? 0) + targetDepth > MAX_COMPOSITE_NESTING_DEPTH || !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.id, [sourceRow.original]));
+      }
+      if (isReferenceModification(sourceRow.original) || isReferenceModification(targetRow.original) || isTargetChildOfReference(targetRow)) {
+        return true;
       }
-      if (isSharedModification(sourceRow.original)) return true;
       return false;
     },
     [computeTargetDepth]
@@ -84,7 +93,7 @@ const useModificationsDragAndDrop = ({
       }
       const sourceRow = rows[source.index];
       const targetRow = rows[destination.index];
-      const el = containerRef.current?.querySelector(`[data-row-id="${targetRow?.original.uuid}"]`);
+      const el = containerRef.current?.querySelector(`[data-row-id="${targetRow?.id}"]`);
       if (!el) {
         return;
       }
@@ -110,33 +119,42 @@ const useModificationsDragAndDrop = ({
       if (isDropForbidden(sourceRow, targetRow)) {
         return;
       }
+      const movingRowKey = sourceRow.id;
       const movingUuid = sourceRow.original.uuid;
-      const sourceCompositeUuid = sourceRow.depth > 0 ? sourceRow.getParentRow()?.original.uuid ?? null : null;
+      const sourceParent = sourceRow.depth > 0 ? sourceRow.getParentRow() : void 0;
+      const sourceCompositeRowKey = sourceParent?.id ?? null;
+      const sourceContainerId = sourceParent?.original.uuid ?? null;
       const isDraggingDown = destination.index > source.index;
       const droppingIntoExpandedComposite = isDraggingDown && targetRow.getIsExpanded();
       const isSubRowInvolved = sourceRow.depth > 0 || targetRow.depth > 0;
-      const targetCompositeUuid = getTargetCompositeUuid(droppingIntoExpandedComposite, targetRow);
-      const sourceContainerId = sourceRow.depth > 0 ? sourceRow.getParentRow()?.original.uuid ?? null : null;
-      const targetContainerId = targetCompositeUuid;
+      const targetComposite = resolveTargetComposite(droppingIntoExpandedComposite, targetRow);
+      const targetContainerId = targetComposite.uuid;
       const previousModifications = [...composedModifications];
       let beforeUuid;
       if (droppingIntoExpandedComposite || isSubRowInvolved) {
-        const targetSiblings = getTargetSiblings(targetCompositeUuid, rows);
+        const targetSiblings = getTargetSiblings(targetComposite.rowKey, rows);
+        let landingSibling;
         if (droppingIntoExpandedComposite) {
-          beforeUuid = targetSiblings[0]?.original.uuid ?? null;
+          [landingSibling] = targetSiblings;
         } else {
-          const landingIndexInSiblings = targetSiblings.findIndex(
-            (r) => r.original.uuid === targetRow.original.uuid
-          );
+          const landingIndexInSiblings = targetSiblings.findIndex((r) => r.id === targetRow.id);
           const beforeSiblingIndex = isDraggingDown ? landingIndexInSiblings + 1 : landingIndexInSiblings;
-          beforeUuid = targetSiblings[beforeSiblingIndex]?.original.uuid ?? null;
+          landingSibling = targetSiblings[beforeSiblingIndex];
         }
+        const beforeRowKey = landingSibling?.id ?? null;
+        beforeUuid = landingSibling?.original.uuid ?? null;
         setComposedModifications(
-          (prev) => moveSubModificationInTree(movingUuid, sourceCompositeUuid, targetCompositeUuid, beforeUuid, prev)
+          (prev) => moveSubModificationInTree(
+            movingRowKey,
+            sourceCompositeRowKey,
+            targetComposite.rowKey,
+            beforeRowKey,
+            prev
+          )
         );
       } else {
-        const oldPosition = composedModifications.findIndex((m) => m.uuid === sourceRow.original.uuid);
-        const newPosition = composedModifications.findIndex((m) => m.uuid === targetRow.original.uuid);
+        const oldPosition = composedModifications.findIndex((m) => m.rowKey === sourceRow.id);
+        const newPosition = composedModifications.findIndex((m) => m.rowKey === targetRow.id);
         if (oldPosition === -1 || newPosition === -1 || oldPosition === newPosition || !currentNodeUuid) {
           return;
         }

package/dist/features/network-modification-table/use-modifications-selection.js

@@ -4,13 +4,13 @@ function normalizeCompositeSelection(rawSelection, roots) {
   const visit = (node) => {
     const children = node.subModifications;
     if (!children || children.length === 0) {
-      return next[node.uuid];
+      return next[node.rowKey];
     }
     const everyChildSelected = children.map((child) => visit(child)).every(Boolean);
     if (everyChildSelected) {
-      next[node.uuid] = true;
+      next[node.rowKey] = true;
     } else {
-      delete next[node.uuid];
+      delete next[node.rowKey];
     }
     return everyChildSelected;
   };
@@ -36,30 +36,30 @@ function propagateSelectionToLoadedDescendants(selection, roots) {
   let next = selection;
   let mutated = false;
   const visit = (node, ancestorSelected) => {
-    const effectiveSelected = ancestorSelected || next[node.uuid];
-    if (effectiveSelected && !next[node.uuid]) {
+    const effectiveSelected = ancestorSelected || next[node.rowKey];
+    if (effectiveSelected && !next[node.rowKey]) {
       if (!mutated) {
         next = { ...selection };
         mutated = true;
       }
-      next[node.uuid] = true;
+      next[node.rowKey] = true;
     }
     node.subModifications?.forEach((child) => visit(child, effectiveSelected));
   };
   roots.forEach((root) => visit(root, false));
   return mutated ? next : selection;
 }
-function collectAllUuids(mods) {
-  const uuids = /* @__PURE__ */ new Set();
+function collectAllRowKeys(mods) {
+  const rowKeys = /* @__PURE__ */ new Set();
   const visit = (nodes) => nodes.forEach((m) => {
-    uuids.add(m.uuid);
+    rowKeys.add(m.rowKey);
     visit(m.subModifications);
   });
   visit(mods);
-  return uuids;
+  return rowKeys;
 }
-function pruneStaleSelection(selection, allUuids) {
-  const pruned = Object.fromEntries(Object.entries(selection).filter(([uuid]) => allUuids.has(uuid)));
+function pruneStaleSelection(selection, allRowKeys) {
+  const pruned = Object.fromEntries(Object.entries(selection).filter(([rowKey]) => allRowKeys.has(rowKey)));
   return Object.keys(pruned).length === Object.keys(selection).length ? selection : pruned;
 }
 function useModificationsSelection({
@@ -86,8 +86,8 @@ function useModificationsSelection({
   useEffect(() => {
     setRowSelection((prev) => {
       const propagated = propagateSelectionToLoadedDescendants(prev, modifications);
-      const allUuids = collectAllUuids(modifications);
-      return pruneStaleSelection(propagated, allUuids);
+      const allRowKeys = collectAllRowKeys(modifications);
+      return pruneStaleSelection(propagated, allRowKeys);
     });
   }, [modifications]);
   return { rowSelection, onRowSelectionChange, lastClickedRowId, emitSelection };

package/dist/features/network-modification-table/utils.d.ts

@@ -4,7 +4,10 @@ import { ComposedModificationMetadata, NetworkModificationMetadata } from '../..
 export declare const MAX_COMPOSITE_NESTING_DEPTH = 5;
 export declare const formatToComposedModification: (modifications: NetworkModificationMetadata[]) => ComposedModificationMetadata[];
 export declare function isCompositeModification(modification: ComposedModificationMetadata | undefined): boolean;
-export declare function isSharedModification(modification: ComposedModificationMetadata | undefined): boolean;
+export declare function isReferenceModification(modification: ComposedModificationMetadata | undefined): boolean;
+export declare function isTargetChildOfReference(targetRow: {
+    original: ComposedModificationMetadata;
+}): boolean;
 export declare function findDepth(mods: ComposedModificationMetadata[], uuid: UUID, currentDepth?: number): number;
 export declare function removeUuidsFromTree(mods: ComposedModificationMetadata[], uuidsToRemove: Set<string>): ComposedModificationMetadata[];
 /**
@@ -13,14 +16,14 @@ export declare function removeUuidsFromTree(mods: ComposedModificationMetadata[]
  * @param composites result : all the composite modifications found
  */
 export declare function findAllLoadedCompositeModifications(modifications: ComposedModificationMetadata[], composites: ComposedModificationMetadata[]): void;
-export declare function findModificationInTree(uuid: string, mods: ComposedModificationMetadata[]): ComposedModificationMetadata | undefined;
+export declare function findModificationInTree(rowKey: UUID, mods: ComposedModificationMetadata[]): ComposedModificationMetadata | undefined;
 /**
- * in the tree, replaces the sub-modifications of 'parentModUuid' with 'subModifications' and returns the result
- * @param parentModUuid
- * @param subModifications new subModifications of parentModUuid
+ * in the tree, replaces the sub-modifications of 'parentRowKey' with 'subModifications' and returns the result
+ * @param parentRowKey
+ * @param subModifications new subModifications of parentRowKey
  * @param tree all the modifications of the tree
  */
-export declare function updateSubModificationsOfACompositeInTree(parentModUuid: string, subModifications: ComposedModificationMetadata[], tree: ComposedModificationMetadata[]): ComposedModificationMetadata[];
+export declare function updateSubModificationsOfACompositeInTree(parentRowKey: UUID, subModifications: ComposedModificationMetadata[], tree: ComposedModificationMetadata[]): ComposedModificationMetadata[];
 /**
  * Recursively merges already-loaded subModifications from the previous tree into a freshly
  * formatted tree (where all subModifications start as []). This ensures that when `modifications`
@@ -33,12 +36,17 @@ export declare function mergeSubModificationsIntoTree(nextMods: ComposedModifica
  */
 export declare function updateModificationFieldInTree(uuid: string, fields: Partial<ComposedModificationMetadata>, mods: ComposedModificationMetadata[]): ComposedModificationMetadata[];
 /**
- * @param movingUuid moved submodification uuid
- * @param sourceParentUuid composite from which movingUuid comes from. null if movingUuid is at the root level
- * @param targetParentUuid composite where movingUuid is moved. null if movingUuid is moved to the root level
- * @param beforeUuid movingUuid is moved just before beforeUuid. If null, movingUuid is moved to the end.
+ * @param movingRowKey moved submodification's internal row key
+ * @param sourceParentRowKey composite from which movingRowKey comes from. null if movingRowKey is at the root level
+ * @param targetParentRowKey composite where movingRowKey is moved. null if movingRowKey is moved to the root level
+ * @param beforeRowKey movingRowKey is moved just before beforeRowKey. If null, movingRowKey is moved to the end.
  * @param mods all the network modifications of the tree
  * @return mods updated according to the moved submodification
  */
-export declare function moveSubModificationInTree(movingUuid: UUID, sourceParentUuid: UUID | null, targetParentUuid: UUID | null, beforeUuid: UUID | null, mods: ComposedModificationMetadata[]): ComposedModificationMetadata[];
-export declare function fetchSubModificationsForExpandedRows(expandedIds: string[], mods: ComposedModificationMetadata[], setMods: Dispatch<SetStateAction<ComposedModificationMetadata[]>>, force?: boolean): void;
+export declare function moveSubModificationInTree(movingRowKey: UUID, sourceParentRowKey: UUID | null, targetParentRowKey: UUID | null, beforeRowKey: UUID | null, mods: ComposedModificationMetadata[]): ComposedModificationMetadata[];
+/**
+ * @param expandedRowKeys rowKeys of the rows that were just expanded — this is exactly what
+ * ExpandedState is keyed by now, since getRowId returns row.rowKey, so no translation is needed
+ * at the call site (unlike the previous resolveUuidFromRowId path-parsing scheme, now removed).
+ */
+export declare function fetchSubModificationsForExpandedRows(expandedRowKeys: UUID[], mods: ComposedModificationMetadata[], setMods: Dispatch<SetStateAction<ComposedModificationMetadata[]>>, force?: boolean): Promise<void>;