@mui/x-tree-view 7.0.0-alpha.8 → 7.0.0-alpha.9

package/internals/models/plugin.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/base/utils';
 import { TreeViewModel } from './treeView';
-import type { TreeViewContextValue } from '../TreeViewProvider';
-import type { MergePluginsProperty } from './helpers';
+import type { MergePluginsProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginsSignature } from '../corePlugins';
 import type { TreeItemProps } from '../../TreeItem';
@@ -10,32 +9,71 @@ export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSigna
     instance: TreeViewUsedInstance<TSignature>;
     params: TreeViewUsedDefaultizedParams<TSignature>;
     state: TreeViewUsedState<TSignature>;
+    slots: TSignature['slots'];
+    slotProps: TSignature['slotProps'];
     models: TreeViewUsedModels<TSignature>;
     setState: React.Dispatch<React.SetStateAction<TreeViewUsedState<TSignature>>>;
     rootRef: React.RefObject<HTMLUListElement>;
 }
 type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> = {
     [TControlled in keyof TSignature['models']]: {
-        controlledProp: TControlled;
-        defaultProp: keyof TSignature['params'];
+        getDefaultValue: (params: TSignature['defaultizedParams']) => Exclude<TSignature['defaultizedParams'][TControlled], undefined>;
     };
 };
