@gridsuite/commons-ui 0.194.0 → 0.196.0

package/dist/components/network-modification-table/renderers/network-modification-node-editor-name-header.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+export interface NetworkModificationEditorNameHeaderProps {
+    modificationCount?: number;
+    notificationMessageId?: string;
+    isFetchingModifications: boolean;
+    isImpactedByNotification: () => boolean;
+    pendingState: boolean;
+}
+export declare function NetworkModificationEditorNameHeader({ modificationCount, isFetchingModifications, isImpactedByNotification, notificationMessageId, pendingState, }: Readonly<NetworkModificationEditorNameHeaderProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/network-modification-table/renderers/network-modification-node-editor-name-header.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box, CircularProgress, Typography } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+function NetworkModificationEditorNameHeader({
+  modificationCount,
+  isFetchingModifications,
+  isImpactedByNotification,
+  notificationMessageId,
+  pendingState
+}) {
+  if (isImpactedByNotification() && notificationMessageId) {
+    return /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.modificationNameHeader, children: [
+      /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.icon, children: /* @__PURE__ */ jsx(CircularProgress, { size: "1em", sx: networkModificationTableStyles.modificationCircularProgress }) }),
+      /* @__PURE__ */ jsx(Typography, { noWrap: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: notificationMessageId }) })
+    ] });
+  }
+  if (isFetchingModifications) {
+    return /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.modificationNameHeader, children: [
+      /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.icon, children: /* @__PURE__ */ jsx(CircularProgress, { size: "1em", sx: networkModificationTableStyles.modificationCircularProgress }) }),
+      /* @__PURE__ */ jsx(Typography, { noWrap: true, children: /* @__PURE__ */ jsx(FormattedMessage, { id: "network_modifications.modifications" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.modificationNameHeader, children: [
+    pendingState && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.icon, children: /* @__PURE__ */ jsx(CircularProgress, { size: "1em", sx: networkModificationTableStyles.modificationCircularProgress }) }),
+    /* @__PURE__ */ jsx(Typography, { noWrap: true, children: /* @__PURE__ */ jsx(
+      FormattedMessage,
+      {
+        id: "network_modifications.modificationsCount",
+        values: {
+          count: modificationCount ?? "",
+          hide: pendingState
+        }
+      }
+    ) })
+  ] });
+}
+export {
+  NetworkModificationEditorNameHeader
+};

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

@@ -0,0 +1,8 @@
+import { Row, Table } from '@tanstack/react-table';
+import { ComposedModificationMetadata } from '../../../utils';
+interface SelectCellRendererProps {
+    row: Row<ComposedModificationMetadata>;
+    table: Table<ComposedModificationMetadata>;
+}
+export declare function SelectCell({ row, table }: Readonly<SelectCellRendererProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/network-modification-table/renderers/select-cell.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Checkbox } from "@mui/material";
+import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+function SelectCell({ row, table }) {
+  const { meta } = table.options;
+  const handleChange = useCallback(
+    (event) => {
+      const rows = table.getRowModel().flatRows;
+      const currentIndex = rows.indexOf(row);
+      const nextSelection = { ...table.getState().rowSelection };
+      if (event.shiftKey && meta?.lastClickedIndex.current !== null && meta?.lastClickedIndex.current !== void 0) {
+        const lastIndex = meta.lastClickedIndex.current;
+        const [from, to] = lastIndex < currentIndex ? [lastIndex, currentIndex] : [currentIndex, lastIndex];
+        const isRowSelected = row.getIsSelected();
+        rows.slice(from, to + 1).forEach((r) => {
+          if (r.getCanSelect()) {
+            r.toggleSelected(!isRowSelected);
+            if (isRowSelected) {
+              delete nextSelection[r.id];
+            } else {
+              nextSelection[r.id] = true;
+            }
+          }
+        });
+      } else {
+        row.toggleSelected();
+        if (row.getIsSelected()) {
+          delete nextSelection[row.id];
+        } else {
+          nextSelection[row.id] = true;
+        }
+      }
+      if (meta) {
+        meta.lastClickedIndex.current = currentIndex;
+        const selectedRows = rows.filter((r) => nextSelection[r.id]).map((r) => r.original);
+        meta.onRowSelected?.(selectedRows);
+      }
+    },
+    [table, row, meta]
+  );
+  const hasPartiallySelectedSubRows = useMemo(
+    () => row.subRows.some((subRow) => subRow.getIsSelected()) && !row.getIsSelected(),
+    [row]
+  );
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      size: "small",
+      checked: row.getIsSelected(),
+      indeterminate: hasPartiallySelectedSubRows,
+      disabled: !row.getCanSelect(),
+      onClick: handleChange,
+      sx: networkModificationTableStyles.selectCheckBox
+    }
+  );
+}
+export {
+  SelectCell
+};

