@gridsuite/commons-ui 0.195.0 → 0.197.0

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

@@ -0,0 +1,333 @@
+import { lighten, darken, alpha } from "@mui/material";
+const HIGHLIGHT_COLOR_BASE = "rgba(144, 202, 249, 0.16)";
+const HIGHLIGHT_COLOR_HOVER = "rgba(144, 202, 249, 0.24)";
+const ROW_HOVER_COLOR = "rgba(144, 202, 249, 0.08)";
+const DRAG_OPACITY = 0.5;
+const DEACTIVATED_OPACITY = 0.4;
+const MODIFICATION_ROW_HEIGHT = 41;
+const DEPTH_CELL_WIDTH = 32;
+const createCellBorderColor = (theme) => theme.palette.mode === "light" ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
+const networkModificationTableStyles = {
+  tableWrapper: (theme) => ({
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    margin: theme.spacing(1),
+    border: `1px solid ${theme.palette.divider}`,
+    overflow: "hidden",
+    minHeight: 0
+  }),
+  container: {
+    position: "relative",
+    flexGrow: 1,
+    overflow: "auto",
+    height: "100%"
+  },
+  table: (theme) => ({
+    width: "100%",
+    tableLayout: "fixed",
+    borderCollapse: "collapse",
+    backgroundColor: theme.palette.background.paper
+  }),
+  thead: (theme) => ({
+    backgroundColor: theme.palette.background.paper,
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    width: "100%",
+    "& tr:hover": {
+      backgroundColor: "transparent"
+    }
+  }),
+  tableRow: {
+    display: "flex",
+    alignItems: "center",
+    transition: "none",
+    opacity: 1
+  },
+  tableBody: {
+    position: "relative"
+  },
+  tableCell: {
+    fontSize: "small",
+    minWidth: 0,
+    display: "flex"
+  },
+  dragRowClone: (theme) => ({
+    backgroundColor: "background.paper",
+    boxShadow: 4,
+    opacity: 1,
+    border: "1px solid #f5f5f5",
+    display: "flex",
+    width: "fit-content",
+    padding: theme.spacing(1)
+  }),
+  overflow: {
+    whiteSpace: "pre",
+    textOverflow: "ellipsis",
+    overflow: "hidden"
+  },
+  selectCheckBox: (theme) => ({
+    padding: theme.spacing(0.8)
+  }),
+  dragHandle: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    cursor: "grab",
+    opacity: 0,
+    padding: theme.spacing(0.5),
+    "tr:hover &": { opacity: 1 }
+  }),
+  dragIndicatorIcon: {
+    width: "16px",
+    height: "16px"
+  },
+  modificationLabel: {
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    paddingLeft: "0.5vw"
+  },
+  rootNetworkHeader: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center"
+  },
+  columnCell: {
+    select: { padding: 2, justifyContent: "center" },
+    modificationName: { cursor: "pointer", minWidth: 0, overflow: "hidden", flex: 1 },
+    rootNetworkChip: { textAlign: "center" }
+  },
+  nameCellInnerRow: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: 0,
+    flex: 1,
+    minWidth: 0,
+    alignSelf: "stretch"
+  },
+  nameCellTogglerBox: {
+    width: `${DEPTH_CELL_WIDTH}px`,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  nameCellToggleButton: {
+    padding: "4px",
+    width: `${DEPTH_CELL_WIDTH}px`,
+    height: `${DEPTH_CELL_WIDTH}px`
+  },
+  nameCellLabelBoxPlain: {
+    flex: 1,
+    minWidth: 0
+  },
+  // depth-box
+  folderDepthBox: (theme) => ({
+    width: `${DEPTH_CELL_WIDTH / 2}px`,
+    display: "flex",
+    alignSelf: "stretch",
+    position: "relative",
+    borderRight: `1px solid ${createCellBorderColor(theme)}`
+  }),
+  depthBox: (theme) => ({
+    width: `${DEPTH_CELL_WIDTH / 2}px`,
+    display: "flex",
+    justifyContent: "flex-start",
+    alignSelf: "stretch",
+    position: "relative",
+    borderRight: `1px solid ${createCellBorderColor(theme)}`
+  }),
+  depthBoxTick: (theme) => ({
+    position: "absolute",
+    top: "50%",
+    left: "100%",
+    width: "6px",
+    height: "1px",
+    backgroundColor: createCellBorderColor(theme)
+  }),
+  // from network-modification-node-editor-utils
+  modificationNameHeader: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    minWidth: 0,
+    gap: 2,
+    "& .MuiTypography-root": {
+      fontSize: "inherit"
+    }
+  },
+  icon: (theme) => ({
+    width: theme.spacing(1)
+  }),
+  iconEdit: (theme) => ({
+    marginRight: theme.spacing(1)
+  }),
+  circularProgress: (theme) => ({
+    marginRight: theme.spacing(2),
+    color: theme.palette.primary.contrastText
+  }),
+  modificationCircularProgress: (theme) => ({
+    marginRight: theme.spacing(2),
+    color: theme.palette.primary.main
+  }),
+  toolbarCircularProgress: (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: theme.spacing(1.25),
+    marginRight: theme.spacing(2),
+    color: theme.palette.secondary.main
+  })
+};
+const DROP_INDICATOR_TOP = "inset 0 2px 0 #90caf9";
+const DROP_INDICATOR_BOTTOM = "inset 0 -2px 0 #90caf9";
+const DROP_FORBIDDEN_INDICATOR_TOP = "inset 0 2px 0 #FF3636";
+const DROP_FORBIDDEN_INDICATOR_BOTTOM = "inset 0 -2px 0 #FF3636";
+function getRowBackgroundColor(isHighlighted, isComposite, theme) {
+  if (isHighlighted) {
+    return HIGHLIGHT_COLOR_BASE;
+  }
+  if (!isComposite) {
+    return "transparent";
+  }
+  return theme.palette.mode === "light" ? darken(theme.palette.background.paper, 0.04) : lighten(theme.palette.background.paper, 0.08);
+}
+const createRowSx = (theme, isHighlighted, isDragging, virtualRow, depth, isComposite) => ({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  width: "100%",
+  height: `${virtualRow.size}px`,
+  transform: `translateY(${virtualRow.start}px)`,
+  backgroundColor: getRowBackgroundColor(isHighlighted, isComposite, theme),
+  opacity: isDragging ? DRAG_OPACITY : 1,
+  "&:hover": {
+    backgroundColor: isHighlighted ? HIGHLIGHT_COLOR_HOVER : ROW_HOVER_COLOR
+  },
+  ...isDragging && { zIndex: 1, transform: "none" },
+  // 'border' &::before has to be used instead of borderTop in order for the virtualizer to compute the right cell height
+  ...depth === 0 && {
+    position: "absolute",
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: "1px",
+      backgroundColor: createCellBorderColor(theme),
+      pointerEvents: "none"
+    }
+  }
+});
+const createModificationNameCellStyle = (activated) => ({
+  opacity: activated ? 1 : DEACTIVATED_OPACITY
+});
+const createRootNetworkChipCellSx = (activated) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "center",
+  opacity: activated ? 1 : DEACTIVATED_OPACITY
+});
+const createEditDescriptionStyle = (description) => ({
+  opacity: description ? 1 : 0,
+  cursor: description ? "pointer" : "default",
+  "tr:hover &": { opacity: 1 }
+});
+const createCellStyle = (cell, isAutoExtensible) => {
+  const size = cell.column.getSize();
+  const { minSize } = cell.column.columnDef;
+  return {
+    ...cell.column.columnDef.meta?.cellStyle,
+    padding: 0,
+    flex: isAutoExtensible ? `1 1 ${size}px` : `0 1 ${size}px`,
+    minWidth: minSize ? `${minSize}px` : void 0,
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    borderTop: "none",
+    borderBottom: "none"
+  };
+};
+const createHeaderCellStyle = (header, theme, isFirst, isLast, isAutoExtensible) => {
+  const {
+    column: {
+      getSize,
+      columnDef: { minSize, meta }
+    }
+  } = header;
+  const size = getSize();
+  return {
+    ...meta?.cellStyle,
+    flex: isAutoExtensible ? `1 1 ${size}px` : `0 1 ${size}px`,
+    minWidth: minSize ? `${minSize}px` : void 0,
+    height: `${MODIFICATION_ROW_HEIGHT}px`,
+    padding: "2px",
+    textAlign: "left",
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    paddingTop: "1.5vh",
+    paddingBottom: "1.5vh",
+    backgroundColor: getRowBackgroundColor(false, true, theme),
+    borderBottom: createCellBorderColor(theme),
+    borderTop: createCellBorderColor(theme),
+    ...isFirst && { borderLeft: createCellBorderColor(theme) },
+    ...isLast && { borderRight: createCellBorderColor(theme) }
+  };
+};
+const COLUMNS_WITHOUT_BORDER = /* @__PURE__ */ new Set(["dragHandle", "select"]);
+const createCellContentWrapperSx = (theme, withoutBorders) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  height: `${MODIFICATION_ROW_HEIGHT}px`,
+  borderTop: withoutBorders ? "none" : `1px solid ${createCellBorderColor(theme)}`,
+  borderBottom: withoutBorders ? "none" : `1px solid ${createCellBorderColor(theme)}`
+});
+const createNameCellRootStyle = (theme, isExpanded, depth) => ({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  alignItems: "stretch",
+  gap: 0,
+  ...depth === 0 && !isExpanded && {
+    borderTop: `1px solid ${createCellBorderColor(theme)}`,
+    borderBottom: `1px solid ${createCellBorderColor(theme)}`
+  }
+});
+const createNameCellLabelBoxSx = (isExpanded, depth) => {
+  return {
+    alignSelf: "stretch",
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+    ...(depth > 0 || isExpanded) && {
+      borderTop: (theme) => `1px solid ${createCellBorderColor(theme)}`,
+      borderBottom: (theme) => `1px solid ${createCellBorderColor(theme)}`,
+      borderLeft: (theme) => `1px solid ${createCellBorderColor(theme)}`
+    }
+  };
+};
+export {
+  COLUMNS_WITHOUT_BORDER,
+  DEPTH_CELL_WIDTH,
+  DROP_FORBIDDEN_INDICATOR_BOTTOM,
+  DROP_FORBIDDEN_INDICATOR_TOP,
+  DROP_INDICATOR_BOTTOM,
+  DROP_INDICATOR_TOP,
+  MODIFICATION_ROW_HEIGHT,
+  createCellBorderColor,
+  createCellContentWrapperSx,
+  createCellStyle,
+  createEditDescriptionStyle,
+  createHeaderCellStyle,
+  createModificationNameCellStyle,
+  createNameCellLabelBoxSx,
+  createNameCellRootStyle,
+  createRootNetworkChipCellSx,
+  createRowSx,
+  networkModificationTableStyles
+};

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

