@mui/x-tree-view 7.7.1 → 7.9.0

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.7.1
+ * @mui/x-tree-view v7.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -62,6 +62,12 @@ const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
+  const expansionTrigger = React.useMemo(() => {
+    if (params.expansionTrigger) {
+      return params.expansionTrigger;
+    }
+    return 'content';
+  }, [params.expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -72,6 +78,11 @@ const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
+    },
+    contextValue: {
+      expansion: {
+        expansionTrigger
+      }
     }
   };
 };
@@ -89,5 +100,6 @@ useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,
   onExpandedItemsChange: true,
-  onItemExpansionToggle: true
+  onItemExpansionToggle: true,
+  expansionTrigger: true
 };

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -52,8 +52,7 @@ const useTreeViewFocus = ({
     return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+    const itemElement = instance.getItemDOMElement(itemId);
     if (itemElement) {
       itemElement.focus();
     }

package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -101,6 +101,13 @@ const useTreeViewItems = ({
     return state.items.itemChildrenIndexes[parentId][itemId];
   }, [instance, state.items.itemChildrenIndexes]);
   const getItemOrderedChildrenIds = React.useCallback(itemId => state.items.itemOrderedChildrenIds[itemId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID] ?? [], [state.items.itemOrderedChildrenIds]);
+  const getItemDOMElement = itemId => {
+    const itemMeta = instance.getItemMeta(itemId);
+    if (itemMeta == null) {
+      return null;
+    }
+    return document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
+  };
   const isItemNavigable = itemId => {
     if (params.disabledItemsFocusable) {
       return true;
@@ -154,13 +161,15 @@ const useTreeViewItems = ({
       }
     }),
     publicAPI: {
-      getItem
+      getItem,
+      getItemDOMElement
     },
     instance: {
       getItemMeta,
       getItem,
       getItemsToRender,
       getItemIndex,
+      getItemDOMElement,
       getItemOrderedChildrenIds,
       isItemDisabled,
       isItemNavigable,

package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -83,10 +83,13 @@ const useTreeViewKeyboardNavigation = ({
           event.preventDefault();
           if (params.multiSelect && event.shiftKey) {
             instance.expandSelectionRange(event, itemId);
-          } else if (params.multiSelect) {
-            instance.selectItem(event, itemId, true);
           } else {
-            instance.selectItem(event, itemId, false);
+            instance.selectItem({
+              event,
+              itemId,
+              keepExistingSelection: params.multiSelect,
+              shouldBeSelected: params.multiSelect ? undefined : true
+            });
           }
           break;
         }
@@ -101,9 +104,16 @@ const useTreeViewKeyboardNavigation = ({
           } else if (canToggleItemSelection(itemId)) {
             if (params.multiSelect) {
               event.preventDefault();
-              instance.selectItem(event, itemId, true);
+              instance.selectItem({
+                event,
+                itemId,
+                keepExistingSelection: true
+              });
             } else if (!instance.isItemSelected(itemId)) {
-              instance.selectItem(event, itemId, false);
+              instance.selectItem({
+                event,
+                itemId
+              });
               event.preventDefault();
             }
           }

package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -55,7 +55,12 @@ const useTreeViewSelection = ({
     models.selectedItems.setControlledValue(newSelectedItems);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
-  const selectItem = (event, itemId, keepExistingSelection, newValue) => {
+  const selectItem = ({
+    event,
+    itemId,
+    keepExistingSelection = false,
+    shouldBeSelected
+  }) => {
     if (params.disableSelection) {
       return;
     }
@@ -63,16 +68,16 @@ const useTreeViewSelection = ({
     if (keepExistingSelection) {
       const cleanSelectedItems = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value);
       const isSelectedBefore = instance.isItemSelected(itemId);
-      if (isSelectedBefore && (newValue === false || newValue == null)) {
+      if (isSelectedBefore && (shouldBeSelected === false || shouldBeSelected == null)) {
         newSelected = cleanSelectedItems.filter(id => id !== itemId);
-      } else if (!isSelectedBefore && (newValue === true || newValue == null)) {
+      } else if (!isSelectedBefore && (shouldBeSelected === true || shouldBeSelected == null)) {
         newSelected = [itemId].concat(cleanSelectedItems);
       } else {
         newSelected = cleanSelectedItems;
       }
     } else {
       // eslint-disable-next-line no-lonely-if
-      if (newValue === false) {
+      if (shouldBeSelected === false || shouldBeSelected == null && instance.isItemSelected(itemId)) {
         newSelected = params.multiSelect ? [] : null;
       } else {
         newSelected = params.multiSelect ? [itemId] : itemId;
@@ -151,6 +156,9 @@ const useTreeViewSelection = ({
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
     }),
+    publicAPI: {
+      selectItem
+    },
     instance: {
       isItemSelected,
       selectItem,

package/node/useTreeItem2/useTreeItem2.js

@@ -22,6 +22,9 @@ const useTreeItem2 = parameters => {
       disableSelection,
       checkboxSelection
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
@@ -78,7 +81,9 @@ const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    interactions.handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      interactions.handleExpansion(event);
+    }
     if (!checkboxSelection) {
       interactions.handleSelection(event);
     }
@@ -104,6 +109,15 @@ const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createIconContainerHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (expansionTrigger === 'iconContainer') {
+      interactions.handleExpansion(event);
+    }
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _utils.extractEventHandlers)(parameters), (0, _utils.extractEventHandlers)(externalProps));
     let ariaSelected;
@@ -171,7 +185,9 @@ const useTreeItem2 = parameters => {
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, externalProps);
+    return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+      onClick: createIconContainerHandleClick(externalEventHandlers)
+    });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.7.1",
+  "version": "7.9.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.20",
-    "@mui/utils": "^5.15.20",
+    "@mui/system": "^5.16.0",
+    "@mui/utils": "^5.16.0",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",

package/useTreeItem2/useTreeItem2.d.ts

@@ -1,2 +1,2 @@
-import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2MinimalPlugins } from './useTreeItem2.types';
-export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins, TOptionalSignatures extends readonly [] = readonly []>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;
+import { UseTreeItem2Parameters, UseTreeItem2ReturnValue, UseTreeItem2MinimalPlugins, UseTreeItem2OptionalPlugins } from './useTreeItem2.types';
+export declare const useTreeItem2: <TSignatures extends UseTreeItem2MinimalPlugins = UseTreeItem2MinimalPlugins, TOptionalSignatures extends UseTreeItem2OptionalPlugins = readonly []>(parameters: UseTreeItem2Parameters) => UseTreeItem2ReturnValue<TSignatures, TOptionalSignatures>;

package/useTreeItem2/useTreeItem2.js

@@ -13,6 +13,9 @@ export const useTreeItem2 = parameters => {
       disableSelection,
       checkboxSelection
     },
+    expansion: {
+      expansionTrigger
+    },
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
@@ -69,7 +72,9 @@ export const useTreeItem2 = parameters => {
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
-    interactions.handleExpansion(event);
+    if (expansionTrigger === 'content') {
+      interactions.handleExpansion(event);
+    }
     if (!checkboxSelection) {
       interactions.handleSelection(event);
     }
@@ -95,6 +100,15 @@ export const useTreeItem2 = parameters => {
     }
     interactions.handleCheckboxSelection(event);
   };
+  const createIconContainerHandleClick = otherHandlers => event => {
+    otherHandlers.onClick?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    if (expansionTrigger === 'iconContainer') {
+      interactions.handleExpansion(event);
+    }
+  };
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
     let ariaSelected;
@@ -162,7 +176,9 @@ export const useTreeItem2 = parameters => {
   };
   const getIconContainerProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps);
+    return _extends({}, externalEventHandlers, externalProps, {
+      onClick: createIconContainerHandleClick(externalEventHandlers)
+    });
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -6,6 +6,7 @@ import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewS
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
 import { UseTreeViewKeyboardNavigationSignature } from '../internals/plugins/useTreeViewKeyboardNavigation';
+import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
 export interface UseTreeItem2Parameters {
     /**
      * The id attribute of the item. If not provided, it will be generated.
@@ -60,6 +61,7 @@ export interface UseTreeItem2ContentSlotOwnProps {
 }
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
+    onClick: MuiCancellableEventHandler<React.MouseEvent>;
 }
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2IconContainerSlotOwnProps;
 export interface UseTreeItem2LabelSlotOwnProps {
@@ -149,6 +151,7 @@ export interface UseTreeItem2ReturnValue<TSignatures extends UseTreeItem2Minimal
  */
 export type UseTreeItem2MinimalPlugins = readonly [
     UseTreeViewSelectionSignature,
+    UseTreeViewExpansionSignature,
     UseTreeViewItemsSignature,
     UseTreeViewFocusSignature,
     UseTreeViewKeyboardNavigationSignature