-interface TreeViewResponse {
+type TreeViewResponse<TSignature extends TreeViewAnyPluginSignature> = {
     getRootProps?: <TOther extends EventHandlers = {}>(otherHandlers: TOther) => React.HTMLAttributes<HTMLUListElement>;
-    contextValue?: TreeViewContextValue<any>;
-}
-export type TreeViewPluginSignature<TParams extends {}, TDefaultizedParams extends {}, TInstance extends {}, TEvents extends {
-    [key in keyof TEvents]: TreeViewEventLookupElement;
-}, TState extends {}, TModelNames extends keyof TDefaultizedParams, TDependantPlugins extends readonly TreeViewAnyPluginSignature[]> = {
-    params: TParams;
-    defaultizedParams: TDefaultizedParams;
-    instance: TInstance;
-    state: TState;
-    models: {
-        [TControlled in TModelNames]-?: TreeViewModel<Exclude<TDefaultizedParams[TControlled], undefined>>;
+} & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
+export type TreeViewPluginSignature<T extends {
+    params?: {};
+    defaultizedParams?: {};
+    instance?: {};
+    events?: {
+        [key in keyof T['events']]: TreeViewEventLookupElement;
+    };
+    state?: {};
+    contextValue?: {};
+    slots?: {
+        [key in keyof T['slots']]: React.ElementType;
     };
-    events: TEvents;
-    dependantPlugins: TDependantPlugins;
+    slotProps?: {
+        [key in keyof T['slotProps']]: {} | (() => {});
+    };
+    modelNames?: keyof T['defaultizedParams'];
+    dependantPlugins?: readonly TreeViewAnyPluginSignature[];
+}> = {
+    params: T extends {
+        params: {};
+    } ? T['params'] : {};
+    defaultizedParams: T extends {
+        defaultizedParams: {};
+    } ? T['defaultizedParams'] : {};
+    instance: T extends {
+        instance: {};
+    } ? T['instance'] : {};
+    events: T extends {
+        events: {};
+    } ? T['events'] : {};
+    state: T extends {
+        state: {};
+    } ? T['state'] : {};
+    contextValue: T extends {
+        contextValue: {};
+    } ? T['contextValue'] : {};
+    slots: T extends {
+        slots: {};
+    } ? T['slots'] : {};
+    slotProps: T extends {
+        slotProps: {};
+    } ? T['slotProps'] : {};
+    models: T extends {
+        defaultizedParams: {};
+        modelNames: keyof T['defaultizedParams'];
+    } ? {
+        [TControlled in T['modelNames']]-?: TreeViewModel<Exclude<T['defaultizedParams'][TControlled], undefined>>;
+    } : {};
+    dependantPlugins: T extends {
+        dependantPlugins: Array<any>;
+    } ? T['dependantPlugins'] : [];
 };
 export type TreeViewAnyPluginSignature = {
     state: any;
@@ -44,6 +82,9 @@ export type TreeViewAnyPluginSignature = {
     defaultizedParams: any;
     dependantPlugins: any;
     events: any;
+    contextValue: any;
+    slots: any;
+    slotProps: any;
     models: any;
 };
 type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
@@ -59,7 +100,10 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
     $$signature: TSignature;
 };
 type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
-export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'models'>;
+type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
+    [K in keyof Models]: Omit<Models[K], 'setValue'>;
+};
+export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'models'>>;
 export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'events'>;
 export interface TreeViewItemPluginOptions {
     props: TreeItemProps;
@@ -83,7 +127,7 @@ export interface TreeViewItemPluginResponse {
 }
 export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions) => void | TreeViewItemPluginResponse;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
-    (options: TreeViewPluginOptions<TSignature>): void | TreeViewResponse;
+    (options: TreeViewPluginOptions<TSignature>): void | TreeViewResponse<TSignature>;
     getDefaultizedParams?: (params: TreeViewUsedParams<TSignature>) => TSignature['defaultizedParams'];
     getInitialState?: (params: TreeViewUsedDefaultizedParams<TSignature>) => TSignature['state'];
     models?: TreeViewModelsInitializer<TSignature>;

package/internals/models/treeView.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import type { TreeViewAnyPluginSignature } from './plugin';
 import type { MergePluginsProperty } from './helpers';
 export interface TreeViewNode {
@@ -22,6 +21,6 @@ export interface TreeViewItemRange {
 export interface TreeViewModel<TValue> {
     name: string;
     value: TValue;
-    setValue: React.Dispatch<React.SetStateAction<TValue>>;
+    setControlledValue: (value: TValue | ((prevValue: TValue) => TValue)) => void;
 }
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[]> = MergePluginsProperty<TSignatures, 'instance'>;

package/internals/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/internals/index.js",
+  "types": "./index.d.ts"
+}

package/internals/plugins/defaultPlugins.d.ts

@@ -3,9 +3,11 @@ import { UseTreeViewNodesParameters } from './useTreeViewNodes';
 import { UseTreeViewExpansionParameters } from './useTreeViewExpansion';
 import { UseTreeViewSelectionParameters } from './useTreeViewSelection';
 import { UseTreeViewFocusParameters } from './useTreeViewFocus';
-import { UseTreeViewContextValueBuilderParameters } from './useTreeViewContextValueBuilder';
-import { ConvertPluginsIntoSignatures } from '../models';
-export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewNodes").UseTreeViewNodesSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewContextValueBuilder").UseTreeViewContextValueBuilderSignature>];
+import { UseTreeViewIconsParameters } from './useTreeViewIcons';
+import { ConvertPluginsIntoSignatures, MergePluginsProperty } from '../models';
+export declare const DEFAULT_TREE_VIEW_PLUGINS: readonly [import("../models").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>, import("../models").TreeViewPlugin<import("./useTreeViewNodes").UseTreeViewNodesSignature>, import("../models").TreeViewPlugin<import("./useTreeViewExpansion").UseTreeViewExpansionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewSelection").UseTreeViewSelectionSignature>, import("../models").TreeViewPlugin<import("./useTreeViewFocus").UseTreeViewFocusSignature>, import("../models").TreeViewPlugin<import("./useTreeViewKeyboardNavigation").UseTreeViewKeyboardNavigationSignature>, import("../models").TreeViewPlugin<import("./useTreeViewIcons").UseTreeViewIconsSignature>];
 export type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<typeof DEFAULT_TREE_VIEW_PLUGINS>;
-export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewNodesParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewContextValueBuilderParameters {
+export type DefaultTreeViewPluginSlots = MergePluginsProperty<DefaultTreeViewPlugins, 'slots'>;
+export type DefaultTreeViewPluginSlotProps = MergePluginsProperty<DefaultTreeViewPlugins, 'slotProps'>;
+export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends boolean | undefined> extends UseTreeViewIdParameters, UseTreeViewNodesParameters<R>, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewIconsParameters {
 }

package/internals/plugins/defaultPlugins.js

@@ -4,7 +4,7 @@ import { useTreeViewExpansion } from './useTreeViewExpansion';
 import { useTreeViewSelection } from './useTreeViewSelection';
 import { useTreeViewFocus } from './useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
-import { useTreeViewContextValueBuilder } from './useTreeViewContextValueBuilder';
-export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewContextValueBuilder];
+import { useTreeViewIcons } from './useTreeViewIcons';
+export const DEFAULT_TREE_VIEW_PLUGINS = [useTreeViewId, useTreeViewNodes, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -7,6 +7,11 @@ export const useTreeViewExpansion = ({
   params,
   models
 }) => {
+  const setExpandedNodes = (event, value) => {
+    var _params$onExpandedNod;
+    (_params$onExpandedNod = params.onExpandedNodesChange) == null || _params$onExpandedNod.call(params, event, value);
+    models.expandedNodes.setControlledValue(value);
+  };
   const isNodeExpanded = React.useCallback(nodeId => {
     return Array.isArray(models.expandedNodes.value) ? models.expandedNodes.value.indexOf(nodeId) !== -1 : false;
   }, [models.expandedNodes.value]);
@@ -28,10 +33,7 @@ export const useTreeViewExpansion = ({
     if (params.onNodeExpansionToggle) {
       params.onNodeExpansionToggle(event, nodeId, !isExpandedBefore);
     }
-    if (params.onExpandedNodesChange) {
-      params.onExpandedNodesChange(event, newExpanded);
-    }
-    models.expandedNodes.setValue(newExpanded);
+    setExpandedNodes(event, newExpanded);
   });
   const expandAllSiblings = (event, nodeId) => {
     const node = instance.getNode(nodeId);
@@ -44,10 +46,7 @@ export const useTreeViewExpansion = ({
           params.onNodeExpansionToggle(event, newlyExpandedNodeId, true);
         });
       }
-      if (params.onExpandedNodesChange) {
-        params.onExpandedNodesChange(event, newExpanded);
-      }
-      models.expandedNodes.setValue(newExpanded);
+      setExpandedNodes(event, newExpanded);
     }
   };
   populateInstance(instance, {
@@ -59,8 +58,7 @@ export const useTreeViewExpansion = ({
 };
 useTreeViewExpansion.models = {
   expandedNodes: {
-    controlledProp: 'expandedNodes',
-    defaultProp: 'defaultExpandedNodes'
+    getDefaultValue: params => params.defaultExpandedNodes
   }
 };
 const DEFAULT_EXPANDED_NODES = [];

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

@@ -34,6 +34,10 @@ export interface UseTreeViewExpansionParameters {
     onNodeExpansionToggle?: (event: React.SyntheticEvent, nodeId: string, isExpanded: boolean) => void;
 }
 export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedNodes'>;
-export type UseTreeViewExpansionSignature = TreeViewPluginSignature<UseTreeViewExpansionParameters, UseTreeViewExpansionDefaultizedParameters, UseTreeViewExpansionInstance, {}, {}, 'expandedNodes', [
-    UseTreeViewNodesSignature
-]>;
+export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
+    params: UseTreeViewExpansionParameters;
+    defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
+    instance: UseTreeViewExpansionInstance;
+    modelNames: 'expandedNodes';
+    dependantPlugins: [UseTreeViewNodesSignature];
+}>;

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -88,12 +88,6 @@ export const useTreeViewFocus = ({
 useTreeViewFocus.getInitialState = () => ({
   focusedNodeId: null
 });
-useTreeViewFocus.getDefaultizedParams = params => {
-  var _params$disabledItems;
-  return _extends({}, params, {
-    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
-  });
-};
 useTreeViewFocus.params = {
   onNodeFocus: true
 };

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

@@ -22,9 +22,15 @@ export type UseTreeViewFocusDefaultizedParameters = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
     focusedNodeId: string | null;
 }
-export type UseTreeViewFocusSignature = TreeViewPluginSignature<UseTreeViewFocusParameters, UseTreeViewFocusParameters, UseTreeViewFocusInstance, {}, UseTreeViewFocusState, never, [
-    UseTreeViewIdSignature,
-    UseTreeViewNodesSignature,
-    UseTreeViewSelectionSignature,
-    UseTreeViewExpansionSignature
-]>;
+export type UseTreeViewFocusSignature = TreeViewPluginSignature<{
+    params: UseTreeViewFocusParameters;
+    defaultizedParams: UseTreeViewFocusDefaultizedParameters;
+    instance: UseTreeViewFocusInstance;
+    state: UseTreeViewFocusState;
+    dependantPlugins: [
+        UseTreeViewIdSignature,
+        UseTreeViewNodesSignature,
+        UseTreeViewSelectionSignature,
+        UseTreeViewExpansionSignature
+    ];
+}>;

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

@@ -0,0 +1,2 @@
+export { useTreeViewIcons } from './useTreeViewIcons';
+export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, UseTreeViewIconsDefaultizedParameters, } from './useTreeViewIcons.types';

package/internals/plugins/useTreeViewIcons/index.js

@@ -0,0 +1 @@
+export { useTreeViewIcons } from './useTreeViewIcons';

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewIconsSignature } from './useTreeViewIcons.types';
+export declare const useTreeViewIcons: TreeViewPlugin<UseTreeViewIconsSignature>;

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.js

@@ -0,0 +1,22 @@
+export const useTreeViewIcons = ({
+  slots,
+  slotProps
+}) => {
+  return {
+    contextValue: {
+      icons: {
+        slots: {
+          collapseIcon: slots.collapseIcon,
+          expandIcon: slots.expandIcon,
+          endIcon: slots.endIcon
+        },
+        slotProps: {
+          collapseIcon: slotProps.collapseIcon,
+          expandIcon: slotProps.expandIcon,
+          endIcon: slotProps.endIcon
+        }
+      }
+    }
+  };
+};
+useTreeViewIcons.params = {};

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { SlotComponentProps } from '@mui/base/utils';
+import { TreeViewPluginSignature } from '../../models';
+import { UseTreeViewNodesSignature } from '../useTreeViewNodes';
+import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
+export interface UseTreeViewIconsParameters {
+}
+export type UseTreeViewIconsDefaultizedParameters = UseTreeViewIconsParameters;
+interface UseTreeViewIconsSlots {
+    /**
+     * The default icon used to collapse the node.
+     */
+    collapseIcon?: React.ElementType;
+    /**
+     * The default icon used to expand the node.
+     */
+    expandIcon?: React.ElementType;
+    /**
+     * The default icon displayed next to an end node.
+     * This is applied to all tree nodes and can be overridden by the TreeItem `icon` slot prop.
+     */
+    endIcon?: React.ElementType;
+}
+interface UseTreeViewIconsSlotProps {
+    collapseIcon?: SlotComponentProps<'svg', {}, {}>;
+    expandIcon?: SlotComponentProps<'svg', {}, {}>;
+    endIcon?: SlotComponentProps<'svg', {}, {}>;
+}
+interface UseTreeViewIconsContextValue {
+    icons: {
+        slots: UseTreeViewIconsSlots;
+        slotProps: UseTreeViewIconsSlotProps;
+    };
+}
+export type UseTreeViewIconsSignature = TreeViewPluginSignature<{
+    params: UseTreeViewIconsParameters;
+    defaultizedParams: UseTreeViewIconsDefaultizedParameters;
+    contextValue: UseTreeViewIconsContextValue;
+    slots: UseTreeViewIconsSlots;
+    slotProps: UseTreeViewIconsSlotProps;
+    dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewSelectionSignature];
+}>;
+export {};

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

@@ -13,5 +13,9 @@ export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
     focusedNodeId: string | null;
 }
