@mui/x-tree-view 8.27.1 → 9.0.0-alpha.0

package/esm/RichTreeView/RichTreeView.types.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system/styleFunctionSx';
-import { SlotComponentProps } from '@mui/utils/types';
 import { RichTreeViewClasses } from "./richTreeViewClasses.js";
 import { RichTreeViewItemsSlotProps, RichTreeViewItemsSlots } from "../internals/components/RichTreeViewItems.js";
 import { TreeViewSlotProps, TreeViewSlots } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
@@ -9,16 +8,14 @@ import { RichTreeViewStore } from "../internals/RichTreeViewStore/index.js";
 import { TreeViewValidItem } from "../models/items.js";
 import { UseTreeViewStoreParameters } from "../internals/hooks/useTreeViewStore.js";
 import { TreeViewPublicAPI } from "../internals/models/index.js";
-export interface RichTreeViewSlots extends TreeViewSlots, RichTreeViewItemsSlots {
+export interface RichTreeViewSlots extends TreeViewSlots, Omit<RichTreeViewItemsSlots, 'root'> {
   /**
    * Element rendered at the root.
    * @default RichTreeViewRoot
    */
   root?: React.ElementType;
 }
-export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
-  root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
-}
+export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps<RichTreeViewProps<R, Multiple>> {}
 export type RichTreeViewApiRef<R extends TreeViewValidItem<R> = any, Multiple extends boolean | undefined = any> = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewStore<R, Multiple>>> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
   className?: string;

package/esm/RichTreeView/useExtractRichTreeViewParameters.js

