@mui/x-tree-view 7.11.1 → 7.12.1

package/node/RichTreeView/RichTreeView.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _richTreeViewClasses = require("./richTreeViewClasses");
 var _zeroStyled = require("../internals/zero-styled");
 var _useTreeView = require("../internals/useTreeView");
@@ -50,7 +50,7 @@ function WrappedTreeItem({
   children
 }) {
   const Item = slots?.item ?? _TreeItem.TreeItem;
-  const itemProps = (0, _utils.useSlotProps)({
+  const itemProps = (0, _useSlotProps.default)({
     elementType: Item,
     externalSlotProps: slotProps?.item,
     additionalProps: {
@@ -103,7 +103,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
     externalSlotProps: slotProps?.root,
     className: classes.root,
@@ -250,6 +250,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.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.
@@ -258,10 +264,9 @@ process.env.NODE_ENV !== "production" ? RichTreeView.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/SimpleTreeView/SimpleTreeView.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _utils = require("@mui/base/utils");
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _zeroStyled = require("../internals/zero-styled");
 var _simpleTreeViewClasses = require("./simpleTreeViewClasses");
 var _useTreeView = require("../internals/useTreeView");
@@ -79,7 +79,7 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
   } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? SimpleTreeViewRoot;
-  const rootProps = (0, _utils.useSlotProps)({
+  const rootProps = (0, _useSlotProps.default)({
     elementType: Root,
     externalSlotProps: slotProps?.root,
     className: classes.root,
@@ -186,6 +186,12 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.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.
@@ -194,10 +200,9 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.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/TreeItem/TreeItem.js

@@ -11,17 +11,19 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
-var _utils = require("@mui/base/utils");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _createStyled = require("@mui/system/createStyled");
 var _styles = require("@mui/material/styles");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _extractEventHandlers = _interopRequireDefault(require("@mui/utils/extractEventHandlers"));
+var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
+var _useSlotProps4 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
-var _base = require("@mui/base");
 var _zeroStyled = require("../internals/zero-styled");
 var _TreeItemContent = require("./TreeItemContent");
 var _treeItemClasses = require("./treeItemClasses");
-var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _icons = require("../icons");
 var _TreeItem2Provider = require("../TreeItem2Provider");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
@@ -50,7 +52,7 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     groupTransition: ['groupTransition']
   };
-  return (0, _base.unstable_composeClasses)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
 };
 const TreeItemRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiTreeItem',
@@ -81,6 +83,7 @@ const StyledTreeItemContent = (0, _zeroStyled.styled)(_TreeItemContent.TreeItemC
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
@@ -175,16 +178,18 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   const {
     icons: contextIcons,
     runItemPlugins,
+    items: {
+      disabledItemsFocusable,
+      indentationAtItemLevel
+    },
     selection: {
       multiSelect
     },
     expansion: {
       expansionTrigger
     },
-    disabledItemsFocusable,
-    indentationAtItemLevel,
     instance
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
   const props = useThemeProps({
     props: inProps,
@@ -215,10 +220,13 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
   const {
     contentRef,
-    rootRef
+    rootRef,
+    propsEnhancers
   } = runItemPlugins(props);
-  const handleRootRef = (0, _useForkRef.default)(inRef, rootRef);
-  const handleContentRef = (0, _useForkRef.default)(ContentProps?.ref, contentRef);
+  const rootRefObject = React.useRef(null);
+  const contentRefObject = React.useRef(null);
+  const handleRootRef = (0, _useForkRef.default)(inRef, rootRef, rootRefObject);
+  const handleContentRef = (0, _useForkRef.default)(ContentProps?.ref, contentRef, contentRefObject);
   const slots = {
     expandIcon: inSlots?.expandIcon ?? contextIcons.slots.expandIcon ?? _icons.TreeViewExpandIcon,
     collapseIcon: inSlots?.collapseIcon ?? contextIcons.slots.collapseIcon ?? _icons.TreeViewCollapseIcon,
@@ -242,7 +250,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   });
   const classes = useUtilityClasses(ownerState);
   const GroupTransition = slots.groupTransition ?? undefined;
-  const groupTransitionProps = (0, _utils.useSlotProps)({
+  const groupTransitionProps = (0, _useSlotProps4.default)({
     elementType: GroupTransition,
     ownerState: {},
     externalSlotProps: inSlotProps?.groupTransition,
@@ -262,14 +270,14 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     }
   };
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
-  const _useSlotProps = (0, _utils.useSlotProps)({
+  const _useSlotProps = (0, _useSlotProps4.default)({
       elementType: ExpansionIcon,
       ownerState: {},
       externalSlotProps: tempOwnerState => {
         if (expanded) {
-          return (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIcons.slotProps.collapseIcon, tempOwnerState), (0, _utils.resolveComponentProps)(inSlotProps?.collapseIcon, tempOwnerState));
+          return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIcons.slotProps.collapseIcon, tempOwnerState), (0, _resolveComponentProps.default)(inSlotProps?.collapseIcon, tempOwnerState));
         }
-        return (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIcons.slotProps.expandIcon, tempOwnerState), (0, _utils.resolveComponentProps)(inSlotProps?.expandIcon, tempOwnerState));
+        return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIcons.slotProps.expandIcon, tempOwnerState), (0, _resolveComponentProps.default)(inSlotProps?.expandIcon, tempOwnerState));
       },
       additionalProps: {
         onClick: handleIconContainerClick
@@ -278,20 +286,20 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     expansionIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded2);
   const expansionIcon = expandable && !!ExpansionIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpansionIcon, (0, _extends2.default)({}, expansionIconProps)) : null;
   const DisplayIcon = expandable ? undefined : slots.endIcon;
-  const _useSlotProps2 = (0, _utils.useSlotProps)({
+  const _useSlotProps2 = (0, _useSlotProps4.default)({
       elementType: DisplayIcon,
       ownerState: {},
       externalSlotProps: tempOwnerState => {
         if (expandable) {
           return {};
         }
-        return (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(contextIcons.slotProps.endIcon, tempOwnerState), (0, _utils.resolveComponentProps)(inSlotProps?.endIcon, tempOwnerState));
+        return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIcons.slotProps.endIcon, tempOwnerState), (0, _resolveComponentProps.default)(inSlotProps?.endIcon, tempOwnerState));
       }
     }),
     displayIconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps2, _excluded3);
   const displayIcon = DisplayIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(DisplayIcon, (0, _extends2.default)({}, displayIconProps)) : null;
   const Icon = slots.icon;
-  const _useSlotProps3 = (0, _utils.useSlotProps)({
+  const _useSlotProps3 = (0, _useSlotProps4.default)({
       elementType: Icon,
       ownerState: {},
       externalSlotProps: inSlotProps?.icon
@@ -326,6 +334,21 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
   };
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const enhancedRootProps = propsEnhancers.root?.({
+    rootRefObject,
+    contentRefObject,
+    externalEventHandlers: (0, _extractEventHandlers.default)(other)
+  }) ?? {};
+  const enhancedContentProps = propsEnhancers.content?.({
+    rootRefObject,
+    contentRefObject,
+    externalEventHandlers: (0, _extractEventHandlers.default)(ContentProps)
+  }) ?? {};
+  const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.({
+    rootRefObject,
+    contentRefObject,
+    externalEventHandlers: {}
+  }) ?? {};
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
@@ -344,7 +367,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       ref: handleRootRef,
       style: indentationAtItemLevel ? (0, _extends2.default)({}, other.style, {
         '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      }) : other.style,
+      }) : other.style
+    }, enhancedRootProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
         as: ContentComponent,
         classes: {
@@ -365,7 +389,9 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
         expansionIcon: expansionIcon,
         displayIcon: displayIcon,
         ownerState: ownerState
-      }, ContentProps, {
+      }, ContentProps, enhancedContentProps, enhancedDragAndDropOverlayProps.action == null ? {} : {
+        dragAndDropOverlayProps: enhancedDragAndDropOverlayProps
+      }, {
         ref: handleContentRef
       })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
         as: GroupTransition

package/node/TreeItem/TreeItemContent.js

@@ -12,8 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
 var _useTreeItemState = require("./useTreeItemState");
+var _TreeItem2DragAndDropOverlay = require("../TreeItem2DragAndDropOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown"];
+const _excluded = ["classes", "className", "displayIcon", "expansionIcon", "icon", "label", "itemId", "onClick", "onMouseDown", "dragAndDropOverlayProps"];
 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; }
 /**
@@ -29,7 +30,8 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       label,
       itemId,
       onClick,
-      onMouseDown
+      onMouseDown,
+      dragAndDropOverlayProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
@@ -42,6 +44,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
+    handleContentClick,
     preventSelection,
     expansionTrigger
   } = (0, _useTreeItemState.useTreeItemState)(itemId);
@@ -54,6 +57,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
     }
   };
   const handleClick = event => {
+    handleContentClick?.(event, itemId);
     if (checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -88,7 +92,7 @@ const TreeItemContent = exports.TreeItemContent = /*#__PURE__*/React.forwardRef(
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: classes.label,
         children: label
-      })]
+      }), dragAndDropOverlayProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2DragAndDropOverlay.TreeItem2DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
     }))
   );
 });
