[TreeView] Return instance and publicAPI methods from plugin and populate the main objects inside useTreeView

docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.js

@@ -21,6 +21,8 @@ const useTreeViewLogExpanded = ({ params, models }) => {
       params.logMessage(`Expanded items: ${expandedStr}`);
     }
   }, [expandedStr]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {};
 };
 
 // Sets the default value of this plugin parameters.

docs/data/tree-view/rich-tree-view/headless/LogExpandedItems.tsx

@@ -52,6 +52,8 @@ const useTreeViewLogExpanded: TreeViewPlugin<TreeViewLogExpandedSignature> = ({
       params.logMessage(`Expanded items: ${expandedStr}`);
     }
   }, [expandedStr]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {};
 };
 
 // Sets the default value of this plugin parameters.

docs/data/tree-view/rich-tree-view/headless/headless.md

@@ -28,6 +28,8 @@ A custom plugins contains 2 required elements:
      React.useEffect(() => {
        console.log(params.customParam);
      });
+
+     return {};
    };
    ```
 
@@ -48,6 +50,8 @@ const useCustomPlugin = ({ params }) => {
   React.useEffect(() => {
     console.log(params.customParam);
   });
+
+  return {};
 };
 
 useCustomPlugin.params = { customParam: true };
@@ -100,6 +104,8 @@ const useCustomPlugin = ({ models }) => {
 
   const updateCustomModel = (newValue) =>
     models.customModel.setControlledValue(newValue);
+
+  return {};
 };
 ```
 
@@ -141,11 +147,15 @@ The Tree View instance is an object accessible in all the plugins and in the `Tr
 It is the main way a plugin can provide features to the rest of the component.
 
 ```ts
-const useCustomPlugin = ({ models, instance }) => {
+const useCustomPlugin = ({ models }) => {
   const toggleCustomModel = () =>
     models.customModel.setValue(!models.customModel.value);
 
-  populateInstance(instance, { toggleCustomModel });
+  return {
+    instance: {
+      toggleCustomModel,
+    },
+  };
 };
 ```
 
@@ -169,7 +179,11 @@ const useCustomPlugin = () => {
     publishTreeViewEvent(instance, 'toggleCustomModel', { value: newValue });
   };
 
-  populateInstance(instance, { toggleCustomModel });
+  return {
+    instance: {
+      toggleCustomModel,
+    },
+  };
 };
 ```
 

packages/x-tree-view/src/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.ts

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { EventManager } from '../../utils/EventManager';
 import type { TreeViewPlugin } from '../../models';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewInstanceEventsSignature } from './useTreeViewInstanceEvents.types';
 import type { TreeViewEventListener } from '../../models/events';
 
 const isSyntheticEvent = (event: any): event is React.SyntheticEvent => {
   return event.isPropagationStopped !== undefined;
 };
 
-export const useTreeViewInstanceEvents: TreeViewPlugin<UseTreeViewInstanceEventsSignature> = ({
-  instance,
-}) => {
+export const useTreeViewInstanceEvents: TreeViewPlugin<UseTreeViewInstanceEventsSignature> = () => {
   const [eventManager] = React.useState(() => new EventManager());
 
   const publishEvent = React.useCallback(
@@ -38,10 +35,12 @@ export const useTreeViewInstanceEvents: TreeViewPlugin<UseTreeViewInstanceEvents
     [eventManager],
   );
 
-  populateInstance<UseTreeViewInstanceEventsSignature>(instance, {
-    $$publishEvent: publishEvent,
-    $$subscribeEvent: subscribeEvent,
-  });
+  return {
+    instance: {
+      $$publishEvent: publishEvent,
+      $$subscribeEvent: subscribeEvent,
+    },
+  };
 };
 
 useTreeViewInstanceEvents.params = {};

packages/x-tree-view/src/internals/models/plugin.ts

@@ -8,7 +8,6 @@ import { TreeViewItemId } from '../../models';
 
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
   instance: TreeViewUsedInstance<TSignature>;
-  publicAPI: TreeViewUsedPublicAPI<TSignature>;
   params: TreeViewUsedDefaultizedParams<TSignature>;
   state: TreeViewUsedState<TSignature>;
   slots: TSignature['slots'];
@@ -30,7 +29,9 @@ type TreeViewResponse<TSignature extends TreeViewAnyPluginSignature> = {
   getRootProps?: <TOther extends EventHandlers = {}>(
     otherHandlers: TOther,
   ) => React.HTMLAttributes<HTMLUListElement>;
-} & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
+} & OptionalIfEmpty<'publicAPI', TSignature['publicAPI']> &
+  OptionalIfEmpty<'instance', TSignature['instance']> &
+  OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
 
 export type TreeViewPluginSignature<
   T extends {
@@ -149,7 +150,7 @@ export type TreeItemWrapper = (params: {
 }) => React.ReactNode;
 
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
-  (options: TreeViewPluginOptions<TSignature>): void | TreeViewResponse<TSignature>;
+  (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
   getDefaultizedParams?: (
     params: TreeViewUsedParams<TSignature>,
   ) => TSignature['defaultizedParams'];

packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { TreeViewPlugin } from '../../models';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
 import { TreeViewItemId } from '../../../models';
 
 export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature> = ({
   instance,
-  publicAPI,
   params,
   models,
 }) => {
@@ -83,15 +81,18 @@ export const useTreeViewExpansion: TreeViewPlugin<UseTreeViewExpansionSignature>
     }
   };
 
-  populateInstance<UseTreeViewExpansionSignature>(instance, {
-    isItemExpanded,
-    isItemExpandable,
-    setItemExpansion,
-    toggleItemExpansion,
-    expandAllSiblings,
-  });
-
-  populatePublicAPI<UseTreeViewExpansionSignature>(publicAPI, { setItemExpansion });
+  return {
+    publicAPI: {
+      setItemExpansion,
+    },
+    instance: {
+      isItemExpanded,
+      isItemExpandable,
+      setItemExpansion,
+      toggleItemExpansion,
+      expandAllSiblings,
+    },
+  };
 };
 
 useTreeViewExpansion.models = {

packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts

@@ -3,7 +3,6 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { EventHandlers } from '@mui/base/utils';
 import ownerDocument from '@mui/utils/ownerDocument';
 import { TreeViewPlugin, TreeViewUsedInstance } from '../../models';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
@@ -33,7 +32,6 @@ const useTabbableItemId = (
 
 export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
   instance,
-  publicAPI,
   params,
   state,
   setState,
@@ -121,18 +119,6 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
 
   const canItemBeTabbed = (itemId: string) => itemId === tabbableItemId;
 
-  populateInstance<UseTreeViewFocusSignature>(instance, {
-    isItemFocused,
-    canItemBeTabbed,
-    focusItem,
-    focusDefaultItem,
-    removeFocusedItem,
-  });
-
-  populatePublicAPI<UseTreeViewFocusSignature>(publicAPI, {
-    focusItem,
-  });
-
   useInstanceEventHandler(instance, 'removeItem', ({ id }) => {
     if (state.focusedItemId === id) {
       instance.focusDefaultItem(null);
@@ -158,6 +144,16 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
       onFocus: createHandleFocus(otherHandlers),
       'aria-activedescendant': activeDescendant ?? undefined,
     }),
+    publicAPI: {
+      focusItem,
+    },
+    instance: {
+      isItemFocused,
+      canItemBeTabbed,
+      focusItem,
+      focusDefaultItem,
+      removeFocusedItem,
+    },
   };
 };
 

packages/x-tree-view/src/internals/plugins/useTreeViewId/useTreeViewId.ts

@@ -1,25 +1,23 @@
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { TreeViewPlugin } from '../../models';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewIdSignature } from './useTreeViewId.types';
 
