@gridsuite/commons-ui 0.229.0 → 0.231.0

package/dist/components/composite/customAGGrid/customAggrid.js

@@ -1,14 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { AgGridReact } from "ag-grid-react";
+import { AgGridProvider, AgGridReact } from "ag-grid-react";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
+import { AllCommunityModule } from "ag-grid-community";
 import { AG_GRID_LOCALE_EN, AG_GRID_LOCALE_FR } from "@ag-grid-community/locale";
 import { useIntl } from "react-intl";
 import { useTheme, Box } from "@mui/material";
 import { mergeSx } from "../../../utils/styles.js";
 import { CUSTOM_AGGRID_THEME, styles } from "./customAggrid.style.js";
 import { LANG_ENGLISH, LANG_FRENCH } from "../../../utils/langs.js";
+const modules = [AllCommunityModule];
 function useAgGridLocale(overrideLocales) {
   const intl = useIntl();
   return useMemo(() => {
@@ -43,7 +45,7 @@ const CustomAGGrid = forwardRef(
         component: "div",
         sx: mergeSx(styles.grid, sx),
         className: `${theme.aggrid.theme} ${CUSTOM_AGGRID_THEME}`,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(AgGridProvider, { modules, children: /* @__PURE__ */ jsx(
           AgGridReact,
           {
             ref,
@@ -53,7 +55,7 @@ const CustomAGGrid = forwardRef(
             theme: "legacy",
             ...agGridReactProps
           }
-        )
+        ) })
       }
     );
   }

package/dist/components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js

@@ -118,7 +118,7 @@ function ElementSaveDialog({
     onClose();
   }, [onClose, reset, initialOperation]);
   useEffect(() => {
-    if (!isCreateMode) {
+    if (!isCreateMode || !defaultName && !prefixIdForGeneratedName) {
       return;
     }
     const name = defaultName ?? `${intl.formatMessage({ id: prefixIdForGeneratedName })}-${(/* @__PURE__ */ new Date()).toISOString()}`;

package/dist/features/index.js

@@ -197,7 +197,7 @@ import { SelectHeaderCell } from "./network-modification-table/renderers/select-
 import { SwitchCell } from "./network-modification-table/renderers/switch-cell.js";
 import { DragCloneRow } from "./network-modification-table/row/drag-row-clone.js";
 import { ModificationRow } from "./network-modification-table/row/modification-row.js";
-import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./network-modification-table/utils.js";
 import { AnnouncementBanner } from "./announcement/AnnouncementBanner.js";
 import { AnnouncementNotification } from "./announcement/AnnouncementNotification.js";
 import { useGlobalAnnouncement } from "./announcement/useGlobalAnnouncement.js";
@@ -654,6 +654,7 @@ export {
   networkModificationTableStyles,
   newEquipmentDeletionDto,
   onlyStartedGeneratorsOptions,
+  removeUuidsFromTree,
   sanitizePercentageValue,
   setCurrentReactiveCapabilityCurveTable,
   setSelectedReactiveLimits,

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

@@ -14,7 +14,7 @@ import { SelectHeaderCell } from "./renderers/select-header-cell.js";
 import { SwitchCell } from "./renderers/switch-cell.js";
 import { DragCloneRow } from "./row/drag-row-clone.js";
 import { ModificationRow } from "./row/modification-row.js";
-import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./utils.js";
 export {
   AUTO_EXTENSIBLE_COLUMNS,
   BASE_MODIFICATION_TABLE_COLUMNS,
@@ -67,6 +67,7 @@ export {
   mergeSubModificationsIntoTree,
   moveSubModificationInTree,
   networkModificationTableStyles,
+  removeUuidsFromTree,
   updateModificationFieldInTree,
   updateSubModificationsOfACompositeInTree,
   useModificationsDragAndDrop

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, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
+import { formatToComposedModification, findDepth, MAX_COMPOSITE_NESTING_DEPTH, mergeSubModificationsIntoTree, removeUuidsFromTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
 import "@mui/icons-material";
 import "react-intl";
 import "../../utils/conversionUtils.js";
@@ -51,6 +51,14 @@ function NetworkModificationsTable({
   useEffect(() => {
     composedModificationsRef.current = composedModifications;
   }, [composedModifications]);
+  const modificationToEditLabelRef = useRef(modificationToEditLabel);
+  useEffect(() => {
+    modificationToEditLabelRef.current = modificationToEditLabel;
+  }, [modificationToEditLabel]);
+  const highlightedModificationUuidRef = useRef(highlightedModificationUuid);
+  useEffect(() => {
+    highlightedModificationUuidRef.current = highlightedModificationUuid;
+  }, [highlightedModificationUuid]);
   const isAssemblyDepthExceeded = useCallback((rows2) => {
     if (rows2.length === 0) return false;
     const firstSelectedRowDepth = findDepth(composedModificationsRef.current, rows2[0].uuid);
@@ -67,18 +75,22 @@ function NetworkModificationsTable({
     onRowSelected: handleRowSelected
   });
   useEffect(() => {
-    setComposedModifications((prevMods) => {
-      const nextMods = mergeSubModificationsIntoTree(formatToComposedModification(modifications), prevMods);
-      const loadedComposite = [];
-      findAllLoadedCompositeModifications(nextMods, loadedComposite);
+    const prevMods = composedModificationsRef.current;
+    const newTopLevelUuids = new Set(modifications.map((m) => m.uuid));
+    const nextMods = mergeSubModificationsIntoTree(formatToComposedModification(modifications), prevMods).map(
+      (mod) => mod.subModifications.length > 0 ? { ...mod, subModifications: removeUuidsFromTree(mod.subModifications, newTopLevelUuids) } : mod
+    );
+    setComposedModifications(nextMods);
+    const loadedComposites = [];
+    findAllLoadedCompositeModifications(prevMods, loadedComposites);
+    if (loadedComposites.length > 0) {
       fetchSubModificationsForExpandedRows(
-        loadedComposite.map((mod) => mod.uuid),
+        loadedComposites.map((m) => m.uuid),
         nextMods,
         setComposedModifications,
         true
       );
-      return nextMods;
-    });
+    }
   }, [modifications]);
   const handleExpandRow = useCallback((updater) => {
     setExpanded((prevExpanded) => {
@@ -110,7 +122,7 @@ function NetworkModificationsTable({
         lastClickedRowId,
         onRowSelected: handleRowSelected,
         isRowDragDisabled,
-        modificationToEditLabel
+        modificationToEditLabel: modificationToEditLabelRef
       },
       status: {
         isImpactedByNotification,
@@ -130,7 +142,7 @@ function NetworkModificationsTable({
       setModificationsToExclude,
       lastClickedRowId,
       handleRowSelected,
-      modificationToEditLabel,
+      modificationToEditLabelRef,
       isRowDragDisabled,
       isImpactedByNotification,
       notificationMessageId,
@@ -210,13 +222,14 @@ function NetworkModificationsTable({
     lastClickedRowId.current = null;
   }, [lastClickedRowId, table, currentNodeId]);
   useEffect(() => {
-    if (highlightedModificationUuid && containerRef.current) {
-      const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuid);
+    if (highlightedModificationUuidRef.current && containerRef.current) {
+      const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuidRef.current);
       if (rowIndex !== -1) {
-        virtualizer.scrollToIndex(rowIndex, { align: "start", behavior: "auto" });
+        virtualizer.scrollToIndex(rowIndex, { align: "center", behavior: "auto" });
+        highlightedModificationUuidRef.current = null;
       }
     }
-  }, [highlightedModificationUuid, rows, virtualizer]);
+  }, [highlightedModificationUuidRef, 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,

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

@@ -3,19 +3,59 @@ import { useCallback, useMemo, useState, useEffect, useRef } from "react";
 import { useIntl } from "react-intl";
 import { useTheme, Box, IconButton, InputBase } from "@mui/material";
 import { KeyboardArrowDown, KeyboardArrowRight } from "@mui/icons-material";
-import { CustomTooltip } from "../../../components/ui/tooltip/CustomTooltip.js";
-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 "../../../components/ui/overflowableText/OverflowableText.js";
 import "../../../utils/conversionUtils.js";
 import { snackWithFallback } from "../../../utils/error.js";
 import "../../../utils/types/equipmentType.js";
 import { mergeSx } from "../../../utils/styles.js";
+import "react-hook-form";
+import { useModificationLabelComputer } from "../../../hooks/useModificationLabelComputer.js";
 import "localized-countries";
 import "localized-countries/data/fr";
 import "localized-countries/data/en";
 import { useSnackMessage } from "../../../hooks/useSnackMessage.js";
+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.svg?react";
+import "../../../components/ui/dialogs/descriptionModificationDialog/DescriptionModificationDialog.js";
+import "../../../components/ui/reactHookForm/expandableInput/ExpandableInput.js";
+import "@hello-pangea/dnd";
+import "../../../components/ui/dialogs/elementSaveDialog/ElementSaveDialog.js";
+import "../../../components/ui/snackbarProvider/SnackbarProvider.js";
+import "mui-nested-menu";
+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 { networkModificationTableStyles, createNameCellLabelBoxSx, createModificationNameCellStyle, createNameCellRootStyle } from "../network-modification-table-styles.js";
+import { DepthBox } from "./depth-box.js";
+import { isCompositeModification } from "../utils.js";
 const MIN_CHAR_WIDTH = 30;
 function measureTextPx(text, font) {
   const ctx = document.createElement("canvas").getContext("2d");
@@ -26,13 +66,13 @@ function measureTextPx(text, font) {
   return text.length * 8;
 }
 function NameCell({ row, table, onChange }) {
+  const { meta } = table.options;
   const intl = useIntl();
   const theme = useTheme();
   const { computeLabel } = useModificationLabelComputer();
   const { snackError } = useSnackMessage();
   const { depth } = row;
   const isComposite = isCompositeModification(row.original);
-  const modificationToEditLabel = table.options.meta?.interaction.modificationToEditLabel;
   const getModificationLabel = useCallback(
     (modification, formatBold = true) => {
       return intl.formatMessage(
@@ -106,11 +146,16 @@ function NameCell({ row, table, onChange }) {
       inputRef.current?.select();
     });
   }, []);
+  const defaultCompositeName = useMemo(() => intl.formatMessage({ id: "CompositeModification" }), [intl]);
   useEffect(() => {
-    if (isComposite && modificationToEditLabel === row.original.uuid) {
-      beginEditingName(intl.formatMessage({ id: "CompositeModification" }));
+    const modificationToEditLabel = meta?.interaction.modificationToEditLabel.current;
+    if (isComposite && !isEditingRef.current && modificationToEditLabel === row.original.uuid) {
+      beginEditingName(defaultCompositeName);
+      if (meta) {
+        meta.interaction.modificationToEditLabel.current = null;
+      }
     }
-  }, [modificationToEditLabel, intl, isComposite, row.original.uuid, beginEditingName]);
+  }, [meta, defaultCompositeName, isComposite, row.original.uuid, beginEditingName]);
   const handleLabelClick = useCallback(
     (e) => {
       e.stopPropagation();

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

@@ -49,6 +49,19 @@ function propagateSelectionToLoadedDescendants(selection, roots) {
   roots.forEach((root) => visit(root, false));
   return mutated ? next : selection;
 }
+function collectAllUuids(mods) {
+  const uuids = /* @__PURE__ */ new Set();
+  const visit = (nodes) => nodes.forEach((m) => {
+    uuids.add(m.uuid);
+    visit(m.subModifications);
+  });
+  visit(mods);
+  return uuids;
+}
+function pruneStaleSelection(selection, allUuids) {
+  const pruned = Object.fromEntries(Object.entries(selection).filter(([uuid]) => allUuids.has(uuid)));
+  return Object.keys(pruned).length === Object.keys(selection).length ? selection : pruned;
+}
 function useModificationsSelection({
   modifications,
   onRowSelected
@@ -71,7 +84,11 @@ function useModificationsSelection({
     [onRowSelected]
   );
   useEffect(() => {
-    setRowSelection((prev) => propagateSelectionToLoadedDescendants(prev, modifications));
+    setRowSelection((prev) => {
+      const propagated = propagateSelectionToLoadedDescendants(prev, modifications);
+      const allUuids = collectAllUuids(modifications);
+      return pruneStaleSelection(propagated, allUuids);
+    });
   }, [modifications]);
   return { rowSelection, onRowSelectionChange, lastClickedRowId, emitSelection };
 }

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

@@ -5,6 +5,7 @@ export declare const MAX_COMPOSITE_NESTING_DEPTH = 5;
 export declare const formatToComposedModification: (modifications: NetworkModificationMetadata[]) => ComposedModificationMetadata[];
 export declare function isCompositeModification(modification: ComposedModificationMetadata | undefined): boolean;
 export declare function findDepth(mods: ComposedModificationMetadata[], uuid: UUID, currentDepth?: number): number;
+export declare function removeUuidsFromTree(mods: ComposedModificationMetadata[], uuidsToRemove: Set<string>): ComposedModificationMetadata[];
 /**
  *
  * @param modifications source where the composite modifications are looked for

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

@@ -21,6 +21,11 @@ function findDepth(mods, uuid, currentDepth = 0) {
   }
   return -1;
 }
+function removeUuidsFromTree(mods, uuidsToRemove) {
+  return mods.filter((m) => !uuidsToRemove.has(m.uuid)).map(
+    (m) => m.subModifications.length > 0 ? { ...m, subModifications: removeUuidsFromTree(m.subModifications, uuidsToRemove) } : m
+  );
+}
 function findAllLoadedCompositeModifications(modifications, composites) {
   modifications.forEach((modification) => {
     if (isCompositeModification(modification) && modification.subModifications.length > 0) {
@@ -171,6 +176,7 @@ export {
   isCompositeModification,
   mergeSubModificationsIntoTree,
   moveSubModificationInTree,
+  removeUuidsFromTree,
   updateModificationFieldInTree,
   updateSubModificationsOfACompositeInTree
 };

package/dist/index.js

@@ -354,7 +354,7 @@ import { SelectHeaderCell } from "./features/network-modification-table/renderer
 import { SwitchCell } from "./features/network-modification-table/renderers/switch-cell.js";
 import { DragCloneRow } from "./features/network-modification-table/row/drag-row-clone.js";
 import { ModificationRow } from "./features/network-modification-table/row/modification-row.js";
-import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./features/network-modification-table/utils.js";
+import { MAX_COMPOSITE_NESTING_DEPTH, fetchSubModificationsForExpandedRows, findAllLoadedCompositeModifications, findDepth, findModificationInTree, formatToComposedModification, isCompositeModification, mergeSubModificationsIntoTree, moveSubModificationInTree, removeUuidsFromTree, updateModificationFieldInTree, updateSubModificationsOfACompositeInTree } from "./features/network-modification-table/utils.js";
 import { AnnouncementBanner } from "./features/announcement/AnnouncementBanner.js";
 import { AnnouncementNotification } from "./features/announcement/AnnouncementNotification.js";
 import { useGlobalAnnouncement } from "./features/announcement/useGlobalAnnouncement.js";
@@ -1340,6 +1340,7 @@ export {
   queryValidator,
   recursiveRemove,
   removeNullFields,
+  removeUuidsFromTree,
   reportViewerEn,
   reportViewerFr,
   resetAuthenticationRouterError,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.229.0",
+    "version": "0.231.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",
@@ -46,7 +46,7 @@
         "licenses-check": "license-checker --summary --excludePrivatePackages --production --onlyAllow \"$( jq -r .onlyAllow[] license-checker-config.json | tr '\n' ';')\" --excludePackages \"$( jq -r .excludePackages[] license-checker-config.json | tr '\n' ';')\""
     },
     "dependencies": {
-        "@ag-grid-community/locale": "^33.3.2",
+        "@ag-grid-community/locale": "^35.3.1",
         "@hello-pangea/dnd": "^18.0.1",
         "@material-symbols/svg-400": "^0.31.9",
         "@react-querybuilder/dnd": "^8.11.0",
@@ -77,8 +77,8 @@
         "@mui/lab": "6.0.1-beta.36",
         "@mui/material": "^6.5.0",
         "@mui/x-tree-view": "^8.21.0",
-        "ag-grid-community": "^33.0.3",
-        "ag-grid-react": "^33.0.4",
+        "ag-grid-community": "^35.3.1",
+        "ag-grid-react": "^35.3.1",
         "notistack": "^3.0.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -120,8 +120,8 @@
         "@types/react-resizable": "^3.0.8",
         "@types/react-window": "^1.8.8",
         "@vitejs/plugin-react": "^5.0.4",
-        "ag-grid-community": "^33.1.0",
-        "ag-grid-react": "^33.3.2",
+        "ag-grid-community": "^35.3.1",
+        "ag-grid-react": "^35.3.1",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",