@@ -1,5 +1,5 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "onItemLabelChange", "isItemEditable"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "items", "isItemDisabled", "isItemSelectionDisabled", "getItemLabel", "getItemChildren", "getItemId", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight", "onItemLabelChange", "isItemEditable", "domStructure"];
 import * as React from 'react';
 export function useExtractRichTreeViewParameters(props) {
   const {
@@ -32,9 +32,11 @@ export function useExtractRichTreeViewParameters(props) {
       onSelectedItemsChange,
       onItemSelectionToggle,
       onItemFocus,
+      itemHeight,
       // RichTreeViewStore parameters
       onItemLabelChange,
-      isItemEditable
+      isItemEditable,
+      domStructure
 
       // Forwarded props
     } = props,
@@ -65,14 +67,16 @@ export function useExtractRichTreeViewParameters(props) {
     onSelectedItemsChange,
     onItemSelectionToggle,
     onItemFocus,
+    itemHeight,
     // RichTreeViewStore parameters
     onItemLabelChange,
-    isItemEditable
+    isItemEditable,
+    domStructure
   }), [
   // Shared parameters
-  disabledItemsFocusable, items, isItemDisabled, isItemSelectionDisabled, getItemLabel, getItemChildren, getItemId, onItemClick, itemChildrenIndentation, id, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpansionToggle, expansionTrigger, disableSelection, selectedItems, defaultSelectedItems, multiSelect, checkboxSelection, selectionPropagation, onSelectedItemsChange, onItemSelectionToggle, onItemFocus,
+  disabledItemsFocusable, items, isItemDisabled, isItemSelectionDisabled, getItemLabel, getItemChildren, getItemId, onItemClick, itemChildrenIndentation, id, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpansionToggle, expansionTrigger, disableSelection, selectedItems, defaultSelectedItems, multiSelect, checkboxSelection, selectionPropagation, onSelectedItemsChange, onItemSelectionToggle, onItemFocus, itemHeight,
   // RichTreeViewStore parameters
-  onItemLabelChange, isItemEditable]);
+  onItemLabelChange, isItemEditable, domStructure]);
   return {
     apiRef,
     slots,

package/esm/SimpleTreeView/SimpleTreeView.js

@@ -185,6 +185,11 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * @default 12px
    */
   itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Sets the height in pixel of an item.
+   * If not provided, no height restriction is applied to the tree item content element.
+   */
+  itemHeight: PropTypes.number,
   /**
    * Whether multiple items can be selected.
    * @default false

package/esm/SimpleTreeView/useExtractSimpleTreeViewParameters.js

@@ -1,5 +1,5 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus"];
+const _excluded = ["apiRef", "slots", "slotProps", "disabledItemsFocusable", "onItemClick", "itemChildrenIndentation", "id", "expandedItems", "defaultExpandedItems", "onExpandedItemsChange", "onItemExpansionToggle", "expansionTrigger", "disableSelection", "selectedItems", "defaultSelectedItems", "multiSelect", "checkboxSelection", "selectionPropagation", "onSelectedItemsChange", "onItemSelectionToggle", "onItemFocus", "itemHeight"];
 import * as React from 'react';
 export function useExtractSimpleTreeViewParameters(props) {
   const {
@@ -25,7 +25,8 @@ export function useExtractSimpleTreeViewParameters(props) {
       selectionPropagation,
       onSelectedItemsChange,
       onItemSelectionToggle,
-      onItemFocus
+      onItemFocus,
+      itemHeight
 
       // SimpleTreeViewStore parameters
 
@@ -51,12 +52,13 @@ export function useExtractSimpleTreeViewParameters(props) {
     selectionPropagation,
     onSelectedItemsChange,
     onItemSelectionToggle,
-    onItemFocus
+    onItemFocus,
+    itemHeight
 
     // SimpleTreeViewStore parameters
   }), [
   // Shared parameters
-  disabledItemsFocusable, onItemClick, itemChildrenIndentation, id, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpansionToggle, expansionTrigger, disableSelection, selectedItems, defaultSelectedItems, multiSelect, checkboxSelection, selectionPropagation, onSelectedItemsChange, onItemSelectionToggle, onItemFocus
+  disabledItemsFocusable, onItemClick, itemChildrenIndentation, id, expandedItems, defaultExpandedItems, onExpandedItemsChange, onItemExpansionToggle, expansionTrigger, disableSelection, selectedItems, defaultSelectedItems, multiSelect, checkboxSelection, selectionPropagation, onSelectedItemsChange, onItemSelectionToggle, onItemFocus, itemHeight
 
   // SimpleTreeViewStore parameters
   ]);

package/esm/TreeItem/TreeItem.d.ts

@@ -15,7 +15,7 @@ export declare const TreeItemErrorContainer: import("@emotion/styled").StyledCom
 export declare const TreeItemLoadingContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/CircularProgress").CircularProgressProps, keyof import("@mui/material/CircularProgress").CircularProgressProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const TreeItemCheckbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
   visible?: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "aria-expanded" | "aria-disabled" | "onDoubleClick" | "aria-hidden" | "content" | "disabled" | "slots" | "slotProps" | "className" | "classes" | "color" | "sx" | "suppressHydrationWarning" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "checked" | "visible" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "indeterminate" | "readOnly" | "required" | "size" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "aria-expanded" | "aria-disabled" | "onDoubleClick" | "aria-hidden" | "content" | "disabled" | "slots" | "slotProps" | "className" | "classes" | "color" | "sx" | "suppressHydrationWarning" | "id" | "lang" | "name" | "nonce" | "part" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | "checked" | "visible" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "indeterminate" | "readOnly" | "required" | "size" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/esm/TreeItem/TreeItem.js

@@ -22,7 +22,7 @@ import { TreeItemIcon } from "../TreeItemIcon/index.js";
 import { TreeItemDragAndDropOverlay } from "../TreeItemDragAndDropOverlay/index.js";
 import { TreeItemProvider } from "../TreeItemProvider/index.js";
 import { TreeItemLabelInput } from "../TreeItemLabelInput/index.js";
-import { useTreeViewStyleContext } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+import { useTreeViewStyleContext } from "../internals/TreeViewProvider/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 export const TreeItemRoot = styled('li', {
@@ -45,6 +45,7 @@ export const TreeItemContent = styled('div', {
   paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
   borderRadius: theme.shape.borderRadius,
   width: '100%',
+  height: 'var(--TreeView-itemHeight, unset)',
   boxSizing: 'border-box',
   // prevent width + padding to overflow
   position: 'relative',

package/esm/TreeItemIcon/TreeItemIcon.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useTreeViewStyleContext } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+import { useTreeViewStyleContext } from "../internals/TreeViewProvider/index.js";
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function pickIcon(treeItemIcon, treeViewIcon, fallback) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.27.1
+ * @mui/x-tree-view v9.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/MinimalTreeViewStore/MinimalTreeViewStore.types.d.ts

@@ -36,12 +36,6 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
       [itemId: string]: number;
     };
   };
-  /**
-   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
-   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
-   * Nested DOM structure is not compatible with collapse / expansion animations.
-   */
-  domStructure: 'flat' | 'nested';
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".
@@ -87,6 +81,11 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
    * The id of the currently focused item.
    */
   focusedItemId: TreeViewItemId | null;
+  /**
+   * The default height of each item in the tree view.
+   * If not provided, no height restriction is applied to the tree item content element.
+   */
+  itemHeight: number | null;
 }
 export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
   /**
@@ -249,6 +248,11 @@ export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multi
    * @param {TreeViewItemId} itemId The id of the focused item.
    */
   onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  /**
+   * Sets the height in pixel of an item.
+   * If not provided, no height restriction is applied to the tree item content element.
+   */
+  itemHeight?: number;
 }
 /**
  * Mapper between a Tree View instance's state and parameters.

package/esm/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.d.ts

@@ -8,7 +8,6 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   isItemEditable?: any;
 }): {
   disabledItemsFocusable: boolean;
-  domStructure: "nested";
   itemChildrenIndentation: string | number;
   providedTreeId: string | undefined;
   expansionTrigger: "content" | "iconContainer";
@@ -16,6 +15,7 @@ export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>
   multiSelect: boolean | NonNullable<Multiple>;
   checkboxSelection: boolean;
   selectionPropagation: Readonly<{}>;
+  itemHeight: number | null;
 };
 export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;
 export declare const createTreeViewDefaultId: () => string;

package/esm/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.js

@@ -10,7 +10,6 @@ import { TreeViewItemsPlugin } from "../plugins/items/index.js";
 export function deriveStateFromParameters(parameters) {
   return {
     disabledItemsFocusable: parameters.disabledItemsFocusable ?? false,
-    domStructure: 'nested',
     itemChildrenIndentation: parameters.itemChildrenIndentation ?? '12px',
     providedTreeId: parameters.id,
     // TODO: Fix
@@ -21,7 +20,8 @@ export function deriveStateFromParameters(parameters) {
     disableSelection: parameters.disableSelection ?? false,
     multiSelect: parameters.multiSelect ?? false,
     checkboxSelection: parameters.checkboxSelection ?? false,
-    selectionPropagation: parameters.selectionPropagation ?? EMPTY_OBJECT
+    selectionPropagation: parameters.selectionPropagation ?? EMPTY_OBJECT,
+    itemHeight: parameters.itemHeight ?? null
   };
 }
 function applyModelInitialValue(controlledValue, defaultValue, fallback) {

package/esm/internals/RichTreeViewStore/RichTreeViewStore.types.d.ts

@@ -1,4 +1,4 @@
-import { TreeViewItemId, TreeViewValidItem } from "../../models/index.js";
+import { TreeViewDOMStructure, TreeViewItemId, TreeViewValidItem } from "../../models/index.js";
 import { MinimalTreeViewParameters, MinimalTreeViewState } from "../MinimalTreeViewStore/index.js";
 import { RichTreeViewLazyLoadedItemsStatus } from "../plugins/lazyLoading/index.js";
 export interface RichTreeViewState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewState<R, Multiple> {
@@ -15,6 +15,12 @@ export interface RichTreeViewState<R extends TreeViewValidItem<R>, Multiple exte
    * Is null if lazy loading is not enabled.
    */
   lazyLoadedItems: RichTreeViewLazyLoadedItemsStatus | null;
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   */
+  domStructure: TreeViewDOMStructure;
 }
 export interface RichTreeViewStoreParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> extends MinimalTreeViewParameters<R, Multiple> {
   /**
@@ -31,4 +37,11 @@ export interface RichTreeViewStoreParameters<R extends TreeViewValidItem<R>, Mul
    * @default () => false
    */
   isItemEditable?: boolean | ((item: R) => boolean);
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   * @default 'nested'
+   */
+  domStructure?: TreeViewDOMStructure;
 }