-export type UseTreeViewIdSignature = TreeViewPluginSignature<UseTreeViewIdParameters, UseTreeViewIdDefaultizedParameters, UseTreeViewIdInstance, {}, UseTreeViewIdState, never, [
-]>;
+export type UseTreeViewIdSignature = TreeViewPluginSignature<{
+    params: UseTreeViewIdParameters;
+    defaultizedParams: UseTreeViewIdDefaultizedParameters;
+    instance: UseTreeViewIdInstance;
+    state: UseTreeViewIdState;
+}>;

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

@@ -10,7 +10,9 @@ export interface UseTreeViewNodesParameters {
 }
 export interface UseTreeViewNodesDefaultizedParameters {
 }
-export type UseTreeViewJSXNodesSignature = TreeViewPluginSignature<UseTreeViewNodesParameters, UseTreeViewNodesDefaultizedParameters, UseTreeViewNodesInstance, {}, {}, never, [
-    UseTreeViewNodesSignature,
-    UseTreeViewKeyboardNavigationSignature
-]>;
+export type UseTreeViewJSXNodesSignature = TreeViewPluginSignature<{
+    params: UseTreeViewNodesParameters;
+    defaultizedParams: UseTreeViewNodesDefaultizedParameters;
+    instance: UseTreeViewNodesInstance;
+    dependantPlugins: [UseTreeViewNodesSignature, UseTreeViewKeyboardNavigationSignature];
+}>;

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

