[TreeView] Add utility function to check if an optional plugin is present

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

@@ -1,12 +1,17 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+import { useTreeViewOptionalPlugins } from './useTreeViewOptionalPlugins';
 import { useTreeViewId, UseTreeViewIdParameters } from './useTreeViewId';
 import { ConvertPluginsIntoSignatures } from '../models';
 
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.
  */
-export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewId] as const;
+export const TREE_VIEW_CORE_PLUGINS = [
+  useTreeViewInstanceEvents,
+  useTreeViewOptionalPlugins,
+  useTreeViewId,
+] as const;
 
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<
   typeof TREE_VIEW_CORE_PLUGINS

packages/x-tree-view/src/internals/corePlugins/useTreeViewOptionalPlugins/index.ts

@@ -0,0 +1,2 @@
+export { useTreeViewOptionalPlugins } from './useTreeViewOptionalPlugins';
+export type { UseTreeViewOptionalPluginsSignature } from './useTreeViewOptionalPlugins.types';

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

@@ -0,0 +1,17 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewOptionalPluginsSignature } from './useTreeViewOptionalPlugins.types';
+
+export const useTreeViewOptionalPlugins: TreeViewPlugin<UseTreeViewOptionalPluginsSignature> = ({
+  plugins,
+}) => {
+  const pluginSet = new Set(plugins);
+  const getAvailablePlugins = () => pluginSet;
+
+  return {
+    instance: {
+      getAvailablePlugins,
+    },
+  };
+};
+
+useTreeViewOptionalPlugins.params = {};

packages/x-tree-view/src/internals/corePlugins/useTreeViewOptionalPlugins/useTreeViewOptionalPlugins.types.ts

@@ -0,0 +1,9 @@
+import { TreeViewPlugin, TreeViewAnyPluginSignature, TreeViewPluginSignature } from '../../models';
+
+interface UseTreeViewOptionalPluginsInstance {
+  getAvailablePlugins: () => Set<TreeViewPlugin<TreeViewAnyPluginSignature>>;
+}
+
+export type UseTreeViewOptionalPluginsSignature = TreeViewPluginSignature<{
+  instance: UseTreeViewOptionalPluginsInstance;
+}>;

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

@@ -16,6 +16,7 @@ export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSigna
   models: TreeViewUsedModels<TSignature>;
   setState: React.Dispatch<React.SetStateAction<TreeViewUsedState<TSignature>>>;
   rootRef: React.RefObject<HTMLUListElement>;
+  plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
 
 type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> = {

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

@@ -13,6 +13,8 @@ import {
   UseTreeViewKeyboardNavigationSignature,
 } from './useTreeViewKeyboardNavigation.types';
 import { MuiCancellableEvent } from '../../models/MuiCancellableEvent';
+import { hasPlugin } from '../../utils/plugins';
+import { useTreeViewFocus } from '../useTreeViewFocus';
 
 function isPrintableCharacter(string: string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
@@ -77,9 +79,8 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
   const canToggleItemSelection = (itemId: string) =>
     !params.disableSelection && !instance.isItemDisabled(itemId);
 
-  const canToggleItemExpansion = (itemId: string) => {
-    return !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
-  };
+  const canToggleItemExpansion = (itemId: string) =>
+    !instance.isItemDisabled(itemId) && instance.isItemExpandable(itemId);
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
   const handleItemKeyDown = (
@@ -142,7 +143,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         const nextItem = getNextNavigableItem(instance, itemId);
         if (nextItem) {
           event.preventDefault();
-          instance.focusItem(event, nextItem);
+          if (hasPlugin(instance, useTreeViewFocus)) {
+            instance.focusItem(event, nextItem);
+          }
 
           // Multi select behavior when pressing Shift + ArrowDown
           // Toggles the selection state of the next item
@@ -159,7 +162,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         const previousItem = getPreviousNavigableItem(instance, itemId);
         if (previousItem) {
           event.preventDefault();
-          instance.focusItem(event, previousItem);
+          if (hasPlugin(instance, useTreeViewFocus)) {
+            instance.focusItem(event, previousItem);
+          }
 
           // Multi select behavior when pressing Shift + ArrowUp
           // Toggles the selection state of the previous item
@@ -177,7 +182,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         if (instance.isItemExpanded(itemId)) {
           const nextItemId = getNextNavigableItem(instance, itemId);
           if (nextItemId) {
-            instance.focusItem(event, nextItemId);
+            if (hasPlugin(instance, useTreeViewFocus)) {
+              instance.focusItem(event, nextItemId);
+            }
             event.preventDefault();
           }
         } else if (canToggleItemExpansion(itemId)) {
@@ -197,7 +204,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         } else {
           const parent = instance.getItemMeta(itemId).parentId;
           if (parent) {
-            instance.focusItem(event, parent);
+            if (hasPlugin(instance, useTreeViewFocus)) {
+              instance.focusItem(event, parent);
+            }
             event.preventDefault();
           }
         }
@@ -211,7 +220,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         // Selects the focused item and all items up to the first item.
         if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
           instance.selectRangeFromStartToItem(event, itemId);
-        } else {
+        } else if (hasPlugin(instance, useTreeViewFocus)) {
           instance.focusItem(event, getFirstNavigableItem(instance));
         }
 
@@ -225,7 +234,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
         // Selects the focused item and all the items down to the last item.
         if (canToggleItemSelection(itemId) && params.multiSelect && ctrlPressed && event.shiftKey) {
           instance.selectRangeFromItemToEnd(event, itemId);
-        } else {
+        } else if (hasPlugin(instance, useTreeViewFocus)) {
           instance.focusItem(event, getLastNavigableItem(instance));
         }
 
@@ -252,7 +261,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
       // TODO: Support typing multiple characters
       case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key): {
         const matchingItem = getFirstMatchingItem(itemId, key);
-        if (matchingItem != null) {
+        if (matchingItem != null && hasPlugin(instance, useTreeViewFocus)) {
           instance.focusItem(event, matchingItem);
           event.preventDefault();
         }

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

@@ -32,9 +32,9 @@ export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
   dependencies: [
     UseTreeViewItemsSignature,
     UseTreeViewSelectionSignature,
-    UseTreeViewFocusSignature,
     UseTreeViewExpansionSignature,
   ];
+  optionalDependencies: [UseTreeViewFocusSignature];
 }>;
 
 export type TreeViewFirstCharMap = { [itemId: string]: string };

packages/x-tree-view/src/internals/useTreeView/useTreeView.ts

@@ -157,6 +157,7 @@ export const useTreeView = <
       setState,
       rootRef: innerRootRef,
       models,
+      plugins,
     });
 
     if (pluginResponse.getRootProps) {

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

@@ -0,0 +1,12 @@
+import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPlugin } from '../models';
+
+export const hasPlugin = <
+  TSignature extends TreeViewAnyPluginSignature,
+  TInstance extends TreeViewInstance<[], [TSignature]>,
+>(
+  instance: TInstance,
+  plugin: TreeViewPlugin<TSignature>,
+): instance is Omit<TInstance, keyof TSignature['instance']> & TSignature['instance'] => {
+  const plugins = instance.getAvailablePlugins();
+  return plugins.has(plugin as any);
+};