[TreeView] Improve TypeScript for plugins (mui#13380)

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

@@ -21,6 +21,7 @@ import {
   extractPluginParamsFromProps,
   useTreeView,
   TreeViewProvider,
+  ConvertPluginsIntoSignatures,
 } from '@mui/x-tree-view/internals';
 
 interface TreeViewLogExpandedParameters {
@@ -88,7 +89,7 @@ function TreeView<R extends {}, Multiple extends boolean | undefined>(
   const ownerState = themeProps as TreeViewProps<any, any>;
 
   const { pluginParams, otherProps } = extractPluginParamsFromProps<
-    typeof TREE_VIEW_PLUGINS,
+    ConvertPluginsIntoSignatures<typeof TREE_VIEW_PLUGINS>,
     DefaultTreeViewPluginSlots,
     DefaultTreeViewPluginSlotProps,
     TreeViewProps<R, Multiple>

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

@@ -237,7 +237,7 @@ function useTreeItemState(itemId: string) {
   const {
     customPlugin,
     // ...other elements returned by the context
-  } = useTreeViewContext<DefaultTreeViewPlugins>();
+  } = useTreeViewContext<DefaultTreeViewPluginSignatures>();
 
   // ...rest of the `useTreeItemState` hook content
 

packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx

@@ -16,7 +16,10 @@ import {
   RichTreeViewProSlotProps,
   RichTreeViewProSlots,
 } from './RichTreeViewPro.types';
-import { DEFAULT_TREE_VIEW_PRO_PLUGINS } from '../internals/plugins';
+import {
+  DEFAULT_TREE_VIEW_PRO_PLUGINS,
+  DefaultTreeViewProPluginSignatures,
+} from '../internals/plugins';
 import { getReleaseInfo } from '../internals/utils/releaseInfo';
 
 const useUtilityClasses = <R extends {}, Multiple extends boolean | undefined>(
@@ -100,7 +103,7 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro<
   }
 
   const { pluginParams, slots, slotProps, otherProps } = extractPluginParamsFromProps<
-    typeof DEFAULT_TREE_VIEW_PRO_PLUGINS,
+    DefaultTreeViewProPluginSignatures,
     RichTreeViewProSlots,
     RichTreeViewProSlotProps<R, Multiple>,
     RichTreeViewProProps<R, Multiple>

packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.types.ts

@@ -11,7 +11,7 @@ import {
   DefaultTreeViewProPluginParameters,
   DefaultTreeViewProPluginSlotProps,
   DefaultTreeViewProPluginSlots,
-  DefaultTreeViewProPlugins,
+  DefaultTreeViewProPluginSignatures,
 } from '../internals/plugins/defaultPlugins';
 
 interface RichTreeViewItemProSlotOwnerState {
@@ -39,7 +39,7 @@ export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean
 }
 
 export type RichTreeViewProApiRef = React.MutableRefObject<
-  TreeViewPublicAPI<DefaultTreeViewProPlugins> | undefined
+  TreeViewPublicAPI<DefaultTreeViewProPluginSignatures> | undefined
 >;
 
 export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
@@ -76,5 +76,5 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures?: TreeViewExperimentalFeatures<DefaultTreeViewProPlugins>;
+  experimentalFeatures?: TreeViewExperimentalFeatures<DefaultTreeViewProPluginSignatures>;
 }

packages/x-tree-view-pro/src/internals/plugins/defaultPlugins.ts

@@ -13,7 +13,7 @@ import {
   useTreeViewIcons,
   UseTreeViewIconsParameters,
   ConvertPluginsIntoSignatures,
-  MergePluginsProperty,
+  MergeSignaturesProperty,
 } from '@mui/x-tree-view/internals';
 
 export const DEFAULT_TREE_VIEW_PRO_PLUGINS = [
@@ -26,17 +26,17 @@ export const DEFAULT_TREE_VIEW_PRO_PLUGINS = [
   useTreeViewIcons,
 ] as const;
 
-export type DefaultTreeViewProPlugins = ConvertPluginsIntoSignatures<
+export type DefaultTreeViewProPluginSignatures = ConvertPluginsIntoSignatures<
   typeof DEFAULT_TREE_VIEW_PRO_PLUGINS
 >;
 
-export type DefaultTreeViewProPluginSlots = MergePluginsProperty<
-  DefaultTreeViewProPlugins,
+export type DefaultTreeViewProPluginSlots = MergeSignaturesProperty<
+  DefaultTreeViewProPluginSignatures,
   'slots'
 >;
 
-export type DefaultTreeViewProPluginSlotProps = MergePluginsProperty<
-  DefaultTreeViewProPlugins,
+export type DefaultTreeViewProPluginSlotProps = MergeSignaturesProperty<
+  DefaultTreeViewProPluginSignatures,
   'slotProps'
 >;
 

packages/x-tree-view-pro/src/internals/plugins/index.ts

@@ -1,2 +1,2 @@
 export { DEFAULT_TREE_VIEW_PRO_PLUGINS } from './defaultPlugins';
-export type { DefaultTreeViewProPlugins } from './defaultPlugins';
+export type { DefaultTreeViewProPluginSignatures } from './defaultPlugins';

packages/x-tree-view/src/RichTreeView/RichTreeView.tsx

@@ -7,7 +7,7 @@ import { getRichTreeViewUtilityClass } from './richTreeViewClasses';
 import { RichTreeViewProps, RichTreeViewSlotProps, RichTreeViewSlots } from './RichTreeView.types';
 import { useTreeView } from '../internals/useTreeView';
 import { TreeViewProvider } from '../internals/TreeViewProvider';
-import { DEFAULT_TREE_VIEW_PLUGINS } from '../internals/plugins';
+import { DEFAULT_TREE_VIEW_PLUGINS, DefaultTreeViewPluginSignatures } from '../internals/plugins';
 import { TreeItem, TreeItemProps } from '../TreeItem';
 import { buildWarning } from '../internals/utils/warning';
 import { extractPluginParamsFromProps } from '../internals/utils/extractPluginParamsFromProps';
@@ -89,7 +89,7 @@ const RichTreeView = React.forwardRef(function RichTreeView<
   }
 
   const { pluginParams, slots, slotProps, otherProps } = extractPluginParamsFromProps<
-    typeof DEFAULT_TREE_VIEW_PLUGINS,
+    DefaultTreeViewPluginSignatures,
     RichTreeViewSlots,
     RichTreeViewSlotProps<R, Multiple>,
     RichTreeViewProps<R, Multiple>

packages/x-tree-view/src/RichTreeView/RichTreeView.types.ts

@@ -7,7 +7,7 @@ import {
   DefaultTreeViewPluginParameters,
   DefaultTreeViewPluginSlotProps,
   DefaultTreeViewPluginSlots,
-  DefaultTreeViewPlugins,
+  DefaultTreeViewPluginSignatures,
 } from '../internals/plugins/defaultPlugins';
 import { TreeItemProps } from '../TreeItem';
 import { TreeItem2Props } from '../TreeItem2';
@@ -47,7 +47,7 @@ export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean |
 }
 
 export type RichTreeViewApiRef = React.MutableRefObject<
-  TreeViewPublicAPI<DefaultTreeViewPlugins> | undefined
+  TreeViewPublicAPI<DefaultTreeViewPluginSignatures> | undefined
 >;
 
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
@@ -84,5 +84,5 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures?: TreeViewExperimentalFeatures<DefaultTreeViewPlugins>;
+  experimentalFeatures?: TreeViewExperimentalFeatures<DefaultTreeViewPluginSignatures>;
 }

packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.plugins.ts

@@ -12,7 +12,9 @@ export const SIMPLE_TREE_VIEW_PLUGINS = [
   useTreeViewJSXItems,
 ] as const;
 
-export type SimpleTreeViewPlugins = ConvertPluginsIntoSignatures<typeof SIMPLE_TREE_VIEW_PLUGINS>;
+export type SimpleTreeViewPluginSignatures = ConvertPluginsIntoSignatures<
+  typeof SIMPLE_TREE_VIEW_PLUGINS
+>;
 
 export type SimpleTreeViewPluginSlots = DefaultTreeViewPluginSlots;
 

packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx

@@ -6,12 +6,12 @@ import { useSlotProps } from '@mui/base/utils';
 import { getSimpleTreeViewUtilityClass } from './simpleTreeViewClasses';
 import {
   SimpleTreeViewProps,
-  SimpleTreeViewSlotProps,
   SimpleTreeViewSlots,
+  SimpleTreeViewSlotProps,
 } from './SimpleTreeView.types';
 import { useTreeView } from '../internals/useTreeView';
 import { TreeViewProvider } from '../internals/TreeViewProvider';
-import { SIMPLE_TREE_VIEW_PLUGINS } from './SimpleTreeView.plugins';
+import { SIMPLE_TREE_VIEW_PLUGINS, SimpleTreeViewPluginSignatures } from './SimpleTreeView.plugins';
 import { buildWarning } from '../internals/utils/warning';
 import { extractPluginParamsFromProps } from '../internals/utils/extractPluginParamsFromProps';
 
@@ -74,7 +74,7 @@ const SimpleTreeView = React.forwardRef(function SimpleTreeView<
   }
 
   const { pluginParams, slots, slotProps, otherProps } = extractPluginParamsFromProps<
-    typeof SIMPLE_TREE_VIEW_PLUGINS,
+    SimpleTreeViewPluginSignatures,
     SimpleTreeViewSlots,
     SimpleTreeViewSlotProps,
     SimpleTreeViewProps<Multiple> & { items: any }

packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.types.ts

@@ -7,7 +7,7 @@ import {
   SimpleTreeViewPluginParameters,
   SimpleTreeViewPluginSlotProps,
   SimpleTreeViewPluginSlots,
-  SimpleTreeViewPlugins,
+  SimpleTreeViewPluginSignatures,
 } from './SimpleTreeView.plugins';
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
 
@@ -24,7 +24,7 @@ export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
 }
 
 export type SimpleTreeViewApiRef = React.MutableRefObject<
