[TreeView] Make the cancellable event types public

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

@@ -5,9 +5,8 @@ import { TransitionProps } from '@mui/material/transitions';
 import { SxProps } from '@mui/system';
 import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
-import { TreeViewItemId } from '../models';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
 import { SlotComponentPropsFromProps } from '../internals/models';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
 import { UseTreeViewIconsSignature } from '../internals/plugins/useTreeViewIcons';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
@@ -103,7 +102,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
   /**
    * Callback fired when a key of the keyboard is pressed on the item.
    */
-  onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 
 export interface TreeItemOwnerState extends TreeItemProps {

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

@@ -8,7 +8,7 @@ import {
   TreeItem2DragAndDropOverlayProps,
 } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2LabelInput, TreeItem2LabelInputProps } from '../TreeItem2LabelInput';
-import { MuiCancellableEvent } from '../internals/models';
+import { TreeViewCancellableEvent } from '../models';
 
 export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
   className?: string;
@@ -136,7 +136,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
     }
   };
 
-  const handleLabelDoubleClick = (event: React.MouseEvent & MuiCancellableEvent) => {
+  const handleLabelDoubleClick = (event: React.MouseEvent & TreeViewCancellableEvent) => {
     if (event.defaultMuiPrevented) {
       return;
     }

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

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEvent } from '../models';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';
@@ -107,7 +107,7 @@ export function useTreeItemState(itemId: string) {
   };
 
   const handleSaveItemLabel = (
-    event: React.SyntheticEvent & MuiCancellableEvent,
+    event: React.SyntheticEvent & TreeViewCancellableEvent,
     label: string,
   ) => {
     if (!hasPlugin(instance, useTreeViewLabel)) {

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

@@ -3,7 +3,7 @@ import { SlotComponentProps } from '@mui/utils';
 import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2';
 import { TreeItemClasses } from '../TreeItem';
 import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEventHandler } from '../models';
 
 export interface TreeItem2Slots extends TreeItem2IconSlots {
   /**
@@ -87,11 +87,11 @@ export interface TreeItem2Props
   /**
    * Callback fired when the item root is blurred.
    */
-  onBlur?: MuiCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
   /**
    * Callback fired when a key is pressed on the keyboard and the tree is in focus.
    */
-  onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 
 export interface TreeItem2OwnerState extends Omit<TreeItem2Props, 'disabled'>, UseTreeItem2Status {}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEventHandler } from '../models';
 
 export interface TreeItem2LabelInputProps {
   value?: string;
@@ -8,8 +8,8 @@ export interface TreeItem2LabelInputProps {
    */
   'data-element'?: 'labelInput';
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
-  onBlur?: MuiCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
+  onKeyDown?: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLInputElement>>;
+  onBlur?: TreeViewCancellableEventHandler<React.FocusEvent<HTMLInputElement>>;
   autoFocus?: true;
   type?: 'text';
 }

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCancellableEvent } from '../../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEvent } from '../../models';
 import { useTreeViewContext } from '../../internals/TreeViewProvider';
 import { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
@@ -150,7 +150,7 @@ export const useTreeItem2Utils = <
   };
 
   const handleSaveItemLabel = (
-    event: React.SyntheticEvent & MuiCancellableEvent,
+    event: React.SyntheticEvent & TreeViewCancellableEvent,
     label: string,
   ) => {
     if (!hasPlugin(instance, useTreeViewLabel)) {

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

@@ -16,8 +16,6 @@ export type {
   TreeViewInstance,
   DefaultizedProps,
   TreeViewItemPlugin,
-  MuiCancellableEvent,
-  MuiCancellableEventHandler,
 } from './models';
 
 // Core plugins

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

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

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

@@ -7,7 +7,7 @@ import { UseTreeViewFocusSignature } from './useTreeViewFocus.types';
 import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
 import { getActiveElement } from '../../utils/utils';
 import { getFirstNavigableItem } from '../../utils/tree';
-import { MuiCancellableEvent } from '../../models/MuiCancellableEvent';
+import { TreeViewCancellableEvent } from '../../../models';
 import { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils';
 
 const useDefaultFocusableItemId = (
@@ -110,7 +110,7 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
 
   const createRootHandleFocus =
     (otherHandlers: EventHandlers) =>
-    (event: React.FocusEvent<HTMLUListElement> & MuiCancellableEvent) => {
+    (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => {
       otherHandlers.onFocus?.(event);
       if (event.defaultMuiPrevented) {
         return;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { TreeViewItemMeta, TreeViewPlugin, MuiCancellableEvent } from '../../models';
+import { TreeViewCancellableEvent } from '../../../models';
+import { TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import {
   getFirstNavigableItem,
   getLastNavigableItem,
@@ -85,7 +86,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
 
   // ARIA specification: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/#keyboardinteraction
   const handleItemKeyDown = (
-    event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent,
+    event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent,
     itemId: string,
   ) => {
     if (event.defaultMuiPrevented) {

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { TreeViewPluginSignature, MuiCancellableEvent } from '../../models';
+import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';
 import { UseTreeViewExpansionSignature } from '../useTreeViewExpansion';
-import { TreeViewItemId } from '../../../models';
+import { TreeViewItemId, TreeViewCancellableEvent } from '../../../models';
 import { UseTreeViewLabelSignature } from '../useTreeViewLabel';
 
 export interface UseTreeViewKeyboardNavigationInstance {
@@ -18,11 +18,11 @@ export interface UseTreeViewKeyboardNavigationInstance {
   /**
    * Callback fired when a key is pressed on an item.
    * Handles all the keyboard navigation logic.
-   * @param {React.KeyboardEvent<HTMLElement> & MuiCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
    * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
    */
   handleItemKeyDown: (
-    event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent,
+    event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent,
     itemId: TreeViewItemId,
   ) => void;
 }

packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTreeViewContext } from '../../TreeViewProvider';
-import { MuiCancellableEvent, TreeViewItemPlugin } from '../../models';
+import { TreeViewCancellableEvent } from '../../../models';
+import { TreeViewItemPlugin } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import {
   UseTreeItem2LabelInputSlotPropsFromLabelEditing,
@@ -34,7 +35,7 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any> = ({ props }) =
         }
 
         const handleKeydown = (
-          event: React.KeyboardEvent<HTMLInputElement> & MuiCancellableEvent,
+          event: React.KeyboardEvent<HTMLInputElement> & TreeViewCancellableEvent,
         ) => {
           externalEventHandlers.onKeyDown?.(event);
           if (event.defaultMuiPrevented) {
@@ -49,7 +50,9 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any> = ({ props }) =
           }
         };
 
-        const handleBlur = (event: React.FocusEvent<HTMLInputElement> & MuiCancellableEvent) => {
+        const handleBlur = (
+          event: React.FocusEvent<HTMLInputElement> & TreeViewCancellableEvent,
+        ) => {
           externalEventHandlers.onBlur?.(event);
           if (event.defaultMuiPrevented) {
             return;

packages/x-tree-view/src/models/events.ts

@@ -0,0 +1,8 @@
+export type TreeViewCancellableEvent = {
+  // TODO: Rename `defaultXTreeViewPrevented`
+  defaultMuiPrevented?: boolean;
+};
+
+export type TreeViewCancellableEventHandler<Event> = (
+  event: Event & TreeViewCancellableEvent,
+) => void;

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

@@ -1,4 +1,5 @@
 export * from './items';
+export * from './events';
 
 // Utils shared across the X packages
 export type { PropsFromSlot } from '@mui/x-internals/slots';

packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { EventHandlers } from '@mui/utils';
 import extractEventHandlers from '@mui/utils/extractEventHandlers';
 import useForkRef from '@mui/utils/useForkRef';
+import { TreeViewCancellableEvent } from '../models';
 import {
   UseTreeItem2Parameters,
   UseTreeItem2ReturnValue,
@@ -19,10 +20,7 @@ import {
   UseTreeItem2ContentSlotPropsFromUseTreeItem,
 } from './useTreeItem2.types';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
-import {
-  MuiCancellableEvent,
-  TreeViewItemPluginSlotPropsEnhancerParams,
-} from '../internals/models';
+import { TreeViewItemPluginSlotPropsEnhancerParams } from '../internals/models';
 import { useTreeItem2Utils } from '../hooks/useTreeItem2Utils';
 import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 import { isTargetInDescendants } from '../internals/utils/tree';
@@ -65,7 +63,7 @@ export const useTreeItem2 = <
 
   const createRootHandleFocus =
     (otherHandlers: EventHandlers) =>
-    (event: React.FocusEvent<HTMLElement> & MuiCancellableEvent) => {
+    (event: React.FocusEvent<HTMLElement> & TreeViewCancellableEvent) => {
       otherHandlers.onFocus?.(event);
       if (event.defaultMuiPrevented) {
         return;
@@ -79,7 +77,7 @@ export const useTreeItem2 = <
 
   const createRootHandleBlur =
     (otherHandlers: EventHandlers) =>
-    (event: React.FocusEvent<HTMLElement> & MuiCancellableEvent) => {
+    (event: React.FocusEvent<HTMLElement> & TreeViewCancellableEvent) => {
       otherHandlers.onBlur?.(event);
       if (event.defaultMuiPrevented) {
         return;
@@ -109,7 +107,7 @@ export const useTreeItem2 = <
 
   const createRootHandleKeyDown =
     (otherHandlers: EventHandlers) =>
-    (event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent) => {
+    (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent) => {
       otherHandlers.onKeyDown?.(event);
       if (
         event.defaultMuiPrevented ||
@@ -122,7 +120,7 @@ export const useTreeItem2 = <
     };
 
   const createLabelHandleDoubleClick =
-    (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => {
       otherHandlers.onDoubleClick?.(event);
       if (event.defaultMuiPrevented) {
         return;
@@ -131,7 +129,7 @@ export const useTreeItem2 = <
     };
 
   const createContentHandleClick =
-    (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => {
       otherHandlers.onClick?.(event);
       onItemClick?.(event, itemId);
 
@@ -148,7 +146,7 @@ export const useTreeItem2 = <
     };
 
   const createContentHandleMouseDown =
-    (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => {
       otherHandlers.onMouseDown?.(event);
       if (event.defaultMuiPrevented) {
         return;
@@ -162,7 +160,7 @@ export const useTreeItem2 = <
 
   const createCheckboxHandleChange =
     (otherHandlers: EventHandlers) =>
-    (event: React.ChangeEvent<HTMLInputElement> & MuiCancellableEvent) => {
+    (event: React.ChangeEvent<HTMLInputElement> & TreeViewCancellableEvent) => {
       otherHandlers.onChange?.(event);
       if (event.defaultMuiPrevented) {
         return;
@@ -176,7 +174,7 @@ export const useTreeItem2 = <
     };
 
   const createIconContainerHandleClick =
-    (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
+    (otherHandlers: EventHandlers) => (event: React.MouseEvent & TreeViewCancellableEvent) => {
       otherHandlers.onClick?.(event);
       if (event.defaultMuiPrevented) {
         return;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewItemId } from '../models';
-import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models';
+import { TreeViewItemId, TreeViewCancellableEventHandler } from '../models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';
@@ -41,9 +41,9 @@ export interface UseTreeItem2RootSlotPropsFromUseTreeItem {
   'aria-expanded': React.AriaAttributes['aria-expanded'];
   'aria-selected': React.AriaAttributes['aria-selected'];
   'aria-disabled': React.AriaAttributes['aria-disabled'];
-  onFocus: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-  onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
-  onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
+  onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+  onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
+  onKeyDown: TreeViewCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
   ref: React.RefCallback<HTMLLIElement>;
   /**
    * Only defined when the `indentationAtItemLevel` experimental feature is enabled.
@@ -57,8 +57,8 @@ export type UseTreeItem2RootSlotProps<ExternalProps = {}> = ExternalProps &
   UseTreeItem2RootSlotOwnProps;
 
 export interface UseTreeItem2ContentSlotPropsFromUseTreeItem {
-  onClick: MuiCancellableEventHandler<React.MouseEvent>;
-  onMouseDown: MuiCancellableEventHandler<React.MouseEvent>;
+  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
+  onMouseDown: TreeViewCancellableEventHandler<React.MouseEvent>;
   ref: React.RefCallback<HTMLDivElement> | null;
   status: UseTreeItem2Status;
   /**
@@ -74,15 +74,15 @@ export type UseTreeItem2ContentSlotProps<ExternalProps = {}> = ExternalProps &
   UseTreeItem2ContentSlotOwnProps;
 
 export interface UseTreeItem2IconContainerSlotOwnProps {
-  onClick: MuiCancellableEventHandler<React.MouseEvent>;
+  onClick: TreeViewCancellableEventHandler<React.MouseEvent>;
 }
 
 export type UseTreeItemIconContainerSlotProps<ExternalProps = {}> = ExternalProps &
   UseTreeItem2IconContainerSlotOwnProps;
 
 export interface UseTreeItem2LabelSlotOwnProps {
   children: React.ReactNode;
-  onDoubleClick: MuiCancellableEventHandler<React.MouseEvent>;
+  onDoubleClick: TreeViewCancellableEventHandler<React.MouseEvent>;
   /**
    * Only defined when the `isItemEditable` experimental feature is enabled.
    */
@@ -100,7 +100,7 @@ export type UseTreeItem2LabelInputSlotProps<ExternalProps = {}> = ExternalProps
 export interface UseTreeItem2CheckboxSlotOwnProps {
   visible: boolean;
   checked: boolean;
-  onChange: MuiCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+  onChange: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
   disabled: boolean;
   ref: React.RefObject<HTMLButtonElement>;
   tabIndex: -1;