@@ -0,0 +1,20 @@
+import { default as React, SetStateAction } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import { UUID } from 'node:crypto';
+import { NetworkModificationEditorNameHeaderProps } from './renderers';
+import { NameHeaderProps } from './columns-definition';
+import { ComposedModificationMetadata, NetworkModificationMetadata } from '../../utils';
+interface NetworkModificationsTableProps extends Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'> {
+    modifications: NetworkModificationMetadata[];
+    handleCellClick: (modification: NetworkModificationMetadata) => void;
+    isRowDragDisabled?: boolean;
+    onRowDragStart: () => void;
+    onRowDragEnd: () => void;
+    onRowSelected: (selectedRows: ComposedModificationMetadata[]) => void;
+    createAllColumns: (isRowDragDisabled: boolean, modificationsCount: number, nameHeaderProps: NameHeaderProps, setModifications: React.Dispatch<SetStateAction<ComposedModificationMetadata[]>>) => ColumnDef<ComposedModificationMetadata>[];
+    highlightedModificationUuid: UUID | null;
+    studyUuid: UUID | null;
+    currentNodeId?: UUID;
+}
+export declare function NetworkModificationsTable({ modifications, handleCellClick, isRowDragDisabled, onRowDragStart, onRowDragEnd, onRowSelected, createAllColumns, highlightedModificationUuid, studyUuid, currentNodeId, ...nameHeaderProps }: Readonly<NetworkModificationsTableProps>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,166 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useEffect, useCallback } from "react";
+import { useTheme, Box, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
+import { useReactTable, getExpandedRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
+import { DragDropContext, Droppable } from "@hello-pangea/dnd";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { MODIFICATION_ROW_HEIGHT, networkModificationTableStyles, createHeaderCellStyle } from "./network-modification-table-styles.js";
+import { AUTO_EXTENSIBLE_COLUMNS } from "./columns-definition.js";
+import { useModificationsDragAndDrop } from "./use-modifications-drag-and-drop.js";
+import { formatToComposedModification, mergeSubModificationsIntoTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
+import "@mui/icons-material";
+import "react-intl";
+import "../../utils/conversionUtils.js";
+import "../../utils/types/equipmentType.js";
+import "../../utils/yupConfig.js";
+import "localized-countries";
+import "localized-countries/data/fr";
+import "localized-countries/data/en";
+import "notistack";
+import { ModificationRow } from "./row/modification-row.js";
+function NetworkModificationsTable({
+  modifications,
+  handleCellClick,
+  isRowDragDisabled = false,
+  onRowDragStart,
+  onRowDragEnd,
+  onRowSelected,
+  createAllColumns,
+  highlightedModificationUuid,
+  studyUuid = null,
+  currentNodeId = void 0,
+  ...nameHeaderProps
+}) {
+  const theme = useTheme();
+  const containerRef = useRef(null);
+  const lastClickedIndex = useRef(null);
+  const [expanded, setExpanded] = useState({});
+  const [composedModifications, setComposedModifications] = useState(
+    formatToComposedModification(modifications)
+  );
+  const columns = useMemo(
+    () => createAllColumns(
+      isRowDragDisabled ?? false,
+      modifications.length,
+      nameHeaderProps,
+      setComposedModifications
+    ),
+    [createAllColumns, isRowDragDisabled, modifications.length, nameHeaderProps]
+  );
+  useEffect(() => {
+    setComposedModifications((prevMods) => {
+      const nextMods = mergeSubModificationsIntoTree(formatToComposedModification(modifications), prevMods);
+      const loadedComposite = [];
+      findAllLoadedCompositeModifications(nextMods, loadedComposite);
+      fetchSubModificationsForExpandedRows(
+        loadedComposite.map((mod) => mod.uuid),
+        nextMods,
+        setComposedModifications,
+        true
+      );
+      return nextMods;
+    });
+  }, [modifications]);
+  const handleExpandRow = useCallback((updater) => {
+    setExpanded((prevExpanded) => {
+      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]);
+      setComposedModifications((prevMods) => {
+        fetchSubModificationsForExpandedRows(newlyExpandedIds, prevMods, setComposedModifications);
+        return [...prevMods];
+      });
+      return nextExpanded;
+    });
+  }, []);
+  const table = useReactTable({
+    data: composedModifications,
+    columns,
+    state: { expanded },
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getSubRows: (row) => row.subModifications,
+    getRowId: (row) => row.uuid,
+    getRowCanExpand: (row) => isCompositeModification(row.original),
+    enableRowSelection: true,
+    enableSubRowSelection: false,
+    enableExpanding: true,
+    onExpandedChange: handleExpandRow,
+    meta: { lastClickedIndex, onRowSelected }
+  });
+  const { rows } = table.getRowModel();
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => containerRef.current,
+    overscan: 5,
+    estimateSize: () => MODIFICATION_ROW_HEIGHT
+  });
+  const virtualItems = virtualizer.getVirtualItems();
+  const { handleDragUpdate, handleDragEnd, renderClone } = useModificationsDragAndDrop({
+    rows,
+    containerRef,
+    composedModifications,
+    setComposedModifications,
+    onDragEnd: onRowDragEnd,
+    studyUuid,
+    currentNodeUuid: currentNodeId
+  });
+  useEffect(() => {
+    table.resetRowSelection();
+    table.resetExpanded();
+    lastClickedIndex.current = null;
+  }, [table]);
+  useEffect(() => {
+    if (highlightedModificationUuid && containerRef.current) {
+      const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuid);
+      if (rowIndex !== -1) {
+        virtualizer.scrollToIndex(rowIndex, { align: "start", behavior: "auto" });
+      }
+    }
+  }, [highlightedModificationUuid, rows, virtualizer]);
+  return /* @__PURE__ */ jsx(DragDropContext, { onDragEnd: handleDragEnd, onDragStart: onRowDragStart, onDragUpdate: handleDragUpdate, children: /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.tableWrapper, children: /* @__PURE__ */ jsx(Droppable, { droppableId: "modifications-table", mode: "virtual", renderClone, children: (provided) => /* @__PURE__ */ jsx(Box, { ref: containerRef, sx: networkModificationTableStyles.container, children: /* @__PURE__ */ jsxs(Table, { sx: networkModificationTableStyles.table, children: [
+    /* @__PURE__ */ jsx(TableHead, { sx: networkModificationTableStyles.thead, children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { sx: networkModificationTableStyles.tableRow, children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        sx: createHeaderCellStyle(
+          header,
+          theme,
+          header.index === 0,
+          header.index === headerGroup.headers.length - 1,
+          AUTO_EXTENSIBLE_COLUMNS.includes(header.column.id)
+        ),
+        children: flexRender(header.column.columnDef.header, header.getContext())
+      },
+      header.id
+    )) }, headerGroup.id)) }),
+    /* @__PURE__ */ jsx(
+      TableBody,
+      {
+        ref: provided.innerRef,
+        ...provided.droppableProps,
+        sx: {
+          ...networkModificationTableStyles.tableBody,
+          height: `${virtualizer.getTotalSize()}px`
+        },
+        children: virtualItems.map((virtualRow) => {
+          const row = rows[virtualRow.index];
+          return /* @__PURE__ */ jsx(
+            ModificationRow,
+            {
+              virtualRow,
+              row,
+              handleCellClick,
+              isRowDragDisabled,
+              highlightedModificationUuid
+            },
+            row.id
+          );
+        })
+      }
+    )
+  ] }) }) }) }) });
+}
+export {
+  NetworkModificationsTable
+};

