@mui/x-tree-view 8.0.0-beta.0 → 8.0.0-beta.2

package/esm/useTreeItem/useTreeItem.js

@@ -14,17 +14,10 @@ import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeVie
 import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsCheckboxSelectionEnabled, selectorIsItemSelectionEnabled } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    items: {
-      onItemClick
-    },
-    selection: {
-      disableSelection,
-      checkboxSelection
-    },
-    label: labelContext,
     instance,
     publicAPI,
     store
@@ -61,6 +54,8 @@ export const useTreeItem = parameters => {
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useSelector(store, selectorTreeViewId);
+  const isSelectionEnabledForItem = useSelector(store, selectorIsItemSelectionEnabled, itemId);
+  const isCheckboxSelectionEnabled = useSelector(store, selectorIsCheckboxSelectionEnabled);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
@@ -70,8 +65,7 @@ export const useTreeItem = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions,
-    status
+    interactions
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -116,14 +110,14 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick(event, itemId);
+    instance.handleItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
     if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
-    if (!checkboxSelection) {
+    if (!isCheckboxSelectionEnabled) {
       interactions.handleSelection(event);
     }
   };
@@ -159,7 +153,7 @@ export const useTreeItem = parameters => {
     if (status.selected) {
       // - each selected node has aria-selected set to true.
       ariaSelected = true;
-    } else if (disableSelection || status.disabled) {
+    } else if (!isSelectionEnabledForItem) {
       // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
       ariaSelected = undefined;
     } else {
@@ -195,6 +189,11 @@ export const useTreeItem = parameters => {
       onMouseDown: createContentHandleMouseDown(externalEventHandlers),
       status
     });
+    ['expanded', 'selected', 'focused', 'disabled', 'editing', 'editable'].forEach(key => {
+      if (status[key]) {
+        props[`data-${key}`] = '';
+      }
+    });
     const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
       externalEventHandlers
     })) ?? {};
@@ -217,10 +216,10 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (labelContext?.isItemEditable) {
-      props.editable = status.editable;
-    }
-    return props;
+    const enhancedLabelProps = propsEnhancers.label?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, enhancedLabelProps, props);
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -55,7 +55,16 @@ export interface UseTreeItemContentSlotPropsFromUseTreeItem {
   onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
   onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
   ref: React.RefCallback<HTMLDivElement> | null;
+  /**
+   * @deprecated Will be removed in the next major version. Please use the data-attrs instead.
+   */
   status: UseTreeItemStatus;
+  'data-expanded'?: '';
+  'data-selected'?: '';
+  'data-focused'?: '';
+  'data-disabled'?: '';
+  'data-editing'?: '';
+  'data-editable'?: '';
 }
 export interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromUseTreeItem {}
 export type UseTreeItemContentSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemContentSlotOwnProps;
@@ -66,10 +75,6 @@ export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProp
 export interface UseTreeItemLabelSlotOwnProps {
   children: React.ReactNode;
   onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
-  /**
-   * Only defined when the `isItemEditable` experimental feature is enabled.
-   */
-  editable?: boolean;
 }
 export type UseTreeItemLabelSlotProps<ExternalProps = {}> = ExternalProps & UseTreeItemLabelSlotOwnProps;
 export interface UseTreeItemLabelInputSlotOwnProps {}

package/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -36,15 +36,12 @@ const useTreeItemUtils = ({
 }) => {
   const {
     instance,
-    label,
     store,
-    selection: {
-      multiSelect
-    },
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const isItemExpandable = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpandable, itemId);
   const isLazyLoadingEnabled = (0, _useSelector.useSelector)(store, _useTreeViewLazyLoading.selectorIsLazyLoadingEnabled);
+  const isMultiSelectEnabled = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsMultiSelectEnabled);
   const loading = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? (0, _useTreeViewLazyLoading.selectorIsItemLoading)(state, itemId) : false);
   const error = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? Boolean((0, _useTreeViewLazyLoading.selectorGetTreeItemError)(state, itemId)) : false);
   const isExpandable = itemHasChildren(children) || isItemExpandable;
