[TreeView] Improve the typing of the cancelable events (#13152)

docs/pages/x/api/tree-view/tree-item-2.json

@@ -6,7 +6,9 @@
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "id": { "type": { "name": "string" } },
     "label": { "type": { "name": "node" } },
+    "onBlur": { "type": { "name": "func" } },
     "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } },
+    "onKeyDown": { "type": { "name": "func" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

docs/pages/x/api/tree-view/tree-item.json

@@ -11,6 +11,7 @@
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "label": { "type": { "name": "node" } },
     "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } },
+    "onKeyDown": { "type": { "name": "func" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -41,7 +42,7 @@
     },
     {
       "name": "groupTransition",
-      "description": "The component that animates to appearance / disappearance of the item's children.",
+      "description": "The component that animates the appearance / disappearance of the item's children.",
       "default": "TreeItem2Group",
       "class": "MuiTreeItem-groupTransition"
     }

docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json

@@ -7,8 +7,12 @@
     "id": { "description": "The id attribute of the item. If not provided, it will be generated." },
     "itemId": { "description": "The id of the item. Must be unique." },
     "label": { "description": "The label of the item." },
+    "onBlur": { "description": "Callback fired when the item root is blurred." },
     "onFocus": {
-      "description": "This prop isn&#39;t supported. Use the <code>onItemFocus</code> callback on the tree if you need to monitor a item&#39;s focus."
+      "description": "This prop isn&#39;t supported. Use the <code>onItemFocus</code> callback on the tree if you need to monitor an item&#39;s focus."
+    },
+    "onKeyDown": {
+      "description": "Callback fired when a key is pressed on the keyboard and the tree is in focus."
     },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." }

docs/translations/api-docs/tree-view/tree-item/tree-item.json

@@ -14,6 +14,9 @@
     "onFocus": {
       "description": "This prop isn&#39;t supported. Use the <code>onItemFocus</code> callback on the tree if you need to monitor a item&#39;s focus."
     },
+    "onKeyDown": {
+      "description": "Callback fired when a key of the keyboard is pressed on the item."
+    },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
     "sx": {
@@ -60,7 +63,7 @@
     "collapseIcon": "The icon used to collapse the item.",
     "endIcon": "The icon displayed next to an end item.",
     "expandIcon": "The icon used to expand the item.",
-    "groupTransition": "The component that animates to appearance / disappearance of the item&#39;s children.",
+    "groupTransition": "The component that animates the appearance / disappearance of the item&#39;s children.",
     "icon": "The icon to display next to the tree item&#39;s label."
   }
 }

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

@@ -438,6 +438,10 @@ TreeItem.propTypes = {
    * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
    */
   onFocus: unsupportedProp,
+  /**
+   * Callback fired when a key of the keyboard is pressed on the item.
+   */
+  onKeyDown: PropTypes.func,
   /**
    * The props used for each component slot.
    * @default {}

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

@@ -7,6 +7,7 @@ import { TreeItemContentProps } from './TreeItemContent';
 import { TreeItemClasses } from './treeItemClasses';
 import { TreeViewItemId } from '../models';
 import { SlotComponentPropsFromProps } from '../internals/models';
+import { MuiCancellableEventHandler } from '../internals/models/MuiCancellableEvent';
 
 export interface TreeItemSlots {
   /**
@@ -26,7 +27,7 @@ export interface TreeItemSlots {
    */
   icon?: React.ElementType;
   /**
-   * The component that animates to appearance / disappearance of the item's children.
+   * The component that animates the appearance / disappearance of the item's children.
    * @default TreeItem2Group
    */
   groupTransition?: React.ElementType;
@@ -91,6 +92,10 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  /**
+   * Callback fired when a key of the keyboard is pressed on the item.
+   */
+  onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 
 export interface TreeItemOwnerState extends TreeItemProps {

packages/x-tree-view/src/TreeItem2/TreeItem2.tsx

@@ -347,11 +347,19 @@ TreeItem2.propTypes = {
    * The label of the item.
    */
   label: PropTypes.node,
+  /**
+   * Callback fired when the item root is blurred.
+   */
+  onBlur: PropTypes.func,
   /**
    * This prop isn't supported.
-   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
    */
   onFocus: unsupportedProp,
+  /**
+   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
+   */
+  onKeyDown: PropTypes.func,
   /**
    * The props used for each component slot.
    * @default {}

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

@@ -3,6 +3,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 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 {
   /**
@@ -67,9 +68,17 @@ export interface TreeItem2Props
   slotProps?: TreeItem2SlotProps;
   /**
    * This prop isn't supported.
-   * Use the `onItemFocus` callback on the tree if you need to monitor a item's focus.
+   * Use the `onItemFocus` callback on the tree if you need to monitor an item's focus.
    */
   onFocus?: null;
+  /**
+   * Callback fired when the item root is blurred.
+   */
+  onBlur?: MuiCancellableEventHandler<React.FocusEvent<HTMLLIElement>>;
+  /**
+   * Callback fired when a key is pressed on the keyboard and the tree is in focus.
+   */
+  onKeyDown?: MuiCancellableEventHandler<React.KeyboardEvent<HTMLLIElement>>;
 }
 
 export interface TreeItem2OwnerState extends Omit<TreeItem2Props, 'disabled'>, UseTreeItem2Status {}