@mui/x-tree-view 7.11.0 → 7.12.0

package/node/TreeItem2/TreeItem2.js

@@ -14,13 +14,14 @@ var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedPro
 var _styles = require("@mui/material/styles");
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _createStyled = require("@mui/system/createStyled");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../internals/zero-styled");
 var _useTreeItem = require("../useTreeItem2");
 var _TreeItem = require("../TreeItem");
 var _TreeItem2Icon = require("../TreeItem2Icon");
+var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
@@ -51,6 +52,7 @@ const TreeItem2Content = exports.TreeItem2Content = (0, _zeroStyled.styled)('div
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
@@ -185,7 +187,8 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
-    groupTransition: ['groupTransition']
+    groupTransition: ['groupTransition'],
+    dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return (0, _composeClasses.default)(slots, _TreeItem.getTreeItemUtilityClass, classes);
 };
@@ -221,6 +224,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status
   } = (0, _useTreeItem.unstable_useTreeItem2)({
     id,
@@ -232,7 +236,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
   const ownerState = (0, _extends2.default)({}, props, status);
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root ?? TreeItem2Root;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
     getSlotProps: getRootProps,
     externalForwardedProps: other,
@@ -244,7 +248,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: classes.root
   });
   const Content = slots.content ?? TreeItem2Content;
