@mui/x-tree-view 7.11.0 → 7.12.0

package/TreeItem2/TreeItem2.js

@@ -9,13 +9,14 @@ import unsupportedProp from '@mui/utils/unsupportedProp';
 import { alpha } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox from '@mui/material/Checkbox';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, createUseThemeProps } from '../internals/zero-styled';
 import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
 import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
+import { TreeItem2DragAndDropOverlay } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem2');
@@ -42,6 +43,7 @@ export const TreeItem2Content = styled('div', {
   width: '100%',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
+  position: 'relative',
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
@@ -176,7 +178,8 @@ const useUtilityClasses = ownerState => {
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
-    groupTransition: ['groupTransition']
+    groupTransition: ['groupTransition'],
+    dragAndDropOverlay: ['dragAndDropOverlay']
   };
   return composeClasses(slots, getTreeItemUtilityClass, classes);
 };
@@ -212,6 +215,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     getCheckboxProps,
     getLabelProps,
     getGroupTransitionProps,
+    getDragAndDropOverlayProps,
     status
   } = useTreeItem2({
     id,
@@ -274,6 +278,14 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
     ownerState: {},
     className: classes.groupTransition
   });
+  const DragAndDropOverlay = slots.dragAndDropOverlay ?? TreeItem2DragAndDropOverlay;
+  const dragAndDropOverlayProps = useSlotProps({
+    elementType: DragAndDropOverlay,
+    getSlotProps: getDragAndDropOverlayProps,
+    externalSlotProps: slotProps.dragAndDropOverlay,
+    ownerState: {},
+    className: classes.dragAndDropOverlay
+  });
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, {
@@ -284,7 +296,7 @@ export const TreeItem2 = /*#__PURE__*/React.forwardRef(function TreeItem2(inProp
             slots: slots,
             slotProps: slotProps
           })
-        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps))]
+        })), /*#__PURE__*/_jsx(Checkbox, _extends({}, checkboxProps)), /*#__PURE__*/_jsx(Label, _extends({}, labelProps)), /*#__PURE__*/_jsx(DragAndDropOverlay, _extends({}, dragAndDropOverlayProps))]
       })), children && /*#__PURE__*/_jsx(TreeItem2GroupTransition, _extends({
         as: GroupTransition
       }, groupTransitionProps))]

package/TreeItem2/TreeItem2.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
+import { SlotComponentProps } from '@mui/utils';
 import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2';
 import { TreeItemClasses } from '../TreeItem';
 import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon';
@@ -36,6 +36,12 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
      * @default TreeItem2Label
      */
     label?: React.ElementType;
