@gridsuite/commons-ui 0.195.0 → 0.196.0

package/dist/components/index.d.ts

@@ -31,3 +31,4 @@ export * from './muiTable';
 export * from './resizablePanels';
 export * from './network-modifications';
 export * from './node';
+export * from './network-modification-table';

package/dist/components/index.js

@@ -244,9 +244,23 @@ import { emptyModificationByAssignmentFormData, modificationByAssignmentDtoToFor
 import { DataType as DataType2 } from "./network-modifications/by-filter/assignment/assignment/assignment.type.js";
 import { BuildStatusChip } from "./node/build-status-chip.js";
 import { BuildStatus } from "./node/constant.js";
+import { 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 } from "./network-modification-table/network-modification-table-styles.js";
+import { AUTO_EXTENSIBLE_COLUMNS, BASE_MODIFICATION_TABLE_COLUMNS, computeTagMinSize } from "./network-modification-table/columns-definition.js";
+import { NetworkModificationsTable } from "./network-modification-table/network-modifications-table.js";
+import { useModificationsDragAndDrop } from "./network-modification-table/use-modifications-drag-and-drop.js";
+import { DepthBox } from "./network-modification-table/renderers/depth-box.js";
+import { DragHandleCell } from "./network-modification-table/renderers/drag-handle-cell.js";
+import { NameCell } from "./network-modification-table/renderers/name-cell.js";
+import { NetworkModificationEditorNameHeader } from "./network-modification-table/renderers/network-modification-node-editor-name-header.js";
+import { SelectCell } from "./network-modification-table/renderers/select-cell.js";
+import { SelectHeaderCell } from "./network-modification-table/renderers/select-header-cell.js";
+import { DragCloneRow } from "./network-modification-table/row/drag-row-clone.js";
+import { ModificationRow } from "./network-modification-table/row/modification-row.js";
+import { fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
 export {
   ACCURACY,
   ACTIVE,
+  AUTO_EXTENSIBLE_COLUMNS,
   AboutDialog,
   ActivableChip,
   AddButton,
@@ -259,6 +273,7 @@ export {
   AutocompleteInput,
   AutocompleteWithFavorites,
   BALANCE_TYPE,
+  BASE_MODIFICATION_TABLE_COLUMNS,
   BooleanCellRenderer,
   BooleanInput,
   BooleanNullableCellRenderer,
@@ -278,6 +293,7 @@ export {
   COLUMNS_DEFINITIONS_LIMIT_REDUCTIONS,
   COLUMNS_DEFINITIONS_NODES,
   COLUMNS_DEFINITIONS_PSTS,
+  COLUMNS_WITHOUT_BORDER,
   COMBINATOR_OPTIONS,
   COMMON_PARAMETERS,
   COMPONENT_LIBRARY,
@@ -329,12 +345,18 @@ export {
   DEFAULT_REACTIVE_SLACKS_THRESHOLD,
   DEFAULT_SHUNT_COMPENSATOR_ACTIVATION_THRESHOLD,
   DEFAULT_UPDATE_BUS_VOLTAGE,
+  DEPTH_CELL_WIDTH,
   DESCRIPTION,
   DIAGONAL_LABEL,
   DISTRIBUTED_SLACK,
   DISTRIBUTION_KEY,
+  DROP_FORBIDDEN_INDICATOR_BOTTOM,
+  DROP_FORBIDDEN_INDICATOR_TOP,
+  DROP_INDICATOR_BOTTOM,
+  DROP_INDICATOR_TOP,
   DataType,
   DefaultCellRenderer,
+  DepthBox,
   DescriptionField,
   DescriptionInput,
   DescriptionModificationDialog,
@@ -346,6 +368,8 @@ export {
   DndTableAddRowsDialog,
   DndTableBottomLeftButtons,
   DndTableBottomRightButtons,
+  DragCloneRow,
+  DragHandleCell,
   DynamicMarginCalculationInline,
   DynamicSecurityAnalysisInline,
   DynamicSimulationInline,
@@ -443,11 +467,13 @@ export {
   MAX_ROWS_NUMBER,
   MAX_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,
   MIN_VALUE_ALLOWED_FOR_LIMIT_REDUCTION,
+  MODIFICATION_ROW_HEIGHT,
   MONITORED_BRANCHES_EQUIPMENT_TYPES,
   MONITORED_VOLTAGE_LEVELS_EQUIPMENT_TYPES,
   MessageLogCellRenderer,
   MidFormError,
   ModificationByAssignmentForm,
+  ModificationRow,
   ModifyElementSelection,
   MuiSelectInput,
   MultipleAutocompleteInput,
@@ -458,7 +484,10 @@ export {
   NODE_CLUSTER,
   NODE_CLUSTER_FILTER_IDS,
   NadPositionsGenerationMode,
+  NameCell,
+  NetworkModificationEditorNameHeader,
   NetworkModificationNameCellRenderer,
+  NetworkModificationsTable,
   NetworkVisualizationParametersInline,
   NetworkVisualizationTabValues,
   NetworkVisualizationsParametersEditionDialog,
@@ -557,7 +586,9 @@ export {
   SWITCH_TYPE,
   SecurityAnalysisParametersDialog,
   SecurityAnalysisParametersInline,
+  SelectCell,
   SelectClearable,
+  SelectHeaderCell,
   SelectInput,
   SelectWithConfirmationInput,
   SensiBranchesTabValues,
@@ -623,10 +654,21 @@ export {
   byFilterDeletionDtoToForm,
   byFilterDeletionFormSchema,
   byFilterDeletionFormToDto,
+  computeTagMinSize,
   copyEquipmentPropertiesForCreation,
   countRules,
+  createCellBorderColor,
+  createCellContentWrapperSx,
+  createCellStyle,
   createConnectivityData,
+  createEditDescriptionStyle,
+  createHeaderCellStyle,
+  createModificationNameCellStyle,
+  createNameCellLabelBoxSx,
+  createNameCellRootStyle,
   createPropertyModification,
+  createRootNetworkChipCellSx,
+  createRowSx,
   creationPropertiesSchema,
   dispatchUser,
   doesNodeHasChildren,
@@ -643,8 +685,12 @@ export {
   extractDefault,
   fetchCsvSeparator,
   fetchPredefinedProperties,
+  fetchSubModificationsForExpandedRows,
   filledTextField,
+  findAllLoadedCompositeModifications,
+  findModificationInTree,
   formatComputingTypeLabel,
+  formatToComposedModification,
   genHelperError,
   generateTreeViewFinderClass,
   getActivePowerSetPointSchema,
@@ -709,6 +755,7 @@ export {
   initializedProperty,
   intlInitialVoltageProfileMode,
   intlPredefinedParametersOptions,
+  isCompositeModification,
   isFieldRequired,
   isFloatNumber,
   isIntegerNumber,
@@ -726,10 +773,13 @@ export {
   login,
   logout,
   mergeModificationAndEquipmentProperties,
+  mergeSubModificationsIntoTree,
   modificationByAssignmentDtoToForm,
   modificationByAssignmentFormSchema,
   modificationByAssignmentFormToDto,
   modificationPropertiesSchema,
+  moveSubModificationInTree,
+  networkModificationTableStyles,
   newEquipmentDeletionDto,
   onlyStartedGeneratorsOptions,
   queryValidator,
@@ -755,6 +805,8 @@ export {
   toModificationProperties,
   translateSwitchKinds,
   unscrollableDialogStyles,
+  updateModificationFieldInTree,
+  updateSubModificationsOfACompositeInTree,
   useConvertValue,
   useCsvExport,
   useCustomFormContext,
@@ -762,6 +814,7 @@ export {
   useGlobalAnnouncement,
   useHvdcLccDeletion,
   useListenerManager,
+  useModificationsDragAndDrop,
   useNotificationsListener,
   useParametersForm,
   useTabs,

package/dist/components/network-modification-table/columns-definition.d.ts

@@ -0,0 +1,26 @@
+import { NetworkModificationEditorNameHeaderProps } from './renderers';
+export declare const computeTagMinSize: (tag: string) => number;
+export declare const BASE_MODIFICATION_TABLE_COLUMNS: {
+    DRAG_HANDLE: {
+        id: string;
+        autoExtensible: boolean;
+    };
+    SELECT: {
+        id: string;
+        autoExtensible: boolean;
+    };
+    NAME: {
+        id: string;
+        autoExtensible: boolean;
+    };
+    DESCRIPTION: {
+        id: string;
+        autoExtensible: boolean;
+    };
+    SWITCH: {
+        id: string;
+        autoExtensible: boolean;
+    };
+};
+export declare const AUTO_EXTENSIBLE_COLUMNS: string[];
+export type NameHeaderProps = Omit<NetworkModificationEditorNameHeaderProps, 'modificationCount'>;

package/dist/components/network-modification-table/columns-definition.js

@@ -0,0 +1,36 @@
+const CHIP_PADDING_PX = 24;
+const CHAR_WIDTH_PX = 8;
+const COLUMN_PADDING_PX = 12;
+const MIN_COLUMN_SIZE = 40;
+const computeTagMinSize = (tag) => {
+  const chipContentWidth = tag.length * CHAR_WIDTH_PX + CHIP_PADDING_PX;
+  return Math.max(chipContentWidth + COLUMN_PADDING_PX, MIN_COLUMN_SIZE);
+};
+const BASE_MODIFICATION_TABLE_COLUMNS = {
+  DRAG_HANDLE: {
+    id: "dragHandle",
+    autoExtensible: false
+  },
+  SELECT: {
+    id: "select",
+    autoExtensible: false
+  },
+  NAME: {
+    id: "modificationName",
+    autoExtensible: true
+  },
+  DESCRIPTION: {
+    id: "modificationDescription",
+    autoExtensible: false
+  },
+  SWITCH: {
+    id: "switch",
+    autoExtensible: false
+  }
+};
+const AUTO_EXTENSIBLE_COLUMNS = Object.values(BASE_MODIFICATION_TABLE_COLUMNS).filter((column) => column.autoExtensible).map((column) => column.id);
+export {
+  AUTO_EXTENSIBLE_COLUMNS,
+  BASE_MODIFICATION_TABLE_COLUMNS,
+  computeTagMinSize
+};

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

@@ -0,0 +1,13 @@
+/**
+ * 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 './network-modification-table-styles';
+export * from './columns-definition';
+export * from './network-modifications-table';
+export * from './use-modifications-drag-and-drop';
+export * from './renderers';
+export * from './row';
+export * from './utils';

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

@@ -0,0 +1,55 @@
+import { 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 } from "./network-modification-table-styles.js";
+import { AUTO_EXTENSIBLE_COLUMNS, BASE_MODIFICATION_TABLE_COLUMNS, computeTagMinSize } from "./columns-definition.js";
+import { NetworkModificationsTable } from "./network-modifications-table.js";
+import { useModificationsDragAndDrop } from "./use-modifications-drag-and-drop.js";
+import { DepthBox } from "./renderers/depth-box.js";
+import { DragHandleCell } from "./renderers/drag-handle-cell.js";
+import { NameCell } from "./renderers/name-cell.js";
+import { NetworkModificationEditorNameHeader } from "./renderers/network-modification-node-editor-name-header.js";
+import { SelectCell } from "./renderers/select-cell.js";
+import { SelectHeaderCell } from "./renderers/select-header-cell.js";
+import { DragCloneRow } from "./row/drag-row-clone.js";
+import { ModificationRow } from "./row/modification-row.js";
+import { fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
+export {
+  AUTO_EXTENSIBLE_COLUMNS,
+  BASE_MODIFICATION_TABLE_COLUMNS,
+  COLUMNS_WITHOUT_BORDER,
+  DEPTH_CELL_WIDTH,
+  DROP_FORBIDDEN_INDICATOR_BOTTOM,
+  DROP_FORBIDDEN_INDICATOR_TOP,
+  DROP_INDICATOR_BOTTOM,
+  DROP_INDICATOR_TOP,
+  DepthBox,
+  DragCloneRow,
+  DragHandleCell,
+  MODIFICATION_ROW_HEIGHT,
+  ModificationRow,
+  NameCell,
+  NetworkModificationEditorNameHeader,
+  NetworkModificationsTable,
+  SelectCell,
+  SelectHeaderCell,
+  computeTagMinSize,
+  createCellBorderColor,
+  createCellContentWrapperSx,
+  createCellStyle,
+  createEditDescriptionStyle,
+  createHeaderCellStyle,
+  createModificationNameCellStyle,
+  createNameCellLabelBoxSx,
+  createNameCellRootStyle,
+  createRootNetworkChipCellSx,
+  createRowSx,
+  fetchSubModificationsForExpandedRows,
+  findAllLoadedCompositeModifications,
+  findModificationInTree,
+  formatToComposedModification,
+  isCompositeModification,
+  mergeSubModificationsIntoTree,
+  moveSubModificationInTree,
+  networkModificationTableStyles,
+  updateModificationFieldInTree,
+  updateSubModificationsOfACompositeInTree,
+  useModificationsDragAndDrop
+};

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

@@ -0,0 +1,210 @@
+import { VirtualItem } from '@tanstack/react-virtual';
+import { SxProps, Theme } from '@mui/material';
+import { CSSProperties } from 'react';
+export declare const MODIFICATION_ROW_HEIGHT = 41;
+export declare const DEPTH_CELL_WIDTH: number;
+export declare const createCellBorderColor: (theme: Theme) => string;
+export declare const networkModificationTableStyles: {
+    readonly tableWrapper: (theme: Theme) => {
+        display: "flex";
+        flexDirection: "column";
+        flexGrow: number;
+        margin: string;
+        border: `1px solid ${string}`;
+        overflow: "hidden";
+        minHeight: number;
+    };
+    readonly container: {
+        readonly position: "relative";
+        readonly flexGrow: 1;
+        readonly overflow: "auto";
+        readonly height: "100%";
+    };
+    readonly table: (theme: Theme) => {
+        width: string;
+        tableLayout: "fixed";
+        borderCollapse: "collapse";
+        backgroundColor: string;
+    };
+    readonly thead: (theme: Theme) => {
+        backgroundColor: string;
+        position: "sticky";
+        top: number;
+        zIndex: number;
+        width: string;
+        '& tr:hover': {
+            backgroundColor: "transparent";
+        };
+    };
+    readonly tableRow: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly transition: "none";
+        readonly opacity: 1;
+    };
+    readonly tableBody: {
+        readonly position: "relative";
+    };
+    readonly tableCell: {
+        readonly fontSize: "small";
+        readonly minWidth: 0;
+        readonly display: "flex";
+    };
+    readonly dragRowClone: (theme: Theme) => {
+        backgroundColor: "background.paper";
+        boxShadow: number;
+        opacity: number;
+        border: "1px solid #f5f5f5";
+        display: "flex";
+        width: string;
+        padding: string;
+    };
+    readonly overflow: {
+        readonly whiteSpace: "pre";
+        readonly textOverflow: "ellipsis";
+        readonly overflow: "hidden";
+    };
+    readonly selectCheckBox: (theme: Theme) => {
+        padding: string;
+    };
+    readonly dragHandle: (theme: Theme) => {
+        display: "flex";
+        alignItems: "center";
+        cursor: "grab";
+        opacity: number;
+        padding: string;
+        'tr:hover &': {
+            opacity: number;
+        };
+    };
+    readonly dragIndicatorIcon: {
+        readonly width: "16px";
+        readonly height: "16px";
+    };
+    readonly modificationLabel: {
+        readonly textOverflow: "ellipsis";
+        readonly overflow: "hidden";
+        readonly whiteSpace: "nowrap";
+        readonly paddingLeft: "0.5vw";
+    };
+    readonly rootNetworkHeader: {
+        readonly width: "100%";
+        readonly display: "flex";
+        readonly justifyContent: "center";
+    };
+    readonly columnCell: {
+        readonly select: {
+            readonly padding: 2;
+            readonly justifyContent: "center";
+        };
+        readonly modificationName: {
+            readonly cursor: "pointer";
+            readonly minWidth: 0;
+            readonly overflow: "hidden";
+            readonly flex: 1;
+        };
+        readonly rootNetworkChip: {
+            readonly textAlign: "center";
+        };
+    };
+    readonly nameCellInnerRow: {
+        readonly position: "relative";
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: 0;
+        readonly flex: 1;
+        readonly minWidth: 0;
+        readonly alignSelf: "stretch";
+    };
+    readonly nameCellTogglerBox: {
+        readonly width: `${number}px`;
+        readonly alignItems: "center";
+        readonly justifyContent: "center";
+    };
+    readonly nameCellToggleButton: {
+        readonly padding: "4px";
+        readonly width: `${number}px`;
+        readonly height: `${number}px`;
+    };
+    readonly nameCellLabelBoxPlain: {
+        readonly flex: 1;
+        readonly minWidth: 0;
+    };
+    readonly folderDepthBox: (theme: Theme) => {
+        width: string;
+        display: "flex";
+        alignSelf: "stretch";
+        position: "relative";
+        borderRight: string;
+    };
+    readonly depthBox: (theme: Theme) => {
+        width: string;
+        display: "flex";
+        justifyContent: "flex-start";
+        alignSelf: "stretch";
+        position: "relative";
+        borderRight: string;
+    };
+    readonly depthBoxTick: (theme: Theme) => {
+        position: "absolute";
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+        backgroundColor: string;
+    };
+    readonly modificationNameHeader: {
+        readonly display: "flex";
+        readonly flexDirection: "row";
+        readonly alignItems: "center";
+        readonly minWidth: 0;
+        readonly gap: 2;
+        readonly '& .MuiTypography-root': {
+            readonly fontSize: "inherit";
+        };
+    };
+    readonly icon: (theme: Theme) => {
+        width: string;
+    };
+    readonly iconEdit: (theme: Theme) => {
+        marginRight: string;
+    };
+    readonly circularProgress: (theme: Theme) => {
+        marginRight: string;
+        color: string;
+    };
+    readonly modificationCircularProgress: (theme: Theme) => {
+        marginRight: string;
+        color: string;
+    };
+    readonly toolbarCircularProgress: (theme: Theme) => {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        marginLeft: string;
+        marginRight: string;
+        color: string;
+    };
+};
+export declare const DROP_INDICATOR_TOP = "inset 0 2px 0 #90caf9";
+export declare const DROP_INDICATOR_BOTTOM = "inset 0 -2px 0 #90caf9";
+export declare const DROP_FORBIDDEN_INDICATOR_TOP = "inset 0 2px 0 #FF3636";
+export declare const DROP_FORBIDDEN_INDICATOR_BOTTOM = "inset 0 -2px 0 #FF3636";
+export declare const createRowSx: (theme: Theme, isHighlighted: boolean, isDragging: boolean, virtualRow: VirtualItem, depth: number, isComposite: boolean) => SxProps;
+export declare const createModificationNameCellStyle: (activated: boolean) => CSSProperties;
+export declare const createRootNetworkChipCellSx: (activated: boolean) => SxProps;
+export declare const createEditDescriptionStyle: (description: string | undefined) => SxProps;
+export declare const createCellStyle: (cell: any, isAutoExtensible: boolean) => any;
+export declare const createHeaderCellStyle: (header: any, theme: Theme, isFirst: boolean, isLast: boolean, isAutoExtensible: boolean) => any;
+export declare const COLUMNS_WITHOUT_BORDER: Set<string>;
+export declare const createCellContentWrapperSx: (theme: Theme, withoutBorders: boolean) => SxProps;
+export declare const createNameCellRootStyle: (theme: Theme, isExpanded: boolean, depth: number) => {
+    borderTop?: string | undefined;
+    borderBottom?: string | undefined;
+    height: string;
+    width: string;
+    display: string;
+    alignItems: string;
+    gap: number;
+};
+export declare const createNameCellLabelBoxSx: (isExpanded: boolean, depth: number) => SxProps<Theme>;