Remove context builder hook

docs/data/tree-view/headless/HeadlessTreeView.tsx

@@ -51,6 +51,8 @@ type TreeViewLogExpandedSignature = TreeViewPluginSignature<
   {},
   // State defined by this plugin: we don't have any
   {},
+  // Context value defined by this plugin: we don't have any
+  {},
   // Models defined by plugin: we don't have any
   never,
   // Dependencies of this plugin (we need the expansion plugin to access its model)

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

@@ -21,6 +21,7 @@ const useUtilityClasses = (ownerState: TreeItemOwnerState) => {
     expanded: ['expanded'],
     selected: ['selected'],
     focused: ['focused'],
+    interactive: ['interactive'],
     disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     label: ['label'],
@@ -61,9 +62,11 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   boxSizing: 'border-box', // prevent width + padding to overflow
   display: 'flex',
   alignItems: 'center',
-  cursor: 'pointer',
+  [`&.${treeItemClasses.interactive}`]: {
+    cursor: 'pointer',
+  },
   WebkitTapHighlightColor: 'transparent',
-  '&:hover': {
+  [`&.${treeItemClasses.interactive}:hover`]: {
     backgroundColor: (theme.vars || theme).palette.action.hover,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
@@ -77,11 +80,11 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   [`&.${treeItemClasses.focused}`]: {
     backgroundColor: (theme.vars || theme).palette.action.focus,
   },
-  [`&.${treeItemClasses.selected}`]: {
+  [`.${treeItemClasses.selected}`]: {
     backgroundColor: theme.vars
       ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
       : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-    '&:hover': {
+    [`&.${treeItemClasses.interactive}:hover`]: {
       backgroundColor: theme.vars
         ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
         : alpha(
@@ -152,7 +155,7 @@ export const TreeItem = React.forwardRef(function TreeItem(
   const {
     icons: contextIcons,
     runItemPlugins,
-    multiSelect,
+    selection: { multiSelect },
     disabledItemsFocusable,
     instance,
   } = useTreeViewContext<DefaultTreeViewPlugins>();
@@ -260,6 +263,7 @@ export const TreeItem = React.forwardRef(function TreeItem(
           root: classes.content,
           expanded: classes.expanded,
           selected: classes.selected,
+          interactive: classes.interactive,
           focused: classes.focused,
           disabled: classes.disabled,
           iconContainer: classes.iconContainer,

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

@@ -19,6 +19,8 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
     expanded: string;
     /** State class applied to the content element when selected and not using the checkbox selection. */
     selected: string;
+    /** State class applied to the content element when clicking it causes an action. */
+    interactive: string;
     /** State class applied to the content element when focused. */
     focused: string;
     /** State class applied to the element when disabled. */
@@ -75,8 +77,10 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
   const {
     disabled,
     expanded,
+    expandable,
     selected,
     focused,
+    disableSelection,
     checkboxSelection,
     handleExpansion,
     handleSelection,
@@ -121,6 +125,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
       className={clsx(className, classes.root, {
         [classes.expanded]: expanded,
         [classes.selected]: selected && !checkboxSelection,
+        [classes.interactive]: (!checkboxSelection && !disableSelection) || expandable,
         [classes.focused]: focused,
         [classes.disabled]: disabled,
       })}
@@ -130,7 +135,12 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
     >
       <div className={classes.iconContainer}>{icon}</div>
       {checkboxSelection && (
-        <Checkbox checked={selected} onChange={handleCheckboxSelectionChange} ref={checkboxRef} />
+        <Checkbox
+          checked={selected}
+          onChange={handleCheckboxSelectionChange}
+          disabled={disableSelection}
+          ref={checkboxRef}
+        />
       )}
 
       <div className={classes.label}>{label}</div>

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

@@ -10,8 +10,10 @@ export interface TreeItemClasses {
   content: string;
   /** State class applied to the content element when expanded. */
   expanded: string;
-  /** State class applied to the content element when selected. */
+  /** State class applied to the content element when selected and not using the checkbox selection. */
   selected: string;
+  /** State class applied to the content element when clicking it causes an action. */
+  interactive: string;
   /** State class applied to the content element when focused. */
   focused: string;
   /** State class applied to the element when disabled. */
@@ -34,6 +36,7 @@ export const treeItemClasses: TreeItemClasses = generateUtilityClasses('MuiTreeI
   'content',
   'expanded',
   'selected',
+  'interactive',
   'focused',
   'disabled',
   'iconContainer',

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

@@ -3,7 +3,10 @@ import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewCon
 import { DefaultTreeViewPlugins } from '../internals/plugins';
 
 export function useTreeItem(nodeId: string) {
-  const { instance, multiSelect, checkboxSelection } = useTreeViewContext<DefaultTreeViewPlugins>();
+  const {
+    instance,
+    selection: { multiSelect, checkboxSelection, disableSelection },
+  } = useTreeViewContext<DefaultTreeViewPlugins>();
 
   const expandable = instance.isNodeExpandable(nodeId);
   const expanded = instance.isNodeExpanded(nodeId);
@@ -59,10 +62,12 @@ export function useTreeItem(nodeId: string) {
   };
 
   return {
+    expandable,
     disabled,
     expanded,
     selected,
     focused,
+    disableSelection,
     checkboxSelection,
     handleExpansion,
     handleSelection,

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

@@ -1,24 +1,17 @@
 import * as React from 'react';
 import {
+  MergePluginsProperty,
   TreeViewAnyPluginSignature,
   TreeViewInstance,
   TreeViewItemPluginOptions,
   TreeViewItemPluginResponse,
 } from '../models';
 
-export interface TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
-  instance: TreeViewInstance<TPlugins>;
-  runItemPlugins: (options: TreeViewItemPluginOptions) => Required<TreeViewItemPluginResponse>;
-  multiSelect: boolean;
-  checkboxSelection: boolean;
-  disabledItemsFocusable: boolean;
-  icons: {
-    defaultCollapseIcon: React.ReactNode;
-    defaultExpandIcon: React.ReactNode;
-    defaultParentIcon: React.ReactNode;
-    defaultEndIcon: React.ReactNode;
+export type TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSignature[]> =
+  MergePluginsProperty<TPlugins, 'contextValue'> & {
+    instance: TreeViewInstance<TPlugins>;
+    runItemPlugins: (options: TreeViewItemPluginOptions) => Required<TreeViewItemPluginResponse>;
   };
-}
 
 export interface TreeViewProviderProps<TPlugins extends readonly TreeViewAnyPluginSignature[]> {
   value: TreeViewContextValue<TPlugins>;

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

@@ -25,6 +25,7 @@ export type UseTreeViewInstanceEventsSignature = TreeViewPluginSignature<
   UseTreeViewInstanceEventsInstance,
   {},
   {},
+  {},
   never,
   []
 >;

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

@@ -1,4 +1,4 @@
-import { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
+import type { TreeViewAnyPluginSignature, TreeViewPlugin } from './plugin';
 
 export type DefaultizedProps<
   P extends {},
@@ -8,6 +8,10 @@ export type DefaultizedProps<
   Required<Pick<P, RequiredProps>> &
   AdditionalProps;
 
+export type OptionalIfEmpty<A extends string, B> = keyof B extends never
+  ? Partial<Record<A, B>>
+  : Record<A, B>;
+
 export type MergePluginsProperty<
   TPlugins extends readonly any[],
   TProperty extends keyof TreeViewAnyPluginSignature,
@@ -30,6 +34,7 @@ export interface MergePlugins<TPlugins extends readonly any[]> {
   params: MergePluginsProperty<TPlugins, 'params'>;
   defaultizedParams: MergePluginsProperty<TPlugins, 'defaultizedParams'>;
   dependantPlugins: MergePluginsProperty<TPlugins, 'dependantPlugins'>;
+  contextValue: MergePluginsProperty<TPlugins, 'contextValue'>;
   events: MergePluginsProperty<TPlugins, 'events'>;
   models: MergePluginsProperty<TPlugins, 'models'>;
 }

packages/x-tree-view/src/internals/models/plugin.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';
@@ -23,19 +22,19 @@ type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> =
   };
 };
 
-interface TreeViewResponse {
+type TreeViewResponse<TSignature extends TreeViewAnyPluginSignature> = {
   getRootProps?: <TOther extends EventHandlers = {}>(
     otherHandlers: TOther,
   ) => React.HTMLAttributes<HTMLUListElement>;
-  contextValue?: TreeViewContextValue<any>;
-}
+} & OptionalIfEmpty<'contextValue', TSignature['contextValue']>;
 
 export type TreeViewPluginSignature<
   TParams extends {},
   TDefaultizedParams extends {},
   TInstance extends {},
   TEvents extends { [key in keyof TEvents]: TreeViewEventLookupElement },
   TState extends {},
+  TContextValue extends {},
   TModelNames extends keyof TDefaultizedParams,
   TDependantPlugins extends readonly TreeViewAnyPluginSignature[],
 > = {
@@ -49,6 +48,7 @@ export type TreeViewPluginSignature<
     >;
   };
   events: TEvents;
+  contextValue: TContextValue;
   dependantPlugins: TDependantPlugins;
 };
 
@@ -59,6 +59,7 @@ export type TreeViewAnyPluginSignature = {
   defaultizedParams: any;
   dependantPlugins: any;
   events: any;
+  contextValue: {};
   models: any;
 };
 
@@ -119,7 +120,7 @@ export type TreeViewItemPlugin = (
 ) => 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'];

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

@@ -4,10 +4,7 @@ import { useTreeViewExpansion, UseTreeViewExpansionParameters } from './useTreeV
 import { useTreeViewSelection, UseTreeViewSelectionParameters } from './useTreeViewSelection';
 import { useTreeViewFocus, UseTreeViewFocusParameters } from './useTreeViewFocus';
 import { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
-import {
-  useTreeViewContextValueBuilder,
-  UseTreeViewContextValueBuilderParameters,
-} from './useTreeViewContextValueBuilder';
+import { useTreeViewIcons, UseTreeViewIconsParameters } from './useTreeViewIcons';
 import { ConvertPluginsIntoSignatures } from '../models';
 
 export const DEFAULT_TREE_VIEW_PLUGINS = [
@@ -17,7 +14,7 @@ export const DEFAULT_TREE_VIEW_PLUGINS = [
   useTreeViewSelection,
   useTreeViewFocus,
   useTreeViewKeyboardNavigation,
-  useTreeViewContextValueBuilder,
+  useTreeViewIcons,
 ] as const;
 
 export type DefaultTreeViewPlugins = ConvertPluginsIntoSignatures<typeof DEFAULT_TREE_VIEW_PLUGINS>;
@@ -29,4 +26,4 @@ export interface DefaultTreeViewPluginParameters<R extends {}, Multiple extends
     UseTreeViewExpansionParameters,
     UseTreeViewFocusParameters,
     UseTreeViewSelectionParameters<Multiple>,
-    UseTreeViewContextValueBuilderParameters {}
+    UseTreeViewIconsParameters {}

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

@@ -51,6 +51,7 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<
   UseTreeViewExpansionInstance,
   {},
   {},
+  {},
   'expandedNodes',
   [UseTreeViewNodesSignature]
 >;

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

@@ -107,8 +107,3 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
 };
 
 useTreeViewFocus.getInitialState = () => ({ focusedNodeId: null });
-
-useTreeViewFocus.getDefaultizedParams = (params) => ({
-  ...params,
-  disabledItemsFocusable: params.disabledItemsFocusable ?? false,
-});

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

@@ -33,6 +33,7 @@ export type UseTreeViewFocusSignature = TreeViewPluginSignature<
   UseTreeViewFocusInstance,
   {},
   UseTreeViewFocusState,
+  {},
   never,
   [
     UseTreeViewIdSignature,

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

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

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

@@ -0,0 +1,15 @@
+import { TreeViewPlugin } from '../../models';
+import { UseTreeViewIconsSignature } from './useTreeViewIcons.types';
+
+export const useTreeViewIcons: TreeViewPlugin<UseTreeViewIconsSignature> = ({ params }) => {
+  return {
+    contextValue: {
+      icons: {
+        defaultCollapseIcon: params.defaultCollapseIcon,
+        defaultEndIcon: params.defaultEndIcon,
+        defaultExpandIcon: params.defaultExpandIcon,
+        defaultParentIcon: params.defaultParentIcon,
+      },
+    },
+  };
+};