@topconsultnpm/sdkui-react 6.20.0-dev1.110 → 6.20.0-dev1.111

package/lib/components/base/TMTreeView.d.ts

@@ -22,10 +22,11 @@ interface ITMTreeViewProps<T extends ITMTreeItem> {
     onNodeUpdate?: (updatedNode: T) => void;
     onDataChanged?: (items: T[]) => void;
     shouldDelayFocusOnEvent?: (node: T, event: React.MouseEvent) => boolean;
+    autoSelectChildren?: boolean;
     itemsPerPage?: number;
     showLoadMoreButton?: boolean;
 }
-declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: <T extends ITMTreeItem>({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren, itemsPerPage, showLoadMoreButton }: ITMTreeViewProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
 export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isSelected?: boolean;

package/lib/components/base/TMTreeView.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { IconChevronDown, IconChevronRight } from '../../helper';
 import TMButton from './TMButton';
-const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, itemsPerPage = 100, showLoadMoreButton = true }) => {
+const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, autoSelectChildren = true, itemsPerPage = 100, showLoadMoreButton = true }) => {
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (!focusedItem)
@@ -187,47 +187,51 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         };
         let newSelectedItems;
         if (checked) {
-            if (node.isContainer) {
-                // Quando selezioni un container, aggiungi il container stesso + tutti i figli
+            if (node.isContainer && autoSelectChildren) {
+                // Quando selezioni un container, aggiungi il container stesso + tutti i figli (se autoSelectChildren è true)
                 const allChildren = flattenTree(node.items || []);
                 newSelectedItems = [...selectedItems, node, ...allChildren];
             }
             else if (!selectedItems.some(item => item.key === node.key)) {
-                // Quando selezioni un figlio, aggiungi il figlio
+                // Quando selezioni un figlio o un container con autoSelectChildren=false, aggiungi solo il nodo
                 newSelectedItems = [...selectedItems, node];
-                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent
-                const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
-                newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                // Verifica se selezionando questo figlio sono ora selezionati tutti i figli del parent (solo se autoSelectChildren è true)
+                if (autoSelectChildren) {
+                    const parentsToAdd = findAndCheckParents(dataSource, node, newSelectedItems);
+                    newSelectedItems = [...newSelectedItems, ...parentsToAdd];
+                }
             }
             else {
                 newSelectedItems = selectedItems;
             }
         }
-        else if (node.isContainer) {
-            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli
+        else if (node.isContainer && autoSelectChildren) {
+            // Quando deselezioni un container, rimuovi il container stesso + tutti i figli (solo se autoSelectChildren è true)
             const childKeys = flattenTree(node.items || []).map(item => item.key);
             newSelectedItems = selectedItems.filter(item => item.key !== node.key && !childKeys.includes(item.key));
         }
         else {
-            // Quando deselezioni un figlio, rimuovi il figlio
+            // Quando deselezioni un figlio o un container con autoSelectChildren=false, rimuovi solo il nodo
             newSelectedItems = selectedItems.filter(item => item.key !== node.key);
-            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent
-            const removeParentContainers = (items) => {
-                const parentsToRemove = [];
-                items.forEach(item => {
-                    if (item.isContainer && item.items) {
-                        const childKeys = flattenTree(item.items).map(child => child.key);
-                        if (childKeys.includes(node.key)) {
-                            parentsToRemove.push(item.key);
+            // Se il figlio apparteneva a un parent che era selezionato, rimuovi anche il parent (solo se autoSelectChildren è true)
+            if (autoSelectChildren && !node.isContainer) {
+                const removeParentContainers = (items) => {
+                    const parentsToRemove = [];
+                    items.forEach(item => {
+                        if (item.isContainer && item.items) {
+                            const childKeys = flattenTree(item.items).map(child => child.key);
+                            if (childKeys.includes(node.key)) {
+                                parentsToRemove.push(item.key);
+                            }
+                            // Ricorsione per parent annidati
+                            parentsToRemove.push(...removeParentContainers(item.items));
                         }
-                        // Ricorsione per parent annidati
-                        parentsToRemove.push(...removeParentContainers(item.items));
-                    }
-                });
-                return parentsToRemove;
-            };
-            const parentsToRemove = removeParentContainers(dataSource);
-            newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+                    });
+                    return parentsToRemove;
+                };
+                const parentsToRemove = removeParentContainers(dataSource);
+                newSelectedItems = newSelectedItems.filter(item => !parentsToRemove.includes(item.key));
+            }
         }
         onSelectionChanged?.(newSelectedItems);
     };
@@ -252,6 +256,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
     // 	setTreeData(prevData => collapseAll(prevData));
     // };
     const isIndeterminate = (node) => {
+        // Lo stato indeterminate ha senso solo quando autoSelectChildren è true
+        if (!autoSelectChildren)
+            return false;
         if (!node.isContainer || !node.items)
             return false;
         const childKeys = flattenTree(node.items).map(item => item.key);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.110",
+  "version": "6.20.0-dev1.111",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",