+    /**
+     * The component that renders the overlay when an item reordering is ongoing.
+     * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+     * @default TreeItem2DragAndDropOverlay
+     */
+    dragAndDropOverlay?: React.ElementType;
 }
 export interface TreeItem2SlotProps extends TreeItem2IconSlotProps {
     root?: SlotComponentProps<'li', {}, {}>;
@@ -44,6 +50,7 @@ export interface TreeItem2SlotProps extends TreeItem2IconSlotProps {
     iconContainer?: SlotComponentProps<'div', {}, {}>;
     checkbox?: SlotComponentProps<'button', {}, {}>;
     label?: SlotComponentProps<'div', {}, {}>;
+    dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;
 }
 export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>, Omit<React.HTMLAttributes<HTMLLIElement>, 'onFocus'> {
     className?: string;

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TreeItem2DragAndDropOverlayProps } from './TreeItem2DragAndDropOverlay.types';
+declare function TreeItem2DragAndDropOverlay(props: TreeItem2DragAndDropOverlayProps): React.JSX.Element | null;
+export { TreeItem2DragAndDropOverlay };

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
+import { styled } from '../internals/zero-styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+const TreeItem2DragAndDropOverlayRoot = styled('div', {
+  name: 'MuiTreeItem2DragAndDropOverlay',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
+})(({
+  theme
+}) => ({
+  position: 'absolute',
+  left: 0,
+  display: 'flex',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  pointerEvents: 'none',
+  variants: [{
+    props: {
+      action: 'make-child'
+    },
+    style: {
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderRadius: theme.shape.borderRadius,
+      backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15)
+    }
+  }, {
+    props: {
+      action: 'reorder-above'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'reorder-below'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[100], 0.6)}`
+    })
+  }, {
+    props: {
+      action: 'move-to-parent'
+    },
+    style: _extends({
+      marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    }, theme.palette.mode === 'dark' && {
+      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+    })
+  }]
+}));
+function TreeItem2DragAndDropOverlay(props) {
+  if (props.action == null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(TreeItem2DragAndDropOverlayRoot, _extends({}, props));
+}
+export { TreeItem2DragAndDropOverlay };

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TreeViewItemsReorderingAction } from '../models';
+export interface TreeItem2DragAndDropOverlayProps {
+    action?: TreeViewItemsReorderingAction;
+    style?: React.CSSProperties;
+}

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.types.js

@@ -0,0 +1 @@
+export {};

package/TreeItem2DragAndDropOverlay/index.d.ts

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

package/TreeItem2DragAndDropOverlay/index.js

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

package/TreeItem2DragAndDropOverlay/package.json

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

package/TreeItem2Icon/TreeItem2Icon.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import resolveComponentProps from '@mui/utils/resolveComponentProps';
+import useSlotProps from '@mui/utils/useSlotProps';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItem2Icon(props) {

package/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
+import { SlotComponentProps } from '@mui/utils';
 import { UseTreeItem2Status } from '../useTreeItem2';
 export interface TreeItem2IconSlots {
     /**

package/TreeItem2Provider/TreeItem2Provider.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../internals/TreeViewProvider';
 function TreeItem2Provider(props) {
   const {
     children,

package/TreeView/TreeView.js

@@ -155,6 +155,12 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
+  /**
+   * Callback fired when the `content` slot of a given tree item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Callback fired when a tree item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
@@ -163,10 +169,9 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   onItemExpansionToggle: PropTypes.func,
   /**
-   * Callback fired when tree items are focused.
-   * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * Callback fired when a given tree item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
-   * @param {string} value of the focused item.
    */
   onItemFocus: PropTypes.func,
   /**

package/hooks/useTreeItem2Utils/useTreeItem2Utils.js

@@ -1,4 +1,4 @@
-import { useTreeViewContext } from '../../internals/TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../../internals/TreeViewProvider';
 const isItemExpandable = reactChildren => {
   if (Array.isArray(reactChildren)) {
     return reactChildren.length > 0 && reactChildren.some(isItemExpandable);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.11.0
+ * @mui/x-tree-view v7.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/TreeViewProvider/index.d.ts

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

package/internals/TreeViewProvider/index.js

@@ -1 +1,2 @@
-export { TreeViewProvider } from './TreeViewProvider';
+export { TreeViewProvider } from './TreeViewProvider';
+export { useTreeViewContext } from './useTreeViewContext';

package/internals/index.d.ts

@@ -1,7 +1,7 @@
 export { useTreeView } from './useTreeView';
-export { TreeViewProvider } from './TreeViewProvider';
+export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, } from './models';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, MuiCancellableEvent, MuiCancellableEventHandler, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';
@@ -13,8 +13,9 @@ export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavi
 export type { UseTreeViewKeyboardNavigationSignature } from './plugins/useTreeViewKeyboardNavigation';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
 export type { UseTreeViewIconsSignature, UseTreeViewIconsParameters, } from './plugins/useTreeViewIcons';
-export { useTreeViewItems } from './plugins/useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, } from './plugins/useTreeViewItems';
+export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID, } from './plugins/useTreeViewItems';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState, } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, } from './plugins/useTreeViewJSXItems';
-export { buildWarning } from './utils/warning';
+export { isTargetInDescendants } from './utils/tree';
+export { warnOnce } from './utils/warning';

package/internals/index.js

@@ -1,5 +1,5 @@
 export { useTreeView } from './useTreeView';
-export { TreeViewProvider } from './TreeViewProvider';
+export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
 
 // Core plugins
@@ -10,6 +10,7 @@ export { useTreeViewSelection } from './plugins/useTreeViewSelection';
 export { useTreeViewFocus } from './plugins/useTreeViewFocus';
 export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
 export { useTreeViewIcons } from './plugins/useTreeViewIcons';
-export { useTreeViewItems } from './plugins/useTreeViewItems';
+export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './plugins/useTreeViewItems';
 export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
-export { buildWarning } from './utils/warning';
+export { isTargetInDescendants } from './utils/tree';
+export { warnOnce } from './utils/warning';

package/internals/models/index.d.ts

@@ -1,3 +1,5 @@
 export * from './helpers';
 export * from './plugin';
+export * from './itemPlugin';
 export * from './treeView';
+export * from './MuiCancellableEvent';

package/internals/models/index.js

@@ -1,3 +1,5 @@
 export * from './helpers';
 export * from './plugin';
-export * from './treeView';
+export * from './itemPlugin';
+export * from './treeView';
+export * from './MuiCancellableEvent';

package/internals/models/itemPlugin.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { EventHandlers } from '@mui/utils';
+import type { UseTreeItem2ContentSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, UseTreeItem2RootSlotOwnProps } from '../../useTreeItem2';
+export interface TreeViewItemPluginSlotPropsEnhancerParams {
+    rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
+    contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
+    externalEventHandlers: EventHandlers;
+}
+type TreeViewItemPluginSlotPropsEnhancer<TSlotProps> = (params: TreeViewItemPluginSlotPropsEnhancerParams) => Partial<TSlotProps>;
+export interface TreeViewItemPluginSlotPropsEnhancers {
+    root?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2RootSlotOwnProps>;
+    content?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2ContentSlotOwnProps>;
+    dragAndDropOverlay?: TreeViewItemPluginSlotPropsEnhancer<UseTreeItem2DragAndDropOverlaySlotOwnProps>;
+}
+export interface TreeViewItemPluginResponse {
+    /**
+     * Root of the `content` slot enriched by the plugin.
+     */
+    contentRef?: React.RefCallback<HTMLElement> | null;
+    /**
+     * Ref of the `root` slot enriched by the plugin
+     */
+    rootRef?: React.RefCallback<HTMLLIElement> | null;
+    /**
+     * Callback to enhance the slot props of the Tree Item.
+     *
+     * Not all slots are enabled by default,
+     * if a new plugin needs to pass to an unconfigured slot,
+     * it just needs to be added to `TreeViewItemPluginSlotPropsEnhancers`
+     */
+    propsEnhancers?: TreeViewItemPluginSlotPropsEnhancers;
+}
+export interface TreeViewItemPluginOptions<TProps extends {}> extends Omit<TreeViewItemPluginResponse, 'propsEnhancers'> {
+    props: TProps;
+}
+export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
+export {};

package/internals/models/itemPlugin.js

@@ -0,0 +1 @@
+export {};

package/internals/models/plugin.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/base/utils';
+import { EventHandlers } from '@mui/utils';
 import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from './treeView';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginSignatures } from '../corePlugins';
+import { TreeViewItemPlugin } from './itemPlugin';
 import { TreeViewItemId } from '../../models';
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
     instance: TreeViewUsedInstance<TSignature>;
@@ -126,20 +127,6 @@ type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
 };
 export type TreeViewUsedModels<TSignature extends TreeViewAnyPluginSignature> = TSignature['models'] & RemoveSetValue<MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'models'>>;
 export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'events'>;
-export interface TreeViewItemPluginOptions<TProps extends {}> extends TreeViewItemPluginResponse {
-    props: TProps;
-}
-export interface TreeViewItemPluginResponse {
-    /**
-     * Root of the `content` slot enriched by the plugin.
-     */
-    contentRef?: React.RefCallback<HTMLElement> | null;
-    /**
-     * Ref of the `root` slot enriched by the plugin
-     */
-    rootRef?: React.RefCallback<HTMLLIElement> | null;
-}
-export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
 export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
     itemId: TreeViewItemId;
     children: React.ReactNode;

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

@@ -37,10 +37,9 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
 }
 export interface UseTreeViewFocusParameters {
     /**
-     * Callback fired when tree items are focused.
-     * @param {React.SyntheticEvent} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+     * Callback fired when a given tree item is focused.
+     * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
      * @param {string} itemId The id of the focused item.
-     * @param {string} value of the focused item.
      */
     onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/base/utils';
+import { SlotComponentProps } from '@mui/utils';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';

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

@@ -1,2 +1,3 @@
 export { useTreeViewItems } from './useTreeViewItems';
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, } from './useTreeViewItems.types';
+export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsDefaultizedParameters, UseTreeViewItemsState, } from './useTreeViewItems.types';
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

package/internals/plugins/useTreeViewItems/index.js

@@ -1 +1,2 @@
-export { useTreeViewItems } from './useTreeViewItems';
+export { useTreeViewItems } from './useTreeViewItems';
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -184,8 +184,11 @@ export const useTreeViewItems = ({
       areItemUpdatesPrevented
     },
     contextValue: {
-      disabledItemsFocusable: params.disabledItemsFocusable,
-      indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      items: {
+        onItemClick: params.onItemClick,
+        disabledItemsFocusable: params.disabledItemsFocusable,
+        indentationAtItemLevel: experimentalFeatures.indentationAtItemLevel ?? false
+      }
     }
   };
 };
@@ -216,5 +219,6 @@ useTreeViewItems.params = {
   isItemDisabled: true,
   getItemLabel: true,
   getItemId: true,
+  onItemClick: true,
   itemChildrenIndentation: true
 };

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { TreeViewItemMeta, DefaultizedProps, TreeViewPluginSignature } from '../../models';
 import { TreeViewBaseItem, TreeViewItemId } from '../../../models';
 interface TreeViewItemProps {
@@ -23,6 +24,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
      * Get the ids of a given item's children.
      * Those ids are returned in the order they should be rendered.
+     * To get the root items, pass `null` as the `itemId`.
      * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
      * @returns {TreeViewItemId[]} The ids of the item's children.
      */
@@ -80,7 +82,9 @@ export interface UseTreeViewItemsInstance<R extends {}> extends UseTreeViewItems
      */
     areItemUpdatesPrevented: () => boolean;
 }
-export interface UseTreeViewItemsParameters<R extends {}> {
+export interface UseTreeViewItemsParameters<R extends {
+    children?: R[];
+}> {
     /**
      * If `true`, will allow focus on disabled items.
      * @default false
@@ -112,6 +116,12 @@ export interface UseTreeViewItemsParameters<R extends {}> {
      * @default (item) => item.id
      */
     getItemId?: (item: R) => TreeViewItemId;
+    /**
+     * Callback fired when the `content` slot of a given tree item is clicked.
+     * @param {React.MouseEvent} event The DOM event that triggered the change.
+     * @param {string} itemId The id of the focused item.
+     */
+    onItemClick?: (event: React.MouseEvent, itemId: string) => void;
     /**
      * Horizontal indentation between an item and its children.
      * Examples: 24, "24px", "2rem", "2em".
@@ -119,7 +129,9 @@ export interface UseTreeViewItemsParameters<R extends {}> {
      */
     itemChildrenIndentation?: string | number;
 }
-export type UseTreeViewItemsDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
+export type UseTreeViewItemsDefaultizedParameters<R extends {
+    children?: R[];
+}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
 interface UseTreeViewItemsEventLookup {
     removeItem: {
         params: {
@@ -141,8 +153,10 @@ export interface UseTreeViewItemsState<R extends {}> {
         };
     };
 }
-interface UseTreeViewItemsContextValue extends Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable'> {
-    indentationAtItemLevel: boolean;
+interface UseTreeViewItemsContextValue {
+    items: Pick<UseTreeViewItemsDefaultizedParameters<any>, 'disabledItemsFocusable' | 'onItemClick'> & {
+        indentationAtItemLevel: boolean;
+    };
 }
 export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
     params: UseTreeViewItemsParameters<any>;

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -4,7 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-import { useTreeViewContext } from '../../TreeViewProvider/useTreeViewContext';
+import { useTreeViewContext } from '../../TreeViewProvider';
 import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
 import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from '../../utils/tree';
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from '../../utils/tree';
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
@@ -60,7 +60,7 @@ export const useTreeViewKeyboardNavigation = ({
     if (event.defaultMuiPrevented) {
       return;
     }
-    if (event.altKey || event.currentTarget !== event.target.closest('*[role="treeitem"]')) {
+    if (event.altKey || isTargetInDescendants(event.target, event.currentTarget)) {
       return;
     }
     const ctrlPressed = event.ctrlKey || event.metaKey;

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

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { TreeViewPluginSignature } from '../../models';
+import { TreeViewPluginSignature, MuiCancellableEvent } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-import { MuiCancellableEvent } from '../../models/MuiCancellableEvent';
 import { TreeViewItemId } from '../../../models';
 export interface UseTreeViewKeyboardNavigationInstance {
     /**

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/base/utils';
+import { EventHandlers } from '@mui/utils';
 import type { TreeViewContextValue } from '../TreeViewProvider';
 import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewInstance, TreeViewPublicAPI, TreeViewExperimentalFeatures } from '../models';
 export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {

package/internals/useTreeView/useTreeViewBuildContext.js

@@ -7,6 +7,8 @@ export const useTreeViewBuildContext = ({
   const runItemPlugins = itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
+    const pluginPropEnhancers = [];
+    const pluginPropEnhancersNames = {};
     plugins.forEach(plugin => {
       if (!plugin.itemPlugin) {
         return;
@@ -22,10 +24,30 @@ export const useTreeViewBuildContext = ({
       if (itemPluginResponse?.contentRef) {
         finalContentRef = itemPluginResponse.contentRef;
       }
+      if (itemPluginResponse?.propsEnhancers) {
+        pluginPropEnhancers.push(itemPluginResponse.propsEnhancers);
+
+        // Prepare a list of all the slots which are enhanced by at least one plugin
+        Object.keys(itemPluginResponse.propsEnhancers).forEach(propsEnhancerName => {
+          pluginPropEnhancersNames[propsEnhancerName] = true;
+        });
+      }
     });
+    const resolvePropsEnhancer = currentSlotName => currentSlotParams => {
+      const enhancedProps = {};
+      pluginPropEnhancers.forEach(propsEnhancersForCurrentPlugin => {
+        const propsEnhancerForCurrentPluginAndSlot = propsEnhancersForCurrentPlugin[currentSlotName];
+        if (propsEnhancerForCurrentPluginAndSlot != null) {
+          Object.assign(enhancedProps, propsEnhancerForCurrentPluginAndSlot(currentSlotParams));
+        }
+      });
+      return enhancedProps;
+    };
+    const propsEnhancers = Object.fromEntries(Object.keys(pluginPropEnhancersNames).map(propEnhancerName => [propEnhancerName, resolvePropsEnhancer(propEnhancerName)]));
     return {
       contentRef: finalContentRef,
-      rootRef: finalRootRef
+      rootRef: finalRootRef,
+      propsEnhancers
     };
   };
   const wrapItem = ({

package/internals/utils/tree.d.ts

@@ -22,3 +22,11 @@ export declare const getFirstNavigableItem: (instance: TreeViewInstance<[UseTree
 export declare const findOrderInTremauxTree: (instance: TreeViewInstance<[UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
 export declare const getNonDisabledItemsInRange: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
 export declare const getAllNavigableItems: (instance: TreeViewInstance<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
+/**
+ * Checks if the target is in a descendant of this item.
+ * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.
+ * @param {HTMLElement} target The target to check
+ * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
+ * @returns {boolean} Whether the target is in a descendant of this item
+ */
+export declare const isTargetInDescendants: (target: HTMLElement, itemRoot: HTMLElement | null) => boolean;