@mui/x-tree-view 8.0.0-alpha.9 → 8.0.0-beta.1

package/{node → esm}/TreeItem/TreeItem.js

@@ -1,36 +1,30 @@
-"use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-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 _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
-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("../useTreeItem");
-var _treeItemClasses = require("./treeItemClasses");
-var _TreeItemIcon = require("../TreeItemIcon");
-var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
-var _TreeItemProvider = require("../TreeItemProvider");
-var _TreeItemLabelInput = require("../TreeItemLabelInput");
-var _jsxRuntime = require("react/jsx-runtime");
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["visible"],
   _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem');
-const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import CircularProgress from '@mui/material/CircularProgress';
+import unsupportedProp from '@mui/utils/unsupportedProp';
+import { alpha } from '@mui/material/styles';
+import Collapse from '@mui/material/Collapse';
+import MuiCheckbox from '@mui/material/Checkbox';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
+import { useTreeItem } from "../useTreeItem/index.js";
+import { getTreeItemUtilityClass } from "./treeItemClasses.js";
+import { TreeItemIcon } from "../TreeItemIcon/index.js";
+import { TreeItemDragAndDropOverlay } from "../TreeItemDragAndDropOverlay/index.js";
+import { TreeItemProvider } from "../TreeItemProvider/index.js";
+import { TreeItemLabelInput } from "../TreeItemLabelInput/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTreeItem');
+export const TreeItemRoot = styled('li', {
   name: 'MuiTreeItem',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -40,11 +34,11 @@ const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
   padding: 0,
   outline: 0
 });
-const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div', {
+export const TreeItemContent = styled('div', {
   name: 'MuiTreeItem',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'status'
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
 })(({
   theme
 }) => ({
@@ -87,12 +81,12 @@ const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div',
       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),
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : 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),
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : 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)
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
         }
       }
     }
@@ -101,18 +95,18 @@ const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div',
       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)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   }]
 }));
