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

package/node/TreeItem/TreeItem.js

@@ -6,61 +6,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem = void 0;
+exports.TreeItemRoot = exports.TreeItemLabel = exports.TreeItemIconContainer = exports.TreeItemGroupTransition = exports.TreeItemContent = exports.TreeItemCheckbox = exports.TreeItem = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _unsupportedProp = _interopRequireDefault(require("@mui/utils/unsupportedProp"));
+var _styles = require("@mui/material/styles");
 var _Collapse = _interopRequireDefault(require("@mui/material/Collapse"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 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 _warning = require("@mui/x-internals/warning");
 var _zeroStyled = require("../internals/zero-styled");
-var _TreeItemContent = require("./TreeItemContent");
+var _useTreeItem = require("../useTreeItem");
 var _treeItemClasses = require("./treeItemClasses");
-var _TreeViewProvider = require("../internals/TreeViewProvider");
-var _icons = require("../icons");
-var _TreeItem2Provider = require("../TreeItem2Provider");
-var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
-var _useTreeItemState = require("./useTreeItemState");
-var _tree = require("../internals/utils/tree");
-var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
+var _TreeItemIcon = require("../TreeItemIcon");
+var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
+var _TreeItemProvider = require("../TreeItemProvider");
+var _TreeItemLabelInput = require("../TreeItemLabelInput");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "slots", "slotProps", "ContentComponent", "ContentProps", "itemId", "id", "label", "onClick", "onMouseDown", "onFocus", "onBlur", "onKeyDown"],
-  _excluded2 = ["ownerState"],
-  _excluded3 = ["ownerState"],
-  _excluded4 = ["ownerState"];
+const _excluded = ["visible"],
+  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem');
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['root'],
-    content: ['content'],
-    expanded: ['expanded'],
-    selected: ['selected'],
-    focused: ['focused'],
-    disabled: ['disabled'],
-    iconContainer: ['iconContainer'],
-    checkbox: ['checkbox'],
-    label: ['label'],
-    labelInput: ['labelInput'],
-    editing: ['editing'],
-    editable: ['editable'],
-    groupTransition: ['groupTransition']
-  };
-  return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
-};
-const TreeItemRoot = (0, _zeroStyled.styled)('li', {
+const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiTreeItem',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -70,21 +40,16 @@ const TreeItemRoot = (0, _zeroStyled.styled)('li', {
   padding: 0,
   outline: 0
 });
