@mui/x-tree-view 8.0.0-beta.3 → 8.0.0

package/RichTreeView/RichTreeView.js

@@ -1,13 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RichTreeViewRoot = exports.RichTreeView = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
@@ -24,6 +25,7 @@ var _RichTreeViewItems = require("../internals/components/RichTreeViewItems");
 var _useSelector = require("../internals/hooks/useSelector");
 var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiRichTreeView');
 const useUtilityClasses = ownerState => {
   const {
@@ -71,6 +73,11 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     props: inProps,
     name: 'MuiRichTreeView'
   });
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (props.children != null) {
       (0, _warning.warnOnce)(['MUI X: The Rich Tree View component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.']);
@@ -82,14 +89,10 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   } = (0, _useTreeView.useTreeView)({
     plugins: _RichTreeView.RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
-    props
+    props: other
   });
   const isLoading = (0, _useSelector.useSelector)(contextValue.store, _useTreeViewItems.selectorIsTreeViewLoading);
   const treeViewError = (0, _useSelector.useSelector)(contextValue.store, _useTreeViewItems.selectorGetTreeViewError);
-  const {
-    slots,
-    slotProps
-  } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
   const rootProps = (0, _useSlotProps.default)({
@@ -113,6 +116,8 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     contextValue: contextValue,
     classes: classes,
+    slots: slots,
+    slotProps: slotProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
         slots: slots,

package/RichTreeView/RichTreeView.plugins.d.ts

@@ -3,11 +3,8 @@ import { UseTreeViewItemsParameters } from "../internals/plugins/useTreeViewItem
 import { UseTreeViewExpansionParameters } from "../internals/plugins/useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionParameters } from "../internals/plugins/useTreeViewSelection/index.js";
 import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewIconsParameters } from "../internals/plugins/useTreeViewIcons/index.js";
-import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from "../internals/models/index.js";
+import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 import { UseTreeViewLabelParameters } from "../internals/plugins/useTreeViewLabel/index.js";
-export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewLabelSignature>];
+export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewLabelSignature>];
 export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PLUGINS>;
-export type RichTreeViewPluginSlots = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slots'>;
-export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slotProps'>;
-export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R> {}
+export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewLabelParameters<R> {}

package/RichTreeView/RichTreeView.plugins.js

@@ -9,8 +9,7 @@ var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion")
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
 var _useTreeViewLabel = require("../internals/plugins/useTreeViewLabel");
-const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewLabel.useTreeViewLabel];
+const RICH_TREE_VIEW_PLUGINS = exports.RICH_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewLabel.useTreeViewLabel];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/RichTreeView/RichTreeView.types.d.ts

@@ -3,17 +3,18 @@ import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { SlotComponentProps } from '@mui/utils/types';
 import { RichTreeViewClasses } from "./richTreeViewClasses.js";
