diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json index 5a3135b2b98b..00c9508458ca 100644 --- a/docs/pages/x/api/tree-view/tree-item-2.json +++ b/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" }, diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 6173f6442d93..290aa0e5881d 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/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" } diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json index 47b99c2cf4d8..9c34f2f4220e 100644 --- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json +++ b/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't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." + "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor an item'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." } diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json index 88c3575d3fb9..d0471b434619 100644 --- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json +++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json @@ -14,6 +14,9 @@ "onFocus": { "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item'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's children.", + "groupTransition": "The component that animates the appearance / disappearance of the item's children.", "icon": "The icon to display next to the tree item's label." } } diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index fbc06f53a7f0..7f6a19725ab9 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/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 {} diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts index 01dd02df47f7..b9fa0319a12e 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts +++ b/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, * The system prop that allows defining system overrides as well as additional CSS styles. */ sx?: SxProps; + /** + * Callback fired when a key of the keyboard is pressed on the item. + */ + onKeyDown?: MuiCancellableEventHandler>; } export interface TreeItemOwnerState extends TreeItemProps { diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx b/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx index 47b555ff14c3..3f429e6a5860 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.tsx +++ b/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 {} diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts index 0bce978f46b9..697a62ab17df 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts +++ b/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>; + /** + * Callback fired when a key is pressed on the keyboard and the tree is in focus. + */ + onKeyDown?: MuiCancellableEventHandler>; } export interface TreeItem2OwnerState extends Omit, UseTreeItem2Status {}