[TreeView] Make the cancellable event types public

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

@@ -3,3 +3,7 @@ export type MuiCancellableEvent = {
 };
 
 export type MuiCancellableEventHandler<Event> = (event: Event & MuiCancellableEvent) => void;
+
+export const shouldSkipEventHandler = (event: MuiCancellableEvent): boolean => {
+  return event.defaultMuiPrevented === true;
+};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 import {
-  MuiCancellableEvent,
   TreeViewItemPlugin,
   useTreeViewContext,
   UseTreeViewItemsSignature,
@@ -40,7 +40,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
 
         const handleDragStart = (event: React.DragEvent & MuiCancellableEvent) => {
           externalEventHandlers.onDragStart?.(event);
-          if (event.defaultMuiPrevented || event.defaultPrevented) {
+          if (shouldSkipEventHandler(event) || event.defaultPrevented) {
             return;
           }
 
@@ -68,7 +68,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
 
         const handleRootDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
-          if (event.defaultMuiPrevented) {
+          if (shouldSkipEventHandler(event)) {
             return;
           }
 
@@ -77,7 +77,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
 
         const handleRootDragEnd = (event: React.DragEvent & MuiCancellableEvent) => {
           externalEventHandlers.onDragEnd?.(event);
-          if (event.defaultMuiPrevented) {
+          if (shouldSkipEventHandler(event)) {
             return;
           }
 
@@ -102,7 +102,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
 
         const handleDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
-          if (event.defaultMuiPrevented || validActionsRef.current == null) {
+          if (shouldSkipEventHandler(event) || validActionsRef.current == null) {
             return;
           }
 
@@ -121,7 +121,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
 
         const handleDragEnter = (event: React.DragEvent & MuiCancellableEvent) => {
           externalEventHandlers.onDragEnter?.(event);
-          if (event.defaultMuiPrevented) {
+          if (shouldSkipEventHandler(event)) {
             return;
           }
 

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

@@ -3,11 +3,11 @@ import { Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/utils';
 import { TransitionProps } from '@mui/material/transitions';
 import { SxProps } from '@mui/system';
+import { MuiCancellableEventHandler } from '@mui/x-internals/cancellableEvent';
 import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
 import { TreeViewItemId } 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';

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

@@ -2,13 +2,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Checkbox from '@mui/material/Checkbox';
+import { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 import { useTreeItemState } from './useTreeItemState';
 import {
   TreeItem2DragAndDropOverlay,
   TreeItem2DragAndDropOverlayProps,
 } from '../TreeItem2DragAndDropOverlay';
 import { TreeItem2LabelInput, TreeItem2LabelInputProps } from '../TreeItem2LabelInput';
-import { MuiCancellableEvent } from '../internals/models';
 
 export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement> {
   className?: string;
@@ -137,7 +137,7 @@ const TreeItemContent = React.forwardRef(function TreeItemContent(
   };
 
   const handleLabelDoubleClick = (event: React.MouseEvent & MuiCancellableEvent) => {
-    if (event.defaultMuiPrevented) {
+    if (shouldSkipEventHandler(event)) {
       return;
     }
     toggleItemEditing();

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 { MuiCancellableEvent } from '@mui/x-internals/cancellableEvent';
 import { useTreeViewContext } from '../internals/TreeViewProvider';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../internals/plugins/useTreeViewExpansion';

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
+import { MuiCancellableEventHandler } from '@mui/x-internals/cancellableEvent';
 import { UseTreeItem2Parameters, UseTreeItem2Status } from '../useTreeItem2';
 import { TreeItemClasses } from '../TreeItem';
 import { TreeItem2IconSlotProps, TreeItem2IconSlots } from '../TreeItem2Icon';
-import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
 
 export interface TreeItem2Slots extends TreeItem2IconSlots {
   /**

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 { MuiCancellableEventHandler } from '@mui/x-internals/cancellableEvent';
 
 export interface TreeItem2LabelInputProps {
   value?: string;

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 { MuiCancellableEvent } from '@mui/x-internals/cancellableEvent';
 import { useTreeViewContext } from '../../internals/TreeViewProvider';
 import { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
 import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';

packages/x-tree-view/src/internals/hooks/useInstanceEventHandler.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 import { UnregisterToken, CleanupTracking } from '../utils/cleanupTracking/CleanupTracking';
 import { TimerBasedCleanupTracking } from '../utils/cleanupTracking/TimerBasedCleanupTracking';
 import { FinalizationRegistryBasedCleanupTracking } from '../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
@@ -50,9 +51,11 @@ export function createUseInstanceEventHandler(registryContainer: RegistryContain
         params,
         event,
       ) => {
-        if (!event.defaultMuiPrevented) {
-          handlerRef.current?.(params, event);
+        if (shouldSkipEventHandler(event)) {
+          return;
         }
+
+        handlerRef.current?.(params, event);
       };
 
       subscription.current = instance.$$subscribeEvent(eventName as string, enhancedHandler);
@@ -85,9 +88,11 @@ export function createUseInstanceEventHandler(registryContainer: RegistryContain
           params,
           event,
         ) => {
-          if (!event.defaultMuiPrevented) {
-            handlerRef.current?.(params, event);
+          if (shouldSkipEventHandler(event)) {
+            return;
           }
+
+          handlerRef.current?.(params, event);
         };
 
         subscription.current = instance.$$subscribeEvent(eventName as string, enhancedHandler);

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/events.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { MuiCancellableEvent } from '@mui/x-internals/cancellableEvent';
 
 export interface TreeViewEventLookupElement {
   params: object;
@@ -14,6 +15,4 @@ export type MuiBaseEvent =
   | DocumentEventMap[keyof DocumentEventMap]
   | {};
 
-export type MuiEvent<E extends MuiBaseEvent = MuiBaseEvent> = E & {
-  defaultMuiPrevented?: boolean;
-};
+export type MuiEvent<E extends MuiBaseEvent = MuiBaseEvent> = E & MuiCancellableEvent;

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

@@ -2,12 +2,12 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { EventHandlers } from '@mui/utils';
 import ownerDocument from '@mui/utils/ownerDocument';
+import { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 import { TreeViewPlugin, TreeViewUsedInstance } from '../../models';
 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 { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils';
 
 const useDefaultFocusableItemId = (
@@ -112,7 +112,7 @@ export const useTreeViewFocus: TreeViewPlugin<UseTreeViewFocusSignature> = ({
     (otherHandlers: EventHandlers) =>
     (event: React.FocusEvent<HTMLUListElement> & MuiCancellableEvent) => {
       otherHandlers.onFocus?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         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 { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
+import { TreeViewItemMeta, TreeViewPlugin } from '../../models';
 import {
   getFirstNavigableItem,
   getLastNavigableItem,
@@ -88,7 +89,7 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
     event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent,
     itemId: string,
   ) => {
-    if (event.defaultMuiPrevented) {
+    if (shouldSkipEventHandler(event)) {
       return;
     }
 

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TreeViewPluginSignature, MuiCancellableEvent } from '../../models';
+import { MuiCancellableEvent } from '@mui/x-internals/cancellableEvent';
+import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';
 import { UseTreeViewFocusSignature } from '../useTreeViewFocus';

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 import { useTreeViewContext } from '../../TreeViewProvider';
-import { MuiCancellableEvent, TreeViewItemPlugin } from '../../models';
+import { TreeViewItemPlugin } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import {
   UseTreeItem2LabelInputSlotPropsFromLabelEditing,
@@ -37,7 +38,7 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any> = ({ props }) =
           event: React.KeyboardEvent<HTMLInputElement> & MuiCancellableEvent,
         ) => {
           externalEventHandlers.onKeyDown?.(event);
-          if (event.defaultMuiPrevented) {
+          if (shouldSkipEventHandler(event)) {
             return;
           }
           const target = event.target as HTMLInputElement;
@@ -51,7 +52,7 @@ export const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any> = ({ props }) =
 
         const handleBlur = (event: React.FocusEvent<HTMLInputElement> & MuiCancellableEvent) => {
           externalEventHandlers.onBlur?.(event);
-          if (event.defaultMuiPrevented) {
+          if (shouldSkipEventHandler(event)) {
             return;
           }
 

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

@@ -2,3 +2,7 @@ export * from './items';
 
 // Utils shared across the X packages
 export type { PropsFromSlot } from '@mui/x-internals/slots';
+export type {
+  MuiCancellableEvent,
+  MuiCancellableEventHandler,
+} from '@mui/x-internals/cancellableEvent';

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 { MuiCancellableEvent, shouldSkipEventHandler } from '@mui/x-internals/cancellableEvent';
 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';
@@ -67,7 +65,7 @@ export const useTreeItem2 = <
     (otherHandlers: EventHandlers) =>
     (event: React.FocusEvent<HTMLElement> & MuiCancellableEvent) => {
       otherHandlers.onFocus?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
 
@@ -81,7 +79,7 @@ export const useTreeItem2 = <
     (otherHandlers: EventHandlers) =>
     (event: React.FocusEvent<HTMLElement> & MuiCancellableEvent) => {
       otherHandlers.onBlur?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
 
@@ -112,7 +110,7 @@ export const useTreeItem2 = <
     (event: React.KeyboardEvent<HTMLElement> & MuiCancellableEvent) => {
       otherHandlers.onKeyDown?.(event);
       if (
-        event.defaultMuiPrevented ||
+        shouldSkipEventHandler(event) ||
         (event.target as HTMLElement)?.dataset?.element === 'labelInput'
       ) {
         return;
@@ -124,7 +122,7 @@ export const useTreeItem2 = <
   const createLabelHandleDoubleClick =
     (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
       otherHandlers.onDoubleClick?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
       interactions.toggleItemEditing();
@@ -135,7 +133,10 @@ export const useTreeItem2 = <
       otherHandlers.onClick?.(event);
       onItemClick?.(event, itemId);
 
-      if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target as HTMLElement)) {
+      if (
+        shouldSkipEventHandler(event) ||
+        checkboxRef.current?.contains(event.target as HTMLElement)
+      ) {
         return;
       }
       if (expansionTrigger === 'content') {
@@ -150,7 +151,7 @@ export const useTreeItem2 = <
   const createContentHandleMouseDown =
     (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
       otherHandlers.onMouseDown?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
 
@@ -164,7 +165,7 @@ export const useTreeItem2 = <
     (otherHandlers: EventHandlers) =>
     (event: React.ChangeEvent<HTMLInputElement> & MuiCancellableEvent) => {
       otherHandlers.onChange?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
 
@@ -178,7 +179,7 @@ export const useTreeItem2 = <
   const createIconContainerHandleClick =
     (otherHandlers: EventHandlers) => (event: React.MouseEvent & MuiCancellableEvent) => {
       otherHandlers.onClick?.(event);
-      if (event.defaultMuiPrevented) {
+      if (shouldSkipEventHandler(event)) {
         return;
       }
       if (expansionTrigger === 'iconContainer') {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { MuiCancellableEventHandler } from '@mui/x-internals/cancellableEvent';
 import { TreeViewItemId } from '../models';
-import { TreeViewPublicAPI, MuiCancellableEventHandler } from '../internals/models';
+import { TreeViewPublicAPI } from '../internals/models';
 import { UseTreeViewSelectionSignature } from '../internals/plugins/useTreeViewSelection';
 import { UseTreeViewItemsSignature } from '../internals/plugins/useTreeViewItems';
 import { UseTreeViewFocusSignature } from '../internals/plugins/useTreeViewFocus';

scripts/x-tree-view-pro.exports.json

@@ -3,6 +3,8 @@
   { "name": "getSimpleTreeViewUtilityClass", "kind": "Function" },
   { "name": "getTreeItemUtilityClass", "kind": "Function" },
   { "name": "getTreeViewUtilityClass", "kind": "Function" },
+  { "name": "MuiCancellableEvent", "kind": "TypeAlias" },
+  { "name": "MuiCancellableEventHandler", "kind": "TypeAlias" },
   { "name": "MultiSelectTreeViewProps", "kind": "TypeAlias" },
   { "name": "PropsFromSlot", "kind": "TypeAlias" },
   { "name": "RichTreeViewPro", "kind": "Variable" },

scripts/x-tree-view.exports.json

@@ -3,6 +3,8 @@
   { "name": "getSimpleTreeViewUtilityClass", "kind": "Function" },
   { "name": "getTreeItemUtilityClass", "kind": "Function" },
   { "name": "getTreeViewUtilityClass", "kind": "Function" },
+  { "name": "MuiCancellableEvent", "kind": "TypeAlias" },
+  { "name": "MuiCancellableEventHandler", "kind": "TypeAlias" },
   { "name": "MultiSelectTreeViewProps", "kind": "TypeAlias" },
   { "name": "PropsFromSlot", "kind": "TypeAlias" },
   { "name": "RICH_TREE_VIEW_PLUGINS", "kind": "Variable" },