-  const contentProps = (0, _utils.useSlotProps)({
+  const contentProps = (0, _useSlotProps.default)({
     elementType: Content,
     getSlotProps: getContentProps,
     externalSlotProps: slotProps.content,
@@ -252,7 +256,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: (0, _clsx.default)(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled)
   });
   const IconContainer = slots.iconContainer ?? TreeItem2IconContainer;
-  const iconContainerProps = (0, _utils.useSlotProps)({
+  const iconContainerProps = (0, _useSlotProps.default)({
     elementType: IconContainer,
     getSlotProps: getIconContainerProps,
     externalSlotProps: slotProps.iconContainer,
@@ -260,7 +264,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: classes.iconContainer
   });
   const Label = slots.label ?? TreeItem2Label;
-  const labelProps = (0, _utils.useSlotProps)({
+  const labelProps = (0, _useSlotProps.default)({
     elementType: Label,
     getSlotProps: getLabelProps,
     externalSlotProps: slotProps.label,
@@ -268,7 +272,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: classes.label
   });
   const Checkbox = slots.checkbox ?? TreeItem2Checkbox;
-  const checkboxProps = (0, _utils.useSlotProps)({
+  const checkboxProps = (0, _useSlotProps.default)({
     elementType: Checkbox,
     getSlotProps: getCheckboxProps,
     externalSlotProps: slotProps.checkbox,
@@ -276,13 +280,21 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
     className: classes.checkbox
   });
   const GroupTransition = slots.groupTransition ?? undefined;
-  const groupTransitionProps = (0, _utils.useSlotProps)({
+  const groupTransitionProps = (0, _useSlotProps.default)({
     elementType: GroupTransition,
     getSlotProps: getGroupTransitionProps,
     externalSlotProps: slotProps.groupTransition,
     ownerState: {},
     className: classes.groupTransition
   });
+  const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay;
+  const dragAndDropOverlayProps = (0, _useSlotProps.default)({
+    elementType: DragAndDropOverlay,
+    getSlotProps: getDragAndDropOverlayProps,
+    externalSlotProps: slotProps.dragAndDropOverlay,
+    ownerState: {},
+    className: classes.dragAndDropOverlay
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
@@ -293,7 +305,7 @@ const TreeItem2 = exports.TreeItem2 = /*#__PURE__*/React.forwardRef(function Tre
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps))]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2GroupTransition, (0, _extends2.default)({
         as: GroupTransition
       }, groupTransitionProps))]

package/node/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeItem2DragAndDropOverlay = TreeItem2DragAndDropOverlay;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _system = require("@mui/system");
+var _zeroStyled = require("../internals/zero-styled");
+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 TreeItem2DragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
+  name: 'MuiTreeItem2DragAndDropOverlay',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'action'
+})(({
+  theme
+}) => ({
+  position: 'absolute',
+  left: 0,
+  display: 'flex',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      action: 'make-child'
+    },
+    style: {
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: (0, _styles.alpha)((theme.vars || theme).palette.primary.dark, 0.15)
+    }
+  }, {
+    props: {
+      action: 'reorder-above'
+    },
+    style: (0, _extends2.default)({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderTop: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderTop: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'reorder-below'
+    },
+    style: (0, _extends2.default)({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'move-to-parent'
+    },
+    style: (0, _extends2.default)({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
+      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${(0, _styles.alpha)((theme.vars || theme).palette.grey[900], 0.6)}`
+    })
+  }]
+}));
+function TreeItem2DragAndDropOverlay(props) {
+  if (props.action == null) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItem2DragAndDropOverlayRoot, (0, _extends2.default)({}, props));
+}

package/node/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/TreeItem2DragAndDropOverlay/index.js

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

package/node/TreeItem2Icon/TreeItem2Icon.js

@@ -8,8 +8,9 @@ exports.TreeItem2Icon = TreeItem2Icon;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/base/utils");
-var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _icons = require("../icons");
 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); }
@@ -20,7 +21,7 @@ function TreeItem2Icon(props) {
     slotProps,
     status
   } = props;
-  const context = (0, _useTreeViewContext.useTreeViewContext)();
+  const context = (0, _TreeViewProvider.useTreeViewContext)();
   const contextIcons = (0, _extends2.default)({}, context.icons.slots, {
     expandIcon: context.icons.slots.expandIcon ?? _icons.TreeViewExpandIcon,
     collapseIcon: context.icons.slots.collapseIcon ?? _icons.TreeViewCollapseIcon
@@ -39,9 +40,9 @@ function TreeItem2Icon(props) {
     iconName = 'endIcon';
   }
   const Icon = slots?.[iconName] ?? contextIcons[iconName];
-  const iconProps = (0, _utils.useSlotProps)({
+  const iconProps = (0, _useSlotProps.default)({
     elementType: Icon,
-    externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIconProps[iconName], tempOwnerState), (0, _utils.resolveComponentProps)(slotProps?.[iconName], tempOwnerState)),
+    externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIconProps[iconName], tempOwnerState), (0, _resolveComponentProps.default)(slotProps?.[iconName], tempOwnerState)),
     // TODO: Add proper ownerState
     ownerState: {}
   });

package/node/TreeItem2Provider/TreeItem2Provider.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TreeItem2Provider = TreeItem2Provider;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../internals/TreeViewProvider");
 function TreeItem2Provider(props) {
   const {
     children,
@@ -15,7 +15,7 @@ function TreeItem2Provider(props) {
   const {
     wrapItem,
     instance
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   return wrapItem({
     children,
     itemId,

package/node/TreeView/TreeView.js

@@ -164,6 +164,12 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: _propTypes.default.func,
+  /**
+   * Callback fired when the `content` slot of a given tree item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -172,10 +178,9 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   onItemExpansionToggle: _propTypes.default.func,
   /**
-   * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * Callback fired when a given tree item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
-   * @param {string} value of the focused item.
    */
   onItemFocus: _propTypes.default.func,
   /**

package/node/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeItem2Utils = void 0;
-var _useTreeViewContext = require("../../internals/TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../../internals/TreeViewProvider");
 const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);
@@ -29,7 +29,7 @@ const useTreeItem2Utils = ({
     selection: {
       multiSelect
     }
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   const status = {
     expandable: isItemExpandable(children),
     expanded: instance.isItemExpanded(itemId),

package/node/index.js

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

package/node/internals/TreeViewProvider/index.js

@@ -9,4 +9,11 @@ Object.defineProperty(exports, "TreeViewProvider", {
     return _TreeViewProvider.TreeViewProvider;
   }
 });
-var _TreeViewProvider = require("./TreeViewProvider");
+Object.defineProperty(exports, "useTreeViewContext", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewContext.useTreeViewContext;
+  }
+});
+var _TreeViewProvider = require("./TreeViewProvider");
+var _useTreeViewContext = require("./useTreeViewContext");

package/node/internals/index.js

@@ -3,16 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
+  }
+});
 Object.defineProperty(exports, "TreeViewProvider", {
   enumerable: true,
   get: function () {
     return _TreeViewProvider.TreeViewProvider;
   }
 });
-Object.defineProperty(exports, "buildWarning", {
+Object.defineProperty(exports, "buildSiblingIndexes", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems.buildSiblingIndexes;
+  }
+});
+Object.defineProperty(exports, "isTargetInDescendants", {
   enumerable: true,
   get: function () {
-    return _warning.buildWarning;
+    return _tree.isTargetInDescendants;
   }
 });
 Object.defineProperty(exports, "unstable_resetCleanupTracking", {
@@ -27,6 +39,12 @@ Object.defineProperty(exports, "useTreeView", {
     return _useTreeView.useTreeView;
   }
 });
+Object.defineProperty(exports, "useTreeViewContext", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewProvider.useTreeViewContext;
+  }
+});
 Object.defineProperty(exports, "useTreeViewExpansion", {
   enumerable: true,
   get: function () {
@@ -69,6 +87,12 @@ Object.defineProperty(exports, "useTreeViewSelection", {
     return _useTreeViewSelection.useTreeViewSelection;
   }
 });
+Object.defineProperty(exports, "warnOnce", {
+  enumerable: true,
+  get: function () {
+    return _warning.warnOnce;
+  }
+});
 var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
@@ -79,4 +103,5 @@ var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavig
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
+var _tree = require("./utils/tree");
 var _warning = require("./utils/warning");

package/node/internals/models/index.js

@@ -25,6 +25,17 @@ Object.keys(_plugin).forEach(function (key) {
     }
   });
 });
+var _itemPlugin = require("./itemPlugin");
+Object.keys(_itemPlugin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _itemPlugin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _itemPlugin[key];
+    }
+  });
+});
 var _treeView = require("./treeView");
 Object.keys(_treeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -35,4 +46,15 @@ Object.keys(_treeView).forEach(function (key) {
       return _treeView[key];
     }
   });
+});
+var _MuiCancellableEvent = require("./MuiCancellableEvent");
+Object.keys(_MuiCancellableEvent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MuiCancellableEvent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MuiCancellableEvent[key];
+    }
+  });
 });

package/node/internals/models/itemPlugin.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -3,10 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "TREE_VIEW_ROOT_PARENT_ID", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.TREE_VIEW_ROOT_PARENT_ID;
+  }
+});
+Object.defineProperty(exports, "buildSiblingIndexes", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.buildSiblingIndexes;
+  }
+});
 Object.defineProperty(exports, "useTreeViewItems", {
   enumerable: true,
   get: function () {
     return _useTreeViewItems.useTreeViewItems;
   }
 });
-var _useTreeViewItems = require("./useTreeViewItems");
+var _useTreeViewItems = require("./useTreeViewItems");
+var _useTreeViewItems2 = require("./useTreeViewItems.utils");

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

@@ -193,8 +193,11 @@ const useTreeViewItems = ({
       areItemUpdatesPrevented
     },
     contextValue: {
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      items: {
+        onItemClick: params.onItemClick,
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      }
     }
   };
 };
@@ -226,5 +229,6 @@ useTreeViewItems.params = {
   isItemDisabled: true,
   getItemLabel: true,
   getItemId: true,
+  onItemClick: true,
   itemChildrenIndentation: true
 };

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

@@ -11,7 +11,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
-var _useTreeViewContext = require("../../TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
@@ -109,7 +109,7 @@ const useTreeViewJSXItemsItemPlugin = ({
 }) => {
   const {
     instance
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   const {
     children,
     disabled = false,

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

@@ -69,7 +69,7 @@ const useTreeViewKeyboardNavigation = ({
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (event.altKey || event.currentTarget !== event.target.closest('*[role="treeitem"]')) {
+    if (event.altKey || (0, _tree.isTargetInDescendants)(event.target, event.currentTarget)) {
       return;
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;

package/node/internals/useTreeView/useTreeViewBuildContext.js

@@ -13,6 +13,8 @@ const useTreeViewBuildContext = ({
   const runItemPlugins = itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
+    const pluginPropEnhancers = [];
+    const pluginPropEnhancersNames = {};
     plugins.forEach(plugin => {
       if (!plugin.itemPlugin) {
         return;
@@ -28,10 +30,30 @@ const useTreeViewBuildContext = ({
       if (itemPluginResponse?.contentRef) {
         finalContentRef = itemPluginResponse.contentRef;
       }
+      if (itemPluginResponse?.propsEnhancers) {
+        pluginPropEnhancers.push(itemPluginResponse.propsEnhancers);
+
+        // Prepare a list of all the slots which are enhanced by at least one plugin
+        Object.keys(itemPluginResponse.propsEnhancers).forEach(propsEnhancerName => {
+          pluginPropEnhancersNames[propsEnhancerName] = true;
+        });
+      }
     });
+    const resolvePropsEnhancer = currentSlotName => currentSlotParams => {
+      const enhancedProps = {};
+      pluginPropEnhancers.forEach(propsEnhancersForCurrentPlugin => {
+        const propsEnhancerForCurrentPluginAndSlot = propsEnhancersForCurrentPlugin[currentSlotName];
+        if (propsEnhancerForCurrentPluginAndSlot != null) {
+          Object.assign(enhancedProps, propsEnhancerForCurrentPluginAndSlot(currentSlotParams));
+        }
+      });
+      return enhancedProps;
+    };
+    const propsEnhancers = Object.fromEntries(Object.keys(pluginPropEnhancersNames).map(propEnhancerName => [propEnhancerName, resolvePropsEnhancer(propEnhancerName)]));
     return {
       contentRef: finalContentRef,
-      rootRef: finalRootRef
+      rootRef: finalRootRef,
+      propsEnhancers
     };
   };
   const wrapItem = ({

package/node/internals/utils/tree.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPreviousNavigableItem = exports.getNonDisabledItemsInRange = exports.getNextNavigableItem = exports.getLastNavigableItem = exports.getFirstNavigableItem = exports.getAllNavigableItems = exports.findOrderInTremauxTree = void 0;
+exports.isTargetInDescendants = exports.getPreviousNavigableItem = exports.getNonDisabledItemsInRange = exports.getNextNavigableItem = exports.getLastNavigableItem = exports.getFirstNavigableItem = exports.getAllNavigableItems = exports.findOrderInTremauxTree = void 0;
 const getLastNavigableItemInArray = (instance, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
@@ -194,4 +194,16 @@ const getAllNavigableItems = instance => {
   }
   return navigableItems;
 };
-exports.getAllNavigableItems = getAllNavigableItems;
+
+/**
+ * Checks if the target is in a descendant of this item.
+ * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.
+ * @param {HTMLElement} target The target to check
+ * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
+ * @returns {boolean} Whether the target is in a descendant of this item
+ */
+exports.getAllNavigableItems = getAllNavigableItems;
+const isTargetInDescendants = (target, itemRoot) => {
+  return itemRoot !== target.closest('*[role="treeitem"]');
+};
+exports.isTargetInDescendants = isTargetInDescendants;

package/node/internals/utils/warning.js

@@ -3,19 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.buildWarning = void 0;
-const buildWarning = (message, gravity = 'warning') => {
-  let alreadyWarned = false;
+exports.clearWarningsCache = clearWarningsCache;
+exports.warnOnce = warnOnce;
+const warnedOnceCache = new Set();
+
+// TODO move to @mui/x-internals
+// TODO eventually move to @base_ui/internals. Base UI, etc. too need this helper.
+function warnOnce(message, gravity = 'warning') {
+  if (process.env.NODE_ENV === 'production') {
+    return;
+  }
   const cleanMessage = Array.isArray(message) ? message.join('\n') : message;
-  return () => {
-    if (!alreadyWarned) {
-      alreadyWarned = true;
-      if (gravity === 'error') {
-        console.error(cleanMessage);
-      } else {
-        console.warn(cleanMessage);
-      }
+  if (!warnedOnceCache.has(cleanMessage)) {
+    warnedOnceCache.add(cleanMessage);
+    if (gravity === 'error') {
+      console.error(cleanMessage);
+    } else {
+      console.warn(cleanMessage);
     }
-  };
-};
-exports.buildWarning = buildWarning;
+  }
+}
+function clearWarningsCache() {
+  warnedOnceCache.clear();
+}