package/dist/components/network-modification-table/renderers/select-header-cell.d.ts

@@ -0,0 +1,7 @@
+import { Table } from '@tanstack/react-table';
+import { ComposedModificationMetadata } from '../../../utils';
+interface SelectHeaderCellProps {
+    table: Table<ComposedModificationMetadata>;
+}
+export declare function SelectHeaderCell({ table }: Readonly<SelectHeaderCellProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/network-modification-table/renderers/select-header-cell.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Checkbox } from "@mui/material";
+function SelectHeaderCell({ table }) {
+  const handleClick = useCallback(() => {
+    const { meta } = table.options;
+    if (meta) {
+      const nextSelectedRows = table.getIsAllRowsSelected() ? [] : table.getCoreRowModel().rows.map((r) => r.original);
+      meta.onRowSelected?.(nextSelectedRows);
+      meta.lastClickedIndex.current = null;
+    }
+    table.toggleAllRowsSelected();
+  }, [table]);
+  return /* @__PURE__ */ jsx(
+    Checkbox,
+    {
+      size: "small",
+      checked: table.getIsAllRowsSelected(),
+      indeterminate: table.getSelectedRowModel().flatRows.length !== 0 && !table.getIsAllRowsSelected(),
+      onClick: handleClick
+    }
+  );
+}
+export {
+  SelectHeaderCell
+};

package/dist/components/network-modification-table/row/drag-row-clone.d.ts

@@ -0,0 +1,7 @@
+import { Row } from '@tanstack/react-table';
+import { ComposedModificationMetadata } from '../../../utils';
+interface DragCloneRowProps {
+    row: Row<ComposedModificationMetadata>;
+}
+export declare function DragCloneRow({ row }: Readonly<DragCloneRowProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/network-modification-table/row/drag-row-clone.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { DragIndicator } from "@mui/icons-material";
+import { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+import { useModificationLabelComputer } from "../../../hooks/useModificationLabelComputer.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import { mergeSx } from "../../../utils/styles.js";
+import "../../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+function DragCloneRow({ row }) {
+  const intl = useIntl();
+  const { computeLabel } = useModificationLabelComputer();
+  const getModificationLabel = useCallback(
+    (modification, formatBold = true) => {
+      return intl.formatMessage(
+        { id: `network_modifications.${modification.messageType}` },
+        { ...modification, ...computeLabel(modification, formatBold) }
+      );
+    },
+    [computeLabel, intl]
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.dragRowClone, children: [
+    /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.tableCell, children: /* @__PURE__ */ jsx(Box, { sx: mergeSx(networkModificationTableStyles.dragHandle, { opacity: 1 }), children: /* @__PURE__ */ jsx(DragIndicator, { sx: networkModificationTableStyles.dragIndicatorIcon }) }) }),
+    /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.tableCell, children: /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.modificationLabel, children: getModificationLabel(row.original) }) })
+  ] });
+}
+export {
+  DragCloneRow
+};

package/dist/components/network-modification-table/row/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, 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 * from './drag-row-clone';
+export * from './modification-row';

package/dist/components/network-modification-table/row/index.js

@@ -0,0 +1,6 @@
+import { DragCloneRow } from "./drag-row-clone.js";
+import { ModificationRow } from "./modification-row.js";
+export {
+  DragCloneRow,
+  ModificationRow
+};

package/dist/components/network-modification-table/row/modification-row.d.ts