-const TreeItemLabel = exports.TreeItemLabel = (0, _zeroStyled.styled)('div', {
+export const TreeItemLabel = styled('div', {
   name: 'MuiTreeItem',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'editable'
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'editable'
 })(({
   theme
-}) => (0, _extends2.default)({
+}) => _extends({
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
@@ -130,7 +124,7 @@ const TreeItemLabel = exports.TreeItemLabel = (0, _zeroStyled.styled)('div', {
     }
   }]
 }));
-const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.styled)('div', {
+export const TreeItemIconContainer = styled('div', {
   name: 'MuiTreeItem',
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer
@@ -139,11 +133,12 @@ const TreeItemIconContainer = exports.TreeItemIconContainer = (0, _zeroStyled.st
   display: 'flex',
   flexShrink: 0,
   justifyContent: 'center',
+  position: 'relative',
   '& svg': {
     fontSize: 18
   }
 });
-const TreeItemGroupTransition = exports.TreeItemGroupTransition = (0, _zeroStyled.styled)(_Collapse.default, {
+export const TreeItemGroupTransition = styled(Collapse, {
   name: 'MuiTreeItem',
   slot: 'GroupTransition',
   overridesResolver: (props, styles) => styles.groupTransition
@@ -151,15 +146,34 @@ const TreeItemGroupTransition = exports.TreeItemGroupTransition = (0, _zeroStyle
   margin: 0,
   padding: 0
 });
-const TreeItemCheckbox = exports.TreeItemCheckbox = (0, _zeroStyled.styled)(/*#__PURE__*/React.forwardRef((props, ref) => {
+export const TreeItemErrorContainer = styled('div', {
+  name: 'MuiTreeItem',
+  slot: 'ErrorIcon',
+  overridesResolver: (props, styles) => styles.errorIcon
+})({
+  position: 'absolute',
+  right: -3,
+  width: 7,
+  height: 7,
+  borderRadius: '50%',
+  backgroundColor: 'red'
+});
+export const TreeItemLoadingContainer = styled(CircularProgress, {
+  name: 'MuiTreeItem',
+  slot: 'LoadingIcon',
+  overridesResolver: (props, styles) => styles.loadingIcon
+})({
+  color: 'text.primary'
+});
+export const TreeItemCheckbox = styled(/*#__PURE__*/React.forwardRef((props, ref) => {
   const {
       visible
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   if (!visible) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/_jsx(MuiCheckbox, _extends({}, other, {
     ref: ref
   }));
 }), {
@@ -187,9 +201,11 @@ const useUtilityClasses = ownerState => {
     label: ['label'],
     groupTransition: ['groupTransition'],
     labelInput: ['labelInput'],
-    dragAndDropOverlay: ['dragAndDropOverlay']
+    dragAndDropOverlay: ['dragAndDropOverlay'],
+    errorIcon: ['errorIcon'],
+    loadingIcon: ['loadingIcon']
   };
-  return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
+  return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
 /**
  *
@@ -201,7 +217,7 @@ const useUtilityClasses = ownerState => {
  *
  * - [TreeItem API](https://mui.com/x/api/tree-view/tree-item-2/)
  */
-const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, forwardedRef) {
+export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps, forwardedRef) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem'
@@ -215,7 +231,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       slots = {},
       slotProps = {}
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
   const {
     getContextProviderProps,
     getRootProps,
@@ -226,18 +242,20 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     getGroupTransitionProps,
     getLabelInputProps,
     getDragAndDropOverlayProps,
+    getErrorContainerProps,
+    getLoadingContainerProps,
     status
-  } = (0, _useTreeItem.useTreeItem)({
+  } = useTreeItem({
     id,
     itemId,
     children,
     label,
     disabled
   });
-  const ownerState = (0, _extends2.default)({}, props, status);
+  const ownerState = _extends({}, props, status);
   const classes = useUtilityClasses(ownerState);
   const Root = slots.root ?? TreeItemRoot;
-  const rootProps = (0, _useSlotProps.default)({
+  const rootProps = useSlotProps({
     elementType: Root,
     getSlotProps: getRootProps,
     externalForwardedProps: other,
@@ -249,15 +267,15 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     className: classes.root
   });
   const Content = slots.content ?? TreeItemContent;
-  const contentProps = (0, _useSlotProps.default)({
+  const contentProps = useSlotProps({
     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)
+    className: clsx(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)({
+  const iconContainerProps = useSlotProps({
     elementType: IconContainer,
     getSlotProps: getIconContainerProps,
     externalSlotProps: slotProps.iconContainer,
@@ -265,7 +283,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     className: classes.iconContainer
   });
   const Label = slots.label ?? TreeItemLabel;
-  const labelProps = (0, _useSlotProps.default)({
+  const labelProps = useSlotProps({
     elementType: Label,
     getSlotProps: getLabelProps,
     externalSlotProps: slotProps.label,
@@ -273,7 +291,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     className: classes.label
   });
   const Checkbox = slots.checkbox ?? TreeItemCheckbox;
-  const checkboxProps = (0, _useSlotProps.default)({
+  const checkboxProps = useSlotProps({
     elementType: Checkbox,
     getSlotProps: getCheckboxProps,
     externalSlotProps: slotProps.checkbox,
@@ -281,40 +299,56 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     className: classes.checkbox
   });
   const GroupTransition = slots.groupTransition ?? undefined;
-  const groupTransitionProps = (0, _useSlotProps.default)({
+  const groupTransitionProps = useSlotProps({
     elementType: GroupTransition,
     getSlotProps: getGroupTransitionProps,
     externalSlotProps: slotProps.groupTransition,
     ownerState: {},
     className: classes.groupTransition
   });
-  const LabelInput = slots.labelInput ?? _TreeItemLabelInput.TreeItemLabelInput;
-  const labelInputProps = (0, _useSlotProps.default)({
+  const LabelInput = slots.labelInput ?? TreeItemLabelInput;
+  const labelInputProps = useSlotProps({
     elementType: LabelInput,
     getSlotProps: getLabelInputProps,
     externalSlotProps: slotProps.labelInput,
     ownerState: {},
     className: classes.labelInput
   });
-  const DragAndDropOverlay = slots.dragAndDropOverlay ?? _TreeItemDragAndDropOverlay.TreeItemDragAndDropOverlay;
-  const dragAndDropOverlayProps = (0, _useSlotProps.default)({
+  const DragAndDropOverlay = slots.dragAndDropOverlay ?? TreeItemDragAndDropOverlay;
+  const dragAndDropOverlayProps = useSlotProps({
     elementType: DragAndDropOverlay,
     getSlotProps: getDragAndDropOverlayProps,
     externalSlotProps: slotProps.dragAndDropOverlay,
     ownerState: {},
     className: classes.dragAndDropOverlay
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemProvider.TreeItemProvider, (0, _extends2.default)({}, getContextProviderProps(), {
-    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, {
+  const ErrorIcon = slots.errorIcon ?? TreeItemErrorContainer;
+  const errorContainerProps = useSlotProps({
+    elementType: ErrorIcon,
+    getSlotProps: getErrorContainerProps,
+    externalSlotProps: slotProps.errorIcon,
+    ownerState: {},
+    className: classes.errorIcon
+  });
+  const LoadingIcon = slots.loadingIcon ?? TreeItemLoadingContainer;
+  const loadingContainerProps = useSlotProps({
+    elementType: LoadingIcon,
+    getSlotProps: getLoadingContainerProps,
+    externalSlotProps: slotProps.loadingIcon,
+    ownerState: {},
+    className: classes.loadingIcon
+  });
+  return /*#__PURE__*/_jsx(TreeItemProvider, _extends({}, getContextProviderProps(), {
+    children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
+      children: [/*#__PURE__*/_jsxs(Content, _extends({}, contentProps, {
+        children: [/*#__PURE__*/_jsxs(IconContainer, _extends({}, iconContainerProps, {
+          children: [status.error && /*#__PURE__*/_jsx(ErrorIcon, _extends({}, errorContainerProps)), status.loading ? /*#__PURE__*/_jsx(LoadingIcon, _extends({}, loadingContainerProps)) : /*#__PURE__*/_jsx(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)({
+          })]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), status.editing ? /*#__PURE__*/_jsx(LabelInput, _extends({}, labelInputProps)) : /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
+      })), children && /*#__PURE__*/_jsx(TreeItemGroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]
     }))
@@ -328,51 +362,51 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   /**
    * The content of the component.
    */
-  children: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
+  children: PropTypes /* @typescript-to-proptypes-ignore */.any,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: _propTypes.default.object,
-  className: _propTypes.default.string,
+  classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * If `true`, the item is disabled.
    * @default false
    */
-  disabled: _propTypes.default.bool,
+  disabled: PropTypes.bool,
   /**
    * The id attribute of the item. If not provided, it will be generated.
    */
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   /**
    * The id of the item.
    * Must be unique.
    */
-  itemId: _propTypes.default.string.isRequired,
+  itemId: PropTypes.string.isRequired,
   /**
    * The label of the item.
    */
-  label: _propTypes.default.node,
+  label: PropTypes.node,
   /**
    * Callback fired when the item root is blurred.
    */
-  onBlur: _propTypes.default.func,
+  onBlur: PropTypes.func,
   /**
    * This prop isn't supported.
    * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
    */
-  onFocus: _unsupportedProp.default,
+  onFocus: unsupportedProp,
   /**
    * Callback fired when a key is pressed on the keyboard and the tree is in focus.
    */
-  onKeyDown: _propTypes.default.func,
+  onKeyDown: PropTypes.func,
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps: _propTypes.default.object,
+  slotProps: PropTypes.object,
   /**
    * Overridable component slots.
    * @default {}
    */
-  slots: _propTypes.default.object
+  slots: PropTypes.object
 } : void 0;

package/esm/TreeItem/TreeItem.types.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
+import { TransitionProps } from '@mui/material/transitions';
+import { SlotComponentProps } from '@mui/utils/types';
+import { UseTreeItemParameters, UseTreeItemStatus } from "../useTreeItem/index.js";
+import { TreeItemClasses } from "./treeItemClasses.js";
+import { TreeItemIconSlotProps, TreeItemIconSlots } from "../TreeItemIcon/index.js";
+import { TreeViewCancellableEventHandler } from "../models/index.js";
+export interface TreeItemSlots extends TreeItemIconSlots {
+  /**
+   * The component that renders the root.
+   * @default TreeItemRoot
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the content of the item.
+   * (e.g.: everything related to this item, not to its children).
+   * @default TreeItemContent
+   */
+  content?: React.ElementType;
+  /**
+   * The component that renders the children of the item.
+   * @default TreeItemGroupTransition
+   */
+  groupTransition?: React.ElementType;
+  /**
+   * The component that renders the icon.
+   * @default TreeItemIconContainer
+   */
+  iconContainer?: React.ElementType;
+  /**
+   * The component that renders the item checkbox for selection.
+   * @default TreeItemCheckbox
+   */
+  checkbox?: React.ElementType;
+  /**
+   * The component that renders the item label.
+   * @default TreeItemLabel
+   */
+  label?: React.ElementType;
+  /**
+   * The component that renders the input to edit the label when the item is editable and is currently being edited.
+   * @default TreeItemLabelInput
+   */
+  labelInput?: React.ElementType;
+  /**
+   * The component that renders the overlay when an item reordering is ongoing.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
+   * @default TreeItemDragAndDropOverlay
+   */
+  dragAndDropOverlay?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in an error state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemErrorContainer
+   */
+  errorIcon?: React.ElementType;
+  /**
+   * The component that is rendered when the item is in an loading state.
+   * Warning: This slot is only useful when using the `<RichTreeViewPro />` component is lazy loading is enabled.
+   * @default TreeItemLoadingContainer
+   */
+  loadingIcon?: React.ElementType;
+}
+export interface TreeItemSlotProps extends TreeItemIconSlotProps {
+  root?: SlotComponentProps<'li', {}, {}>;
+  content?: SlotComponentProps<'div', {}, {}>;
+  groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
+  iconContainer?: SlotComponentProps<'div', {}, {}>;
+  checkbox?: SlotComponentProps<'button', {}, {}>;
+  label?: SlotComponentProps<'div', {}, {}>;
+  labelInput?: SlotComponentProps<'input', {}, {}>;
+  dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
+  errorIcon?: SlotComponentProps<'div', {}, {}>;
+  loadingIcon?: SlotComponentProps<'div', {}, {}>;
+}
+export interface TreeItemProps extends Omit<UseTreeItemParameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
+  className?: string;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TreeItemClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TreeItemSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TreeItemSlotProps;
+  /**
+   * This prop isn't supported.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
+   */
+  onFocus?: null;
+  /**
+   * Callback fired when the item root is blurred.
+   */
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
+  /**
+   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
+   */
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+}
+export interface TreeItemOwnerState extends Omit<TreeItemProps, 'disabled'>, UseTreeItemStatus {}

package/esm/TreeItem/TreeItem.types.js

@@ -0,0 +1 @@
+export {};

package/esm/TreeItem/index.d.ts

@@ -0,0 +1,3 @@
+export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
+export type { TreeItemProps, TreeItemSlots, TreeItemSlotProps } from './TreeItem.types';
+export * from "./treeItemClasses.js";

package/esm/TreeItem/index.js

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

package/esm/TreeItem/treeItemClasses.d.ts

@@ -0,0 +1,33 @@
+export interface TreeItemClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the transition component. */
+  groupTransition: string;
+  /** Styles applied to the content element. */
+  content: string;
+  /** State class applied to the content element when expanded. */
+  expanded: string;
+  /** State class applied to the content element when selected. */
+  selected: string;
+  /** State class applied to the content element when focused. */
+  focused: string;
+  /** State class applied to the element when disabled. */
+  disabled: string;
+  /** Styles applied to the Tree Item icon. */
+  iconContainer: string;
+  /** Styles applied to the label element. */
+  label: string;
+  /** Styles applied to the checkbox element. */
+  checkbox: string;
+  /** Styles applied to the input element that is visible when editing is enabled. */
+  labelInput: string;
+  /** Styles applied to the content element when editing is enabled. */
+  editing: string;
+  /** Styles applied to the content of the items that are editable. */
+  editable: string;
+  /** Styles applied to the drag and drop overlay. */
+  dragAndDropOverlay: string;
+}
+export type TreeItemClassKey = keyof TreeItemClasses;
+export declare function getTreeItemUtilityClass(slot: string): string;
+export declare const treeItemClasses: TreeItemClasses;

package/esm/TreeItem/treeItemClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getTreeItemUtilityClass(slot) {
+  return generateUtilityClass('MuiTreeItem', slot);
+}
+export const treeItemClasses = generateUtilityClasses('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'labelInput', 'editable', 'editing', 'dragAndDropOverlay']);

package/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TreeItemDragAndDropOverlayProps } from "./TreeItemDragAndDropOverlay.types.js";
+declare function TreeItemDragAndDropOverlay(props: TreeItemDragAndDropOverlayProps): React.JSX.Element | null;
+declare namespace TreeItemDragAndDropOverlay {
+  var propTypes: any;
+}
+export { TreeItemDragAndDropOverlay };

package/{node → esm}/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -1,24 +1,17 @@
-"use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeItemDragAndDropOverlay = TreeItemDragAndDropOverlay;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/material/styles");
-var _createStyled = require("@mui/system/createStyled");
-var _zeroStyled = require("../internals/zero-styled");
-var _jsxRuntime = require("react/jsx-runtime");
-const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { styled } from "../internals/zero-styled/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TreeItemDragAndDropOverlayRoot = styled('div', {
   name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'action'
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
 })(({
   theme
 }) => ({
@@ -36,7 +29,7 @@ const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : (0, _styles.alpha)(theme.palette.primary.dark, theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.darkChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.dark, theme.palette.action.focusOpacity)
     }
   }, {
     props: {
@@ -68,13 +61,14 @@ function TreeItemDragAndDropOverlay(props) {
   if (props.action == null) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeItemDragAndDropOverlayRoot, (0, _extends2.default)({}, props));
+  return /*#__PURE__*/_jsx(TreeItemDragAndDropOverlayRoot, _extends({}, props));
 }
 process.env.NODE_ENV !== "production" ? TreeItemDragAndDropOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  action: _propTypes.default.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
-  style: _propTypes.default.object
-} : void 0;
+  action: PropTypes.oneOf(['make-child', 'move-to-parent', 'reorder-above', 'reorder-below']),
+  style: PropTypes.object
+} : void 0;
+export { TreeItemDragAndDropOverlay };

package/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewItemsReorderingAction } from "../models/index.js";
+export interface TreeItemDragAndDropOverlayProps {
+  action?: TreeViewItemsReorderingAction;
+  style?: React.CSSProperties;
+}

package/esm/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.types.js

@@ -0,0 +1 @@
+export {};

package/esm/TreeItemDragAndDropOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { TreeItemDragAndDropOverlay } from "./TreeItemDragAndDropOverlay.js";
+export type { TreeItemDragAndDropOverlayProps } from './TreeItemDragAndDropOverlay.types';

package/esm/TreeItemDragAndDropOverlay/index.js

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