@mui/x-tree-view 7.5.1 → 7.6.1

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

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewItems = require("./useTreeViewItems.utils");
+var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const updateItemsState = ({
@@ -22,7 +24,7 @@ const updateItemsState = ({
   const itemOrderedChildrenIds = {
     [_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID]: []
   };
-  const processItem = (item, parentId) => {
+  const processItem = (item, depth, parentId) => {
     const id = getItemId ? getItemId(item) : item.id;
     if (id == null) {
       throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
@@ -40,7 +42,8 @@ const updateItemsState = ({
       parentId,
       idAttribute: undefined,
       expandable: !!item.children?.length,
-      disabled: isItemDisabled ? isItemDisabled(item) : false
+      disabled: isItemDisabled ? isItemDisabled(item) : false,
+      depth
     };
     itemMap[id] = item;
     itemOrderedChildrenIds[id] = [];
@@ -49,9 +52,9 @@ const updateItemsState = ({
       itemOrderedChildrenIds[parentIdWithDefault] = [];
     }
     itemOrderedChildrenIds[parentIdWithDefault].push(id);
-    item.children?.forEach(child => processItem(child, id));
+    item.children?.forEach(child => processItem(child, depth + 1, id));
   };
-  items.forEach(item => processItem(item, null));
+  items.forEach(item => processItem(item, 0, null));
   const itemChildrenIndexes = {};
   Object.keys(itemOrderedChildrenIds).forEach(parentId => {
     itemChildrenIndexes[parentId] = (0, _useTreeViewItems.buildSiblingIndexes)(itemOrderedChildrenIds[parentId]);
@@ -67,7 +70,8 @@ const useTreeViewItems = ({
   instance,
   params,
   state,
-  setState
+  setState,
+  experimentalFeatures
 }) => {
   const getItemMeta = React.useCallback(itemId => state.items.itemMetaMap[itemId], [state.items.itemMetaMap]);
   const getItem = React.useCallback(itemId => state.items.itemMap[itemId], [state.items.itemMap]);
@@ -144,6 +148,11 @@ const useTreeViewItems = ({
     return state.items.itemOrderedChildrenIds[_useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID].map(getPropsFromItemId);
   };
   return {
+    getRootProps: () => ({
+      style: {
+        '--TreeView-itemChildrenIndentation': typeof params.itemChildrenIndentation === 'number' ? `${params.itemChildrenIndentation}px` : params.itemChildrenIndentation
+      }
+    }),
     publicAPI: {
       getItem
     },
@@ -159,7 +168,8 @@ const useTreeViewItems = ({
       areItemUpdatesPrevented
     },
     contextValue: {
-      disabledItemsFocusable: params.disabledItemsFocusable
+      disabledItemsFocusable: params.disabledItemsFocusable,
+      indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
     }
   };
 };
@@ -173,12 +183,23 @@ useTreeViewItems.getInitialState = params => ({
   })
 });
 useTreeViewItems.getDefaultizedParams = params => (0, _extends2.default)({}, params, {
-  disabledItemsFocusable: params.disabledItemsFocusable ?? false
+  disabledItemsFocusable: params.disabledItemsFocusable ?? false,
+  itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
 });
+useTreeViewItems.wrapRoot = ({
+  children,
+  instance
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
+    value: itemId => instance.getItemMeta(itemId)?.depth ?? 0,
+    children: children
+  });
+};
 useTreeViewItems.params = {
   disabledItemsFocusable: true,
   items: true,
   isItemDisabled: true,
   getItemLabel: true,
-  getItemId: true
+  getItemId: true,
+  itemChildrenIndentation: true
 };

package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -14,6 +14,7 @@ var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
 var _useTreeViewContext = require("../../TreeViewProvider/useTreeViewContext");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
+var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -42,6 +43,23 @@ const useTreeViewJSXItems = ({
         })
       });
     });
+    return () => {
+      setState(prevState => {
+        const newItemMetaMap = (0, _extends2.default)({}, prevState.items.itemMetaMap);
+        const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
+        delete newItemMetaMap[item.id];
+        delete newItemMap[item.id];
+        return (0, _extends2.default)({}, prevState, {
+          items: (0, _extends2.default)({}, prevState.items, {
+            itemMetaMap: newItemMetaMap,
+            itemMap: newItemMap
+          })
+        });
+      });
+      (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
+        id: item.id
+      });
+    };
   });
   const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
     const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
@@ -56,23 +74,6 @@ const useTreeViewJSXItems = ({
       })
     }));
   };