@@ -0,0 +1,12 @@
+import { Row } from '@tanstack/react-table';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { ComposedModificationMetadata } from '../../../utils';
+interface ModificationRowProps {
+    virtualRow: VirtualItem;
+    row: Row<ComposedModificationMetadata>;
+    handleCellClick?: (modification: ComposedModificationMetadata) => void;
+    isRowDragDisabled: boolean;
+    highlightedModificationUuid: string | null;
+}
+export declare function ModificationRow({ virtualRow, row, handleCellClick, isRowDragDisabled, highlightedModificationUuid, }: Readonly<ModificationRowProps>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { flexRender } from "@tanstack/react-table";
+import { useTheme, TableRow, TableCell, Tooltip, Box } from "@mui/material";
+import { Draggable } from "@hello-pangea/dnd";
+import { FormattedMessage } from "react-intl";
+import { BASE_MODIFICATION_TABLE_COLUMNS, AUTO_EXTENSIBLE_COLUMNS } from "../columns-definition.js";
+import { COLUMNS_WITHOUT_BORDER, createCellStyle, createCellContentWrapperSx, createRowSx, networkModificationTableStyles } from "../network-modification-table-styles.js";
+import { isCompositeModification } from "../utils.js";
+import "../../../utils/conversionUtils.js";
+import "../../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import { mergeSx } from "../../../utils/styles.js";
+import "../../../utils/yupConfig.js";
+function ModificationRow({
+  virtualRow,
+  row,
+  handleCellClick,
+  isRowDragDisabled,
+  highlightedModificationUuid
+}) {
+  const isHighlighted = row.original.uuid === highlightedModificationUuid;
+  const theme = useTheme();
+  const isExpanded = row.getIsExpanded() && row.subRows.length > 0;
+  const handleCellClickCallback = useCallback(
+    (columnId) => {
+      if (columnId === BASE_MODIFICATION_TABLE_COLUMNS.NAME.id) {
+        handleCellClick?.(row.original);
+      }
+    },
+    [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(Tooltip, { title: /* @__PURE__ */ jsx(FormattedMessage, { id: "moveModification" }), arrow: true, children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: createCellContentWrapperSx(theme, cellWithoutBorders),
+                    ...provided.dragHandleProps,
+                    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(
+                  Tooltip,
+                  {
+                    title: /* @__PURE__ */ jsx(
+                      FormattedMessage,
+                      {
+                        id: row.getIsSelected() ? "deselectModification" : "selectModification"
+                      }
+                    ),
+                    arrow: true,
+                    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
+          );
+        })
+      }
+    );
+  } });
+}
+export {
+  ModificationRow
+};

package/dist/components/network-modification-table/use-modifications-drag-and-drop.d.ts

@@ -0,0 +1,21 @@
+import { default as React, JSX, RefObject } from 'react';
+import { Row } from '@tanstack/react-table';
+import { DraggableProvided, DraggableRubric, DraggableStateSnapshot, DragUpdate, DropResult } from '@hello-pangea/dnd';
+import { UUID } from 'node:crypto';
+import { ComposedModificationMetadata } from '../../utils';
+interface UseModificationsDragAndDropParams {
+    rows: Row<ComposedModificationMetadata>[];
+    containerRef: RefObject<HTMLDivElement | null>;
+    composedModifications: ComposedModificationMetadata[];
+    setComposedModifications: React.Dispatch<React.SetStateAction<ComposedModificationMetadata[]>>;
+    onDragEnd: () => void;
+    studyUuid: UUID | null;
+    currentNodeUuid?: UUID;
+}
+interface UseModificationsDragAndDropReturn {
+    handleDragUpdate: (update: DragUpdate) => void;
+    handleDragEnd: (result: DropResult) => void;
+    renderClone: (provided: DraggableProvided, snapshot: DraggableStateSnapshot, rubric: DraggableRubric) => JSX.Element;
+}
+export declare const useModificationsDragAndDrop: ({ rows, containerRef, composedModifications, setComposedModifications, onDragEnd, studyUuid, currentNodeUuid, }: UseModificationsDragAndDropParams) => UseModificationsDragAndDropReturn;
+export {};

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

