@mui/x-tree-view 7.20.0 → 7.22.0

package/TreeItem/TreeItem.types.d.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';
@@ -28,7 +27,7 @@ export interface TreeItemSlots {
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ElementType;
     /**
@@ -66,13 +65,13 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
     slotProps?: TreeItemSlotProps;
     /**
      * The component used to render the content of the item.
-     * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+     * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
      * @default TreeItemContent
      */
     ContentComponent?: React.JSXElementConstructor<TreeItemContentProps>;
     /**
      * Props applied to ContentComponent.
-     * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/.
+     * @deprecated Consider using the `<TreeItem2 />` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/.
      */
     ContentProps?: React.HTMLAttributes<HTMLElement> & {
         ref?: React.Ref<HTMLElement>;
@@ -88,7 +87,7 @@ export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>,
      */
     onFocus?: null;
     /**
-     * The tree item label.
+     * The Tree Item label.
      */
     label?: React.ReactNode;
     /**
@@ -102,7 +101,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 {
     expanded: boolean;
@@ -112,7 +111,7 @@ export interface TreeItemOwnerState extends TreeItemProps {
     indentationAtItemLevel: boolean;
 }
 /**
- * Plugins that need to be present in the Tree View in order for `TreeItem` to work correctly.
+ * Plugins that need to be present in the Tree View in order for Tree Item to work correctly.
  */
 export type TreeItemMinimalPlugins = readonly [
     UseTreeViewIconsSignature,
@@ -123,6 +122,6 @@ export type TreeItemMinimalPlugins = readonly [
     UseTreeViewKeyboardNavigationSignature
 ];
 /**
- * Plugins that `TreeItem` can use if they are present, but are not required.
+ * Plugins that Tree Item can use if they are present, but are not required.
  */
 export type TreeItemOptionalPlugins = readonly [];

package/TreeItem/TreeItemContent.d.ts

@@ -17,7 +17,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         focused: string;
         /** State class applied to the element when disabled. */
         disabled: string;
-        /** Styles applied to the tree item icon and collapse/expand icon. */
+        /** Styles applied to the Tree Item icon and collapse/expand icon. */
         iconContainer: string;
         /** Styles applied to the label element. */
         label: string;
@@ -31,7 +31,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
         editable: string;
     };
     /**
-     * The tree item label.
+     * The Tree Item label.
      */
     label?: React.ReactNode;
     /**
@@ -39,15 +39,15 @@ export interface TreeItemContentProps extends React.HTMLAttributes<HTMLElement>
      */
     itemId: string;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ReactNode;
     /**
-     * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+     * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
      */
     expansionIcon?: React.ReactNode;
     /**
-     * The icon to display next to the tree item's label. Either a parent or end icon.
+     * The icon to display next to the Tree Item's label. Either a parent or end icon.
      */
     displayIcon?: React.ReactNode;
     dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps;

package/TreeItem/TreeItemContent.js

@@ -110,7 +110,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   /**
-   * The icon to display next to the tree item's label. Either a parent or end icon.
+   * The icon to display next to the Tree Item's label. Either a parent or end icon.
    */
   displayIcon: PropTypes.node,
   dragAndDropOverlayProps: PropTypes.shape({
@@ -118,11 +118,11 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
     style: PropTypes.object
   }),
   /**
-   * The icon to display next to the tree item's label. Either an expansion or collapse icon.
+   * The icon to display next to the Tree Item's label. Either an expansion or collapse icon.
    */
   expansionIcon: PropTypes.node,
   /**
-   * The icon to display next to the tree item's label.
+   * The icon to display next to the Tree Item's label.
    */
   icon: PropTypes.node,
   /**
@@ -130,7 +130,7 @@ process.env.NODE_ENV !== "production" ? TreeItemContent.propTypes = {
    */
   itemId: PropTypes.string.isRequired,
   /**
-   * The tree item label.
+   * The Tree Item label.
    */
   label: PropTypes.node,
   labelInputProps: PropTypes.shape({

package/TreeItem/treeItemClasses.d.ts

@@ -13,7 +13,7 @@ export interface TreeItemClasses {
     focused: string;
     /** State class applied to the element when disabled. */
     disabled: string;
-    /** Styles applied to the tree item icon. */
+    /** Styles applied to the Tree Item icon. */
     iconContainer: string;
     /** Styles applied to the label element. */
     label: string;

package/TreeItem/useTreeItemState.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiCancellableEvent } from '../internals/models/MuiCancellableEvent';
+import { TreeViewCancellableEvent } from '../models';
 export declare function useTreeItemState(itemId: string): {
     disabled: boolean;
     expanded: boolean;
@@ -16,6 +16,6 @@ export declare function useTreeItemState(itemId: string): {
     preventSelection: (event: React.MouseEvent<HTMLDivElement>) => void;
     expansionTrigger: "content" | "iconContainer" | undefined;
     toggleItemEditing: () => void;
-    handleSaveItemLabel: (event: React.SyntheticEvent & MuiCancellableEvent, label: string) => void;
+    handleSaveItemLabel: (event: React.SyntheticEvent & TreeViewCancellableEvent, label: string) => void;
     handleCancelItemLabelEditing: (event: React.SyntheticEvent) => void;
 };

package/TreeItem2/TreeItem2.types.d.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 {
     /**
      * The component that renders the root.
@@ -43,7 +43,7 @@ export interface TreeItem2Slots extends TreeItem2IconSlots {
     labelInput?: React.ElementType;
     /**
      * The component that renders the overlay when an item reordering is ongoing.
-     * Warning: This slot is only useful when using the `RichTreeViewPro` component.
+     * Warning: This slot is only useful when using the `<RichTreeViewPro />` component.
      * @default TreeItem2DragAndDropOverlay
      */
     dragAndDropOverlay?: React.ElementType;
@@ -82,11 +82,11 @@ export interface TreeItem2Props extends Omit<UseTreeItem2Parameters, 'rootRef'>,
     /**
      * 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 {
 }

package/TreeItem2DragAndDropOverlay/TreeItem2DragAndDropOverlay.js

@@ -26,7 +26,7 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     style: {
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
       borderRadius: theme.shape.borderRadius,
-      backgroundColor: alpha((theme.vars || theme).palette.primary.dark, 0.15)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.dark} / ${0.15})` : alpha(theme.palette.primary.dark, 0.15)
     }
   }, {
     props: {
@@ -34,9 +34,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderTop: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderTop: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderTopColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+      borderTopColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }, {
     props: {
@@ -44,9 +44,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * var(--TreeView-itemDepth))',
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderBottomColor: alpha((theme.vars || theme).palette.grey[100], 0.6)
+      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }, {
     props: {
@@ -54,9 +54,9 @@ const TreeItem2DragAndDropOverlayRoot = styled('div', {
     },
     style: _extends({
       marginLeft: 'calc(var(--TreeView-indentMultiplier) * calc(var(--TreeView-itemDepth) - 1))',
-      borderBottom: `1px solid ${alpha((theme.vars || theme).palette.grey[900], 0.6)}`
+      borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.grey[900]} / ${0.6})` : `1px solid ${alpha(theme.palette.grey[900], 0.6)}`
     }, theme.applyStyles('dark', {
-      borderBottomColor: alpha((theme.vars || theme).palette.grey[900], 0.6)
+      borderBottomColor: theme.vars ? `rgba(${theme.vars.palette.grey[100]} / ${0.6})` : alpha(theme.palette.grey[100], 0.6)
     }))
   }]
 }));

package/TreeItem2Icon/TreeItem2Icon.types.d.ts

@@ -15,7 +15,7 @@ export interface TreeItem2IconSlots {
      */
     endIcon?: React.ElementType;
     /**
-     * The icon to display next to the tree item's label.
+     * The icon to display next to the Tree Item's label.
      */
     icon?: React.ElementType;
 }

package/TreeItem2LabelInput/TreeItem2LabelInput.types.d.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;
     /**
@@ -7,8 +7,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';
 }

package/TreeView/TreeView.d.ts

@@ -4,7 +4,7 @@ type TreeViewComponent = (<Multiple extends boolean | undefined = undefined>(pro
     propTypes?: any;
 };
 /**
- * This component has been deprecated in favor of the new `SimpleTreeView` component.
+ * This component has been deprecated in favor of the new Simple Tree View component.
  * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:

package/TreeView/TreeView.js

@@ -32,7 +32,7 @@ const warn = () => {
 };
 
 /**
- * This component has been deprecated in favor of the new `SimpleTreeView` component.
+ * This component has been deprecated in favor of the new Simple Tree View component.
  * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)
  *
  * Demos:
@@ -82,7 +82,7 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
     })
   }),
   /**
-   * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it.
+   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection: PropTypes.bool,
@@ -152,39 +152,39 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    */
   multiSelect: PropTypes.bool,
   /**
-   * Callback fired when tree items are expanded/collapsed.
+   * Callback fired when Tree Items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemIds The ids of the expanded items.
    */
   onExpandedItemsChange: PropTypes.func,
   /**
-   * Callback fired when the `content` slot of a given tree item is clicked.
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
    * @param {React.MouseEvent} event The DOM event that triggered the change.
    * @param {string} itemId The id of the focused item.
    */
   onItemClick: PropTypes.func,
   /**
-   * Callback fired when a tree item is expanded or collapsed.
+   * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
   onItemExpansionToggle: PropTypes.func,
   /**
-   * Callback fired when a given tree item is focused.
+   * Callback fired when a given Tree Item is focused.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
    * @param {string} itemId The id of the focused item.
    */
   onItemFocus: PropTypes.func,
   /**
-   * Callback fired when a tree item is selected or deselected.
+   * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {array} itemId The itemId of the modified item.
    * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
   onItemSelectionToggle: PropTypes.func,
   /**
-   * Callback fired when tree items are selected/deselected.
+   * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
    * @param {string[] | string} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v7.20.0
+ * @mui/x-tree-view v7.22.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/corePlugins/corePlugins.d.ts

@@ -2,7 +2,7 @@ import { UseTreeViewIdParameters } from './useTreeViewId';
 import { ConvertPluginsIntoSignatures } from '../models';
 /**
  * Internal plugins that create the tools used by the other plugins.
- * These plugins are used by the tree view components.
+ * These plugins are used by the Tree View components.
  */
 export declare const TREE_VIEW_CORE_PLUGINS: readonly [import("..").TreeViewPlugin<import("./useTreeViewInstanceEvents").UseTreeViewInstanceEventsSignature>, import("..").TreeViewPlugin<import("./useTreeViewOptionalPlugins").UseTreeViewOptionalPluginsSignature>, import("..").TreeViewPlugin<import("./useTreeViewId").UseTreeViewIdSignature>];
 export type TreeViewCorePluginSignatures = ConvertPluginsIntoSignatures<typeof TREE_VIEW_CORE_PLUGINS>;

package/internals/corePlugins/corePlugins.js

@@ -3,6 +3,6 @@ import { useTreeViewOptionalPlugins } from "./useTreeViewOptionalPlugins/index.j
 import { useTreeViewId } from "./useTreeViewId/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
- * These plugins are used by the tree view components.
+ * These plugins are used by the Tree View components.
  */
 export const TREE_VIEW_CORE_PLUGINS = [useTreeViewInstanceEvents, useTreeViewOptionalPlugins, useTreeViewId];

package/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -6,10 +6,9 @@ export const useTreeViewId = ({
   state,
   setState
 }) => {
-  const treeId = state.id.treeId;
   React.useEffect(() => {
     setState(prevState => {
-      if (prevState.id.treeId === params.id) {
+      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
         return prevState;
       }
       return _extends({}, prevState, {
@@ -19,6 +18,7 @@ export const useTreeViewId = ({
       });
     });
   }, [setState, params.id]);
+  const treeId = params.id ?? state.id.treeId;
   return {
     getRootProps: () => ({
       id: treeId
@@ -35,6 +35,6 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? createTreeViewDefaultId()
+    treeId: id ?? undefined
   }
 });

package/internals/corePlugins/useTreeViewId/useTreeViewId.types.d.ts

@@ -9,7 +9,7 @@ export interface UseTreeViewIdParameters {
 export type UseTreeViewIdDefaultizedParameters = UseTreeViewIdParameters;
 export interface UseTreeViewIdState {
     id: {
-        treeId: string;
+        treeId: string | undefined;
     };
 }
 interface UseTreeViewIdContextValue {

package/internals/corePlugins/useTreeViewId/useTreeViewId.utils.d.ts

@@ -1,7 +1,7 @@
 import { TreeViewItemId } from '../../../models';
 export declare const createTreeViewDefaultId: () => string;
 /**
- * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
  * If the user explicitly defined an id attribute, it will be returned.
  * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
  * @param {object} params The parameters to determine the id attribute of the item.

package/internals/corePlugins/useTreeViewId/useTreeViewId.utils.js

@@ -5,7 +5,7 @@ export const createTreeViewDefaultId = () => {
 };
 
 /**
- * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item.
+ * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item.
  * If the user explicitly defined an id attribute, it will be returned.
  * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId`
  * @param {object} params The parameters to determine the id attribute of the item.

package/internals/index.d.ts

@@ -2,7 +2,7 @@ export { useTreeView } from './useTreeView';
 export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
 export { RichTreeViewItems } from './components/RichTreeViewItems';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, MuiCancellableEvent, MuiCancellableEventHandler, } from './models';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, DefaultizedProps, TreeViewItemPlugin, } from './models';
 export type { TreeViewCorePluginParameters } from './corePlugins';
 export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, } from './plugins/useTreeViewExpansion';

package/internals/models/index.d.ts

@@ -2,4 +2,3 @@ export * from './helpers';
 export * from './plugin';
 export * from './itemPlugin';
 export * from './treeView';
-export * from './MuiCancellableEvent';

package/internals/models/index.js

@@ -1,5 +1,4 @@
 export * from "./helpers.js";
 export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
-export * from "./MuiCancellableEvent.js";
+export * from "./treeView.js";

package/internals/models/treeView.d.ts

@@ -8,11 +8,11 @@ export interface TreeViewItemMeta {
     expandable: boolean;
     disabled: boolean;
     /**
-     * Only defined for `RichTreeView` and `RichTreeViewPro`.
+     * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
      */
     depth?: number;
     /**
-     * Only defined for `RichTreeView` and `RichTreeViewPro`.
+     * Only defined for `<RichTreeView />` and `<RichTreeViewPro />`.
      */
     label?: string;
 }

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts

@@ -54,13 +54,13 @@ export interface UseTreeViewExpansionParameters {
      */
     defaultExpandedItems?: string[];
     /**
-     * Callback fired when tree items are expanded/collapsed.
+     * Callback fired when Tree Items are expanded/collapsed.
      * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {array} itemIds The ids of the expanded items.
      */
     onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
     /**
-     * Callback fired when a tree item is expanded or collapsed.
+     * Callback fired when a Tree Item is expanded or collapsed.
      * @param {React.SyntheticEvent} event The DOM event that triggered the change.
      * @param {array} itemId The itemId of the modified item.
      * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.d.ts

@@ -37,7 +37,7 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
 }
 export interface UseTreeViewFocusParameters {
     /**
-     * Callback fired when a given tree item is focused.
+     * Callback fired when a given Tree Item is focused.
      * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
      * @param {string} itemId The id of the focused item.
      */

package/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.d.ts

@@ -17,7 +17,7 @@ interface UseTreeViewIconsSlots {
     expandIcon?: React.ElementType;
     /**
      * The default icon displayed next to an end item.
-     * This is applied to all tree items and can be overridden by the TreeItem `icon` slot prop.
+     * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.
      */
     endIcon?: React.ElementType;
 }

package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -10,7 +10,7 @@ export interface TreeViewItemToRenderProps {
 export interface UseTreeViewItemsPublicAPI<R extends {}> {
     /**
      * Get the item with the given id.
-     * When used in the `SimpleTreeView`, it returns an object with the `id` and `label` properties.
+     * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
      * @param {string} itemId The id of the item to retrieve.
      * @returns {R} The item with the given id.
      */
@@ -117,7 +117,7 @@ export interface UseTreeViewItemsParameters<R extends {
      */
     getItemId?: (item: R) => TreeViewItemId;
     /**
-     * Callback fired when the `content` slot of a given tree item is clicked.
+     * Callback fired when the `content` slot of a given Tree Item is clicked.
      * @param {React.MouseEvent} event The DOM event that triggered the change.
      * @param {string} itemId The id of the focused item.
      */

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -25,7 +25,7 @@ export const useTreeViewJSXItems = ({
           itemMetaMap: _extends({}, prevState.items.itemMetaMap, {
             [item.id]: item
           }),
-          // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one.
+          // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
           itemMap: _extends({}, prevState.items.itemMap, {
             [item.id]: {
               id: item.id,

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -4,7 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
 import { hasPlugin } from "../../utils/plugins.js";
 import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
-function isPrintableCharacter(string) {
+function isPrintableKey(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }
 export const useTreeViewKeyboardNavigation = ({
@@ -227,7 +227,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Multi select behavior when pressing Ctrl + a
       // Selects all the items
-      case key === 'a' && ctrlPressed && params.multiSelect && !params.disableSelection:
+      case String.fromCharCode(event.keyCode) === 'A' && ctrlPressed && params.multiSelect && !params.disableSelection:
         {
           instance.selectAllNavigableItems(event);
           event.preventDefault();
@@ -236,7 +236,7 @@ export const useTreeViewKeyboardNavigation = ({
 
       // Type-ahead
       // TODO: Support typing multiple characters
-      case !ctrlPressed && !event.shiftKey && isPrintableCharacter(key):
+      case !ctrlPressed && !event.shiftKey && isPrintableKey(key):
         {
           const matchingItem = getFirstMatchingItem(itemId, key);
           if (matchingItem != null) {

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.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 {
     /**
@@ -17,10 +17,10 @@ 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, itemId: TreeViewItemId) => void;
+    handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => void;
 }
 export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
     instance: UseTreeViewKeyboardNavigationInstance;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -73,7 +73,7 @@ useTreeViewLabel.getDefaultizedParams = ({
   const canUseFeature = experimentalFeatures?.labelEditing;
   if (process.env.NODE_ENV !== 'production') {
     if (params.isItemEditable && !canUseFeature) {
-      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
+      warnOnce(['MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/']);
     }
   }
   return _extends({}, params, {

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -37,7 +37,7 @@ export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
      */
     isItemEditable: (itemId: TreeViewItemId) => boolean;
     /**
-     * Set to `true` if the tree view is editable.
+     * Set to `true` if the Tree View is editable.
      */
     isTreeViewEditable: boolean;
 }