@mui/x-tree-view 7.22.0 → 8.0.0-alpha.0

package/modern/{useTreeItem2/useTreeItem2.js → useTreeItem/useTreeItem.js}

@@ -1,19 +1,20 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-import { useTreeItem2Utils } from "../hooks/useTreeItem2Utils/index.js";
+import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
-export const useTreeItem2 = parameters => {
+export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
       onItemClick,
-      disabledItemsFocusable,
-      indentationAtItemLevel
+      disabledItemsFocusable
     },
     selection: {
       disableSelection,
@@ -42,7 +43,7 @@ export const useTreeItem2 = parameters => {
   const {
     interactions,
     status
-  } = useTreeItem2Utils({
+  } = useTreeItemUtils({
     itemId,
     children
   });
@@ -60,7 +61,8 @@ export const useTreeItem2 = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions
+    interactions,
+    status
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -128,16 +130,6 @@ export const useTreeItem2 = parameters => {
       event.preventDefault();
     }
   };
-  const createCheckboxHandleChange = otherHandlers => event => {
-    otherHandlers.onChange?.(event);
-    if (event.defaultMuiPrevented) {
-      return;
-    }
-    if (disableSelection || status.disabled) {
-      return;
-    }
-    interactions.handleCheckboxSelection(event);
-  };
   const createIconContainerHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
     if (event.defaultMuiPrevented) {
@@ -171,15 +163,13 @@ export const useTreeItem2 = parameters => {
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
+      style: _extends({}, externalProps.style ?? {}, {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
-    if (indentationAtItemLevel) {
-      props.style = {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      };
-    }
     const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -193,9 +183,6 @@ export const useTreeItem2 = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    if (indentationAtItemLevel) {
-      props.indentationAtItemLevel = true;
-    }
     const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -203,15 +190,13 @@ export const useTreeItem2 = parameters => {
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, {
-      visible: checkboxSelection,
-      ref: checkboxRef,
-      checked: status.selected,
-      disabled: disableSelection || status.disabled,
-      tabIndex: -1
-    }, externalProps, {
-      onChange: createCheckboxHandleChange(externalEventHandlers)
-    });
+    const props = _extends({}, externalEventHandlers, {
+      ref: checkboxRef
+    }, externalProps);
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(externalProps));
@@ -227,12 +212,9 @@ export const useTreeItem2 = parameters => {
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-      rootRefObject,
-      contentRefObject,
-      externalEventHandlers,
-      interactions
-    }) ?? {};
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
     return _extends({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
@@ -250,9 +232,6 @@ export const useTreeItem2 = parameters => {
       in: status.expanded,
       children
     }, externalProps);
-    if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {

package/node/RichTreeView/RichTreeView.js

@@ -162,7 +162,6 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
-    indentationAtItemLevel: _propTypes.default.bool,
     labelEditing: _propTypes.default.bool
   }),
   /**
@@ -267,6 +266,26 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selectedItems: _propTypes.default.any,
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation: _propTypes.default.shape({
+    descendants: _propTypes.default.bool,
+    parents: _propTypes.default.bool
+  }),
   /**
    * The props used for each component slot.
    * @default {}

package/node/SimpleTreeView/SimpleTreeView.js

@@ -161,9 +161,7 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: _propTypes.default.shape({
-    indentationAtItemLevel: _propTypes.default.bool
-  }),
+  experimentalFeatures: _propTypes.default.object,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -224,6 +222,26 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * When `multiSelect` is true this takes an array of strings; when false (default) a string.
    */
   selectedItems: _propTypes.default.any,
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation: _propTypes.default.shape({
+    descendants: _propTypes.default.bool,
+    parents: _propTypes.default.bool
+  }),
   /**
    * The props used for each component slot.
    */