Skip to content

Commit

Permalink
[TreeView] Make the cancellable event types public (#14992)
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle authored Oct 21, 2024
1 parent 922c8d0 commit afdf04e
Show file tree
Hide file tree
Showing 21 changed files with 78 additions and 69 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { TreeViewCancellableEvent } from '@mui/x-tree-view/models';
import {
MuiCancellableEvent,
TreeViewItemPlugin,
useTreeViewContext,
UseTreeViewItemsSignature,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions packages/x-tree-view/src/TreeItem/TreeItem.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/x-tree-view/src/TreeItem/TreeItemContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/x-tree-view/src/TreeItem/useTreeItemState.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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)) {
Expand Down
6 changes: 3 additions & 3 deletions packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down Expand Up @@ -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 {}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
import { TreeViewCancellableEventHandler } from '../models';

export interface TreeItem2LabelInputProps {
value?: string;
Expand All @@ -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';
}
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -150,7 +150,7 @@ export const useTreeItem2Utils = <
};

const handleSaveItemLabel = (
event: React.SyntheticEvent & MuiCancellableEvent,
event: React.SyntheticEvent & TreeViewCancellableEvent,
label: string,
) => {
if (!hasPlugin(instance, useTreeViewLabel)) {
Expand Down
2 changes: 0 additions & 2 deletions packages/x-tree-view/src/internals/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ export type {
TreeViewInstance,
DefaultizedProps,
TreeViewItemPlugin,
MuiCancellableEvent,
MuiCancellableEventHandler,
} from './models';

// Core plugins
Expand Down

This file was deleted.

1 change: 0 additions & 1 deletion packages/x-tree-view/src/internals/models/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,3 @@ export * from './helpers';
export * from './plugin';
export * from './itemPlugin';
export * from './treeView';
export * from './MuiCancellableEvent';
Original file line number Diff line number Diff line change
Expand Up @@ -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 = (
Expand Down Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions packages/x-tree-view/src/models/events.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export type TreeViewCancellableEvent = {
// TODO: Rename `defaultXTreeViewPrevented`
defaultMuiPrevented?: boolean;
};

export type TreeViewCancellableEventHandler<Event> = (
event: Event & TreeViewCancellableEvent,
) => void;
1 change: 1 addition & 0 deletions packages/x-tree-view/src/models/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export * from './items';
export * from './events';

// Utils shared across the X packages
export type { PropsFromSlot } from '@mui/x-internals/slots';
Loading

0 comments on commit afdf04e

Please sign in to comment.