@@ -0,0 +1,170 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { DragCloneRow } from "./row/drag-row-clone.js";
+import "@tanstack/react-table";
+import "@mui/material";
+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 { moveSubModificationInTree, isCompositeModification, findModificationInTree } from "./utils.js";
+import "../../utils/conversionUtils.js";
+import { snackWithFallback } from "../../utils/error.js";
+import "../../utils/types/equipmentType.js";
+import "@mui/icons-material";
+import "../../utils/yupConfig.js";
+import { changeCompositeSubModificationOrder, changeNetworkModificationOrder } from "../../services/networkModification.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import { useSnackMessage } from "../../hooks/useSnackMessage.js";
+const clearRowDragIndicators = (container) => {
+  const rowElements = container?.querySelectorAll("[data-row-id]");
+  rowElements?.forEach((rowElement) => {
+    rowElement.style.boxShadow = "";
+  });
+};
+const isDropForbidden = (sourceRow, targetRow) => {
+  const isDraggingDown = targetRow.index > sourceRow.index;
+  if (isCompositeModification(sourceRow.original) && (isCompositeModification(targetRow.original) && targetRow.getIsExpanded() && isDraggingDown || isCompositeModification(targetRow.getParentRow()?.original))) {
+    return true;
+  }
+  return !!(isCompositeModification(sourceRow.original) && findModificationInTree(targetRow.original.uuid, [sourceRow.original]));
+};
+function getTargetCompositeUuid(droppingIntoExpandedComposite, targetRow) {
+  if (droppingIntoExpandedComposite) {
+    return targetRow.original.uuid;
+  }
+  return targetRow.depth > 0 ? targetRow.getParentRow()?.original.uuid ?? null : 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 getContainerShadow(forbidden, isMovingDown) {
+  if (forbidden) {
+    return isMovingDown ? DROP_FORBIDDEN_INDICATOR_BOTTOM : DROP_FORBIDDEN_INDICATOR_TOP;
+  }
+  return isMovingDown ? DROP_INDICATOR_BOTTOM : DROP_INDICATOR_TOP;
+}
+const useModificationsDragAndDrop = ({
+  rows,
+  containerRef,
+  composedModifications,
+  setComposedModifications,
+  onDragEnd,
+  studyUuid = null,
+  currentNodeUuid = void 0
+}) => {
+  const { snackError } = useSnackMessage();
+  const handleDragUpdate = useCallback(
+    (update) => {
+      clearRowDragIndicators(containerRef.current);
+      const { source, destination } = update;
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+      const sourceRow = rows[source.index];
+      const targetRow = rows[destination.index];
+      const el = containerRef.current?.querySelector(`[data-row-id="${targetRow?.original.uuid}"]`);
+      if (!el) {
+        return;
+      }
+      const forbidden = isDropForbidden(sourceRow, targetRow);
+      const isMovingDown = destination.index > source.index;
+      el.style.boxShadow = getContainerShadow(forbidden, isMovingDown);
+    },
+    [rows, containerRef]
+  );
+  const handleDragEndComposite = useCallback(
+    (sourceRow, targetRow, droppingIntoExpandedComposite, isDraggingDown) => {
+      const movingUuid = sourceRow.original.uuid;
+      const sourceCompositeUuid = sourceRow.depth > 0 ? sourceRow.getParentRow()?.original.uuid ?? null : null;
+      const targetCompositeUuid = getTargetCompositeUuid(droppingIntoExpandedComposite, targetRow);
+      const targetSiblings = getTargetSiblings(targetCompositeUuid, rows);
+      let beforeUuid;
+      if (droppingIntoExpandedComposite) {
+        beforeUuid = targetSiblings[0]?.original.uuid ?? null;
+      } else {
+        const landingIndexInSiblings = targetSiblings.findIndex(
+          (r) => r.original.uuid === targetRow.original.uuid
+        );
+        const beforeSiblingIndex = isDraggingDown ? landingIndexInSiblings + 1 : landingIndexInSiblings;
+        beforeUuid = targetSiblings[beforeSiblingIndex]?.original.uuid ?? null;
+      }
+      const previousComposed = composedModifications;
+      setComposedModifications(
+        (prev) => moveSubModificationInTree(movingUuid, sourceCompositeUuid, targetCompositeUuid, beforeUuid, prev)
+      );
+      changeCompositeSubModificationOrder(
+        studyUuid,
+        currentNodeUuid,
+        movingUuid,
+        sourceCompositeUuid,
+        targetCompositeUuid,
+        beforeUuid
+      ).catch((error) => {
+        snackWithFallback(snackError, error, { headerId: "errReorderModificationMsg" });
+        setComposedModifications(previousComposed);
+      });
+    },
+    [rows, studyUuid, currentNodeUuid, snackError, composedModifications, setComposedModifications]
+  );
+  const handleDragEnd = useCallback(
+    (result) => {
+      clearRowDragIndicators(containerRef.current);
+      onDragEnd();
+      const { source, destination } = result;
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+      const sourceRow = rows[source.index];
+      const targetRow = rows[destination.index];
+      if (isDropForbidden(sourceRow, targetRow)) {
+        return;
+      }
+      const isSubRowInvolved = sourceRow.depth > 0 || targetRow.depth > 0;
+      const isDraggingDown = destination.index > source.index;
+      const droppingIntoExpandedComposite = isDraggingDown && targetRow.getIsExpanded();
+      if (isSubRowInvolved || droppingIntoExpandedComposite) {
+        handleDragEndComposite(sourceRow, targetRow, droppingIntoExpandedComposite, isDraggingDown);
+      } else {
+        const sourceDepth0Uuid = sourceRow.original.uuid;
+        const targetDepth0Uuid = targetRow.original.uuid;
+        const oldPosition = composedModifications.findIndex((m) => m.uuid === sourceDepth0Uuid);
+        const newPosition = composedModifications.findIndex((m) => m.uuid === targetDepth0Uuid);
+        if (oldPosition === -1 || newPosition === -1 || oldPosition === newPosition || !currentNodeUuid) {
+          return;
+        }
+        const previousModifications = [...composedModifications];
+        const updatedModifications = [...composedModifications];
+        const [movedItem] = updatedModifications.splice(oldPosition, 1);
+        updatedModifications.splice(newPosition, 0, movedItem);
+        setComposedModifications(updatedModifications);
+        const before = updatedModifications[newPosition + 1]?.uuid ?? null;
+        changeNetworkModificationOrder(studyUuid, currentNodeUuid, movedItem.uuid, before).catch((error) => {
+          snackWithFallback(snackError, error, { headerId: "errReorderModificationMsg" });
+          setComposedModifications(previousModifications);
+        });
+      }
+    },
+    [
+      containerRef,
+      onDragEnd,
+      rows,
+      studyUuid,
+      currentNodeUuid,
+      snackError,
+      composedModifications,
+      setComposedModifications,
+      handleDragEndComposite
+    ]
+  );
+  const renderClone = useCallback(
+    (provided, _snapshot, rubric) => /* @__PURE__ */ jsx("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, children: /* @__PURE__ */ jsx(DragCloneRow, { row: rows[rubric.source.index] }) }),
+    [rows]
+  );
+  return { handleDragUpdate, handleDragEnd, renderClone };
+};
+export {
+  useModificationsDragAndDrop
+};

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

@@ -0,0 +1,40 @@
+import { Dispatch, SetStateAction } from 'react';
+import { UUID } from 'node:crypto';
+import { ComposedModificationMetadata, NetworkModificationMetadata } from '../../utils';
+export declare const formatToComposedModification: (modifications: NetworkModificationMetadata[]) => ComposedModificationMetadata[];
+export declare function isCompositeModification(modification: ComposedModificationMetadata | undefined): boolean;
+/**
+ *
+ * @param modifications source where the composite modifications are looked for
+ * @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;
+/**
+ * in the tree, replaces the sub-modifications of 'parentModUuid' with 'subModifications' and returns the result
+ * @param parentModUuid
+ * @param subModifications new subModifications of parentModUuid
+ * @param tree all the modifications of the tree
+ */
+export declare function updateSubModificationsOfACompositeInTree(parentModUuid: string, 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`
+ * changes, previously fetched children are preserved and do not need to be re-fetched.
+ */
+export declare function mergeSubModificationsIntoTree(nextMods: ComposedModificationMetadata[], prevMods: ComposedModificationMetadata[]): ComposedModificationMetadata[];
+/**
+ * Returns a new tree where the modification identified by {@code uuid} has the given
+ * partial fields merged in. All other nodes are returned as-is (referentially stable).
+ */
+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 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;