-  TreeViewPublicAPI<SimpleTreeViewPlugins> | undefined
+  TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined
 >;
 
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined>
@@ -60,5 +60,5 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined>
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures?: TreeViewExperimentalFeatures<SimpleTreeViewPlugins>;
+  experimentalFeatures?: TreeViewExperimentalFeatures<SimpleTreeViewPluginSignatures>;
 }

packages/x-tree-view/src/TreeItem/TreeItem.test.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { expect } from 'chai';
 import PropTypes from 'prop-types';
 import { createRenderer } from '@mui/internal-test-utils';
-import { SimpleTreeViewPlugins } from '@mui/x-tree-view/SimpleTreeView/SimpleTreeView.plugins';
+import { SimpleTreeViewPluginSignatures } from '@mui/x-tree-view/SimpleTreeView/SimpleTreeView.plugins';
 import { TreeItem, treeItemClasses as classes } from '@mui/x-tree-view/TreeItem';
 import { TreeViewContextValue } from '@mui/x-tree-view/internals/TreeViewProvider';
 import { TreeViewContext } from '@mui/x-tree-view/internals/TreeViewProvider/TreeViewContext';
 import { describeConformance } from 'test/utils/describeConformance';
 import { describeTreeView } from 'test/utils/tree-view/describeTreeView';
 