@@ -6,12 +6,15 @@ import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
 export interface UseTreeViewKeyboardNavigationInstance {
     updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
 }
-export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{}, {}, UseTreeViewKeyboardNavigationInstance, {}, {}, never, [
-    UseTreeViewNodesSignature,
-    UseTreeViewSelectionSignature,
-    UseTreeViewFocusSignature,
-    UseTreeViewExpansionSignature
-]>;
+export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
+    instance: UseTreeViewKeyboardNavigationInstance;
+    dependantPlugins: [
+        UseTreeViewNodesSignature,
+        UseTreeViewSelectionSignature,
+        UseTreeViewFocusSignature,
+        UseTreeViewExpansionSignature
+    ];
+}>;
 export type TreeViewFirstCharMap = {
     [nodeId: string]: string;
 };

package/internals/plugins/useTreeViewNodes/useTreeViewNodes.js

@@ -116,6 +116,11 @@ export const useTreeViewNodes = ({
     getNavigableChildrenIds,
     isNodeDisabled
   });
+  return {
+    contextValue: {
+      disabledItemsFocusable: params.disabledItemsFocusable
+    }
+  };
 };
 useTreeViewNodes.getInitialState = params => updateState({
   items: params.items,
@@ -123,6 +128,12 @@ useTreeViewNodes.getInitialState = params => updateState({
   getItemId: params.getItemId,
   getItemLabel: params.getItemLabel
 });
+useTreeViewNodes.getDefaultizedParams = params => {
+  var _params$disabledItems;
+  return _extends({}, params, {
+    disabledItemsFocusable: (_params$disabledItems = params.disabledItemsFocusable) != null ? _params$disabledItems : false
+  });
+};
 useTreeViewNodes.params = {
   disabledItemsFocusable: true,
   items: true,

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

@@ -62,8 +62,16 @@ export interface UseTreeViewNodesState {
     nodeTree: TreeViewNodeIdAndChildren[];
     nodeMap: TreeViewNodeMap;
 }
-export type UseTreeViewNodesSignature = TreeViewPluginSignature<UseTreeViewNodesParameters<any>, UseTreeViewNodesDefaultizedParameters<any>, UseTreeViewNodesInstance, UseTreeViewNodesEventLookup, UseTreeViewNodesState, never, [
-]>;
+interface UseTreeViewNodesContextValue extends Pick<UseTreeViewNodesDefaultizedParameters<any>, 'disabledItemsFocusable'> {
+}
+export type UseTreeViewNodesSignature = TreeViewPluginSignature<{
+    params: UseTreeViewNodesParameters<any>;
+    defaultizedParams: UseTreeViewNodesDefaultizedParameters<any>;
+    instance: UseTreeViewNodesInstance;
+    events: UseTreeViewNodesEventLookup;
+    state: UseTreeViewNodesState;
+    contextValue: UseTreeViewNodesContextValue;
+}>;
 export type TreeViewNodeMap = {
     [nodeId: string]: TreeViewNode;
 };

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -10,7 +10,6 @@ export const useTreeViewSelection = ({
   const lastSelectedNode = React.useRef(null);
   const lastSelectionWasRange = React.useRef(false);
   const currentRangeSelection = React.useRef([]);
-  const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
   const setSelectedNodes = (event, newSelectedNodes) => {
     if (params.onNodeSelectionToggle) {
       if (params.multiSelect) {
@@ -34,8 +33,9 @@ export const useTreeViewSelection = ({
     if (params.onSelectedNodesChange) {
       params.onSelectedNodesChange(event, newSelectedNodes);
     }
-    models.selectedNodes.setValue(newSelectedNodes);
+    models.selectedNodes.setControlledValue(newSelectedNodes);
   };
+  const isNodeSelected = nodeId => Array.isArray(models.selectedNodes.value) ? models.selectedNodes.value.indexOf(nodeId) !== -1 : models.selectedNodes.value === nodeId;
   const selectNode = (event, nodeId, multiple = false) => {
     if (params.disableSelection) {
       return;
@@ -165,13 +165,17 @@ export const useTreeViewSelection = ({
   return {
     getRootProps: () => ({
       'aria-multiselectable': params.multiSelect
-    })
+    }),
+    contextValue: {
+      selection: {
+        multiSelect: params.multiSelect
+      }
+    }
   };
 };
 useTreeViewSelection.models = {
   selectedNodes: {
-    controlledProp: 'selectedNodes',
-    defaultProp: 'defaultSelectedNodes'
+    getDefaultValue: params => params.defaultSelectedNodes
   }
 };
 const DEFAULT_SELECTED_NODES = [];

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

@@ -48,9 +48,19 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
     onNodeSelectionToggle?: (event: React.SyntheticEvent, nodeId: string, isSelected: boolean) => void;
 }
 export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedNodes' | 'multiSelect'>;
-export type UseTreeViewSelectionSignature = TreeViewPluginSignature<UseTreeViewSelectionParameters<any>, UseTreeViewSelectionDefaultizedParameters<any>, UseTreeViewSelectionInstance, {}, {}, 'selectedNodes', [
-    UseTreeViewNodesSignature,
-    UseTreeViewExpansionSignature,
-    UseTreeViewNodesSignature
-]>;
+interface UseTreeViewSelectionContextValue {
+    selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect'>;
+}
+export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
+    params: UseTreeViewSelectionParameters<any>;
+    defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
+    instance: UseTreeViewSelectionInstance;
+    contextValue: UseTreeViewSelectionContextValue;
+    modelNames: 'selectedNodes';
+    dependantPlugins: [
+        UseTreeViewNodesSignature,
+        UseTreeViewExpansionSignature,
+        UseTreeViewNodesSignature
+    ];
+}>;
 export {};

package/internals/useTreeView/useTreeView.js

@@ -26,11 +26,15 @@ export const useTreeView = inParams => {
     return temp;
   });
   const rootPropsGetters = [];
-  let contextValue = {};
+  const contextValue = {
+    instance: instance
+  };
   const runPlugin = plugin => {
     const pluginResponse = plugin({
       instance,
       params,
+      slots: params.slots,
+      slotProps: params.slotProps,
       state,
       setState,
       rootRef: innerRootRef,
@@ -40,7 +44,7 @@ export const useTreeView = inParams => {
       rootPropsGetters.push(pluginResponse.getRootProps);
     }
     if (pluginResponse.contextValue) {
-      contextValue = pluginResponse.contextValue;
+      Object.assign(contextValue, pluginResponse.contextValue);
     }
   };
   plugins.forEach(runPlugin);
@@ -96,7 +100,7 @@ export const useTreeView = inParams => {
   return {
     getRootProps,
     rootRef: handleRootRef,
-    contextValue,
+    contextValue: contextValue,
     instance: instance
   };
 };

package/internals/useTreeView/useTreeView.types.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { EventHandlers } from '@mui/base/utils';
 import type { TreeViewContextValue } from '../TreeViewProvider';
 import { TreeViewAnyPluginSignature, TreeViewPlugin, ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewInstance } from '../models';
-export type UseTreeViewParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = {
+export type UseTreeViewParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'params'>;
+export interface UseTreeViewBaseParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> {
     rootRef?: React.Ref<HTMLUListElement> | undefined;
     plugins: TPlugins;
-} & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'params'>;
-export type UseTreeViewDefaultizedParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = {
-    rootRef?: React.Ref<HTMLUListElement> | undefined;
-    plugins: TPlugins;
-} & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>;
+    slots: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'slots'>;
+    slotProps: MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'slotProps'>;
+}
+export type UseTreeViewDefaultizedParameters<TPlugins extends readonly TreeViewPlugin<TreeViewAnyPluginSignature>[]> = UseTreeViewBaseParameters<TPlugins> & MergePluginsProperty<ConvertPluginsIntoSignatures<TPlugins>, 'defaultizedParams'>;
 export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-activedescendant' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
     ref: React.Ref<HTMLUListElement>;
 }

package/internals/useTreeView/useTreeViewModels.js

@@ -10,23 +10,22 @@ export const useTreeViewModels = (plugins, props) => {
     const initialState = {};
     plugins.forEach(plugin => {
       if (plugin.models) {
-        Object.entries(plugin.models).forEach(([modelName, model]) => {
+        Object.entries(plugin.models).forEach(([modelName, modelInitializer]) => {
           modelsRef.current[modelName] = {
-            controlledProp: model.controlledProp,
-            defaultProp: model.defaultProp,
-            isControlled: props[model.controlledProp] !== undefined
+            isControlled: props[modelName] !== undefined,
+            getDefaultValue: modelInitializer.getDefaultValue
           };
-          initialState[modelName] = props[model.defaultProp];
+          initialState[modelName] = modelInitializer.getDefaultValue(props);
         });
       }
     });
     return initialState;
   });
   const models = Object.fromEntries(Object.entries(modelsRef.current).map(([modelName, model]) => {
-    const value = model.isControlled ? props[model.controlledProp] : modelsState[modelName];
+    const value = model.isControlled ? props[modelName] : modelsState[modelName];
     return [modelName, {
       value,
-      setValue: newValue => {
+      setControlledValue: newValue => {
         if (!model.isControlled) {
           setModelsState(prevState => _extends({}, prevState, {
             [modelName]: newValue
@@ -40,8 +39,8 @@ export const useTreeViewModels = (plugins, props) => {
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
     Object.entries(modelsRef.current).forEach(([modelName, model]) => {
-      const controlled = props[model.controlledProp];
-      const defaultProp = props[model.defaultProp];
+      const controlled = props[modelName];
+      const newDefaultValue = model.getDefaultValue(props);
       React.useEffect(() => {
         if (model.isControlled !== (controlled !== undefined)) {
           console.error([`MUI X: A component is changing the ${model.isControlled ? '' : 'un'}controlled ${modelName} state of TreeView to be ${model.isControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${modelName} ` + 'element for the lifetime of the component.', "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'].join('\n'));
@@ -49,9 +48,9 @@ export const useTreeViewModels = (plugins, props) => {
       }, [controlled]);
       const {
         current: defaultValue
-      } = React.useRef(defaultProp);
+      } = React.useRef(newDefaultValue);
       React.useEffect(() => {
-        if (!model.isControlled && defaultValue !== defaultProp) {
+        if (!model.isControlled && defaultValue !== newDefaultValue) {
           console.error([`MUI X: A component is changing the default ${modelName} state of an uncontrolled TreeView after being initialized. ` + `To suppress this warning opt to use a controlled TreeView.`].join('\n'));
         }
       }, [JSON.stringify(defaultValue)]);