@mui/x-tree-view 7.5.1 → 7.6.0

package/CHANGELOG.md

@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.6.0
+
+_May 30, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Allow to define and customize the indentation of nested items in the Tree View
+- ✨ Allow charts highlights to be controlled
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.6.0`
+
+- [DataGrid] Avoid re-rendering all cells on column change (#12980) @romgrk
+- [DataGrid] Export `GridColumnHeadersProps` (#13229) @cherniavskii
+- [DataGrid] Fix header filters' issue with custom filters (#13255) @MBilalShafi
+- [DataGrid] Remove dead logic to support Safari < 13 (#13249) @oliviertassinari
+- [l10n] Improve Persian (fa-IR) locale (#12994) @amiryxe
+
+#### `@mui/x-data-grid-pro@7.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.6.0`.
+
+#### `@mui/x-data-grid-premium@7.6.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.6.0`, plus:
+
+- [DataGridPremium] Fix excel export causing column with wrong width (#13191) @romgrk
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.6.0`
+
+- [pickers] Fix `DateBuilderReturnType` when the date is `undefined` (#13244) @alexey-kozlenkov
+
+#### `@mui/x-date-pickers-pro@7.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.6.0`
+
+- [charts] Allow charts highlights to be controlled (#12828) @JCQuintas
+- [charts] Refactor axis band scaleType check (#13295) @JCQuintas
+- [charts] Refactor checkScaleErrors to improve readability and simplify axis message logic (#13305) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.6.0`
+
+- [TreeView] Add JSDoc to every instance method (#13219) @flaviendelangle
+- [TreeView] Allow to customize the indentation of nested items (#13225) @flaviendelangle
+- [TreeView] Allow to define indentation at the item level (#13126) @flaviendelangle
+
+### Docs
+
+- [docs] Add Bulk editing demo for the Community plan (#12800) @cherniavskii
+- [docs] Add conditional label formatting on tooltip page and link to label page (#13235) @JCQuintas
+- [docs] Add information about key combinations on a11y sections (#13234) @arthurbalduini
+- [docs] Cleanup of the Tree View demos (#13237) @flaviendelangle
+- [docs] Document how to customize a subsection of a line chart (#13210) @alexfauquette
+- [docs] Fix Pickers FAQ callout (#13238) @LukasTy
+- [docs] Fix Vale errors @oliviertassinari
+- [docs] Fix a small typo in property comment (#13245) @Janpot
+- [docs] Improve the Data Grid FAQ page (#13258) @MBilalShafi
+- [docs] Removes unused lines in TreeItem2 styling (#13264) @arthurbalduini
+- [docs] Small improvements on accessibility data grid doc (#13233) @arthurbalduini
+- [docs] Update Pickers demo configurations (#13303) @LukasTy
+
+### Core
+
+- [core] Add comment on why logic to sync column header (#13248) @oliviertassinari
+- [core] Fix `l10n` script execution with arguments (#13297) @LukasTy
+- [core] Prevent "Add reviewers" workflow from triggering since it doesn't work (#13236) @JCQuintas
+- [docs-infra] Fix `@mui/material` version used in sandboxes (#13260) @LukasTy
+- [test] Use `describeTreeView` for keyboard navigation tests on disabled items (#13184) @flaviendelangle
+- [test] Use `describeTreeView` for remaining items tests (#13262) @flaviendelangle
+- [test] Use test-utils from npm (#12880) @michaldudak
+- [typescript] Remove duplicate `DateRangePosition` type in favor of `RangePosition` (#13288) @LukasTy
+
 ## v7.5.1
 
 _May 23, 2024_
@@ -339,7 +425,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 ### Core
 
 - [core] Fix `l10n` GH workflow (#12895) @LukasTy
-- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Match Base UI and Toolpad @oliviertassinari
 - [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle

package/RichTreeView/RichTreeView.js

@@ -180,6 +180,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * Used to determine the id of a given item.
    *
@@ -210,6 +218,12 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * @returns {boolean} `true` if the item should be disabled.
    */
   isItemDisabled: PropTypes.func,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   items: PropTypes.array.isRequired,
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.

package/RichTreeView/RichTreeView.types.d.ts

@@ -7,7 +7,7 @@ import { DefaultTreeViewPluginParameters, DefaultTreeViewPluginSlotProps, Defaul
 import { TreeItemProps } from '../TreeItem';
 import { TreeItem2Props } from '../TreeItem2';
 import { TreeViewItemId } from '../models';
-import { SlotComponentPropsFromProps, TreeViewPublicAPI } from '../internals/models';
+import { SlotComponentPropsFromProps, TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
 interface RichTreeViewItemSlotOwnerState {
     itemId: TreeViewItemId;
     label: string;
@@ -55,5 +55,11 @@ export interface RichTreeViewProps<R extends {}, Multiple extends boolean | unde
      * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
      */
     apiRef?: RichTreeViewApiRef;
+    /**
+     * Unstable features, breaking changes might be introduced.
+     * For each feature, if the flag is not explicitly set to `true`,
+     * the feature will be fully disabled and any property / method call will not have any effect.
+     */
+    experimentalFeatures?: TreeViewExperimentalFeatures<DefaultTreeViewPlugins>;
 }
 export {};

package/SimpleTreeView/SimpleTreeView.js

@@ -142,11 +142,25 @@ process.env.NODE_ENV !== "production" ? SimpleTreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -4,7 +4,7 @@ import { SlotComponentProps } from '@mui/base/utils';
 import { SxProps } from '@mui/system';
 import { SimpleTreeViewClasses } from './simpleTreeViewClasses';
 import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPlugins } from './SimpleTreeView.plugins';
-import { TreeViewPublicAPI } from '../internals/models';
+import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
 export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
     /**
      * Element rendered at the root.
@@ -42,4 +42,10 @@ export interface SimpleTreeViewProps<Multiple extends boolean | undefined> exten
      * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
      */
     apiRef?: SimpleTreeViewApiRef;
+    /**
+     * Unstable features, breaking changes might be introduced.
+     * For each feature, if the flag is not explicitly set to `true`,
+     * the feature will be fully disabled and any property / method call will not have any effect.
+     */
+    experimentalFeatures?: TreeViewExperimentalFeatures<SimpleTreeViewPlugins>;
 }

package/TreeItem/TreeItem.js

@@ -10,6 +10,7 @@ import clsx from 'clsx';
 import Collapse from '@mui/material/Collapse';
 import { resolveComponentProps, useSlotProps } from '@mui/base/utils';
 import useForkRef from '@mui/utils/useForkRef';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
@@ -19,6 +20,7 @@ import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
 import { useTreeViewContext } from '../internals/TreeViewProvider/useTreeViewContext';
 import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
 import { TreeItem2Provider } from '../TreeItem2Provider';
+import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -57,7 +59,8 @@ const StyledTreeItemContent = styled(TreeItemContent, {
     }, styles.label && {
       [`& .${treeItemClasses.label}`]: styles.label
     }];
-  }
+  },
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -117,16 +120,33 @@ const StyledTreeItemContent = styled(TreeItemContent, {
   }, theme.typography.body1),
   [`& .${treeItemClasses.checkbox}`]: {
     padding: 0
-  }
+  },
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+    }
+  }]
 }));
 const TreeItemGroup = styled(Collapse, {
   name: 'MuiTreeItem',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 
 /**
@@ -147,8 +167,10 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       multiSelect
     },
     disabledItemsFocusable,
+    indentationAtItemLevel,
     instance
   } = useTreeViewContext();
+  const depthContext = React.useContext(TreeViewItemDepthContext);
   const props = useThemeProps({
     props: inProps,
     name: 'MuiTreeItem'
@@ -197,7 +219,8 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     expanded,
     focused,
     selected,
-    disabled
+    disabled,
+    indentationAtItemLevel
   });
   const classes = useUtilityClasses(ownerState);
   const GroupTransition = slots.groupTransition ?? undefined;
@@ -205,12 +228,14 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     elementType: GroupTransition,
     ownerState: {},
     externalSlotProps: inSlotProps?.groupTransition,
-    additionalProps: {
+    additionalProps: _extends({
       unmountOnExit: true,
       in: expanded,
       component: 'ul',
       role: 'group'
-    },
+    }, indentationAtItemLevel ? {
+      indentationAtItemLevel: true
+    } : {}),
     className: classes.groupTransition
   });
   const ExpansionIcon = expanded ? slots.collapseIcon : slots.expandIcon;
@@ -291,6 +316,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       ref: handleRootRef,
+      style: indentationAtItemLevel ? _extends({}, other.style, {
+        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+      }) : other.style,
       children: [/*#__PURE__*/_jsx(StyledTreeItemContent, _extends({
         as: ContentComponent,
         classes: {

package/TreeItem/TreeItem.types.d.ts

@@ -96,4 +96,5 @@ export interface TreeItemOwnerState extends TreeItemProps {
     focused: boolean;
     selected: boolean;
     disabled: boolean;
+    indentationAtItemLevel: boolean;
 }

package/TreeItem2/TreeItem2.d.ts

@@ -1,14 +1,20 @@
 import * as React from 'react';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { TreeItem2Props } from './TreeItem2.types';
-export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
-export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
-export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Collapse").CollapseProps, keyof import("@mui/material/Collapse").CollapseProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+import { UseTreeItem2Status } from '../useTreeItem2';
+export declare const TreeItem2Root: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, keyof React.ClassAttributes<HTMLLIElement> | keyof React.LiHTMLAttributes<HTMLLIElement>>, {}>;
+export declare const TreeItem2Content: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    status: UseTreeItem2Status;
+    indentationAtItemLevel?: true | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItem2Label: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledComponent<import("@mui/material/Collapse").CollapseProps & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    indentationAtItemLevel?: true | undefined;
+}, {}, {}>;
 export declare const TreeItem2Checkbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
     visible: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "suppressHydrationWarning" | "className" | "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-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "readOnly" | "required" | "action" | "checked" | "component" | "sx" | "classes" | "onFocusVisible" | "inputRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "suppressHydrationWarning" | "className" | "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-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "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" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "readOnly" | "required" | "action" | "checked" | "component" | "sx" | "classes" | "onFocusVisible" | "inputRef" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system/createStyled").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type TreeItem2Component = ((props: TreeItem2Props & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
     propTypes?: any;
 };

package/TreeItem2/TreeItem2.js

@@ -10,10 +10,10 @@ import { alpha, styled, useThemeProps } from '@mui/material/styles';
 import Collapse from '@mui/material/Collapse';
 import MuiCheckbox from '@mui/material/Checkbox';
 import { useSlotProps } from '@mui/base/utils';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import composeClasses from '@mui/utils/composeClasses';
 import { unstable_useTreeItem2 as useTreeItem2 } from '../useTreeItem2';
-import { getTreeItemUtilityClass, treeItemClasses } from '../TreeItem';
+import { getTreeItemUtilityClass } from '../TreeItem';
 import { TreeItem2Icon } from '../TreeItem2Icon';
 import { TreeItem2Provider } from '../TreeItem2Provider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,7 +31,7 @@ export const TreeItem2Content = styled('div', {
   name: 'MuiTreeItem2',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
-  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status'
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'status' && prop !== 'indentationAtItemLevel'
 })(({
   theme
 }) => ({
@@ -52,12 +52,14 @@ export const TreeItem2Content = styled('div', {
       backgroundColor: 'transparent'
     }
   },
-  [`& .${treeItemClasses.groupTransition}`]: {
-    margin: 0,
-    padding: 0,
-    paddingLeft: 12
-  },
   variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`
+    }
+  }, {
     props: ({
       status
     }) => status.disabled,
@@ -125,11 +127,20 @@ export const TreeItem2IconContainer = styled('div', {
 export const TreeItem2GroupTransition = styled(Collapse, {
   name: 'MuiTreeItem2',
   slot: 'GroupTransition',
-  overridesResolver: (props, styles) => styles.groupTransition
+  overridesResolver: (props, styles) => styles.groupTransition,
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'indentationAtItemLevel'
 })({
   margin: 0,
   padding: 0,
-  paddingLeft: 12
+  paddingLeft: 'var(--TreeView-itemChildrenIndentation)',
+  variants: [{
+    props: {
+      indentationAtItemLevel: true
+    },
+    style: {
+      paddingLeft: 0
+    }
+  }]
 });
 export const TreeItem2Checkbox = styled( /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/TreeItem2Provider/TreeItem2Provider.js

@@ -6,11 +6,13 @@ function TreeItem2Provider(props) {
     itemId
   } = props;
   const {
-    wrapItem
+    wrapItem,
+    instance
   } = useTreeViewContext();
   return wrapItem({
     children,
-    itemId
+    itemId,
+    instance
   });
 }
 TreeItem2Provider.propTypes = {

package/TreeView/TreeView.js

@@ -115,11 +115,25 @@ process.env.NODE_ENV !== "production" ? TreeView.propTypes = {
    * Used when the item's expansion is controlled.
    */
   expandedItems: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Unstable features, breaking changes might be introduced.
+   * For each feature, if the flag is not explicitly set to `true`,
+   * the feature will be fully disabled and any property / method call will not have any effect.
+   */
+  experimentalFeatures: PropTypes.shape({
+    indentationAtItemLevel: PropTypes.bool
+  }),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
   id: PropTypes.string,
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**
    * If `true`, `ctrl` and `shift` will trigger multiselect.
    * @default false

package/index.js

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

package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TreeViewItemId } from '../../models';
+export declare const TreeViewItemDepthContext: React.Context<number | ((itemId: TreeViewItemId) => number)>;

package/internals/TreeViewItemDepthContext/TreeViewItemDepthContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const TreeViewItemDepthContext = /*#__PURE__*/React.createContext(() => -1);
+if (process.env.NODE_ENV !== 'production') {
+  TreeViewItemDepthContext.displayName = 'TreeViewItemDepthContext';
+}

package/internals/TreeViewItemDepthContext/index.d.ts

@@ -0,0 +1 @@
+export { TreeViewItemDepthContext } from './TreeViewItemDepthContext';

package/internals/TreeViewItemDepthContext/index.js

@@ -0,0 +1 @@
+export { TreeViewItemDepthContext } from './TreeViewItemDepthContext';

package/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -6,7 +6,7 @@ export declare const TreeViewContext: React.Context<{
     instance: {};
     publicAPI: {};
     rootRef: React.RefObject<HTMLUListElement>;
-    wrapItem: import("../models").TreeItemWrapper;
-    wrapRoot: import("../models").TreeRootWrapper;
+    wrapItem: import("../models").TreeItemWrapper<any>;
+    wrapRoot: import("../models").TreeRootWrapper<any>;
     runItemPlugins: <TProps extends {}>(props: TProps) => Required<import("../models").TreeViewItemPluginResponse>;
 } | null>;

package/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -4,8 +4,8 @@ export type TreeViewContextValue<TPlugins extends readonly TreeViewAnyPluginSign
     instance: TreeViewInstance<TPlugins>;
     publicAPI: TreeViewPublicAPI<TPlugins>;
     rootRef: React.RefObject<HTMLUListElement>;
-    wrapItem: TreeItemWrapper;
-    wrapRoot: TreeRootWrapper;
+    wrapItem: TreeItemWrapper<TPlugins>;
+    wrapRoot: TreeRootWrapper<TPlugins>;
     runItemPlugins: <TProps extends {}>(props: TProps) => Required<TreeViewItemPluginResponse>;
 };
 export interface TreeViewProviderProps<TPlugins extends readonly TreeViewAnyPluginSignature[]> {

package/internals/index.d.ts

@@ -1,7 +1,7 @@
 export { useTreeView } from './useTreeView';
 export { TreeViewProvider } from './TreeViewProvider';
 export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewPublicAPI, } from './models';
+export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergePluginsProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures, } from './models';
 export { DEFAULT_TREE_VIEW_PLUGINS } from './plugins/defaultPlugins';
 export type { DefaultTreeViewPlugins, DefaultTreeViewPluginSlots, DefaultTreeViewPluginSlotProps, } from './plugins/defaultPlugins';
 export type { DefaultTreeViewPluginParameters } from './plugins/defaultPlugins';

package/internals/models/helpers.d.ts

@@ -17,5 +17,6 @@ export interface MergePlugins<TPlugins extends readonly any[]> {
     slotProps: MergePluginsProperty<TPlugins, 'slotProps'>;
     events: MergePluginsProperty<TPlugins, 'events'>;
     models: MergePluginsProperty<TPlugins, 'models'>;
+    experimentalFeatures: MergePluginsProperty<TPlugins, 'experimentalFeatures'>;
 }
 export {};

package/internals/models/plugin.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/base/utils';
-import { TreeViewModel } from './treeView';
+import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from './treeView';
 import type { MergePluginsProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
 import type { TreeViewCorePluginsSignature } from '../corePlugins';
@@ -11,6 +11,7 @@ export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSigna
     state: TreeViewUsedState<TSignature>;
     slots: TSignature['slots'];
     slotProps: TSignature['slotProps'];
+    experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     models: TreeViewUsedModels<TSignature>;
     setState: React.Dispatch<React.SetStateAction<TreeViewUsedState<TSignature>>>;
     rootRef: React.RefObject<HTMLUListElement>;
@@ -40,6 +41,7 @@ export type TreeViewPluginSignature<T extends {
         [key in keyof T['slotProps']]: {} | (() => {});
     };
     modelNames?: keyof T['defaultizedParams'];
+    experimentalFeatures?: string;
     dependantPlugins?: readonly TreeViewAnyPluginSignature[];
 }> = {
     params: T extends {
@@ -75,6 +77,7 @@ export type TreeViewPluginSignature<T extends {
     } ? {
         [TControlled in T['modelNames']]-?: TreeViewModel<Exclude<T['defaultizedParams'][TControlled], undefined>>;
     } : {};
+    experimentalFeatures: T['experimentalFeatures'];
     dependantPlugins: T extends {
         dependantPlugins: Array<any>;
     } ? T['dependantPlugins'] : [];
@@ -90,6 +93,7 @@ export type TreeViewAnyPluginSignature = {
     slots: any;
     slotProps: any;
     models: any;
+    experimentalFeatures: any;
     publicAPI: any;
 };
 type TreeViewUsedPlugins<TSignature extends TreeViewAnyPluginSignature> = [
@@ -105,6 +109,7 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
     $$signature: TSignature;
 };
 type TreeViewUsedState<TSignature extends TreeViewAnyPluginSignature> = TSignature['state'] & MergePluginsProperty<TreeViewUsedPlugins<TSignature>, 'state'>;
+type TreeViewUsedExperimentalFeatures<TSignature extends TreeViewAnyPluginSignature> = TreeViewExperimentalFeatures<[TSignature, ...TSignature['dependantPlugins']]>;
 type RemoveSetValue<Models extends Record<string, TreeViewModel<any>>> = {
     [K in keyof Models]: Omit<Models[K], 'setValue'>;
 };
@@ -124,12 +129,14 @@ export interface TreeViewItemPluginResponse {
     rootRef?: React.RefCallback<HTMLLIElement> | null;
 }
 export type TreeViewItemPlugin<TProps extends {}> = (options: TreeViewItemPluginOptions<TProps>) => void | TreeViewItemPluginResponse;
-export type TreeItemWrapper = (params: {
+export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
     itemId: TreeViewItemId;
     children: React.ReactNode;
+    instance: TreeViewInstance<TSignatures>;
 }) => React.ReactNode;
-export type TreeRootWrapper = (params: {
+export type TreeRootWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
     children: React.ReactNode;
+    instance: TreeViewInstance<TSignatures>;
 }) => React.ReactNode;
 export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
     (options: TreeViewPluginOptions<TSignature>): TreeViewResponse<TSignature>;
@@ -143,12 +150,12 @@ export type TreeViewPlugin<TSignature extends TreeViewAnyPluginSignature> = {
      * @param {{ nodeId: TreeViewItemId; children: React.ReactNode; }} params The params of the item.
      * @returns {React.ReactNode} The wrapped item.
      */
-    wrapItem?: TreeItemWrapper;
+    wrapItem?: TreeItemWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
     /**
      * Render function used to add React wrappers around the TreeView.
      * @param {{ children: React.ReactNode; }} params The params of the root.
      * @returns {React.ReactNode} The wrapped root.
      */
-    wrapRoot?: TreeRootWrapper;
+    wrapRoot?: TreeRootWrapper<[TSignature, ...TSignature['dependantPlugins']]>;
 };
 export {};