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

package/modern/TreeItem/index.js

@@ -1,4 +1,2 @@
-export { TreeItem } from "./TreeItem.js";
-export * from "./treeItemClasses.js";
-export * from "./useTreeItemState.js";
-export { TreeItemContent } from "./TreeItemContent.js";
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
+export * from "./treeItemClasses.js";

package/{TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js → modern/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js}

@@ -1,11 +1,14 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const TreeItem2DragAndDropOverlayRoot = styled('div', {
-  name: 'MuiTreeItem2DragAndDropOverlay',
+const TreeItemDragAndDropOverlayRoot = styled('div', {
+  name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
@@ -26,44 +29,46 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
       action: 'reorder-above'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderTop: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'reorder-below'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }, {
     props: {
       action: 'move-to-parent'
     },
-    style: _extends({
+    style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
-    }, theme.applyStyles('dark', {
-      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
-    }))
+      borderBottom: `1px solid ${(theme.vars || theme).palette.action.active}`
+    }
   }]
 }));
-function TreeItem2DragAndDropOverlay(props) {
+function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
+  return /*#__PURE__*/_jsx(TreeItemDragAndDropOverlayRoot, _extends({}, props));
 }
-export { TreeItem2DragAndDropOverlay };
+process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: PropTypes.object
+} : void 0;
+export { TreeItemDragAndDropOverlay };

package/modern/TreeItemDragAndDropOverlay/index.js

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

package/modern/{TreeItem2Icon/TreeItem2Icon.js → TreeItemIcon/TreeItemIcon.js}

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,7 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function TreeItem2Icon(props) {
+function TreeItemIcon(props) {
   const {
     slots,
     slotProps,
@@ -42,7 +44,7 @@ function TreeItem2Icon(props) {
   }
   return /*#__PURE__*/_jsx(Icon, _extends({}, iconProps));
 }
-process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemIcon.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -67,4 +69,4 @@ process.env.NODE_ENV !== "production" ? TreeItem2Icon.propTypes = {
     selected: PropTypes.bool.isRequired
   }).isRequired
 } : void 0;
-export { TreeItem2Icon };
+export { TreeItemIcon };

package/modern/TreeItemIcon/index.js

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