@@ -52,11 +49,8 @@ const useTreeItemUtils = ({
   const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
   const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
   const isDisabled = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorIsItemDisabled, itemId);
-  const isEditing = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemBeingEdited)(state, itemId));
-  const isEditable = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemEditable)(state, {
-    itemId,
-    isItemEditable: label.isItemEditable
-  }));
+  const isEditing = (0, _useSelector.useSelector)(store, _useTreeViewLabel2.selectorIsItemBeingEdited, itemId);
+  const isEditable = (0, _useSelector.useSelector)(store, _useTreeViewLabel2.selectorIsItemEditable, itemId);
   const status = {
     expandable: isExpandable,
     expanded: isExpanded,
@@ -75,7 +69,7 @@ const useTreeItemUtils = ({
     if (!status.focused) {
       instance.focusItem(event, itemId);
     }
-    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
     if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
@@ -93,7 +87,7 @@ const useTreeItemUtils = ({
     if (!status.focused) {
       instance.focusItem(event, itemId);
     }
-    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
@@ -114,13 +108,13 @@ const useTreeItemUtils = ({
   };
   const handleCheckboxSelection = event => {
     const hasShift = event.nativeEvent.shiftKey;
-    if (multiSelect && hasShift) {
+    if (isMultiSelectEnabled && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
       instance.setItemSelection({
         event,
         itemId,
-        keepExistingSelection: multiSelect,
+        keepExistingSelection: isMultiSelectEnabled,
         shouldBeSelected: event.target.checked
       });
     }

package/index.js

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

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -9,7 +9,7 @@ exports.TreeViewChildrenItemContext = void 0;
 exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _useTreeViewContext = require("./useTreeViewContext");
+var _TreeViewContext = require("./TreeViewContext");
 var _utils = require("../utils/utils");
 var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,7 +27,7 @@ function TreeViewChildrenItemProvider(props) {
     instance,
     store,
     rootRef
-  } = (0, _useTreeViewContext.useTreeViewContext)();
+  } = (0, _TreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
   React.useEffect(() => {
     if (!rootRef.current) {

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { TreeViewAnyPluginSignature } from "../models/index.js";
 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/internals/TreeViewProvider/TreeViewContext.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeViewContext = void 0;
+exports.useTreeViewContext = exports.TreeViewContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 /**
  * @ignore - internal component.
@@ -12,4 +12,12 @@ var React = _interopRequireWildcard(require("react"));
 const TreeViewContext = exports.TreeViewContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
   TreeViewContext.displayName = 'TreeViewContext';
-}
+}
+const useTreeViewContext = () => {
+  const context = React.useContext(TreeViewContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Tree View context.', 'It looks like you rendered your component outside of a SimpleTreeView or RichTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
+  return context;
+};
+exports.useTreeViewContext = useTreeViewContext;

package/internals/TreeViewProvider/TreeViewProvider.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TreeViewProviderProps } from "./TreeViewProvider.types.js";
 import { TreeViewAnyPluginSignature } from "../models/index.js";
 /**
- * Sets up the contexts for the underlying TreeItem components.
+ * Sets up the contexts for the underlying Tree Item components.
  *
  * @ignore - do not document.
  */

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -7,21 +7,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.TreeViewProvider = TreeViewProvider;
 var React = _interopRequireWildcard(require("react"));
 var _TreeViewContext = require("./TreeViewContext");
+var _TreeViewStyleContext = require("./TreeViewStyleContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_OBJECT = {};
+
 /**
- * Sets up the contexts for the underlying TreeItem components.
+ * Sets up the contexts for the underlying Tree Item components.
  *
  * @ignore - do not document.
  */
 function TreeViewProvider(props) {
   const {
-    value,
+    contextValue,
+    classes = EMPTY_OBJECT,
     children
   } = props;
+
+  // TODO: Add the icons to this context and drop useTreeViewIcons
+  const styleContextValue = React.useMemo(() => ({
+    classes
+  }), [classes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
-    value: value,
-    children: value.wrapRoot({
-      children
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewStyleContext.TreeViewStyleContext.Provider, {
+      value: styleContextValue,
+      children: contextValue.wrapRoot({
+        children
+      })
     })
   });
 }

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -3,6 +3,7 @@ import { MergeSignaturesProperty, TreeItemWrapper, TreeRootWrapper, TreeViewAnyP
 import { TreeViewStore } from "../utils/TreeViewStore.js";
 import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
+import { TreeViewClasses } from "./TreeViewStyleContext.js";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'contextValue'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'contextValue'>> & {
   instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
@@ -14,6 +15,7 @@ export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginS
   runItemPlugins: TreeViewItemPluginsRunner;
 };
 export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
-  value: TreeViewContextValue<TSignatures>;
+  contextValue: TreeViewContextValue<TSignatures>;
   children: React.ReactNode;
+  classes: Partial<TreeViewClasses> | undefined;
 }

package/internals/TreeViewProvider/TreeViewStyleContext.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface TreeViewClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the item's root element. */
+  item: string;
+  /** Styles applied to the item's content element. */
+  itemContent: string;
+  /** Styles applied to the item's transition element. */
+  itemGroupTransition: string;
+  /** Styles applied to the item's icon container element icon. */
+  itemIconContainer: string;
+  /** Styles applied to the item's label element. */
+  itemLabel: string;
+  /** Styles applied to the item's label input element (visible only when editing is enabled). */
+  itemLabelInput: string;
+  /** Styles applied to the item's checkbox element. */
+  itemCheckbox: string;
+  /** Styles applied to the item's drag and drop overlay element. */
+  itemDragAndDropOverlay: string;
+  /** Styles applied to the item's error icon element */
+  itemErrorIcon: string;
+  /** Styles applied to the item's loading icon element */
+  itemLoadingIcon: string;
+}
+export interface TreeViewStyleContextValue {
+  classes: Partial<TreeViewClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const TreeViewStyleContext: React.Context<TreeViewStyleContextValue>;
+export declare const useTreeViewStyleContext: () => TreeViewStyleContextValue;

package/internals/TreeViewProvider/TreeViewStyleContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewStyleContext = exports.TreeViewStyleContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const TreeViewStyleContext = exports.TreeViewStyleContext = /*#__PURE__*/React.createContext({
+  classes: {}
+});
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewStyleContext.displayName = 'TreeViewStyleContext';
+}
+const useTreeViewStyleContext = () => {
+  return React.useContext(TreeViewStyleContext);
+};
+exports.useTreeViewStyleContext = useTreeViewStyleContext;

package/internals/TreeViewProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { TreeViewProvider } from "./TreeViewProvider.js";
-export { useTreeViewContext } from "./useTreeViewContext.js";
+export { useTreeViewContext } from "./TreeViewContext.js";
 export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner } from './TreeViewProvider.types';

package/internals/TreeViewProvider/index.js

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

package/internals/index.d.ts

@@ -30,4 +30,5 @@ export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from './plugins/useTreeViewJSXItems';
 export { createSelector } from "./utils/selectors.js";
 export { isTargetInDescendants } from "./utils/tree.js";
-export { TreeViewStore } from "./utils/TreeViewStore.js";
+export { TreeViewStore } from "./utils/TreeViewStore.js";
+export type { TreeViewClasses } from './TreeViewProvider/TreeViewStyleContext';

package/internals/models/itemPlugin.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemStatus } from '../../useTreeItem';
+import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemLabelSlotOwnProps } from '../../useTreeItem';
 import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTreeItemUtils';
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
@@ -8,7 +8,6 @@ export interface TreeViewItemPluginSlotPropsEnhancerParams {
   contentRefObject: React.RefObject<HTMLDivElement | null>;
   externalEventHandlers: EventHandlers;
   interactions: UseTreeItemInteractions;
-  status: UseTreeItemStatus;
 }
 type TreeViewItemPluginSlotPropsEnhancer<TSlotProps> = (params: TreeViewItemPluginSlotPropsEnhancerParams) => Partial<TSlotProps>;
 export interface TreeViewItemPluginSlotPropsEnhancers {
@@ -16,6 +15,7 @@ export interface TreeViewItemPluginSlotPropsEnhancers {
   content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemContentSlotOwnProps>;
   dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemDragAndDropOverlaySlotOwnProps>;
   labelInput?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemLabelInputSlotOwnProps>;
+  label?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemLabelSlotOwnProps>;
   checkbox?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItemCheckboxSlotOwnProps>;
 }
 export interface TreeViewItemPluginResponse {
@@ -31,7 +31,7 @@ export interface TreeViewItemPluginResponse {
    * Callback to enhance the slot props of the Tree Item.
    *
    * Not all slots are enabled by default,
-   * if a new plugin needs to pass to an unconfigured slot,
+   * if a new plugin needs to pass to an un-configured slot,
    * it just needs to be added to `TreeViewItemPluginSlotPropsEnhancers`
    */
   propsEnhancers?: TreeViewItemPluginSlotPropsEnhancers;

package/internals/plugins/useTreeViewItemCustomization/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewItemCustomization } from "./useTreeViewItemCustomization.js";
+export type { UseTreeViewItemCustomizationSignature, UseTreeViewItemCustomizationParameters, UseTreeViewItemCustomizationDefaultizedParameters } from './useTreeViewItemCustomization.types';

package/internals/plugins/useTreeViewItemCustomization/index.js

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

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewItemCustomizationSignature } from "./useTreeViewItemCustomization.types.js";
+export declare const useTreeViewItemCustomization: TreeViewPlugin<UseTreeViewItemCustomizationSignature>;

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewItemCustomization = void 0;
+var React = _interopRequireWildcard(require("react"));
+const useTreeViewItemCustomization = ({
+  slots,
+  slotProps
+}) => {
+  const pluginContextValue = React.useMemo(() => ({
+    icons: {
+      slots: {
+        collapseIcon: slots.collapseIcon,
+        expandIcon: slots.expandIcon,
+        endIcon: slots.endIcon
+      },
+      slotProps: {
+        collapseIcon: slotProps.collapseIcon,
+        expandIcon: slotProps.expandIcon,
+        endIcon: slotProps.endIcon
+      }
+    }
+  }), [slots.collapseIcon, slots.expandIcon, slots.endIcon, slotProps.collapseIcon, slotProps.expandIcon, slotProps.endIcon]);
+  return {
+    contextValue: pluginContextValue
+  };
+};
+exports.useTreeViewItemCustomization = useTreeViewItemCustomization;
+useTreeViewItemCustomization.params = {};

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.types.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/utils/types';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+export interface UseTreeViewItemCustomizationParameters {}
+export type UseTreeViewItemCustomizationDefaultizedParameters = UseTreeViewItemCustomizationParameters;
+interface UseTreeViewItemCustomizationSlots {
+  /**
+   * The default icon used to collapse the item.
+   */
+  collapseIcon?: React.ElementType;
+  /**
+   * The default icon used to expand the item.
+   */
+  expandIcon?: React.ElementType;
+  /**
+   * The default icon displayed next to an end item.
+   * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
+   */
+  endIcon?: React.ElementType;
+}
+interface UseTreeViewItemCustomizationSlotProps {
+  collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+  expandIcon?: SlotComponentProps<'svg', {}, {}>;
+  endIcon?: SlotComponentProps<'svg', {}, {}>;
+}
+interface UseTreeViewItemCustomizationContextValue {
+  icons: {
+    slots: UseTreeViewItemCustomizationSlots;
+    slotProps: UseTreeViewItemCustomizationSlotProps;
+  };
+}
+export type UseTreeViewItemCustomizationSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemCustomizationParameters;
+  defaultizedParams: UseTreeViewItemCustomizationDefaultizedParameters;
+  contextValue: UseTreeViewItemCustomizationContextValue;
+  slots: UseTreeViewItemCustomizationSlots;
+  slotProps: UseTreeViewItemCustomizationSlotProps;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature];
+}>;
+export {};

package/internals/plugins/useTreeViewItemCustomization/useTreeViewItemCustomization.types.js

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

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -270,11 +270,6 @@ const useTreeViewItems = ({
       params.onItemClick(event, itemId);
     }
   });
-  const pluginContextValue = React.useMemo(() => ({
-    items: {
-      onItemClick: handleItemClick
-    }
-  }), [handleItemClick]);
   return {
     getRootProps: () => ({
       style: {
@@ -296,9 +291,9 @@ const useTreeViewItems = ({
       addItems,
       setTreeViewLoading,
       setTreeViewError,
-      removeChildren
-    },
-    contextValue: pluginContextValue
+      removeChildren,
+      handleItemClick
+    }
   };
 };
 exports.useTreeViewItems = useTreeViewItems;

package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js

@@ -43,10 +43,7 @@ const selectorItemOrderedChildrenIds = exports.selectorItemOrderedChildrenIds =
  * @param {TreeViewItemId} itemId The id of the item to get the model of.
  * @returns {R} The model of the item.
  */
-const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => {
-  const a = itemsState.itemModelLookup[itemId];
-  return a;
-});
+const selectorItemModel = exports.selectorItemModel = (0, _selectors.createSelector)([selectorTreeViewItemsState, (_, itemId) => itemId], (itemsState, itemId) => itemsState.itemModelLookup[itemId]);
 
 /**
  * Get the meta-information of an item.

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -83,6 +83,12 @@ export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeView
    * @param {Error | null} error The error on the tree view.
    */
   setTreeViewError: (error: Error | null) => void;
+  /**
+   * Event handler to fire when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item being clicked.
+   */
+  handleItemClick: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
 }
 export interface UseTreeViewItemsParameters<R extends {
   children?: R[];
@@ -188,11 +194,6 @@ export interface UseTreeViewItemsState<R extends {}> {
     error: Error | null;
   };
 }
-interface UseTreeViewItemsContextValue {
-  items: {
-    onItemClick: (event: React.MouseEvent, itemId: string) => void;
-  };
-}
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   params: UseTreeViewItemsParameters<any>;
   defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
@@ -200,6 +201,5 @@ export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewItemsPublicAPI<any>;
   events: UseTreeViewItemsEventLookup;
   state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
-  contextValue: UseTreeViewItemsContextValue;
 }>;
 export {};