@gridsuite/commons-ui 0.198.0 → 0.200.0

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

@@ -7,6 +7,7 @@ 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 { useModificationsSelection } from "./use-modifications-selection.js";
 import { formatToComposedModification, mergeSubModificationsIntoTree, findAllLoadedCompositeModifications, fetchSubModificationsForExpandedRows, isCompositeModification } from "./utils.js";
 import "@mui/icons-material";
 import "react-intl";
@@ -33,11 +34,14 @@ function NetworkModificationsTable({
 }) {
   const theme = useTheme();
   const containerRef = useRef(null);
-  const lastClickedIndex = useRef(null);
   const [expanded, setExpanded] = useState({});
   const [composedModifications, setComposedModifications] = useState(
     formatToComposedModification(modifications)
   );
+  const { rowSelection, onRowSelectionChange, lastClickedRowId, emitSelection } = useModificationsSelection({
+    modifications: composedModifications,
+    onRowSelected
+  });
   const columns = useMemo(
     () => createAllColumns(
       isRowDragDisabled ?? false,
@@ -77,19 +81,23 @@ function NetworkModificationsTable({
   const table = useReactTable({
     data: composedModifications,
     columns,
-    state: { expanded },
+    state: { expanded, rowSelection },
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSubRows: (row) => row.subModifications,
     getRowId: (row) => row.uuid,
     getRowCanExpand: (row) => isCompositeModification(row.original),
     enableRowSelection: true,
-    enableSubRowSelection: false,
+    enableSubRowSelection: true,
     enableExpanding: true,
     onExpandedChange: handleExpandRow,
-    meta: { lastClickedIndex, onRowSelected }
+    onRowSelectionChange,
+    meta: { lastClickedRowId, onRowSelected }
   });
-  const { rows } = table.getRowModel();
+  const { rows, flatRows } = table.getRowModel();
+  useEffect(() => {
+    emitSelection(flatRows);
+  }, [rowSelection, flatRows, emitSelection]);
   const virtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => containerRef.current,
@@ -109,8 +117,8 @@ function NetworkModificationsTable({
   useEffect(() => {
     table.resetRowSelection();
     table.resetExpanded();
-    lastClickedIndex.current = null;
-  }, [table]);
+    lastClickedRowId.current = null;
+  }, [lastClickedRowId, table, currentNodeId]);
   useEffect(() => {
     if (highlightedModificationUuid && containerRef.current) {
       const rowIndex = rows.findIndex((row) => row.original.uuid === highlightedModificationUuid);

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

@@ -1,54 +1,43 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { useCallback } from "react";
 import { Checkbox } from "@mui/material";
 import { networkModificationTableStyles } from "../network-modification-table-styles.js";
+function toggleRange(rows, from, to, targetSelected) {
+  const [start, end] = from <= to ? [from, to] : [to, from];
+  rows.slice(start, end + 1).forEach((r) => {
+    if (r.getCanSelect()) {
+      r.toggleSelected(targetSelected);
+    }
+  });
+}
 function SelectCell({ row, table }) {
   const { meta } = table.options;
+  const isSelected = row.getIsSelected();
+  const isIndeterminate = !isSelected && row.getIsSomeSelected();
   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;
-            }
-          }
-        });
+      const anchorRowId = meta?.lastClickedRowId.current;
+      const anchorIndex = anchorRowId == null ? null : rows.findIndex((candidate) => candidate.id === anchorRowId);
+      const targetSelected = !isSelected;
+      if (event.shiftKey && anchorIndex != null && anchorIndex !== -1) {
+        toggleRange(rows, anchorIndex, currentIndex, targetSelected);
       } else {
-        row.toggleSelected();
-        if (row.getIsSelected()) {
-          delete nextSelection[row.id];
-        } else {
-          nextSelection[row.id] = true;
-        }
+        row.toggleSelected(targetSelected);
       }
       if (meta) {
-        meta.lastClickedIndex.current = currentIndex;
-        const selectedRows = rows.filter((r) => nextSelection[r.id]).map((r) => r.original);
-        meta.onRowSelected?.(selectedRows);
+        meta.lastClickedRowId.current = row.id;
       }
     },
-    [table, row, meta]
-  );
-  const hasPartiallySelectedSubRows = useMemo(
-    () => row.subRows.some((subRow) => subRow.getIsSelected()) && !row.getIsSelected(),
-    [row]
+    [table, row, meta, isSelected]
   );
   return /* @__PURE__ */ jsx(
     Checkbox,
     {
       size: "small",
-      checked: row.getIsSelected(),
-      indeterminate: hasPartiallySelectedSubRows,
+      checked: isSelected,
+      indeterminate: isIndeterminate,
       disabled: !row.getCanSelect(),
       onClick: handleChange,
       sx: networkModificationTableStyles.selectCheckBox

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

@@ -7,7 +7,7 @@ function SelectHeaderCell({ table }) {
     if (meta) {
       const nextSelectedRows = table.getIsAllRowsSelected() ? [] : table.getCoreRowModel().rows.map((r) => r.original);
       meta.onRowSelected?.(nextSelectedRows);
-      meta.lastClickedIndex.current = null;
+      meta.lastClickedRowId.current = null;
     }
     table.toggleAllRowsSelected();
   }, [table]);

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

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+import { Row, RowSelectionState, Updater } from '@tanstack/react-table';
+import { ComposedModificationMetadata } from '../../utils';
+interface UseModificationsSelectionParams {
+    modifications: ComposedModificationMetadata[];
+    onRowSelected: (selectedRows: ComposedModificationMetadata[]) => void;
+}
+interface UseModificationsSelectionResult {
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: (updater: Updater<RowSelectionState>) => void;
+    lastClickedRowId: RefObject<string | null>;
+    emitSelection: (flatRows: Row<ComposedModificationMetadata>[]) => void;
+}
+export declare function useModificationsSelection({ modifications, onRowSelected, }: UseModificationsSelectionParams): UseModificationsSelectionResult;
+export {};

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

@@ -0,0 +1,80 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+function normalizeCompositeSelection(rawSelection, roots) {
+  const next = { ...rawSelection };
+  const visit = (node) => {
+    const children = node.subModifications;
+    if (!children || children.length === 0) {
+      return next[node.uuid];
+    }
+    const everyChildSelected = children.map((child) => visit(child)).every(Boolean);
+    if (everyChildSelected) {
+      next[node.uuid] = true;
+    } else {
+      delete next[node.uuid];
+    }
+    return everyChildSelected;
+  };
+  roots.forEach((root) => visit(root));
+  return next;
+}
+function collectSelection(flatRows) {
+  const acc = [];
+  let skipBelowDepth = -1;
+  flatRows.forEach((row) => {
+    if (skipBelowDepth >= 0 && row.depth > skipBelowDepth) {
+      return;
+    }
+    skipBelowDepth = -1;
+    if (row.getIsSelected()) {
+      acc.push(row.original);
+      skipBelowDepth = row.depth;
+    }
+  });
+  return acc;
+}
+function propagateSelectionToLoadedDescendants(selection, roots) {
+  let next = selection;
+  let mutated = false;
+  const visit = (node, ancestorSelected) => {
+    const effectiveSelected = ancestorSelected || next[node.uuid];
+    if (effectiveSelected && !next[node.uuid]) {
+      if (!mutated) {
+        next = { ...selection };
+        mutated = true;
+      }
+      next[node.uuid] = true;
+    }
+    node.subModifications?.forEach((child) => visit(child, effectiveSelected));
+  };
+  roots.forEach((root) => visit(root, false));
+  return mutated ? next : selection;
+}
+function useModificationsSelection({
+  modifications,
+  onRowSelected
+}) {
+  const [rowSelection, setRowSelection] = useState({});
+  const lastClickedRowId = useRef(null);
+  const onRowSelectionChange = useCallback(
+    (updater) => {
+      setRowSelection((prev) => {
+        const raw = typeof updater === "function" ? updater(prev) : updater;
+        return normalizeCompositeSelection(raw, modifications);
+      });
+    },
+    [modifications]
+  );
+  const emitSelection = useCallback(
+    (flatRows) => {
+      onRowSelected(collectSelection(flatRows));
+    },
+    [onRowSelected]
+  );
+  useEffect(() => {
+    setRowSelection((prev) => propagateSelectionToLoadedDescendants(prev, modifications));
+  }, [modifications]);
+  return { rowSelection, onRowSelectionChange, lastClickedRowId, emitSelection };
+}
+export {
+  useModificationsSelection
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.198.0",
+    "version": "0.200.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",