[TreeView] Make the cancellable event types public (#14992)

mui · Oct 21, 2024 · afdf04e · afdf04e
1 parent 922c8d0
commit afdf04e
Show file tree

Hide file tree

Showing 21 changed files with 78 additions and 69 deletions.
diff --git a/...src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts b/...src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { TreeViewCancellableEvent } from '@mui/x-tree-view/models';
 import {
-  MuiCancellableEvent,
   TreeViewItemPlugin,
   useTreeViewContext,
   UseTreeViewItemsSignature,
@@ -38,7 +38,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
           return {};
         }
 
-        const handleDragStart = (event: React.DragEvent & MuiCancellableEvent) => {
+        const handleDragStart = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragStart?.(event);
           if (event.defaultMuiPrevented || event.defaultPrevented) {
             return;
@@ -66,7 +66,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
           instance.startDraggingItem(itemId);
         };
 
-        const handleRootDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
+        const handleRootDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
           if (event.defaultMuiPrevented) {
             return;
@@ -75,7 +75,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
           event.preventDefault();
         };
 
-        const handleRootDragEnd = (event: React.DragEvent & MuiCancellableEvent) => {
+        const handleRootDragEnd = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragEnd?.(event);
           if (event.defaultMuiPrevented) {
             return;
@@ -100,7 +100,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
           return {};
         }
 
-        const handleDragOver = (event: React.DragEvent & MuiCancellableEvent) => {
+        const handleDragOver = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragOver?.(event);
           if (event.defaultMuiPrevented || validActionsRef.current == null) {
             return;
@@ -119,7 +119,7 @@ export const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin<TreeItem2P
           });
         };
 
-        const handleDragEnter = (event: React.DragEvent & MuiCancellableEvent) => {
+        const handleDragEnter = (event: React.DragEvent & TreeViewCancellableEvent) => {
           externalEventHandlers.onDragEnter?.(event);
           if (event.defaultMuiPrevented) {
             return;

diff --git a/...-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts b/...-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts
@@ -3,9 +3,12 @@ import {
   DefaultizedProps,
   TreeViewPluginSignature,
   UseTreeViewItemsSignature,
-  MuiCancellableEventHandler,
 } from '@mui/x-tree-view/internals';
-import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
+import {
+  TreeViewItemId,
+  TreeViewItemsReorderingAction,
+  TreeViewCancellableEventHandler,
+} from '@mui/x-tree-view/models';
 import { TreeItem2DragAndDropOverlayProps } from '@mui/x-tree-view/TreeItem2DragAndDropOverlay';
 
 export interface UseTreeViewItemsReorderingInstance {
@@ -136,14 +139,14 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
 
 export interface UseTreeItem2RootSlotPropsFromItemsReordering {
   draggable?: true;
-  onDragStart?: MuiCancellableEventHandler<React.DragEvent>;
-  onDragOver?: MuiCancellableEventHandler<React.DragEvent>;
-  onDragEnd?: MuiCancellableEventHandler<React.DragEvent>;
+  onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
 }
 
 export interface UseTreeItem2ContentSlotPropsFromItemsReordering {
-  onDragEnter?: MuiCancellableEventHandler<React.DragEvent>;
-  onDragOver?: MuiCancellableEventHandler<React.DragEvent>;
+  onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
+  onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
 }
 
 export interface UseTreeItem2DragAndDropOverlaySlotPropsFromItemsReordering

diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/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 {

diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/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;
     }

diff --git a/packages/x-tree-view/src/TreeItem/useTreeItemState.ts b/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)) {

diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/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 {}
diff --git a/packages/x-tree-view/src/TreeItem2LabelInput/TreeItem2LabelInput.types.ts b/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';
 }
diff --git a/packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx b/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)) {

diff --git a/packages/x-tree-view/src/internals/index.ts b/packages/x-tree-view/src/internals/index.ts
@@ -16,8 +16,6 @@ export type {
   TreeViewInstance,
   DefaultizedProps,
   TreeViewItemPlugin,
-  MuiCancellableEvent,
-  MuiCancellableEventHandler,
 } from './models';
 
 // Core plugins

diff --git a/packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts b/packages/x-tree-view/src/internals/models/MuiCancellableEvent.ts
diff --git a/packages/x-tree-view/src/internals/models/index.ts b/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';
diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.ts b/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;

diff --git a/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/...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) {

diff --git a/...rc/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.ts b/...rc/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;
 }

diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.ts b/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;

diff --git a/packages/x-tree-view/src/models/events.ts b/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;
diff --git a/packages/x-tree-view/src/models/index.ts b/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';