package/esm/internals/RichTreeViewStore/RichTreeViewStore.utils.js

@@ -5,7 +5,8 @@ const deriveStateFromParameters = parameters => ({
 export const parametersToStateMapper = {
   getInitialState: (minimalInitialState, parameters) => _extends({}, minimalInitialState, deriveStateFromParameters(parameters), {
     editedItemId: null,
-    lazyLoadedItems: null
+    lazyLoadedItems: null,
+    domStructure: parameters.domStructure ?? 'nested'
   }),
   updateStateFromParameters: (newMinimalState, parameters) => {
     const newState = _extends({}, newMinimalState, deriveStateFromParameters(parameters));

package/esm/internals/TreeViewProvider/index.d.ts

@@ -1,3 +1,4 @@
 export { TreeViewProvider } from "./TreeViewProvider.js";
 export { useTreeViewContext } from "./TreeViewContext.js";
+export { useTreeViewStyleContext } from "./TreeViewStyleContext.js";
 export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.js";

package/esm/internals/TreeViewProvider/index.js

@@ -1,2 +1,3 @@
 export { TreeViewProvider } from "./TreeViewProvider.js";
-export { useTreeViewContext } from "./TreeViewContext.js";
+export { useTreeViewContext } from "./TreeViewContext.js";
+export { useTreeViewStyleContext } from "./TreeViewStyleContext.js";

package/esm/internals/components/RichTreeViewItems.d.ts

@@ -2,31 +2,55 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils/types';
 import { TreeItem, TreeItemProps } from "../../TreeItem/index.js";
 import { TreeViewItemId } from "../../models/index.js";
-export declare function RichTreeViewItems(props: RichTreeViewItemsProps): import("react/jsx-runtime").JSX.Element;
+export declare const RichTreeViewItem: React.NamedExoticComponent<RichTreeViewItemProps>;
+export declare function RichTreeViewItems<TProps extends object>(props: RichTreeViewItemsProps<TProps>): import("react/jsx-runtime").JSX.Element;
 interface RichTreeViewItemsOwnerState {
   itemId: TreeViewItemId;
   label: string;
 }
 export interface RichTreeViewItemsSlots {
+  /**
+   * Element rendered at the root.
+   * @default RichTreeViewProRoot
+   */
+  root: React.ElementType;
   /**
    * Custom component to render a Tree Item.
    * @default TreeItem.
    */
   item?: React.JSXElementConstructor<TreeItemProps>;
 }
-export interface RichTreeViewItemsSlotProps {
+export interface RichTreeViewItemsSlotProps<TProps extends object> {
   item?: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState>;
+  root?: SlotComponentProps<'ul', {}, TProps>;
 }
-export interface RichTreeViewItemsProps {
+export interface RichTreeViewItemsProps<TProps extends object> {
   /**
    * Overridable component slots.
    * @default {}
    */
-  slots?: RichTreeViewItemsSlots;
+  slots: RichTreeViewItemsSlots;
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps?: RichTreeViewItemsSlotProps;
+  slotProps?: RichTreeViewItemsSlotProps<TProps>;
+  /**
+   * Owner state applied to the root slot component.
+   */
+  ownerState: TProps;
+  /**
+   * Props provided to the component and applied to the root element.
+   */
+  forwardedProps: React.HTMLAttributes<HTMLUListElement>;
+  /**
+   * Ref forwarded to the root element.
+   */
+  rootRef: React.Ref<HTMLUListElement>;
+}
+interface RichTreeViewItemProps extends Pick<TreeItemProps, 'id' | 'itemId' | 'children'> {
+  itemSlot: React.JSXElementConstructor<TreeItemProps> | undefined;
+  itemSlotProps: SlotComponentProps<typeof TreeItem, {}, RichTreeViewItemsOwnerState> | undefined;
+  skipChildren: boolean;
 }
 export {};

package/esm/internals/components/RichTreeViewItems.js

@@ -10,14 +10,15 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { TreeItem } from "../../TreeItem/index.js";
 import { itemsSelectors } from "../plugins/items/index.js";
-import { useTreeViewContext } from "../TreeViewProvider/index.js";
+import { useTreeViewContext, useTreeViewStyleContext } from "../TreeViewProvider/index.js";
 import { expansionSelectors } from "../plugins/expansion/index.js";
+import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
 const selectorNoChildren = () => EMPTY_ARRAY;
 const selectorChildrenIdsNull = state => itemsSelectors.itemOrderedChildrenIds(state, null);
-const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+export const RichTreeViewItem = /*#__PURE__*/React.memo(function RichTreeViewItem({
   itemSlot,
   itemSlotProps,
   itemId,
@@ -45,25 +46,40 @@ const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
     }),
     itemProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
   return /*#__PURE__*/_jsx(Item, _extends({}, itemProps, {
-    children: children?.map(renderItemForRichTreeView)
+    children: renderItemForRichTreeView ? children?.map(renderItemForRichTreeView) : null
   }));
 }, fastObjectShallowCompare);
-if (process.env.NODE_ENV !== "production") WrappedTreeItem.displayName = "WrappedTreeItem";
+if (process.env.NODE_ENV !== "production") RichTreeViewItem.displayName = "RichTreeViewItem";
 export function RichTreeViewItems(props) {
   const {
     slots,
-    slotProps
+    slotProps,
+    ownerState,
+    forwardedProps,
+    rootRef
   } = props;
   const {
     store
   } = useTreeViewContext();
+  const {
+    classes
+  } = useTreeViewStyleContext();
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
   const domStructure = useStore(store, itemsSelectors.domStructure);
   const items = useStore(store, domStructure === 'flat' ? expansionSelectors.flatList : selectorChildrenIdsNull);
+  const getRootProps = useTreeViewRootProps(store, forwardedProps, rootRef);
+  const Root = slots.root;
+  const rootProps = useSlotProps({
+    elementType: Root,
+    externalSlotProps: slotProps?.root,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState
+  });
   const skipChildren = domStructure === 'flat';
   const renderItem = React.useCallback(itemId => {
-    return /*#__PURE__*/_jsx(WrappedTreeItem, {
+    return /*#__PURE__*/_jsx(RichTreeViewItem, {
       itemSlot: itemSlot,
       itemSlotProps: itemSlotProps,
       itemId: itemId,
@@ -72,6 +88,8 @@ export function RichTreeViewItems(props) {
   }, [itemSlot, itemSlotProps, skipChildren]);
   return /*#__PURE__*/_jsx(RichTreeViewItemsContext.Provider, {
     value: renderItem,
-    children: items.map(renderItem)
+    children: /*#__PURE__*/_jsx(Root, _extends({}, rootProps, {
+      children: items.map(renderItem)
+    }))
   });
 }

package/esm/internals/hooks/useTreeViewRootProps.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
 import { TreeViewCancellableEvent } from "../../models/index.js";
 import { TreeViewAnyStore } from "../models/index.js";
-export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TStore, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
+import { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
+export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TreeViewStoreInContext<TStore>, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
   style: React.CSSProperties;
   onFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
   onBlur: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;

package/esm/internals/index.d.ts

@@ -1,6 +1,6 @@
-export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
-export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
-export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
+export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
+export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
 export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
 export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.js";

package/esm/internals/index.js

@@ -1,5 +1,5 @@
-export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
-export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
+export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
+export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
 export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
 export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
 // Plugins

package/esm/internals/plugins/items/selectors.d.ts

@@ -1,10 +1,11 @@
 import { TreeViewItemMeta } from "../../models/index.js";
 import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
 export declare const itemsSelectors: {
   /**
    * Gets the DOM structure of the Tree View.
    */
-  domStructure: (state: MinimalTreeViewState<any, any>) => "flat" | "nested";
+  domStructure: (state: RichTreeViewState<any, any>) => import("../../../index.js").TreeViewDOMStructure;
   /**
    * Checks whether the disabled items are focusable.
    */
@@ -57,4 +58,8 @@ export declare const itemsSelectors: {
    * Gets the identation between an item and its children.
    */
   itemChildrenIndentation: (state: MinimalTreeViewState<any, any>) => string | number;
+  /**
+   * Gets the height of an individual item.
+   */
+  itemHeight: (state: MinimalTreeViewState<any, any>) => number | null;
 };

package/esm/internals/plugins/items/selectors.js

@@ -60,5 +60,9 @@ export const itemsSelectors = {
   /**
    * Gets the identation between an item and its children.
    */
-  itemChildrenIndentation: createSelector(state => state.itemChildrenIndentation)
+  itemChildrenIndentation: createSelector(state => state.itemChildrenIndentation),
+  /**
+   * Gets the height of an individual item.
+   */
+  itemHeight: createSelector(state => state.itemHeight)
 };

package/esm/models/domStructure.d.ts

@@ -0,0 +1 @@
+export type TreeViewDOMStructure = 'flat' | 'nested';

package/esm/models/domStructure.js

@@ -0,0 +1 @@
+export {};

package/esm/models/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./items.js";
 export * from "./events.js";
+export * from "./domStructure.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/esm/models/index.js

@@ -1,5 +1,6 @@
 export * from "./items.js";
 export * from "./events.js";
+export * from "./domStructure.js";
 
 // Utils shared across the X packages
 export {};

package/esm/useTreeItem/useTreeItem.js

@@ -58,6 +58,7 @@ export const useTreeItem = parameters => {
   const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
   const idAttribute = useStore(store, idSelectors.treeItemIdAttribute, itemId, id);
   const shouldBeAccessibleWithTab = useStore(store, focusSelectors.isItemTheDefaultFocusableItem, itemId);
+  const itemHeight = useStore(store, itemsSelectors.itemHeight);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -153,6 +154,8 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       style: _extends({}, externalProps.style ?? {}, {
         '--TreeView-itemDepth': depth
+      }, itemHeight == null ? {} : {
+        '--TreeView-itemHeight': `${itemHeight}px`
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.27.1
+ * @mui/x-tree-view v9.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.types.d.ts

@@ -36,12 +36,6 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
       [itemId: string]: number;
     };
   };
-  /**
-   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
-   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
-   * Nested DOM structure is not compatible with collapse / expansion animations.
-   */
-  domStructure: 'flat' | 'nested';
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".
@@ -87,6 +81,11 @@ export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple e
    * The id of the currently focused item.
    */
   focusedItemId: TreeViewItemId | null;
+  /**
+   * The default height of each item in the tree view.
+   * If not provided, no height restriction is applied to the tree item content element.
+   */
+  itemHeight: number | null;
 }
 export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
   /**
@@ -249,6 +248,11 @@ export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multi
    * @param {TreeViewItemId} itemId The id of the focused item.
    */
   onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  /**
+   * Sets the height in pixel of an item.
+   * If not provided, no height restriction is applied to the tree item content element.
+   */
+  itemHeight?: number;
 }
 /**
  * Mapper between a Tree View instance's state and parameters.