-export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({ instance, params }) => {
+export const useTreeViewId: TreeViewPlugin<UseTreeViewIdSignature> = ({ params }) => {
   const treeId = useId(params.id);
 
   const getTreeItemId = React.useCallback(
     (itemId: string, idAttribute: string | undefined) => idAttribute ?? `${treeId}-${itemId}`,
     [treeId],
   );
 
-  populateInstance<UseTreeViewIdSignature>(instance, {
-    getTreeItemId,
-  });
-
   return {
     getRootProps: () => ({
       id: treeId,
     }),
+    instance: {
+      getTreeItemId,
+    },
   };
 };
 

packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { TreeViewPlugin } from '../../models';
-import { populateInstance, populatePublicAPI } from '../../useTreeView/useTreeView.utils';
 import {
   UseTreeViewItemsSignature,
   UseTreeViewItemsDefaultizedParameters,
@@ -93,7 +92,6 @@ const updateItemsState = ({
 
 export const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature> = ({
   instance,
-  publicAPI,
   params,
   state,
   setState,
@@ -209,22 +207,20 @@ export const useTreeViewItems: TreeViewPlugin<UseTreeViewItemsSignature> = ({
     return state.items.nodeTree.map(getPropsFromItemId);
   };
 
-  populateInstance<UseTreeViewItemsSignature>(instance, {
-    getNode,
-    getItem,
-    getItemsToRender,
-    getChildrenIds,
-    getNavigableChildrenIds,
-    isItemDisabled,
-    preventItemUpdates,
-    areItemUpdatesPrevented,
-  });
-
-  populatePublicAPI<UseTreeViewItemsSignature>(publicAPI, {
-    getItem,
-  });
-
   return {
+    publicAPI: {
+      getItem,
+    },
+    instance: {
+      getNode,
+      getItem,
+      getItemsToRender,
+      getChildrenIds,
+      getNavigableChildrenIds,
+      isItemDisabled,
+      preventItemUpdates,
+      areItemUpdatesPrevented,
+    },
     contextValue: { disabledItemsFocusable: params.disabledItemsFocusable },
   };
 };

packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import { TreeViewItemPlugin, TreeViewNode, TreeViewPlugin } from '../../models';
-import { populateInstance } from '../../useTreeView/useTreeView.utils';
 import { UseTreeViewJSXItemsSignature } from './useTreeViewJSXItems.types';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
 import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
@@ -77,11 +76,13 @@ export const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature> =
     };
   });
 
-  populateInstance<UseTreeViewJSXItemsSignature>(instance, {
-    insertJSXItem,
-    removeJSXItem,
-    mapFirstCharFromJSX,
-  });
+  return {
+    instance: {
+      insertJSXItem,
+      removeJSXItem,
+      mapFirstCharFromJSX,
+    },
+  };
 };
 
 const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin<TreeItemProps | TreeItem2Props> = ({

packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts

@@ -7,7 +7,6 @@ import {
   getLastItem,
   getNextItem,
   getPreviousItem,
-  populateInstance,
 } from '../../useTreeView/useTreeView.utils';
 import {
   TreeViewFirstCharMap,
@@ -297,10 +296,12 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
     }
   };
 
-  populateInstance<UseTreeViewKeyboardNavigationSignature>(instance, {
-    updateFirstCharMap,
-    handleItemKeyDown,
-  });
+  return {
+    instance: {
+      updateFirstCharMap,
+      handleItemKeyDown,
+    },
+  };
 };
 
 useTreeViewKeyboardNavigation.params = {};