-const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue<SimpleTreeViewPlugins> = {
+const TEST_TREE_VIEW_CONTEXT_VALUE: TreeViewContextValue<SimpleTreeViewPluginSignatures> = {
   instance: {
     isItemExpandable: () => false,
     isItemExpanded: () => false,

packages/x-tree-view/src/TreeItem/TreeItem.tsx

@@ -14,7 +14,7 @@ import { TreeItemContent } from './TreeItemContent';
 import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { TreeItemOwnerState, TreeItemProps } from './TreeItem.types';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-import { DefaultTreeViewPlugins } from '../internals/plugins';
+import { DefaultTreeViewPluginSignatures } from '../internals/plugins';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
@@ -183,7 +183,7 @@ export const TreeItem = React.forwardRef(function TreeItem(
     disabledItemsFocusable,
     indentationAtItemLevel,
     instance,
-  } = useTreeViewContext<DefaultTreeViewPlugins>();
+  } = useTreeViewContext<DefaultTreeViewPluginSignatures>();
   const depthContext = React.useContext(TreeViewItemDepthContext);
 
   const props = useThemeProps({ props: inProps, name: 'MuiTreeItem' });

packages/x-tree-view/src/TreeItem/useTreeItemState.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
-import { DefaultTreeViewPlugins } from '../internals/plugins';
+import { DefaultTreeViewPluginSignatures } from '../internals/plugins';
 
 export function useTreeItemState(itemId: string) {
   const {
     instance,
     selection: { multiSelect, checkboxSelection, disableSelection },
-  } = useTreeViewContext<DefaultTreeViewPlugins>();
+  } = useTreeViewContext<DefaultTreeViewPluginSignatures>();
 
   const expandable = instance.isItemExpandable(itemId);
   const expanded = instance.isItemExpanded(itemId);

packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
-import { DefaultTreeViewPlugins } from '../../internals/plugins';
+import { DefaultTreeViewPluginSignatures } from '../../internals/plugins';
 import type { UseTreeItem2Status } from '../../useTreeItem2';
 
 interface UseTreeItem2Interactions {
@@ -31,7 +31,7 @@ export const useTreeItem2Utils = ({
   const {
     instance,
     selection: { multiSelect },
-  } = useTreeViewContext<DefaultTreeViewPlugins>();
+  } = useTreeViewContext<DefaultTreeViewPluginSignatures>();
 
   const status: UseTreeItem2Status = {
     expandable: isItemExpandable(children),

packages/x-tree-view/src/hooks/useTreeViewApiRef.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
-import { DefaultTreeViewPlugins } from '../internals';
+import { DefaultTreeViewPluginSignatures } from '../internals';
 
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
 export const useTreeViewApiRef = <
-  TPlugins extends readonly TreeViewAnyPluginSignature[] = DefaultTreeViewPlugins,
->() => React.useRef(undefined) as React.MutableRefObject<TreeViewPublicAPI<TPlugins> | undefined>;
+  TSignatures extends readonly TreeViewAnyPluginSignature[] = DefaultTreeViewPluginSignatures,
+>() =>
+  React.useRef(undefined) as React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.tsx

@@ -8,8 +8,8 @@ import { TreeViewAnyPluginSignature } from '../models';
  *
  * @ignore - do not document.
  */
-export function TreeViewProvider<TPlugins extends readonly TreeViewAnyPluginSignature[]>(
-  props: TreeViewProviderProps<TPlugins>,
+export function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(
+  props: TreeViewProviderProps<TSignatures>,
 ) {
   const { value, children } = props;
 

packages/x-tree-view/src/internals/TreeViewProvider/TreeViewProvider.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  MergePluginsProperty,
+  MergeSignaturesProperty,
   TreeItemWrapper,
   TreeRootWrapper,
   TreeViewAnyPluginSignature,
@@ -9,17 +9,21 @@ import {
   TreeViewPublicAPI,
 } from '../models';
 
-export type TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> =
-  MergePluginsProperty<TPlugins, 'contextValue'> & {
-    instance: TreeViewInstance<TPlugins>;
-    publicAPI: TreeViewPublicAPI<TPlugins>;
+export type TreeViewItemPluginsRunner = <TProps extends {}>(
+  props: TProps,
+) => Required<TreeViewItemPluginResponse>;
+
+export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> =
+  MergeSignaturesProperty<TSignatures, 'contextValue'> & {
+    instance: TreeViewInstance<TSignatures>;
+    publicAPI: TreeViewPublicAPI<TSignatures>;
     rootRef: React.RefObject<HTMLUListElement>;
-    wrapItem: TreeItemWrapper<TPlugins>;
-    wrapRoot: TreeRootWrapper<TPlugins>;
-    runItemPlugins: <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
+    wrapItem: TreeItemWrapper<TSignatures>;
+    wrapRoot: TreeRootWrapper<TSignatures>;
+    runItemPlugins: TreeViewItemPluginsRunner;
   };
 
-export interface TreeViewProviderProps<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
-  value: TreeViewContextValue<TPlugins>;
+export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  value: TreeViewContextValue<TSignatures>;
   children: React.ReactNode;
 }

packages/x-tree-view/src/internals/TreeViewProvider/index.ts

@@ -1,2 +1,6 @@
 export { TreeViewProvider } from './TreeViewProvider';
-export type { TreeViewProviderProps, TreeViewContextValue } from './TreeViewProvider.types';
+export type {
+  TreeViewProviderProps,
+  TreeViewContextValue,
+  TreeViewItemPluginsRunner,
+} from './TreeViewProvider.types';

packages/x-tree-view/src/internals/TreeViewProvider/useTreeViewContext.ts

@@ -3,8 +3,8 @@ import { TreeViewAnyPluginSignature } from '../models';
 import { TreeViewContext } from './TreeViewContext';
 import { TreeViewContextValue } from './TreeViewProvider.types';
 
-export const useTreeViewContext = <TPlugins extends readonly TreeViewAnyPluginSignature[]>() => {
-  const context = React.useContext(TreeViewContext) as TreeViewContextValue<TPlugins>;
+export const useTreeViewContext = <TSignatures extends readonly TreeViewAnyPluginSignature[]>() => {
+  const context = React.useContext(TreeViewContext) as TreeViewContextValue<TSignatures>;
   if (context == null) {
     throw new Error(
       [

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

@@ -1,12 +1,12 @@
 import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
-import { ConvertPluginsIntoSignatures, MergePlugins } from '../models';
+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] as const;
 
-export type TreeViewCorePluginsSignature = MergePlugins<
-  ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>
+export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<
+  typeof TREE_VIEW_CORE_PLUGINS
 >;

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

@@ -1,2 +1,2 @@
 export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';
-export type { TreeViewCorePluginsSignature } from './corePlugins';
+export type { TreeViewCorePluginSignatures } from './corePlugins';

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

@@ -7,15 +7,15 @@ export type {
   TreeViewPlugin,
   TreeViewPluginSignature,
   ConvertPluginsIntoSignatures,
-  MergePluginsProperty,
+  MergeSignaturesProperty,
   TreeViewPublicAPI,
   TreeViewExperimentalFeatures,
 } from './models';
 
 // Plugins
 export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
 export type {
-  DefaultTreeViewPlugins,
+  DefaultTreeViewPluginSignatures,
   DefaultTreeViewPluginSlots,
   DefaultTreeViewPluginSlotProps,
 } from './plugins/defaultPlugins';