-const StyledTreeItemContent = (0, _zeroStyled.styled)(_TreeItemContent.TreeItemContent, {
+const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItem',
   slot: 'Content',
-  overridesResolver: (props, styles) => {
-    return [styles.content, styles.iconContainer && {
-      [`& .${_treeItemClasses.treeItemClasses.iconContainer}`]: styles.iconContainer
-    }, styles.label && {
-      [`& .${_treeItemClasses.treeItemClasses.label}`]: styles.label
-    }];
-  },
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
+  overridesResolver: (props, styles) => styles.content,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'status'
 })(({
   theme
 }) => ({
   padding: theme.spacing(0.5, 1),
+  paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
   boxSizing: 'border-box',
@@ -102,74 +67,130 @@ const StyledTreeItemContent = (0, _zeroStyled.styled)(_TreeItemContent.TreeItemC
       backgroundColor: 'transparent'
     }
   },
-  [`&.${_treeItemClasses.treeItemClasses.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity,
-    backgroundColor: 'transparent'
-  },
-  [`&.${_treeItemClasses.treeItemClasses.focused}`]: {
-    backgroundColor: (theme.vars || theme).palette.action.focus
-  },
-  [`&.${_treeItemClasses.treeItemClasses.selected}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+  variants: [{
+    props: ({
+      status
+    }) => status.disabled,
+    style: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      backgroundColor: 'transparent'
+    }
+  }, {
+    props: ({
+      status
+    }) => status.focused,
+    style: {
+      backgroundColor: (theme.vars || theme).palette.action.focus
+    }
+  }, {
+    props: ({
+      status
+    }) => status.selected,
+    style: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
       }
-    },
-    [`&.${_treeItemClasses.treeItemClasses.focused}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
-  },
-  [`& .${_treeItemClasses.treeItemClasses.iconContainer}`]: {
-    width: 16,
-    display: 'flex',
-    flexShrink: 0,
-    justifyContent: 'center',
-    '& svg': {
-      fontSize: 18
+  }, {
+    props: ({
+      status
+    }) => status.selected && status.focused,
+    style: {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
-  },
-  [`& .${_treeItemClasses.treeItemClasses.label}`]: (0, _extends2.default)({
-    width: '100%',
-    boxSizing: 'border-box',
-    // prevent width + padding to overflow
-    // fixes overflow - see https://github.com/mui/material-ui/issues/27372
-    minWidth: 0,
-    position: 'relative'
-  }, theme.typography.body1),
-  [`& .${_treeItemClasses.treeItemClasses.checkbox}`]: {
-    padding: 0
-  },
+  }]
+}));
+const TreeItemLabel = exports.TreeItemLabel = (0, _zeroStyled.styled)('div', {
+  name: 'MuiTreeItem',
+  slot: 'Label',
+  overridesResolver: (props, styles) => styles.label,
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'editable'
+})(({
+  theme
+}) => (0, _extends2.default)({
+  width: '100%',
+  boxSizing: 'border-box',
+  // prevent width + padding to overflow
+  // fixes overflow - see https://github.com/mui/material-ui/issues/27372
+  minWidth: 0,
+  position: 'relative',
+  overflow: 'hidden'
+}, theme.typography.body1, {
   variants: [{
-    props: {
-      indentationAtItemLevel: true
-    },
+    props: ({
+      editable
+    }) => editable,
     style: {
-      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+      paddingLeft: '2px'
     }
   }]
 }));
-const TreeItemGroup = (0, _zeroStyled.styled)(_Collapse.default, {
+const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.styled)('div', {
+  name: 'MuiTreeItem',
+  slot: 'IconContainer',
+  overridesResolver: (props, styles) => styles.iconContainer
+})({
+  width: 16,
+  display: 'flex',
+  flexShrink: 0,
+  justifyContent: 'center',
+  '& svg': {
+    fontSize: 18
+  }
+});
+const TreeItemGroupTransition = exports.TreeItemGroupTransition = (0, _zeroStyled.styled)(_Collapse.default, {
   name: 'MuiTreeItem',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'indentationAtItemLevel'
+  overridesResolver: (props, styles) => styles.groupTransition
 })({
   margin: 0,
-  padding: 0,
-  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
-  variants: [{
-    props: {
-      indentationAtItemLevel: true
-    },
-    style: {
-      paddingLeft: 0
-    }
-  }]
+  padding: 0
 });
-
+const TreeItemCheckbox = exports.TreeItemCheckbox = (0, _zeroStyled.styled)(/*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+      visible
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
+    ref: ref
+  }));
+}), {
+  name: 'MuiTreeItem',
+  slot: 'Checkbox',
+  overridesResolver: (props, styles) => styles.checkbox
+})({
+  padding: 0
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    content: ['content'],
+    expanded: ['expanded'],
+    editing: ['editing'],
+    editable: ['editable'],
+    selected: ['selected'],
+    focused: ['focused'],
+    disabled: ['disabled'],
+    iconContainer: ['iconContainer'],
+    checkbox: ['checkbox'],
+    label: ['label'],
+    groupTransition: ['groupTransition'],
+    labelInput: ['labelInput'],
+    dragAndDropOverlay: ['dragAndDropOverlay']
+  };
+  return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
+};
 /**
  *
  * Demos:
@@ -178,269 +199,124 @@ const TreeItemGroup = (0, _zeroStyled.styled)(_Collapse.default, {
  *
  * API:
  *
- * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item/)
+ * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item-2/)
  */
-const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, inRef) {
-  const {
-    icons: contextIcons,
-    runItemPlugins,
-    items: {
-      disabledItemsFocusable,
-      indentationAtItemLevel
-    },
-    selection: {
-      disableSelection
-    },
-    expansion: {
-      expansionTrigger
-    },
-    treeId,
-    instance
-  } = (0, _TreeViewProvider.useTreeViewContext)();
-  const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem'
   });
   const {
-      children,
-      className,
-      slots: inSlots,
-      slotProps: inSlotProps,
-      ContentComponent = _TreeItemContent.TreeItemContent,
-      ContentProps,
-      itemId,
       id,
+      itemId,
       label,
-      onClick,
-      onMouseDown,
-      onBlur,
-      onKeyDown
+      disabled,
+      children,
+      slots = {},
+      slotProps = {}
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    expanded,
-    focused,
-    selected,
-    disabled,
-    editing,
-    handleExpansion,
-    handleCancelItemLabelEditing,
-    handleSaveItemLabel
-  } = (0, _useTreeItemState.useTreeItemState)(itemId);
-  if (process.env.NODE_ENV !== 'production') {
-    // Checking directly the `props` to avoid having the default value applied
-    if (props.ContentComponent) {
-      (0, _warning.warnOnce)(['MUI X: The ContentComponent prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
-    }
-    if (props.ContentProps) {
-      (0, _warning.warnOnce)(['MUI X: The ContentProps prop of the TreeItem component is deprecated and will be removed in the next major release.', 'You can use the new TreeItem2 component or the new useTreeItem2 hook to customize the rendering of the content.', 'For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.']);
-    }
-  }
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const {
-    contentRef,
-    rootRef,
-    propsEnhancers
-  } = runItemPlugins(props);
-  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,
-    endIcon: inSlots?.endIcon ?? contextIcons.slots.endIcon,
-    icon: inSlots?.icon,
-    groupTransition: inSlots?.groupTransition
-  };
-  const isExpandable = reactChildren => {
-    if (Array.isArray(reactChildren)) {
-      return reactChildren.length > 0 && reactChildren.some(isExpandable);
-    }
-    return Boolean(reactChildren);
-  };
-  const expandable = isExpandable(children);
-  const ownerState = (0, _extends2.default)({}, props, {
-    expanded,
-    focused,
-    selected,
-    disabled,
-    indentationAtItemLevel
+    getRootProps,
+    getContentProps,
+    getIconContainerProps,
+    getCheckboxProps,
+    getLabelProps,
+    getGroupTransitionProps,
+    getLabelInputProps,
+    getDragAndDropOverlayProps,
+    status
+  } = (0, _useTreeItem.useTreeItem)({
+    id,
+    itemId,
+    children,
+    label,
+    disabled
   });
+  const ownerState = (0, _extends2.default)({}, props, status);
   const classes = useUtilityClasses(ownerState);
+  const Root = slots.root ?? TreeItemRoot;
+  const rootProps = (0, _useSlotProps.default)({
+    elementType: Root,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    externalSlotProps: slotProps.root,
+    additionalProps: {
+      ref: forwardedRef
+    },
+    ownerState: {},
+    className: classes.root
+  });
+  const Content = slots.content ?? TreeItemContent;
+  const contentProps = (0, _useSlotProps.default)({
+    elementType: Content,
+    getSlotProps: getContentProps,
+    externalSlotProps: slotProps.content,
+    ownerState: {},
+    className: (0, _clsx.default)(classes.content, status.expanded && classes.expanded, status.selected && classes.selected, status.focused && classes.focused, status.disabled && classes.disabled, status.editing && classes.editing, status.editable && classes.editable)
+  });
+  const IconContainer = slots.iconContainer ?? TreeItemIconContainer;
+  const iconContainerProps = (0, _useSlotProps.default)({
+    elementType: IconContainer,
+    getSlotProps: getIconContainerProps,
+    externalSlotProps: slotProps.iconContainer,
+    ownerState: {},
+    className: classes.iconContainer
+  });
+  const Label = slots.label ?? TreeItemLabel;
+  const labelProps = (0, _useSlotProps.default)({
+    elementType: Label,
+    getSlotProps: getLabelProps,
+    externalSlotProps: slotProps.label,
+    ownerState: {},
+    className: classes.label
+  });
+  const Checkbox = slots.checkbox ?? TreeItemCheckbox;
+  const checkboxProps = (0, _useSlotProps.default)({
+    elementType: Checkbox,
+    getSlotProps: getCheckboxProps,
+    externalSlotProps: slotProps.checkbox,
+    ownerState: {},
+    className: classes.checkbox
+  });
   const GroupTransition = slots.groupTransition ?? undefined;
-  const groupTransitionProps = (0, _useSlotProps4.default)({
+  const groupTransitionProps = (0, _useSlotProps.default)({
     elementType: GroupTransition,
+    getSlotProps: getGroupTransitionProps,
+    externalSlotProps: slotProps.groupTransition,
     ownerState: {},
-    externalSlotProps: inSlotProps?.groupTransition,
-    additionalProps: (0, _extends2.default)({
-      unmountOnExit: true,
-      in: expanded,
-      component: 'ul',
-      role: 'group'
-    }, indentationAtItemLevel ? {
-      indentationAtItemLevel: true
-    } : {}),
     className: classes.groupTransition
   });
-  const handleIconContainerClick = event => {
-    if (expansionTrigger === 'iconContainer') {
-      handleExpansion(event);
-    }
-  };
-  const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
-  const _useSlotProps = (0, _useSlotProps4.default)({
-      elementType: ExpansionIcon,
-      ownerState: {},
-      externalSlotProps: tempOwnerState => {
-        if (expanded) {
-          return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIcons.slotProps.collapseIcon, tempOwnerState), (0, _resolveComponentProps.default)(inSlotProps?.collapseIcon, tempOwnerState));
-        }
-        return (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIcons.slotProps.expandIcon, tempOwnerState), (0, _resolveComponentProps.default)(inSlotProps?.expandIcon, tempOwnerState));
-      },
-      additionalProps: {
-        onClick: handleIconContainerClick
-      }
-    }),
-    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, _useSlotProps4.default)({
-      elementType: DisplayIcon,
-      ownerState: {},
-      externalSlotProps: tempOwnerState => {
-        if (expandable) {
-          return {};
-        }
-        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, _useSlotProps4.default)({
-      elementType: Icon,
-      ownerState: {},
-      externalSlotProps: inSlotProps?.icon
-    }),
-    iconProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps3, _excluded4);
-  const icon = Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, iconProps)) : null;
-
-  // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
-  let ariaSelected;
-  if (selected) {
-    // - each selected node has aria-selected set to true.
-    ariaSelected = true;
-  } else if (disableSelection || disabled) {
-    // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
-    ariaSelected = undefined;
-  } else {
-    // - all nodes that are selectable but not selected have aria-selected set to false.
-    ariaSelected = false;
-  }
-  function handleFocus(event) {
-    const canBeFocused = !disabled || disabledItemsFocusable;
-    if (!focused && canBeFocused && event.currentTarget === event.target) {
-      instance.focusItem(event, itemId);
-    }
-  }
-  function handleBlur(event) {
-    onBlur?.(event);
-    if (editing ||
-    // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases
-    // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case
-    event.relatedTarget && (0, _tree.isTargetInDescendants)(event.relatedTarget, rootRefObject.current) && (event.target && event.target?.dataset?.element === 'labelInput' && (0, _tree.isTargetInDescendants)(event.target, rootRefObject.current) || event.relatedTarget?.dataset?.element === 'labelInput')) {
-      return;
-    }
-    instance.removeFocusedItem();
-  }
-  const handleKeyDown = event => {
-    onKeyDown?.(event);
-    if (event.target?.dataset?.element === 'labelInput') {
-      return;
-    }
-    instance.handleItemKeyDown(event, itemId);
-  };
-  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
-    itemId,
-    treeId,
-    id
+  const LabelInput = slots.labelInput ?? _TreeItemLabelInput.TreeItemLabelInput;
+  const labelInputProps = (0, _useSlotProps.default)({
+    elementType: LabelInput,
+    getSlotProps: getLabelInputProps,
+    externalSlotProps: slotProps.labelInput,
+    ownerState: {},
+    className: classes.labelInput
   });
-  const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
-  const sharedPropsEnhancerParams = {
-    rootRefObject,
-    contentRefObject,
-    interactions: {
-      handleSaveItemLabel,
-      handleCancelItemLabelEditing
-    }
-  };
-  const enhancedRootProps = propsEnhancers.root?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
-    externalEventHandlers: (0, _extractEventHandlers.default)(other)
-  })) ?? {};
-  const enhancedContentProps = propsEnhancers.content?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
-    externalEventHandlers: (0, _extractEventHandlers.default)(ContentProps)
-  })) ?? {};
-  const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
-    externalEventHandlers: {}
-  })) ?? {};
-  const enhancedLabelInputProps = propsEnhancers.labelInput?.((0, _extends2.default)({}, sharedPropsEnhancerParams, {
-    externalEventHandlers: {}
-  })) ?? {};
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
+  const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItemDragAndDropOverlay.TreeItemDragAndDropOverlay;
+  const dragAndDropOverlayProps = (0, _useSlotProps.default)({
+    elementType: DragAndDropOverlay,
+    getSlotProps: getDragAndDropOverlayProps,
+    externalSlotProps: slotProps.dragAndDropOverlay,
+    ownerState: {},
+    className: classes.dragAndDropOverlay
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemProvider.TreeItemProvider, {
     itemId: itemId,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TreeItemRoot, (0, _extends2.default)({
-      className: (0, _clsx.default)(classes.root, className),
-      role: "treeitem",
-      "aria-expanded": expandable ? expanded : undefined,
-      "aria-selected": ariaSelected,
-      "aria-disabled": disabled || undefined,
-      id: idAttribute,
-      tabIndex: tabIndex
-    }, other, {
-      ownerState: ownerState,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      ref: handleRootRef,
-      style: indentationAtItemLevel ? (0, _extends2.default)({}, other.style, {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
-      }) : other.style
-    }, enhancedRootProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTreeItemContent, (0, _extends2.default)({
-        as: ContentComponent,
-        classes: {
-          root: classes.content,
-          expanded: classes.expanded,
-          selected: classes.selected,
-          focused: classes.focused,
-          disabled: classes.disabled,
-          editable: classes.editable,
-          editing: classes.editing,
-          iconContainer: classes.iconContainer,
-          label: classes.label,
-          labelInput: classes.labelInput,
-          checkbox: classes.checkbox
-        },
-        label: label,
-        itemId: itemId,
-        onClick: onClick,
-        onMouseDown: onMouseDown,
-        icon: icon,
-        expansionIcon: expansionIcon,
-        displayIcon: displayIcon,
-        ownerState: ownerState
-      }, ContentProps, enhancedContentProps, enhancedDragAndDropOverlayProps.action == null ? {} : {
-        dragAndDropOverlayProps: enhancedDragAndDropOverlayProps
-      }, enhancedLabelInputProps.value == null ? {} : {
-        labelInputProps: enhancedLabelInputProps
-      }, {
-        ref: handleContentRef
-      })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroup, (0, _extends2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemIcon.TreeItemIcon, {
+            status: status,
+            slots: slots,
+            slotProps: slotProps
+          })
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, checkboxProps)), status.editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelInput, (0, _extends2.default)({}, labelInputProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(DragAndDropOverlay, (0, _extends2.default)({}, dragAndDropOverlayProps))]
+      })), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemGroupTransition, (0, _extends2.default)({
         as: GroupTransition
-      }, groupTransitionProps, {
-        children: children
-      }))]
+      }, groupTransitionProps))]
     }))
   });
 });
@@ -458,37 +334,35 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    */
   classes: _propTypes.default.object,
   className: _propTypes.default.string,
-  /**
-   * The component used to render the content of the item.
-   * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
-   * @default TreeItemContent
-   */
-  ContentComponent: _elementTypeAcceptingRef.default,
-  /**
-   * Props applied to ContentComponent.
-   * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
-   */
-  ContentProps: _propTypes.default.object,
   /**
    * If `true`, the item is disabled.
    * @default false
    */
   disabled: _propTypes.default.bool,
+  /**
+   * The id attribute of the item. If not provided, it will be generated.
+   */
+  id: _propTypes.default.string,
   /**
    * The id of the item.
+   * Must be unique.
    */
   itemId: _propTypes.default.string.isRequired,
   /**
-   * The Tree Item label.
+   * The label of the item.
    */
   label: _propTypes.default.node,
+  /**
+   * Callback fired when the item root is blurred.
+   */
+  onBlur: _propTypes.default.func,
   /**
    * This prop isn't supported.
-   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
    */
   onFocus: _unsupportedProp.default,
   /**
-   * Callback fired when a key of the keyboard is pressed on the item.
+   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
    */
   onKeyDown: _propTypes.default.func,
   /**
@@ -500,9 +374,5 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+  slots: _propTypes.default.object
 } : void 0;