@gridsuite/commons-ui 0.265.0 → 0.267.0

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

@@ -8,7 +8,7 @@ import { MODIFICATION_ROW_HEIGHT, networkModificationTableStyles, createHeaderCe
 import { AUTO_EXTENSIBLE_COLUMNS } from "./columns-definition.js";
 import { useModificationsDragAndDrop } from "./use-modifications-drag-and-drop.js";
 import { useModificationsSelection } from "./use-modifications-selection.js";
-import { formatToComposedModification, findDepth, MAX_COMPOSITE_NESTING_DEPTH, mergeSubModificationsIntoTree, removeUuidsFromTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
+import { formatToComposedModification, findDepth, MAX_COMPOSITE_NESTING_DEPTH, mergeSubModificationsIntoTree, removeUuidsFromTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification, isReferenceModification } from "./utils.js";
 import "@mui/icons-material";
 import "react-intl";
 import "../../utils/conversionUtils.js";
@@ -85,7 +85,7 @@ function NetworkModificationsTable({
     findAllLoadedCompositeModifications(prevMods, loadedComposites);
     if (loadedComposites.length > 0) {
       fetchSubModificationsForExpandedRows(
-        loadedComposites.map((m) => m.uuid),
+        loadedComposites.map((m) => m.rowKey),
         nextMods,
         setComposedModifications,
         true
@@ -97,9 +97,11 @@ function NetworkModificationsTable({
       const nextExpanded = typeof updater === "function" ? updater(prevExpanded) : updater;
       const prevRecord = prevExpanded === true ? {} : prevExpanded;
       const nextRecord = nextExpanded === true ? {} : nextExpanded;
-      const newlyExpandedIds = Object.keys(nextRecord).filter((id) => nextRecord[id] && !prevRecord[id]);
+      const newlyExpandedRowKeys = Object.keys(nextRecord).filter(
+        (id) => nextRecord[id] && !prevRecord[id]
+      );
       setComposedModifications((prevMods) => {
-        fetchSubModificationsForExpandedRows(newlyExpandedIds, prevMods, setComposedModifications);
+        fetchSubModificationsForExpandedRows(newlyExpandedRowKeys, prevMods, setComposedModifications);
         return [...prevMods];
       });
       return nextExpanded;
@@ -157,9 +159,9 @@ function NetworkModificationsTable({
     state: { expanded, rowSelection },
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getSubRows: (row) => row.subModifications,
-    getRowId: (row) => row.uuid,
-    getRowCanExpand: (row) => isCompositeModification(row.original),
+    getSubRows: (originalRow) => originalRow.subModifications,
+    getRowId: (originalRow) => originalRow.rowKey,
+    getRowCanExpand: (row) => isCompositeModification(row.original) || isReferenceModification(row.original),
     enableRowSelection: true,
     enableSubRowSelection: true,
     enableExpanding: true,
@@ -192,15 +194,16 @@ function NetworkModificationsTable({
       return;
     }
     table.resetRowSelection();
-    const uuidsToReset = new Set(modificationUuidsToReset);
+    const targetUuids = new Set(modificationUuidsToReset);
+    const rowKeysToUnexpanded = /* @__PURE__ */ new Set();
     const collectAll = (mod) => {
-      uuidsToReset.add(mod.uuid);
+      rowKeysToUnexpanded.add(mod.rowKey);
       mod.subModifications?.forEach(collectAll);
     };
     const collectDescendants = (mods) => {
       mods.forEach((mod) => {
-        if (uuidsToReset.has(mod.uuid)) {
-          mod.subModifications?.forEach(collectAll);
+        if (targetUuids.has(mod.uuid)) {
+          collectAll(mod);
         } else {
           collectDescendants(mod.subModifications ?? []);
         }
@@ -212,7 +215,7 @@ function NetworkModificationsTable({
         return prev;
       }
       const next = { ...prev };
-      uuidsToReset.forEach((uuid) => delete next[uuid]);
+      rowKeysToUnexpanded.forEach((rowKey) => delete next[rowKey]);
       return next;
     });
   }, [modificationUuidsToReset, table]);

package/dist/features/network-modification-table/renderers/cell-renderers.d.ts

@@ -17,6 +17,7 @@ export declare function SelectCellRenderer({ row, table }: CCtx): import("react"
 export declare function NameHeaderRenderer({ table }: HCtx): import("react").JSX.Element;
 export declare function NameCellRenderer({ row, table, column }: CCtx): import("react").JSX.Element;
 export declare function DescriptionCellRenderer({ row, table }: CCtx): import("react").JSX.Element;
+export declare function ReferenceCellRenderer({ row, table }: CCtx): import("react").JSX.Element | null;
 export declare function SwitchCellRenderer({ row, table }: CCtx): import("react").JSX.Element;
 export declare function RootNetworkHeaderRenderer({ column, table }: HCtx): import("react").JSX.Element | null;
 export declare function RootNetworkCellRenderer({ row, column, table }: CCtx): import("react").JSX.Element | null;

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

@@ -11,6 +11,8 @@ import { DescriptionCell } from "./description-cell.js";
 import { SwitchCell } from "./switch-cell.js";
 import { RootNetworkChipCell } from "./root-network-chip-cell.js";
 import { createRootNetworkChipCellSx, networkModificationTableStyles } from "../network-modification-table-styles.js";
+import { isReferenceModification } from "../utils.js";
+import { ReferenceLinkCell } from "./reference-link-cell.js";
 function DragHandleRenderer({ table }) {
   return /* @__PURE__ */ jsx(DragHandleCell, { isRowDragDisabled: table.options.meta?.interaction.isRowDragDisabled ?? false });
 }
@@ -48,6 +50,13 @@ function DescriptionCellRenderer({ row, table }) {
     }
   );
 }
+function ReferenceCellRenderer({ row, table }) {
+  const { meta } = table.options;
+  if (isReferenceModification(row.original)) {
+    return /* @__PURE__ */ jsx(ReferenceLinkCell, { data: row.original, disabled: meta?.status.isDisabled });
+  }
+  return null;
+}
 function SwitchCellRenderer({ row, table }) {
   const { meta } = table.options;
   return /* @__PURE__ */ jsx(
@@ -95,6 +104,7 @@ export {
   DragHandleRenderer,
   NameCellRenderer,
   NameHeaderRenderer,
+  ReferenceCellRenderer,
   RootNetworkCellRenderer,
   RootNetworkHeaderRenderer,
   SelectCellRenderer,

package/dist/features/network-modification-table/renderers/index.js

@@ -1,4 +1,4 @@
-import { DescriptionCellRenderer, DragHandleRenderer, NameCellRenderer, NameHeaderRenderer, RootNetworkCellRenderer, RootNetworkHeaderRenderer, SelectCellRenderer, SelectHeaderRenderer, SwitchCellRenderer } from "./cell-renderers.js";
+import { DescriptionCellRenderer, DragHandleRenderer, NameCellRenderer, NameHeaderRenderer, ReferenceCellRenderer, RootNetworkCellRenderer, RootNetworkHeaderRenderer, SelectCellRenderer, SelectHeaderRenderer, SwitchCellRenderer } from "./cell-renderers.js";
 import { DepthBox } from "./depth-box.js";
 import { DescriptionCell } from "./description-cell.js";
 import { DragHandleCell } from "./drag-handle-cell.js";
@@ -18,6 +18,7 @@ export {
   NameCellRenderer,
   NameHeaderRenderer,
   NetworkModificationEditorNameHeader,
+  ReferenceCellRenderer,
   RootNetworkCellRenderer,
   RootNetworkChipCell,
   RootNetworkHeaderRenderer,

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

@@ -23,7 +23,7 @@ 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 "@material-symbols/svg-400/outlined/add_notes-fill.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";
@@ -211,7 +211,7 @@ function NameCell({ row, table, onChange }) {
       children: [
         renderDepthBox(),
         /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.nameCellInnerRow, children: [
-          isComposite && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.nameCellTogglerBox, children: /* @__PURE__ */ jsx(
+          row.getCanExpand() && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.nameCellTogglerBox, children: /* @__PURE__ */ jsx(
             IconButton,
             {
               size: "small",
@@ -224,7 +224,7 @@ function NameCell({ row, table, onChange }) {
               children: row.getIsExpanded() ? /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRight, { fontSize: "small" })
             }
           ) }),
-          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: isComposite && isEditing ? /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: isEditing ? /* @__PURE__ */ jsx(
             Box,
             {
               sx: mergeSx(networkModificationTableStyles.modificationLabel, {

package/dist/features/network-modification-table/renderers/reference-link-cell.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { ComposedModificationMetadata } from '../../../utils';
+export interface ReferenceLinkCellProps {
+    data: ComposedModificationMetadata;
+    disabled?: boolean;
+}
+export declare function ReferenceLinkCell({ data, disabled }: Readonly<ReferenceLinkCellProps>): React.JSX.Element;

package/dist/features/network-modification-table/renderers/reference-link-cell.js

@@ -0,0 +1,128 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { IconButton, Menu, ListItemIcon, ListItemText } from "@mui/material";
+import { useIntl, FormattedMessage } from "react-intl";
+import { LinkRounded } from "@mui/icons-material";
+import "../../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../../utils/error.js";
+import "../../../utils/types/equipmentType.js";
+import { fetchAppsMetadata, isExploreMetadata } from "../../../services/appsMetadata.js";
+import { fetchNetworkModification } from "../../../services/networkModification.js";
+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 "react-hook-form";
+import "../../../components/ui/reactHookForm/provider/CustomFormProvider.js";
+import "yup";
+import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
+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-fill.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 { CustomMenuItem } from "../../../components/ui/menus/custom-nested-menu.js";
+import "react-resizable-panels";
+import "react-papaparse";
+import "react-dom";
+import "autosuggest-highlight/match";
+import "autosuggest-highlight/parse";
+import "clsx";
+import "../../../components/composite/filter/FilterCreationDialog.js";
+import "../../../components/composite/filter/HeaderFilterForm.js";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterForm.js";
+import "../../../components/composite/filter/expert/ExpertFilterEditionDialog.js";
+import "../../../components/composite/filter/expert/expertFilterConstants.js";
+import "react-querybuilder";
+import "uuid";
+import "../../../components/composite/filter/explicitNaming/ExplicitNamingFilterEditionDialog.js";
+import "../../../components/composite/filter/utils/filterFormUtils.js";
+import "@react-querybuilder/material";
+import "../../../components/composite/reactQueryBuilder/CustomReactQueryBuilder.js";
+import "../../../components/composite/reactQueryBuilder/PropertyValueEditor.js";
+import "../../../components/composite/agGridTable/BottomTableButtons.js";
+import "../../../components/composite/agGridTable/CustomAgGridTable.js";
+import "ag-grid-community";
+import "../../../components/composite/customAGGrid/customAggrid.js";
+import "../../../components/composite/customAGGrid/context/custom-aggrid-context.js";
+import "mathjs";
+import "../../../components/composite/report/report-viewer/log-table/log-table.js";
+import "react-window";
+import "../../../components/composite/report/report-treeview/treeview-item.js";
+import "../../../components/composite/report/report-viewer/context/report-viewer-context.js";
+import { DatasetLinkedIcon } from "../../../components/ui/icons/DatasetLinkedIcon.js";
+function ReferenceLinkCell({ data, disabled = false }) {
+  const intl = useIntl();
+  const { snackInfo, snackError } = useSnackMessage();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const open = Boolean(anchorEl);
+  const handleOpen = useCallback((event) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  }, []);
+  const handleMenuClose = useCallback(() => {
+    setAnchorEl(null);
+  }, []);
+  const handleCopyLink = useCallback(
+    (event) => {
+      event.stopPropagation();
+      setAnchorEl(null);
+      setIsLoading(true);
+      Promise.all([
+        fetchNetworkModification(data.uuid).then((res) => res.json()),
+        fetchAppsMetadata()
+      ]).then(([referenceInfos, metadata]) => {
+        const referenceId = referenceInfos?.referenceId;
+        const exploreUrl = metadata?.find(isExploreMetadata)?.url;
+        if (!referenceId || !exploreUrl) {
+          throw new Error(
+            `Cannot build reference link: ${!referenceId ? "referenceId" : "exploreUrl"} is missing`
+          );
+        }
+        const link = `${exploreUrl}/elements/${referenceId}`;
+        return navigator.clipboard.writeText(link).then(() => snackInfo({ headerId: "linkCopied" }));
+      }).catch((error) => snackWithFallback(snackError, error, { headerId: "linkCopyError" })).finally(() => setIsLoading(false));
+    },
+    [data.uuid, snackInfo, snackError]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CustomTooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: "importComposites.shared" }), children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { disabled: disabled || isLoading, onClick: handleOpen, children: /* @__PURE__ */ jsx(DatasetLinkedIcon, {}) }) }) }),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        anchorEl,
+        open,
+        onClose: handleMenuClose,
+        slotProps: {
+          paper: {
+            sx: {
+              maxWidth: 220
+            }
+          },
+          list: {
+            dense: true,
+            sx: { py: 0.25 }
+          }
+        },
+        children: /* @__PURE__ */ jsxs(CustomMenuItem, { onClick: handleCopyLink, sx: { minHeight: 0, py: 0.25, px: 1 }, children: [
+          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 24 }, children: /* @__PURE__ */ jsx(LinkRounded, { sx: { fontSize: 18, transform: "rotate(-50deg)" } }) }),
+          /* @__PURE__ */ jsx(ListItemText, { primary: intl.formatMessage({ id: "copyLink" }) })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ReferenceLinkCell
+};

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;
         }