package/modern/{TreeItem2LabelInput/TreeItem2LabelInput.js → TreeItemLabelInput/TreeItemLabelInput.js}

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from "../internals/zero-styled/index.js";
-const TreeItem2LabelInput = styled('input', {
-  name: 'MuiTreeItem2',
+
+/**
+ * @ignore - internal component.
+ */
+const TreeItemLabelInput = styled('input', {
+  name: 'MuiTreeItem',
   slot: 'LabelInput',
   overridesResolver: (props, styles) => styles.labelInput
 })(({
@@ -17,4 +21,4 @@ const TreeItem2LabelInput = styled('input', {
     outline: `1px solid ${theme.palette.primary.main}`
   }
 }));
-export { TreeItem2LabelInput };
+export { TreeItemLabelInput };

package/modern/TreeItemLabelInput/index.js

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

package/{TreeItem2Provider/TreeItem2Provider.js → modern/TreeItemProvider/TreeItemProvider.js}

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-function TreeItem2Provider(props) {
+
+/**
+ * @ignore - internal component.
+ */
+function TreeItemProvider(props) {
   const {
     children,
     itemId
@@ -15,7 +19,7 @@ function TreeItem2Provider(props) {
     instance
   });
 }
-TreeItem2Provider.propTypes = {
+TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -23,4 +27,4 @@ TreeItem2Provider.propTypes = {
   children: PropTypes.node,
   itemId: PropTypes.string.isRequired
 };
-export { TreeItem2Provider };
+export { TreeItemProvider };

package/modern/TreeItemProvider/index.js

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

package/modern/hooks/index.js

@@ -1,2 +1,2 @@
 export { useTreeViewApiRef } from "./useTreeViewApiRef.js";
-export { useTreeItem2Utils } from "./useTreeItem2Utils/index.js";
+export { useTreeItemUtils } from "./useTreeItemUtils/index.js";

package/modern/hooks/useTreeItemUtils/index.js

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

package/modern/hooks/{useTreeItem2Utils/useTreeItem2Utils.js → useTreeItemUtils/useTreeItemUtils.js}

@@ -1,13 +1,15 @@
+'use client';
+
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
 
 /**
- * Plugins that need to be present in the Tree View in order for `useTreeItem2Utils` to work correctly.
+ * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
 
 /**
- * Plugins that `useTreeItem2Utils` can use if they are present, but are not required.
+ * Plugins that `useTreeItemUtils` can use if they are present, but are not required.
  */
 
 const isItemExpandable = reactChildren => {
@@ -16,7 +18,7 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
-export const useTreeItem2Utils = ({
+export const useTreeItemUtils = ({
   itemId,
   children
 }) => {

package/modern/index.js

@@ -1,21 +1,21 @@
 /**
- * @mui/x-tree-view v7.22.0
+ * @mui/x-tree-view v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Tree View
-export * from "./TreeView/index.js";
 export * from "./SimpleTreeView/index.js";
 export * from "./RichTreeView/index.js";
 
 // Tree Item
 export * from "./TreeItem/index.js";
-export * from "./TreeItem2/index.js";
-export * from "./useTreeItem2/index.js";
-export * from "./TreeItem2Icon/index.js";
-export * from "./TreeItem2Provider/index.js";
+export * from "./useTreeItem/index.js";
+export * from "./TreeItemIcon/index.js";
+export * from "./TreeItemProvider/index.js";
+export * from "./TreeItemDragAndDropOverlay/index.js";
+export * from "./TreeItemLabelInput/index.js";
 export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
 export * from "./models/index.js";
 export * from "./icons/index.js";

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -63,8 +63,7 @@ export const useTreeViewItems = ({
   instance,
   params,
   state,
-  setState,
-  experimentalFeatures
+  setState
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
@@ -191,8 +190,7 @@ export const useTreeViewItems = ({
     contextValue: {
       items: {
         onItemClick: params.onItemClick,
-        disabledItemsFocusable: params.disabledItemsFocusable,
-        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+        disabledItemsFocusable: params.disabledItemsFocusable
       }
     }
   };

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+function getCheckboxStatus({
+  itemId,
+  instance,
+  selectionPropagation,
+  selected
+}) {
+  if (selected) {
+    return {
+      indeterminate: false,
+      checked: true
+    };
+  }
+  const children = instance.getItemOrderedChildrenIds(itemId);
+  if (children.length === 0) {
+    return {
+      indeterminate: false,
+      checked: false
+    };
+  }
+  let hasSelectedDescendant = false;
+  let hasUnSelectedDescendant = false;
+  const traverseDescendants = itemToTraverseId => {
+    if (itemToTraverseId !== itemId) {
+      if (instance.isItemSelected(itemToTraverseId)) {
+        hasSelectedDescendant = true;
+      } else {
+        hasUnSelectedDescendant = true;
+      }
+    }
+    instance.getItemOrderedChildrenIds(itemToTraverseId).forEach(traverseDescendants);
+  };
+  traverseDescendants(itemId);
+  return {
+    indeterminate: hasSelectedDescendant && hasUnSelectedDescendant || !hasUnSelectedDescendant && !selected,
+    checked: selectionPropagation.parents ? hasSelectedDescendant : selected
+  };
+}
+export const useTreeViewSelectionItemPlugin = ({
+  props
+}) => {
+  const {
+    itemId
+  } = props;
+  const {
+    instance,
+    selection: {
+      disableSelection,
+      checkboxSelection,
+      selectionPropagation
+    }
+  } = useTreeViewContext();
+  return {
+    propsEnhancers: {
+      checkbox: ({
+        externalEventHandlers,
+        interactions,
+        status
+      }) => {
+        const handleChange = event => {
+          externalEventHandlers.onChange?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          if (disableSelection || status.disabled) {
+            return;
+          }
+          interactions.handleCheckboxSelection(event);
+        };
+        const checkboxStatus = getCheckboxStatus({
+          instance,
+          itemId,
+          selectionPropagation,
+          selected: status.selected
+        });
+        return _extends({
+          visible: checkboxSelection,
+          disabled: disableSelection || status.disabled,
+          tabIndex: -1,
+          onChange: handleChange
+        }, checkboxStatus);
+      }
+    }
+  };
+};

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
-import { convertSelectedItemsToArray, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { convertSelectedItemsToArray, propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
+import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
 export const useTreeViewSelection = ({
   instance,
   params,
@@ -20,30 +21,47 @@ export const useTreeViewSelection = ({
     }
     return temp;
   }, [models.selectedItems.value]);
-  const setSelectedItems = (event, newSelectedItems) => {
+  const setSelectedItems = (event, newModel, additionalItemsToPropagate) => {
+    let cleanModel;
+    if (params.multiSelect && (params.selectionPropagation.descendants || params.selectionPropagation.parents)) {
+      cleanModel = propagateSelection({
+        instance,
+        selectionPropagation: params.selectionPropagation,
+        newModel: newModel,
+        oldModel: models.selectedItems.value,
+        additionalItemsToPropagate
+      });
+    } else {
+      cleanModel = newModel;
+    }
     if (params.onItemSelectionToggle) {
       if (params.multiSelect) {
-        const addedItems = newSelectedItems.filter(itemId => !instance.isItemSelected(itemId));
-        const removedItems = models.selectedItems.value.filter(itemId => !newSelectedItems.includes(itemId));
-        addedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, true);
+        const changes = getAddedAndRemovedItems({
+          instance,
+          newModel: cleanModel,
+          oldModel: models.selectedItems.value
         });
-        removedItems.forEach(itemId => {
-          params.onItemSelectionToggle(event, itemId, false);
-        });
-      } else if (newSelectedItems !== models.selectedItems.value) {
+        if (params.onItemSelectionToggle) {
+          changes.added.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, true);
+          });
+          changes.removed.forEach(itemId => {
+            params.onItemSelectionToggle(event, itemId, false);
+          });
+        }
+      } else if (params.onItemSelectionToggle && cleanModel !== models.selectedItems.value) {
         if (models.selectedItems.value != null) {
           params.onItemSelectionToggle(event, models.selectedItems.value, false);
         }
-        if (newSelectedItems != null) {
-          params.onItemSelectionToggle(event, newSelectedItems, true);
+        if (cleanModel != null) {
+          params.onItemSelectionToggle(event, cleanModel, true);
         }
       }
     }
     if (params.onSelectedItemsChange) {
-      params.onSelectedItemsChange(event, newSelectedItems);
+      params.onSelectedItemsChange(event, cleanModel);
     }
-    models.selectedItems.setControlledValue(newSelectedItems);
+    models.selectedItems.setControlledValue(cleanModel);
   };
   const isItemSelected = itemId => selectedItemsMap.has(itemId);
   const selectItem = ({
@@ -74,7 +92,10 @@ export const useTreeViewSelection = ({
         newSelected = params.multiSelect ? [itemId] : itemId;
       }
     }
-    setSelectedItems(event, newSelected);
+    setSelectedItems(event, newSelected,
+    // If shouldBeSelected === instance.isItemSelect(itemId), we still want to propagate the select.
+    // This is useful when the element is in an indeterminate state.
+    [itemId]);
     lastSelectedItem.current = itemId;
     lastSelectedRange.current = {};
   };
@@ -163,11 +184,13 @@ export const useTreeViewSelection = ({
       selection: {
         multiSelect: params.multiSelect,
         checkboxSelection: params.checkboxSelection,
-        disableSelection: params.disableSelection
+        disableSelection: params.disableSelection,
+        selectionPropagation: params.selectionPropagation
       }
     }
   };
 };
+useTreeViewSelection.itemPlugin = useTreeViewSelectionItemPlugin;
 useTreeViewSelection.models = {
   selectedItems: {
     getDefaultValue: params => params.defaultSelectedItems
@@ -180,7 +203,8 @@ useTreeViewSelection.getDefaultizedParams = ({
   disableSelection: params.disableSelection ?? false,
   multiSelect: params.multiSelect ?? false,
   checkboxSelection: params.checkboxSelection ?? false,
-  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null)
+  defaultSelectedItems: params.defaultSelectedItems ?? (params.multiSelect ? DEFAULT_SELECTED_ITEMS : null),
+  selectionPropagation: params.selectionPropagation ?? {}
 });
 useTreeViewSelection.params = {
   disableSelection: true,
@@ -189,5 +213,6 @@ useTreeViewSelection.params = {
   defaultSelectedItems: true,
   selectedItems: true,
   onSelectedItemsChange: true,
-  onItemSelectionToggle: true
+  onItemSelectionToggle: true,
+  selectionPropagation: true
 };

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

@@ -18,4 +18,99 @@ export const getLookupFromArray = array => {
     lookup[itemId] = true;
   });
   return lookup;
+};
+export const getAddedAndRemovedItems = ({
+  instance,
+  oldModel,
+  newModel
+}) => {
+  const newModelLookup = getLookupFromArray(newModel);
+  return {
+    added: newModel.filter(itemId => !instance.isItemSelected(itemId)),
+    removed: oldModel.filter(itemId => !newModelLookup[itemId])
+  };
+};
+export 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;
 };

package/modern/useTreeItem/index.js

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