-  const removeJSXItem = (0, _useEventCallback.default)(itemId => {
-    setState(prevState => {
-      const newItemMetaMap = (0, _extends2.default)({}, prevState.items.itemMetaMap);
-      const newItemMap = (0, _extends2.default)({}, prevState.items.itemMap);
-      delete newItemMetaMap[itemId];
-      delete newItemMap[itemId];
-      return (0, _extends2.default)({}, prevState, {
-        items: (0, _extends2.default)({}, prevState.items, {
-          itemMetaMap: newItemMetaMap,
-          itemMap: newItemMap
-        })
-      });
-    });
-    (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
-      id: itemId
-    });
-  });
   const mapFirstCharFromJSX = (0, _useEventCallback.default)((itemId, firstChar) => {
     instance.updateFirstCharMap(firstCharMap => {
       firstCharMap[itemId] = firstChar;
@@ -89,7 +90,6 @@ const useTreeViewJSXItems = ({
   return {
     instance: {
       insertJSXItem,
-      removeJSXItem,
       setJSXItemsOrderedChildrenIds,
       mapFirstCharFromJSX
     }
@@ -139,14 +139,13 @@ const useTreeViewJSXItemsItemPlugin = ({
     };
   }, [instance, registerChild, unregisterChild, itemId, id]);
   React.useEffect(() => {
-    instance.insertJSXItem({
+    return instance.insertJSXItem({
       id: itemId,
       idAttribute: id,
       parentId,
       expandable,
       disabled
     });
-    return () => instance.removeJSXItem(itemId);
   }, [instance, parentId, itemId, expandable, disabled, id]);
   React.useEffect(() => {
     if (label) {
@@ -163,13 +162,23 @@ useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
-  itemId: itemId,
-  children: children
-});
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
+    itemId: itemId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
+      value: depthContext + 1,
+      children: children
+    })
+  });
+};
 useTreeViewJSXItems.wrapRoot = ({
   children
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
-  children: children
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
+    value: 0,
+    children: children
+  })
 });
 useTreeViewJSXItems.params = {};

package/node/internals/useTreeView/useTreeView.js

@@ -58,6 +58,7 @@ const useTreeView = inParams => {
       params,
       slots: params.slots,
       slotProps: params.slotProps,
+      experimentalFeatures: params.experimentalFeatures,
       state,
       setState,
       rootRef: innerRootRef,
@@ -110,19 +111,23 @@ const useTreeView = inParams => {
     itemWrappers.forEach(itemWrapper => {
       finalChildren = itemWrapper({
         itemId,
-        children: finalChildren
+        children: finalChildren,
+        instance
       });
     });
     return finalChildren;
   };
-  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot);
+  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
+  // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+  .reverse();
   contextValue.wrapRoot = ({
     children
   }) => {
     let finalChildren = children;
     rootWrappers.forEach(rootWrapper => {
       finalChildren = rootWrapper({
-        children: finalChildren
+        children: finalChildren,
+        instance
       });
     });
     return finalChildren;

package/node/internals/utils/extractPluginParamsFromProps.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractPluginParamsFromProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["slots", "slotProps", "apiRef"];
+const _excluded = ["slots", "slotProps", "apiRef", "experimentalFeatures"];
 const extractPluginParamsFromProps = _ref => {
   let {
       props: {
         slots,
         slotProps,
-        apiRef
+        apiRef,
+        experimentalFeatures
       },
       plugins,
       rootRef
@@ -27,6 +28,7 @@ const extractPluginParamsFromProps = _ref => {
     rootRef,
     slots: slots ?? {},
     slotProps: slotProps ?? {},
+    experimentalFeatures: experimentalFeatures ?? {},
     apiRef
   };
   const otherProps = {};

package/node/internals/utils/tree.js

@@ -24,7 +24,24 @@ const getPreviousNavigableItem = (instance, itemId) => {
   if (itemIndex === 0) {
     return itemMeta.parentId;
   }
-  let currentItemId = siblings[itemIndex - 1];
+
+  // Finds the previous navigable sibling.
+  let previousNavigableSiblingIndex = itemIndex - 1;
+  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+    previousNavigableSiblingIndex -= 1;
+  }
+  if (previousNavigableSiblingIndex === -1) {
+    // If we are at depth 0, then it means all the items above the current item are not navigable.
+    if (itemMeta.parentId == null) {
+      return null;
+    }
+
+    // Otherwise, we can try to go up a level and find the previous navigable item.
+    return getPreviousNavigableItem(instance, itemMeta.parentId);
+  }
+
+  // Finds the last navigable ancestor of the previous navigable sibling.
+  let currentItemId = siblings[previousNavigableSiblingIndex];
   let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
   while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;

package/node/useTreeItem2/useTreeItem2.js

@@ -11,6 +11,7 @@ var _utils = require("@mui/base/utils");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
 var _useTreeItem2Utils = require("../hooks/useTreeItem2Utils");
+var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useTreeItem2 = parameters => {
@@ -22,9 +23,11 @@ const useTreeItem2 = parameters => {
       checkboxSelection
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance,
     publicAPI
   } = (0, _useTreeViewContext.useTreeViewContext)();
+  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   const {
     id,
     itemId,
@@ -115,7 +118,7 @@ const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    return (0, _extends2.default)({}, externalEventHandlers, {
+    const response = (0, _extends2.default)({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -128,15 +131,25 @@ const useTreeItem2 = parameters => {
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
+    if (indentationAtItemLevel) {
+      response.style = {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      };
+    }
+    return response;
   };
   const getContentProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, externalProps, {
+    const response = (0, _extends2.default)({}, externalEventHandlers, externalProps, {
       ref: contentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
@@ -162,13 +175,17 @@ const useTreeItem2 = parameters => {
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _utils.extractEventHandlers)(externalProps);
-    return (0, _extends2.default)({}, externalEventHandlers, {
+    const response = (0, _extends2.default)({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
       role: 'group',
       in: status.expanded,
       children
     }, externalProps);
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   return {
     getRootProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.5.1",
+  "version": "7.6.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,9 +33,9 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.15.14",
+    "@mui/system": "^5.15.15",
     "@mui/utils": "^5.15.14",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",

package/useTreeItem2/useTreeItem2.js

@@ -4,6 +4,7 @@ import { extractEventHandlers } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
+import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 export const useTreeItem2 = parameters => {
   const {
     runItemPlugins,
@@ -13,9 +14,11 @@ export const useTreeItem2 = parameters => {
       checkboxSelection
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance,
     publicAPI
   } = useTreeViewContext();
+  const depthContext = React.useContext(TreeViewItemDepthContext);
   const {
     id,
     itemId,
@@ -106,7 +109,7 @@ export const useTreeItem2 = parameters => {
        */
       ariaSelected = true;
     }
-    return _extends({}, externalEventHandlers, {
+    const response = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: instance.canItemBeTabbed(itemId) ? 0 : -1,
@@ -119,15 +122,25 @@ export const useTreeItem2 = parameters => {
       onBlur: createRootHandleBlur(externalEventHandlers),
       onKeyDown: createRootHandleKeyDown(externalEventHandlers)
     });
+    if (indentationAtItemLevel) {
+      response.style = {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      };
+    }
+    return response;
   };
   const getContentProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, externalProps, {
+    const response = _extends({}, externalEventHandlers, externalProps, {
       ref: contentRef,
       onClick: createContentHandleClick(externalEventHandlers),
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   const getCheckboxProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -153,13 +166,17 @@ export const useTreeItem2 = parameters => {
   };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
-    return _extends({}, externalEventHandlers, {
+    const response = _extends({}, externalEventHandlers, {
       unmountOnExit: true,
       component: 'ul',
       role: 'group',
       in: status.expanded,
       children
     }, externalProps);
+    if (indentationAtItemLevel) {
+      response.indentationAtItemLevel = true;
+    }
+    return response;
   };
   return {
     getRootProps,

package/useTreeItem2/useTreeItem2.types.d.ts

@@ -38,6 +38,10 @@ export interface UseTreeItem2RootSlotOwnProps {
     onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
     onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
     ref: React.RefCallback<HTMLLIElement>;
+    /**
+     * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
+     */
+    style?: React.CSSProperties;
 }
 export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2RootSlotOwnProps;
 export interface UseTreeItem2ContentSlotOwnProps {
@@ -45,6 +49,10 @@ export interface UseTreeItem2ContentSlotOwnProps {
     onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
     ref: React.RefCallback<HTMLDivElement> | null;
     status: UseTreeItem2Status;
+    /**
+     * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
+     */
+    indentationAtItemLevel?: true;
 }
 export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2ContentSlotOwnProps;
 export interface UseTreeItem2IconContainerSlotOwnProps {
@@ -69,6 +77,10 @@ export interface UseTreeItem2GroupTransitionSlotOwnProps {
     component: 'ul';
     role: 'group';
     children: React.ReactNode;
+    /**
+     * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
+     */
+    indentationAtItemLevel?: true;
 }
 export type UseTreeItem2GroupTransitionSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItem2GroupTransitionSlotOwnProps;
 export interface UseTreeItem2Status {