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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getLookupFromArray = exports.convertSelectedItemsToArray = void 0;
+exports.propagateSelection = exports.getLookupFromArray = exports.getAddedAndRemovedItems = exports.convertSelectedItemsToArray = void 0;
 /**
  * Transform the `selectedItems` model to be an array if it was a string or null.
  * @param {string[] | string | null} model The raw model.
@@ -26,4 +26,101 @@ const getLookupFromArray = array => {
   });
   return lookup;
 };
-exports.getLookupFromArray = getLookupFromArray;
+exports.getLookupFromArray = getLookupFromArray;
+const getAddedAndRemovedItems = ({
+  instance,
+  oldModel,
+  newModel
+}) => {
+  const newModelLookup = getLookupFromArray(newModel);
+  return {
+    added: newModel.filter(itemId => !instance.isItemSelected(itemId)),
+    removed: oldModel.filter(itemId => !newModelLookup[itemId])
+  };
+};
+exports.getAddedAndRemovedItems = getAddedAndRemovedItems;
+const propagateSelection = ({
+  instance,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}) => {
+  if (!selectionPropagation.descendants && !selectionPropagation.parents) {
+    return newModel;
+  }
+  let shouldRegenerateModel = false;
+  const newModelLookup = getLookupFromArray(newModel);
+  const changes = getAddedAndRemovedItems({
+    instance,
+    newModel,
+    oldModel
+  });
+  additionalItemsToPropagate?.forEach(itemId => {
+    if (newModelLookup[itemId]) {
+      if (!changes.added.includes(itemId)) {
+        changes.added.push(itemId);
+      }
+    } else if (!changes.removed.includes(itemId)) {
+      changes.removed.push(itemId);
+    }
+  });
+  changes.added.forEach(addedItemId => {
+    if (selectionPropagation.descendants) {
+      const selectDescendants = itemId => {
+        if (itemId !== addedItemId) {
+          shouldRegenerateModel = true;
+          newModelLookup[itemId] = true;
+        }
+        instance.getItemOrderedChildrenIds(itemId).forEach(selectDescendants);
+      };
+      selectDescendants(addedItemId);
+    }
+    if (selectionPropagation.parents) {
+      const checkAllDescendantsSelected = itemId => {
+        if (!newModelLookup[itemId]) {
+          return false;
+        }
+        const children = instance.getItemOrderedChildrenIds(itemId);
+        return children.every(checkAllDescendantsSelected);
+      };
+      const selectParents = itemId => {
+        const parentId = instance.getItemMeta(itemId).parentId;
+        if (parentId == null) {
+          return;
+        }
+        const siblings = instance.getItemOrderedChildrenIds(parentId);
+        if (siblings.every(checkAllDescendantsSelected)) {
+          shouldRegenerateModel = true;
+          newModelLookup[parentId] = true;
+          selectParents(parentId);
+        }
+      };
+      selectParents(addedItemId);
+    }
+  });
+  changes.removed.forEach(removedItemId => {
+    if (selectionPropagation.parents) {
+      let parentId = instance.getItemMeta(removedItemId).parentId;
+      while (parentId != null) {
+        if (newModelLookup[parentId]) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[parentId];
+        }
+        parentId = instance.getItemMeta(parentId).parentId;
+      }
+    }
+    if (selectionPropagation.descendants) {
+      const deSelectDescendants = itemId => {
+        if (itemId !== removedItemId) {
+          shouldRegenerateModel = true;
+          delete newModelLookup[itemId];
+        }
+        instance.getItemOrderedChildrenIds(itemId).forEach(deSelectDescendants);
+      };
+      deSelectDescendants(removedItemId);
+    }
+  });
+  return shouldRegenerateModel ? Object.keys(newModelLookup) : newModel;
+};
+exports.propagateSelection = propagateSelection;

package/node/useTreeItem/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useTreeItem", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItem.useTreeItem;
+  }
+});
+var _useTreeItem = require("./useTreeItem");

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

@@ -1,27 +1,27 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItem2 = void 0;
+exports.useTreeItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
+var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
-const useTreeItem2 = parameters => {
+const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
       onItemClick,
-      disabledItemsFocusable,
-      indentationAtItemLevel
+      disabledItemsFocusable
     },
     selection: {
       disableSelection,
@@ -50,7 +50,7 @@ const useTreeItem2 = parameters => {
   const {
     interactions,
     status
-  } = (0, _useTreeItem2Utils.useTreeItem2Utils)({
+  } = (0, _useTreeItemUtils.useTreeItemUtils)({
     itemId,
     children
   });
@@ -68,7 +68,8 @@ const useTreeItem2 = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions
+    interactions,
+    status
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -136,16 +137,6 @@ 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) {
@@ -179,15 +170,13 @@ const useTreeItem2 = parameters => {
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
+      style: (0, _extends2.default)({}, 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?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -201,9 +190,6 @@ const useTreeItem2 = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
-    if (indentationAtItemLevel) {
-      props.indentationAtItemLevel = true;
-    }
     const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -211,15 +197,13 @@ const useTreeItem2 = parameters => {
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, {
-      visible: checkboxSelection,
-      ref: checkboxRef,
-      checked: status.selected,
-      disabled: disableSelection || status.disabled,
-      tabIndex: -1
-    }, externalProps, {
-      onChange: createCheckboxHandleChange(externalEventHandlers)
-    });
+    const props = (0, _extends2.default)({}, externalEventHandlers, {
+      ref: checkboxRef
+    }, externalProps);
+    const enhancedCheckboxProps = propsEnhancers.checkbox?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return (0, _extends2.default)({}, props, enhancedCheckboxProps);
   };
   const getLabelProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(externalProps));
@@ -235,12 +219,9 @@ const useTreeItem2 = parameters => {
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extractEventHandlers.default)(externalProps);
-    const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-      rootRefObject,
-      contentRefObject,
-      externalEventHandlers,
-      interactions
-    }) ?? {};
+    const enhancedLabelInputProps = propsEnhancers.labelInput?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
     return (0, _extends2.default)({}, externalProps, enhancedLabelInputProps);
   };
   const getIconContainerProps = (externalProps = {}) => {
@@ -258,9 +239,6 @@ const useTreeItem2 = parameters => {
       in: status.expanded,
       children
     }, externalProps);
-    if (indentationAtItemLevel) {
-      response.indentationAtItemLevel = true;
-    }
     return response;
   };
   const getDragAndDropOverlayProps = (externalProps = {}) => {
@@ -284,4 +262,4 @@ const useTreeItem2 = parameters => {
     publicAPI
   };
 };
-exports.useTreeItem2 = useTreeItem2;
+exports.useTreeItem = useTreeItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.22.1",
+  "version": "8.0.0-alpha.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,13 +33,13 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.25.7",
+    "@babel/runtime": "^7.26.0",
     "@mui/utils": "^5.16.6 || ^6.0.0",
     "@types/react-transition-group": "^4.4.11",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "7.21.0"
+    "@mui/x-internals": "8.0.0-alpha.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/themeAugmentation/components.d.ts

@@ -11,21 +11,11 @@ export interface TreeViewComponents<Theme = unknown> {
     styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeView'];
     variants?: ComponentsVariants<Theme>['MuiRichTreeView'];
   };
-  MuiTreeView?: {
-    defaultProps?: ComponentsProps['MuiTreeView'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTreeView'];
-    variants?: ComponentsVariants<Theme>['MuiTreeView'];
-  };
   MuiTreeItem?: {
     defaultProps?: ComponentsProps['MuiTreeItem'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem'];
     variants?: ComponentsVariants<Theme>['MuiTreeItem'];
   };
-  MuiTreeItem2?: {
-    defaultProps?: ComponentsProps['MuiTreeItem2'];
-    styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem2'];
-    variants?: ComponentsVariants<Theme>['MuiTreeItem2'];
-  };
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/overrides.d.ts

@@ -1,15 +1,12 @@
 import { RichTreeViewClassKey } from '../RichTreeView';
 import { SimpleTreeViewClassKey } from '../SimpleTreeView';
-import { TreeViewClassKey } from '../TreeView';
 import { TreeItemClassKey } from '../TreeItem';
 
 // prettier-ignore
 export interface TreeViewComponentNameToClassKey {
   MuiSimpleTreeView: SimpleTreeViewClassKey;
   MuiRichTreeView: RichTreeViewClassKey;
-  MuiTreeView: TreeViewClassKey;
   MuiTreeItem: TreeItemClassKey;
-  MuiTreeItem2: TreeItemClassKey;
 }
 
 declare module '@mui/material/styles' {

package/themeAugmentation/props.d.ts

@@ -1,15 +1,11 @@
-import { TreeItemProps } from '../TreeItem';
-import { TreeViewProps } from '../TreeView';
 import { SimpleTreeViewProps } from '../SimpleTreeView';
 import { RichTreeViewProps } from '../RichTreeView';
-import { TreeItem2Props } from '../TreeItem2';
+import { TreeItemProps } from '../TreeItem';
 
 export interface TreeViewComponentsPropsList {
   MuiSimpleTreeView: SimpleTreeViewProps<any>;
   MuiRichTreeView: RichTreeViewProps<any, any>;
-  MuiTreeView: TreeViewProps<any>;
   MuiTreeItem: TreeItemProps;
-  MuiTreeItem2: TreeItem2Props;
 }
 
 declare module '@mui/material/styles' {

package/useTreeItem/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeItem } from './useTreeItem';
+export type { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemStatus, UseTreeItemRootSlotOwnProps, UseTreeItemContentSlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemLabelSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemIconContainerSlotOwnProps, UseTreeItemGroupTransitionSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, } from './useTreeItem.types';

package/useTreeItem/index.js

@@ -0,0 +1 @@
+export { useTreeItem } from "./useTreeItem.js";

package/{TreeItem2 → useTreeItem}/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
   "module": "./index.js",
-  "main": "../node/TreeItem2/index.js",
+  "main": "../node/useTreeItem/index.js",
   "types": "./index.d.ts"
 }

package/useTreeItem/useTreeItem.d.ts

@@ -0,0 +1,2 @@
+import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from './useTreeItem.types';
+export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = readonly []>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;

package/{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 = {}) => {