-import { RichTreeViewPluginParameters, RichTreeViewPluginSlotProps, RichTreeViewPluginSlots, RichTreeViewPluginSignatures } from "./RichTreeView.plugins.js";
+import { RichTreeViewPluginParameters, RichTreeViewPluginSignatures } from "./RichTreeView.plugins.js";
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
 import { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.js";
-export interface RichTreeViewSlots extends RichTreeViewPluginSlots, RichTreeViewItemsSlots {
+import { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface RichTreeViewSlots extends TreeViewSlots, RichTreeViewItemsSlots {
   /**
    * Element rendered at the root.
    * @default RichTreeViewRoot
    */
   root?: React.ElementType;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps, RichTreeViewItemsSlotProps {
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
 }
 export type RichTreeViewApiRef = React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;

package/RichTreeView/index.d.ts

@@ -2,4 +2,4 @@ export * from "./RichTreeView.js";
 export * from "./richTreeViewClasses.js";
 export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps } from './RichTreeView.types';
 export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
-export type { RichTreeViewPluginSlots, RichTreeViewPluginSlotProps, RichTreeViewPluginParameters } from './RichTreeView.plugins';
+export type { RichTreeViewPluginParameters } from './RichTreeView.plugins';

package/SimpleTreeView/SimpleTreeView.js

@@ -1,13 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SimpleTreeViewRoot = exports.SimpleTreeView = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -19,6 +20,7 @@ var _useTreeView = require("../internals/useTreeView");
 var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _SimpleTreeView = require("./SimpleTreeView.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["slots", "slotProps"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiSimpleTreeView');
 const useUtilityClasses = ownerState => {
   const {
@@ -68,7 +70,11 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
     props: inProps,
     name: 'MuiSimpleTreeView'
   });
-  const ownerState = props;
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (props.items != null) {
       (0, _warning.warnOnce)(['MUI X: The Simple Tree View component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.']);
@@ -80,14 +86,10 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
   } = (0, _useTreeView.useTreeView)({
     plugins: _SimpleTreeView.SIMPLE_TREE_VIEW_PLUGINS,
     rootRef: ref,
-    props: (0, _extends2.default)({}, props, {
+    props: (0, _extends2.default)({}, other, {
       items: EMPTY_ITEMS
     })
   });
-  const {
-    slots,
-    slotProps
-  } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? SimpleTreeViewRoot;
   const rootProps = (0, _useSlotProps.default)({
@@ -95,11 +97,13 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
     externalSlotProps: slotProps?.root,
     className: classes.root,
     getSlotProps: getRootProps,
-    ownerState
+    ownerState: props
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
     contextValue: contextValue,
     classes: classes,
+    slots: slots,
+    slotProps: slotProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
   });
 });

package/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -3,10 +3,7 @@ import { UseTreeViewItemsParameters } from "../internals/plugins/useTreeViewItem
 import { UseTreeViewExpansionParameters } from "../internals/plugins/useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionParameters } from "../internals/plugins/useTreeViewSelection/index.js";
 import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewIconsParameters } from "../internals/plugins/useTreeViewIcons/index.js";
-import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from "../internals/models/index.js";
-export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewJSXItemsSignature>];
+import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
+export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export type SimpleTreeViewPluginSlots = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slots'>;
-export type SimpleTreeViewPluginSlotProps = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slotProps'>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/SimpleTreeView/SimpleTreeView.plugins.js

@@ -9,8 +9,7 @@ var _useTreeViewExpansion = require("../internals/plugins/useTreeViewExpansion")
 var _useTreeViewSelection = require("../internals/plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("../internals/plugins/useTreeViewKeyboardNavigation");
-var _useTreeViewIcons = require("../internals/plugins/useTreeViewIcons");
 var _useTreeViewJSXItems = require("../internals/plugins/useTreeViewJSXItems");
-const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewIcons.useTreeViewIcons, _useTreeViewJSXItems.useTreeViewJSXItems];
+const SIMPLE_TREE_VIEW_PLUGINS = exports.SIMPLE_TREE_VIEW_PLUGINS = [_useTreeViewItems.useTreeViewItems, _useTreeViewExpansion.useTreeViewExpansion, _useTreeViewSelection.useTreeViewSelection, _useTreeViewFocus.useTreeViewFocus, _useTreeViewKeyboardNavigation.useTreeViewKeyboardNavigation, _useTreeViewJSXItems.useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -3,16 +3,17 @@ import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils/types';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { SimpleTreeViewClasses } from "./simpleTreeViewClasses.js";
-import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPluginSignatures } from "./SimpleTreeView.plugins.js";
+import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSignatures } from "./SimpleTreeView.plugins.js";
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
-export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
+import { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface SimpleTreeViewSlots extends TreeViewSlots {
   /**
    * Element rendered at the root.
    * @default SimpleTreeViewRoot
    */
   root?: React.ElementType;
 }
-export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
+export interface SimpleTreeViewSlotProps extends TreeViewSlotProps {
   root?: SlotComponentProps<'ul', {}, {}>;
 }
 export type SimpleTreeViewApiRef = React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;

package/TreeItemIcon/TreeItemIcon.js

@@ -12,21 +12,25 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _resolveComponentProps = _interopRequireDefault(require("@mui/utils/resolveComponentProps"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
-var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 function TreeItemIcon(props) {
   const {
-    slots,
-    slotProps,
+    slots: slotsFromTreeItem,
+    slotProps: slotPropsFromTreeItem,
     status
   } = props;
-  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
-  });
-  const contextIconProps = context.icons.slotProps;
+  const {
+    slots: slotsFromTreeView,
+    slotProps: slotPropsFromTreeView
+  } = (0, _TreeViewStyleContext.useTreeViewStyleContext)();
+  const slots = {
+    collapseIcon: slotsFromTreeItem?.collapseIcon ?? slotsFromTreeView.collapseIcon ?? _icons.TreeViewCollapseIcon,
+    expandIcon: slotsFromTreeItem?.expandIcon ?? slotsFromTreeView.expandIcon ?? _icons.TreeViewExpandIcon,
+    endIcon: slotsFromTreeItem?.endIcon ?? slotsFromTreeView.endIcon,
+    icon: slotsFromTreeItem?.icon
+  };
   let iconName;
   if (slots?.icon) {
     iconName = 'icon';
@@ -39,10 +43,10 @@ function TreeItemIcon(props) {
   } else {
     iconName = 'endIcon';
   }
-  const Icon = slots?.[iconName] ?? contextIcons[iconName];
+  const Icon = slots[iconName];
   const iconProps = (0, _useSlotProps.default)({
     elementType: Icon,
-    externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(contextIconProps[iconName], tempOwnerState), (0, _resolveComponentProps.default)(slotProps?.[iconName], tempOwnerState)),
+    externalSlotProps: tempOwnerState => (0, _extends2.default)({}, (0, _resolveComponentProps.default)(slotPropsFromTreeView[iconName], tempOwnerState), (0, _resolveComponentProps.default)(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
     // TODO: Add proper ownerState
     ownerState: {}
   });

package/esm/RichTreeView/RichTreeView.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Alert from '@mui/material/Alert';
@@ -64,6 +66,11 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
     props: inProps,
     name: 'MuiRichTreeView'
   });
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (props.children != null) {
       warnOnce(['MUI X: The Rich Tree View component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.']);
@@ -75,14 +82,10 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   } = useTreeView({
     plugins: RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
-    props
+    props: other
   });
   const isLoading = useSelector(contextValue.store, selectorIsTreeViewLoading);
   const treeViewError = useSelector(contextValue.store, selectorGetTreeViewError);
-  const {
-    slots,
-    slotProps
-  } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? RichTreeViewRoot;
   const rootProps = useSlotProps({
@@ -106,6 +109,8 @@ const RichTreeView = /*#__PURE__*/React.forwardRef(function RichTreeView(inProps
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     contextValue: contextValue,
     classes: classes,
+    slots: slots,
+    slotProps: slotProps,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(RichTreeViewItems, {
         slots: slots,

package/esm/RichTreeView/RichTreeView.plugins.d.ts

@@ -3,11 +3,8 @@ import { UseTreeViewItemsParameters } from "../internals/plugins/useTreeViewItem
 import { UseTreeViewExpansionParameters } from "../internals/plugins/useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionParameters } from "../internals/plugins/useTreeViewSelection/index.js";
 import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewIconsParameters } from "../internals/plugins/useTreeViewIcons/index.js";
-import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from "../internals/models/index.js";
+import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
 import { UseTreeViewLabelParameters } from "../internals/plugins/useTreeViewLabel/index.js";
-export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewLabelSignature>];
+export declare const RICH_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewLabelSignature>];
 export type RichTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof RICH_TREE_VIEW_PLUGINS>;
-export type RichTreeViewPluginSlots = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slots'>;
-export type RichTreeViewPluginSlotProps = MergeSignaturesProperty<RichTreeViewPluginSignatures, 'slotProps'>;
-export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters, UseTreeViewLabelParameters<R> {}
+export interface RichTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, UseTreeViewItemsParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewLabelParameters<R> {}

package/esm/RichTreeView/RichTreeView.plugins.js

@@ -3,8 +3,7 @@ import { useTreeViewExpansion } from "../internals/plugins/useTreeViewExpansion/
 import { useTreeViewSelection } from "../internals/plugins/useTreeViewSelection/index.js";
 import { useTreeViewFocus } from "../internals/plugins/useTreeViewFocus/index.js";
 import { useTreeViewKeyboardNavigation } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
-import { useTreeViewIcons } from "../internals/plugins/useTreeViewIcons/index.js";
 import { useTreeViewLabel } from "../internals/plugins/useTreeViewLabel/index.js";
-export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel];
+export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewLabel];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/esm/RichTreeView/RichTreeView.types.d.ts

@@ -3,17 +3,18 @@ import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { SlotComponentProps } from '@mui/utils/types';
 import { RichTreeViewClasses } from "./richTreeViewClasses.js";
-import { RichTreeViewPluginParameters, RichTreeViewPluginSlotProps, RichTreeViewPluginSlots, RichTreeViewPluginSignatures } from "./RichTreeView.plugins.js";
+import { RichTreeViewPluginParameters, RichTreeViewPluginSignatures } from "./RichTreeView.plugins.js";
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
 import { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.js";
-export interface RichTreeViewSlots extends RichTreeViewPluginSlots, RichTreeViewItemsSlots {
+import { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface RichTreeViewSlots extends TreeViewSlots, RichTreeViewItemsSlots {
   /**
    * Element rendered at the root.
    * @default RichTreeViewRoot
    */
   root?: React.ElementType;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps, RichTreeViewItemsSlotProps {
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
   root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
 }
 export type RichTreeViewApiRef = React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;

package/esm/RichTreeView/index.d.ts

@@ -2,4 +2,4 @@ export * from "./RichTreeView.js";
 export * from "./richTreeViewClasses.js";
 export type { RichTreeViewProps, RichTreeViewPropsBase, RichTreeViewSlots, RichTreeViewSlotProps } from './RichTreeView.types';
 export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
-export type { RichTreeViewPluginSlots, RichTreeViewPluginSlotProps, RichTreeViewPluginParameters } from './RichTreeView.plugins';
+export type { RichTreeViewPluginParameters } from './RichTreeView.plugins';

package/esm/SimpleTreeView/SimpleTreeView.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -61,7 +63,11 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
     props: inProps,
     name: 'MuiSimpleTreeView'
   });
-  const ownerState = props;
+  const {
+      slots,
+      slotProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   if (process.env.NODE_ENV !== 'production') {
     if (props.items != null) {
       warnOnce(['MUI X: The Simple Tree View component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.']);
@@ -73,14 +79,10 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
   } = useTreeView({
     plugins: SIMPLE_TREE_VIEW_PLUGINS,
     rootRef: ref,
-    props: _extends({}, props, {
+    props: _extends({}, other, {
       items: EMPTY_ITEMS
     })
   });
-  const {
-    slots,
-    slotProps
-  } = props;
   const classes = useUtilityClasses(props);
   const Root = slots?.root ?? SimpleTreeViewRoot;
   const rootProps = useSlotProps({
@@ -88,11 +90,13 @@ const SimpleTreeView = /*#__PURE__*/React.forwardRef(function SimpleTreeView(inP
     externalSlotProps: slotProps?.root,
     className: classes.root,
     getSlotProps: getRootProps,
-    ownerState
+    ownerState: props
   });
   return /*#__PURE__*/_jsx(TreeViewProvider, {
     contextValue: contextValue,
     classes: classes,
+    slots: slots,
+    slotProps: slotProps,
     children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps))
   });
 });

package/esm/SimpleTreeView/SimpleTreeView.plugins.d.ts

@@ -3,10 +3,7 @@ import { UseTreeViewItemsParameters } from "../internals/plugins/useTreeViewItem
 import { UseTreeViewExpansionParameters } from "../internals/plugins/useTreeViewExpansion/index.js";
 import { UseTreeViewSelectionParameters } from "../internals/plugins/useTreeViewSelection/index.js";
 import { UseTreeViewFocusParameters } from "../internals/plugins/useTreeViewFocus/index.js";
-import { UseTreeViewIconsParameters } from "../internals/plugins/useTreeViewIcons/index.js";
-import { ConvertPluginsIntoSignatures, MergeSignaturesProperty } from "../internals/models/index.js";
-export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewIconsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewJSXItemsSignature>];
+import { ConvertPluginsIntoSignatures } from "../internals/models/index.js";
+export declare const SIMPLE_TREE_VIEW_PLUGINS: readonly [import("../internals").TreeViewPlugin<import("../internals").UseTreeViewItemsSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewExpansionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewSelectionSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewFocusSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewKeyboardNavigationSignature>, import("../internals").TreeViewPlugin<import("../internals").UseTreeViewJSXItemsSignature>];
 export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
-export type SimpleTreeViewPluginSlots = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slots'>;
-export type SimpleTreeViewPluginSlotProps = MergeSignaturesProperty<SimpleTreeViewPluginSignatures, 'slotProps'>;
-export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {}
+export interface SimpleTreeViewPluginParameters<Multiple extends boolean | undefined> extends TreeViewCorePluginParameters, Omit<UseTreeViewItemsParameters<any>, 'items' | 'isItemDisabled' | 'getItemLabel' | 'getItemId'>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple> {}

package/esm/SimpleTreeView/SimpleTreeView.plugins.js

@@ -3,8 +3,7 @@ import { useTreeViewExpansion } from "../internals/plugins/useTreeViewExpansion/
 import { useTreeViewSelection } from "../internals/plugins/useTreeViewSelection/index.js";
 import { useTreeViewFocus } from "../internals/plugins/useTreeViewFocus/index.js";
 import { useTreeViewKeyboardNavigation } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
-import { useTreeViewIcons } from "../internals/plugins/useTreeViewIcons/index.js";
 import { useTreeViewJSXItems } from "../internals/plugins/useTreeViewJSXItems/index.js";
-export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
+export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/esm/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -3,16 +3,17 @@ import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils/types';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { SimpleTreeViewClasses } from "./simpleTreeViewClasses.js";
-import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPluginSignatures } from "./SimpleTreeView.plugins.js";
+import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSignatures } from "./SimpleTreeView.plugins.js";
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from "../internals/models/index.js";
-export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
+import { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface SimpleTreeViewSlots extends TreeViewSlots {
   /**
    * Element rendered at the root.
    * @default SimpleTreeViewRoot
    */
   root?: React.ElementType;
 }
-export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
+export interface SimpleTreeViewSlotProps extends TreeViewSlotProps {
   root?: SlotComponentProps<'ul', {}, {}>;
 }
 export type SimpleTreeViewApiRef = React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;

package/esm/TreeItemIcon/TreeItemIcon.js

@@ -5,21 +5,25 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { useTreeViewStyleContext } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItemIcon(props) {
   const {
-    slots,
-    slotProps,
+    slots: slotsFromTreeItem,
+    slotProps: slotPropsFromTreeItem,
     status
   } = props;
-  const context = useTreeViewContext();
-  const contextIcons = _extends({}, context.icons.slots, {
-    expandIcon: context.icons.slots.expandIcon ?? TreeViewExpandIcon,
-    collapseIcon: context.icons.slots.collapseIcon ?? TreeViewCollapseIcon
-  });
-  const contextIconProps = context.icons.slotProps;
+  const {
+    slots: slotsFromTreeView,
+    slotProps: slotPropsFromTreeView
+  } = useTreeViewStyleContext();
+  const slots = {
+    collapseIcon: slotsFromTreeItem?.collapseIcon ?? slotsFromTreeView.collapseIcon ?? TreeViewCollapseIcon,
+    expandIcon: slotsFromTreeItem?.expandIcon ?? slotsFromTreeView.expandIcon ?? TreeViewExpandIcon,
+    endIcon: slotsFromTreeItem?.endIcon ?? slotsFromTreeView.endIcon,
+    icon: slotsFromTreeItem?.icon
+  };
   let iconName;
   if (slots?.icon) {
     iconName = 'icon';
@@ -32,10 +36,10 @@ function TreeItemIcon(props) {
   } else {
     iconName = 'endIcon';
   }
-  const Icon = slots?.[iconName] ?? contextIcons[iconName];
+  const Icon = slots[iconName];
   const iconProps = useSlotProps({
     elementType: Icon,
-    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(contextIconProps[iconName], tempOwnerState), resolveComponentProps(slotProps?.[iconName], tempOwnerState)),
+    externalSlotProps: tempOwnerState => _extends({}, resolveComponentProps(slotPropsFromTreeView[iconName], tempOwnerState), resolveComponentProps(slotPropsFromTreeItem?.[iconName], tempOwnerState)),
     // TODO: Add proper ownerState
     ownerState: {}
   });

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -79,7 +79,7 @@ export const useTreeItemUtils = ({
     if (status.disabled) {
       return;
     }
-    if (!status.focused) {
+    if (!status.focused && !status.editing) {
       instance.focusItem(event, itemId);
     }
     const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.0.0-beta.3
+ * @mui/x-tree-view v8.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -4,5 +4,5 @@ import { TreeViewContextValue } from "./TreeViewProvider.types.js";
 /**
  * @ignore - internal component.
  */
-export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
+export declare const TreeViewContext: React.Context<TreeViewContextValue<any, []> | null>;
 export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;

package/esm/internals/TreeViewProvider/TreeViewProvider.js

@@ -13,13 +13,23 @@ export function TreeViewProvider(props) {
   const {
     contextValue,
     classes = EMPTY_OBJECT,
+    slots = EMPTY_OBJECT,
+    slotProps = EMPTY_OBJECT,
     children
   } = props;
-
-  // TODO: Add the icons to this context and drop useTreeViewIcons
   const styleContextValue = React.useMemo(() => ({
-    classes
-  }), [classes]);
+    classes,
+    slots: {
+      collapseIcon: slots.collapseIcon,
+      expandIcon: slots.expandIcon,
+      endIcon: slots.endIcon
+    },
+    slotProps: {
+      collapseIcon: slotProps.collapseIcon,
+      expandIcon: slotProps.expandIcon,
+      endIcon: slotProps.endIcon
+    }
+  }), [classes, slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
   return /*#__PURE__*/_jsx(TreeViewContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(TreeViewStyleContext.Provider, {