package/dist/components/network-modification-table/renderers/depth-box.d.ts

@@ -0,0 +1,6 @@
+interface DepthBoxProps {
+    firstLevel: boolean;
+    displayAsFolder?: boolean;
+}
+export declare function DepthBox({ firstLevel, displayAsFolder }: Readonly<DepthBoxProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/network-modification-table/renderers/depth-box.js

@@ -0,0 +1,21 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+function getDepthBoxStyle(displayAsFolder) {
+  if (displayAsFolder) {
+    return networkModificationTableStyles.folderDepthBox;
+  }
+  return networkModificationTableStyles.depthBox;
+}
+function DepthBox({ firstLevel, displayAsFolder = false }) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    /* double width depth box only on the first level */
+    children: [
+      firstLevel && /* @__PURE__ */ jsx(Box, { sx: getDepthBoxStyle(displayAsFolder) }),
+      /* @__PURE__ */ jsx(Box, { sx: getDepthBoxStyle(displayAsFolder), children: displayAsFolder && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.depthBoxTick }) })
+    ]
+  });
+}
+export {
+  DepthBox
+};

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

@@ -0,0 +1,5 @@
+interface DragHandleCellProps {
+    isRowDragDisabled: boolean;
+}
+export declare function DragHandleCell({ isRowDragDisabled }: Readonly<DragHandleCellProps>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { DragIndicator } from "@mui/icons-material";
+import { Box } from "@mui/material";
+import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+function DragHandleCell({ isRowDragDisabled }) {
+  return /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.dragHandle, children: !isRowDragDisabled && /* @__PURE__ */ jsx(DragIndicator, { fontSize: "small", sx: networkModificationTableStyles.dragIndicatorIcon }) });
+}
+export {
+  DragHandleCell
+};

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