@@ -106,6 +110,10 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
    * The icon to display next to the tree item's label. Either a parent or end icon.
    */
   displayIcon: _propTypes.default.node,
+  dragAndDropOverlayProps: _propTypes.default.shape({
+    action: _propTypes.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+    style: _propTypes.default.object
+  }),
   /**
    * The icon to display next to the tree item's label. Either an expansion or collapse icon.
    */

package/node/TreeItem/treeItemClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'dragAndDropOverlay']);

package/node/TreeItem/useTreeItemState.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeItemState = useTreeItemState;
-var _useTreeViewContext = require("../internals/TreeViewProvider/useTreeViewContext");
+var _TreeViewProvider = require("../internals/TreeViewProvider");
 function useTreeItemState(itemId) {
   const {
     instance,
+    items: {
+      onItemClick
+    },
     selection: {
       multiSelect,
       checkboxSelection,
@@ -16,7 +19,7 @@ function useTreeItemState(itemId) {
     expansion: {
       expansionTrigger
     }
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewProvider.useTreeViewContext)();
   const expandable = instance.isItemExpandable(itemId);
   const expanded = instance.isItemExpanded(itemId);
   const focused = instance.isItemFocused(itemId);
@@ -92,6 +95,7 @@ function useTreeItemState(itemId) {
     handleExpansion,
     handleSelection,
     handleCheckboxSelection,
+    handleContentClick: onItemClick,
     preventSelection,
     expansionTrigger
   };

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,