@@ -0,0 +1,12 @@
+/**
+ * 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 './depth-box';
+export * from './drag-handle-cell';
+export * from './name-cell';
+export * from './network-modification-node-editor-name-header';
+export * from './select-cell';
+export * from './select-header-cell';

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

@@ -0,0 +1,14 @@
+import { DepthBox } from "./depth-box.js";
+import { DragHandleCell } from "./drag-handle-cell.js";
+import { NameCell } from "./name-cell.js";
+import { NetworkModificationEditorNameHeader } from "./network-modification-node-editor-name-header.js";
+import { SelectCell } from "./select-cell.js";
+import { SelectHeaderCell } from "./select-header-cell.js";
+export {
+  DepthBox,
+  DragHandleCell,
+  NameCell,
+  NetworkModificationEditorNameHeader,
+  SelectCell,
+  SelectHeaderCell
+};

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

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

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

@@ -0,0 +1,84 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { useTheme, Box, IconButton, Tooltip } from "@mui/material";
+import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
+import { networkModificationTableStyles, createNameCellLabelBoxSx, createModificationNameCellStyle, createNameCellRootStyle } from "../network-modification-table-styles.js";
+import { DepthBox } from "./depth-box.js";
+import { isCompositeModification } from "../utils.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 NameCell({ row }) {
+  const intl = useIntl();
+  const theme = useTheme();
+  const { computeLabel } = useModificationLabelComputer();
+  const { depth } = row;
+  const getModificationLabel = useCallback(
+    (modification, formatBold = true) => {
+      return intl.formatMessage(
+        { id: `network_modifications.${modification.messageType}` },
+        { ...modification, ...computeLabel(modification, formatBold) }
+      );
+    },
+    [computeLabel, intl]
+  );
+  const label = useMemo(() => getModificationLabel(row.original), [getModificationLabel, row.original]);
+  const renderDepthBox = () => {
+    const depthLevelCount = depth;
+    return Array.from({ length: depthLevelCount }, (_, i) => /* @__PURE__ */ jsx(
+      DepthBox,
+      {
+        firstLevel: i === 0,
+        displayAsFolder: isCompositeModification(row.original) && i === depthLevelCount - 1
+      },
+      i
+    ));
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: mergeSx(
+        networkModificationTableStyles.tableCell,
+        createNameCellRootStyle(theme, row.getIsExpanded(), depth)
+      ),
+      children: [
+        renderDepthBox(),
+        /* @__PURE__ */ jsxs(Box, { sx: networkModificationTableStyles.nameCellInnerRow, children: [
+          isCompositeModification(row.original) && /* @__PURE__ */ jsx(Box, { sx: networkModificationTableStyles.nameCellTogglerBox, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: (e) => {
+                e.stopPropagation();
+                row.getToggleExpandedHandler()();
+              },
+              sx: networkModificationTableStyles.nameCellToggleButton,
+              "aria-label": row.getIsExpanded() ? "Collapse" : "Expand",
+              children: row.getIsExpanded() ? /* @__PURE__ */ jsx(KeyboardArrowDown, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRight, { fontSize: "small" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Box, { sx: createNameCellLabelBoxSx(row.getIsExpanded(), depth), children: /* @__PURE__ */ jsx(Tooltip, { disableFocusListener: true, disableTouchListener: true, title: label, children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: mergeSx(
+                networkModificationTableStyles.modificationLabel,
+                createModificationNameCellStyle(row.original.activated)
+              ),
+              children: label
+            }
+          ) }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  NameCell
+};