@mui/x-tree-view 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -5,6 +5,177 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.0.0-beta.2
+
+_Mar 27, 2025_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔍 Update the Data Grid quick filter to be collapsed when not in use
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@lhilgert9.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @hasdfa, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @mnajdova, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.2`
+
+- [DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057) @arminmeh
+- [DataGrid] Refactor: remove more material (#16922) @romgrk
+- [DataGrid] Update Quick Filter component to be expandable (#16862) @KenanYusuf
+- [DataGrid] Fix crash when used with `@mui/styled-engine-sc` (#17154) @KenanYusuf
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.2` [![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@8.0.0-beta.2`, plus:
+
+- [DataGridPro] Data source: Allow expanding groups with unknown children (#17144) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.2` [![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@8.0.0-beta.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.2`
+
+- [fields] Extract the props of each field slot into a standalone hook for easier re-use (#17114) @flaviendelangle
+- [pickers] Fix visual regression in Date Range Calendar's day (#17148) @flaviendelangle
+- [pickers] Remove all code duplication to apply default values to validation props (#17038) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.2` [![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@8.0.0-beta.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.2`
+
+- [charts] Memoize axes and series with default (#17156) @alexfauquette
+- [charts] Add pie benchmark (#17115) @JCQuintas
+- [charts] Fix CSS vars support for dark theme (#17106) @alexfauquette
+- [charts] Fix radar hover (#17134) @alexfauquette
+- [charts] Move axis interaction to selectors (#17039) @alexfauquette
+- [charts] Fix Pie benchmark (#17125) @JCQuintas
+
+#### `@mui/x-charts-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.2`.
+
+### `@mui/x-codemod@8.0.0-beta.1`
+
+- [codemod] Add Data Grid codemods (#17121, #17124) @MBilalShafi
+
+### Docs
+
+- [docs] Fix example import for `ExportExcel` component (#17110) @KenanYusuf
+
+### Core
+
+- [code-infra] Remove `@mui/styles` dependency & patches (#17071) @mnajdova
+- [code-infra] Add more tests to slow screenshot tests (#17075) @JCQuintas
+- [code-infra] Fix pickers codecov (#17120) @JCQuintas
+- [code-infra] Move `isDeepEqual` to @mui/x-internals (#17129) @JCQuintas
+- [code-infra] Remove `test_regressions` step from React 18 pipeline (#17108) @LukasTy
+- [code-infra] Update some data-grid tests for vitest (#17078, #17104, #17146) @JCQuintas
+- [code-infra] Update some date-pickers tests for vitest (#17083) @JCQuintas
+- [infra] Update `issue-status-label-handler.yml` @michelengelen
+- [infra] Added reusable issue status label handler workflow (#17145) @michelengelen
+- [infra] Switch to reusable 'stale issues/PRs' workflow (#17107) @michelengelen
+- [telemetry] Improve request body size, update dependencies, and optimize SSR handling (#17008) @hasdfa
+
+## 8.0.0-beta.1
+
+_Mar 21, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@jyash97.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @flaviendelangle, @JCQuintas, @KenanYusuf.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.0.0-beta.1`
+
+- [DataGrid] Fix error caused by `forwardRef` to `ClickAwayListener` (#17049) @arminmeh
+- [DataGrid] Fix error while editing rows with custom id (#17048) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DataGridPro] Fix header select checkbox state with `checkboxSelectionVisibleOnly` and `paginationMode="server"` (#17026) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DataGridPremium] Update column state correctly when grouping mode is updated with one grouping column (#17069) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.0.0-beta.1`
+
+- [fields] Clean the `useField` hook (part 1) (#16944) @flaviendelangle
+- [fields] Improve the check for year in `doesSectionFormatHaveLeadingZeros` (#17051) @flaviendelangle
+- [pickers] Deprecate the `disableOpenPicker` prop (#17040) @flaviendelangle
+- [pickers] Simplify the `cleanLeadingZeros` method (#17063) @flaviendelangle
+- [pickers] Use the new `ownerState` in `PickersDay` and `DateRangePickerDay` (#17035) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.0.0-beta.1` [![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@8.0.0-beta.1`, plus:
+
+- [DateRangePicker] Use desktop media query constant on range pickers (#17052) @flaviendelangle
+
+### Charts
+
+#### `@mui/x-charts@8.0.0-beta.1`
+
+- [charts] Fix horizontal bar with multiple axes (#17059) @alexfauquette
+
+#### `@mui/x-charts-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.0.0-beta.1`, plus:
+
+- [charts-pro] Allow disabling Heatmap tooltip (#17060) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.0.0-beta.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.0.0-beta.1`.
+
+### Docs
+
+- [docs] Fix 404 (#17033) @alexfauquette
+- [docs] Fix Data Grid advanced list view demo (#17064) @KenanYusuf
+
 ## 8.0.0-beta.0
 
 <img width="100%" alt="MUI X v8 Beta is live" src="https://github.com/user-attachments/assets/61ec4dd8-c946-456b-8b45-d51de8772f5d">

package/RichTreeView/RichTreeView.js

@@ -29,10 +29,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return (0, _composeClasses.default)(slots, _richTreeViewClasses.getRichTreeViewUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      itemLabelInput: ['itemLabelInput'],
+      itemCheckbox: ['itemCheckbox']
+      // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
+      // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+    };
+    return (0, _composeClasses.default)(slots, _richTreeViewClasses.getRichTreeViewUtilityClass, classes);
+  }, [classes]);
 };
 const RichTreeViewRoot = exports.RichTreeViewRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiRichTreeView',
@@ -100,7 +111,8 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
         slots: slots,

package/RichTreeView/richTreeViewClasses.d.ts

@@ -1,7 +1,5 @@
-export interface RichTreeViewClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface RichTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
 export type RichTreeViewClassKey = keyof RichTreeViewClasses;
 export declare function getRichTreeViewUtilityClass(slot: string): string;
 export declare const richTreeViewClasses: RichTreeViewClasses;

package/RichTreeView/richTreeViewClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRichTreeViewUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRichTreeView', slot);
 }
-const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root']);
+const richTreeViewClasses = exports.richTreeViewClasses = (0, _generateUtilityClasses.default)('MuiRichTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox', 'itemLabelInput']);

package/SimpleTreeView/SimpleTreeView.js

@@ -24,10 +24,21 @@ const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  const slots = {
-    root: ['root']
-  };
-  return (0, _composeClasses.default)(slots, _simpleTreeViewClasses.getSimpleTreeViewUtilityClass, classes);
+  return React.useMemo(() => {
+    const slots = {
+      root: ['root'],
+      item: ['item'],
+      itemContent: ['itemContent'],
+      itemGroupTransition: ['itemGroupTransition'],
+      itemIconContainer: ['itemIconContainer'],
+      itemLabel: ['itemLabel'],
+      // itemLabelInput: ['itemLabelInput'], => feature not available on this component
+      itemCheckbox: ['itemCheckbox']
+      // itemDragAndDropOverlay: ['itemDragAndDropOverlay'], => feature not available on this component
+      // itemErrorIcon: ['itemErrorIcon'], => feature not available on this component
+    };
+    return (0, _composeClasses.default)(slots, _simpleTreeViewClasses.getSimpleTreeViewUtilityClass, classes);
+  }, [classes]);
 };
 const SimpleTreeViewRoot = exports.SimpleTreeViewRoot = (0, _zeroStyled.styled)('ul', {
   name: 'MuiSimpleTreeView',
@@ -87,7 +98,8 @@ const SimpleTreeView = exports.SimpleTreeView = /*#__PURE__*/React.forwardRef(fu
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewProvider.TreeViewProvider, {
-    value: contextValue,
+    contextValue: contextValue,
+    classes: classes,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps))
   });
 });

package/SimpleTreeView/simpleTreeViewClasses.d.ts

@@ -1,7 +1,5 @@
-export interface SimpleTreeViewClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
+import { TreeViewClasses } from "../internals/TreeViewProvider/TreeViewStyleContext.js";
+export interface SimpleTreeViewClasses extends Omit<TreeViewClasses, 'itemDragAndDropOverlay' | 'itemLabelInput' | 'itemErrorIcon' | 'itemLoadingIcon'> {}
 export type SimpleTreeViewClassKey = keyof SimpleTreeViewClasses;
 export declare function getSimpleTreeViewUtilityClass(slot: string): string;
 export declare const simpleTreeViewClasses: SimpleTreeViewClasses;

package/SimpleTreeView/simpleTreeViewClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getSimpleTreeViewUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiSimpleTreeView', slot);
 }
-const simpleTreeViewClasses = exports.simpleTreeViewClasses = (0, _generateUtilityClasses.default)('MuiSimpleTreeView', ['root']);
+const simpleTreeViewClasses = exports.simpleTreeViewClasses = (0, _generateUtilityClasses.default)('MuiSimpleTreeView', ['root', 'item', 'itemContent', 'itemGroupTransition', 'itemIconContainer', 'itemLabel', 'itemCheckbox']);

package/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").CircularProgressProps, keyof import("@mui/material").CircularProgressProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const TreeItemCheckbox: 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" | "action" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "readOnly" | "required" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "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" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "classes" | "component" | "slots" | "slotProps" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "inputRef" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "hidden" | "visible" | "color" | "content" | "size" | "style" | "icon" | "translate" | "disabled" | "form" | "slot" | "title" | "action" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "readOnly" | "required" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "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" | "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" | "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" | "sx" | "classes" | "component" | "slots" | "slotProps" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "inputRef" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/TreeItem/TreeItem.js

@@ -27,9 +27,10 @@ var _TreeItemIcon = require("../TreeItemIcon");
 var _TreeItemDragAndDropOverlay = require("../TreeItemDragAndDropOverlay");
 var _TreeItemProvider = require("../TreeItemProvider");
 var _TreeItemLabelInput = require("../TreeItemLabelInput");
+var _TreeViewStyleContext = require("../internals/TreeViewProvider/TreeViewStyleContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["visible"],
-  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps"];
+  _excluded2 = ["id", "itemId", "label", "disabled", "children", "slots", "slotProps", "classes"];
 const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiTreeItem');
 const TreeItemRoot = exports.TreeItemRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiTreeItem',
@@ -68,43 +69,26 @@ const TreeItemContent = exports.TreeItemContent = (0, _zeroStyled.styled)('div',
       backgroundColor: 'transparent'
     }
   },
-  variants: [{
-    props: ({
-      status
-    }) => status.disabled,
-    style: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity,
-      backgroundColor: 'transparent'
-    }
-  }, {
-    props: ({
-      status
-    }) => status.focused,
-    style: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    }
-  }, {
-    props: ({
-      status
-    }) => status.selected,
-    style: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
-        }
+  '&[data-disabled]': {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity,
+    backgroundColor: 'transparent'
+  },
+  '&[data-focused]': {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  '&[data-selected]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+    '&:hover': {
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
       }
     }
-  }, {
-    props: ({
-      status
-    }) => status.selected && status.focused,
-    style: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    }
-  }]
+  },
+  '&[data-selected][data-focused]': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  }
 }));
 const TreeItemLabel = exports.TreeItemLabel = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItem',
@@ -190,19 +174,25 @@ const TreeItemCheckbox = exports.TreeItemCheckbox = (0, _zeroStyled.styled)(/*#_
 })({
   padding: 0
 });
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = classesProp => {
   const {
-    classes
-  } = ownerState;
+    classes: classesFromTreeView
+  } = (0, _TreeViewStyleContext.useTreeViewStyleContext)();
+  const classes = (0, _extends2.default)({}, classesProp, {
+    root: (0, _clsx.default)(classesProp?.root, classesFromTreeView.root),
+    content: (0, _clsx.default)(classesProp?.content, classesFromTreeView.itemContent),
+    iconContainer: (0, _clsx.default)(classesProp?.iconContainer, classesFromTreeView.itemIconContainer),
+    checkbox: (0, _clsx.default)(classesProp?.checkbox, classesFromTreeView.itemCheckbox),
+    label: (0, _clsx.default)(classesProp?.label, classesFromTreeView.itemLabel),
+    groupTransition: (0, _clsx.default)(classesProp?.groupTransition, classesFromTreeView.itemGroupTransition),
+    labelInput: (0, _clsx.default)(classesProp?.labelInput, classesFromTreeView.itemLabelInput),
+    dragAndDropOverlay: (0, _clsx.default)(classesProp?.dragAndDropOverlay, classesFromTreeView.itemDragAndDropOverlay),
+    errorIcon: (0, _clsx.default)(classesProp?.errorIcon, classesFromTreeView.itemErrorIcon),
+    loadingIcon: (0, _clsx.default)(classesProp?.loadingIcon, classesFromTreeView.itemLoadingIcon)
+  });
   const slots = {
     root: ['root'],
     content: ['content'],
-    expanded: ['expanded'],
-    editing: ['editing'],
-    editable: ['editable'],
-    selected: ['selected'],
-    focused: ['focused'],
-    disabled: ['disabled'],
     iconContainer: ['iconContainer'],
     checkbox: ['checkbox'],
     label: ['label'],
@@ -210,7 +200,13 @@ const useUtilityClasses = ownerState => {
     labelInput: ['labelInput'],
     dragAndDropOverlay: ['dragAndDropOverlay'],
     errorIcon: ['errorIcon'],
-    loadingIcon: ['loadingIcon']
+    loadingIcon: ['loadingIcon'],
+    expanded: ['expanded'],
+    editing: ['editing'],
+    editable: ['editable'],
+    selected: ['selected'],
+    focused: ['focused'],
+    disabled: ['disabled']
   };
   return (0, _composeClasses.default)(slots, _treeItemClasses.getTreeItemUtilityClass, classes);
 };
@@ -236,7 +232,8 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
       disabled,
       children,
       slots = {},
-      slotProps = {}
+      slotProps = {},
+      classes: classesProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const {
@@ -259,8 +256,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     label,
     disabled
   });
-  const ownerState = (0, _extends2.default)({}, props, status);
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const Root = slots.root ?? TreeItemRoot;
   const rootProps = (0, _useSlotProps.default)({
     elementType: Root,

package/TreeItem/index.d.ts

@@ -1,3 +1,4 @@
 export { TreeItem, TreeItemRoot, TreeItemContent, TreeItemIconContainer, TreeItemGroupTransition, TreeItemCheckbox, TreeItemLabel } from "./TreeItem.js";
 export type { TreeItemProps, TreeItemSlots, TreeItemSlotProps } from './TreeItem.types';
-export * from "./treeItemClasses.js";
+export { getTreeItemUtilityClass, treeItemClasses } from "./treeItemClasses.js";
+export type { TreeItemClassKey, TreeItemClasses } from './treeItemClasses';

package/TreeItem/index.js

@@ -3,15 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  TreeItem: true,
-  TreeItemRoot: true,
-  TreeItemContent: true,
-  TreeItemIconContainer: true,
-  TreeItemGroupTransition: true,
-  TreeItemCheckbox: true,
-  TreeItemLabel: true
-};
 Object.defineProperty(exports, "TreeItem", {
   enumerable: true,
   get: function () {
@@ -54,16 +45,17 @@ Object.defineProperty(exports, "TreeItemRoot", {
     return _TreeItem.TreeItemRoot;
   }
 });
+Object.defineProperty(exports, "getTreeItemUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _treeItemClasses.getTreeItemUtilityClass;
+  }
+});
+Object.defineProperty(exports, "treeItemClasses", {
+  enumerable: true,
+  get: function () {
+    return _treeItemClasses.treeItemClasses;
+  }
+});
 var _TreeItem = require("./TreeItem");
-var _treeItemClasses = require("./treeItemClasses");
-Object.keys(_treeItemClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _treeItemClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _treeItemClasses[key];
-    }
-  });
-});
+var _treeItemClasses = require("./treeItemClasses");

package/TreeItem/treeItemClasses.d.ts

@@ -1,32 +1,54 @@
 export interface TreeItemClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the transition component. */
-  groupTransition: string;
   /** Styles applied to the content element. */
   content: string;
-  /** State class applied to the content element when expanded. */
-  expanded: string;
-  /** State class applied to the content element when selected. */
-  selected: string;
-  /** State class applied to the content element when focused. */
-  focused: string;
-  /** State class applied to the element when disabled. */
-  disabled: string;
-  /** Styles applied to the Tree Item icon. */
+  /** Styles applied to the transition element. */
+  groupTransition: string;
+  /** Styles applied to the icon container element. */
   iconContainer: string;
   /** Styles applied to the label element. */
   label: string;
+  /** Styles applied to the label input element (visible only when editing is enabled). */
+  labelInput: string;
   /** Styles applied to the checkbox element. */
   checkbox: string;
-  /** Styles applied to the input element that is visible when editing is enabled. */
-  labelInput: string;
-  /** Styles applied to the content element when editing is enabled. */
-  editing: string;
-  /** Styles applied to the content of the items that are editable. */
-  editable: string;
-  /** Styles applied to the drag and drop overlay. */
+  /** Styles applied to the drag and drop overlay element. */
   dragAndDropOverlay: string;
+  /** Styles applied to the error icon element */
+  errorIcon: string;
+  /** Styles applied to the loading icon element */
+  loadingIcon: string;
+  /**
+   * State class applied to the content element when the item is expanded.
+   * @deprecated Use the `data-expanded` attribute instead.
+   */
+  expanded: string;
+  /**
+   * State class applied to the content element when the item is selected.
+   * @deprecated Use the `data-selected` attribute instead.
+   */
+  selected: string;
+  /**
+   * State class applied to the content element when the item is focused.
+   * @deprecated Use the `data-focused` attribute instead.
+   */
+  focused: string;
+  /**
+   * State class applied to the content element when the item is disabled.
+   * @deprecated Use the `data-disabled` attribute instead.
+   */
+  disabled: string;
+  /**
+   * State class applied to the content element when the item is editable.
+   * @deprecated Use the `data-editable` attribute instead.
+   */
+  editable: string;
+  /**
+   * State class applied to the content element when the item is being edited.
+   * @deprecated Use the `data-editing` attribute instead.
+   */
+  editing: string;
 }
 export type TreeItemClassKey = keyof TreeItemClasses;
 export declare function getTreeItemUtilityClass(slot: string): string;

package/TreeItem/treeItemClasses.js

@@ -11,4 +11,6 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getTreeItemUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiTreeItem', slot);
 }
-const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'groupTransition', 'content', 'expanded', 'selected', 'focused', 'disabled', 'iconContainer', 'label', 'checkbox', 'labelInput', 'editable', 'editing', 'dragAndDropOverlay']);
+const treeItemClasses = exports.treeItemClasses = (0, _generateUtilityClasses.default)('MuiTreeItem', ['root', 'content', 'groupTransition', 'iconContainer', 'label', 'checkbox', 'labelInput', 'dragAndDropOverlay', 'errorIcon', 'loadingIcon',
+// State classes, will be replaced by data-attrs in the next major
+'expanded', 'selected', 'focused', 'disabled', 'editable', 'editing']);

package/TreeItemLabelInput/TreeItemLabelInput.js

@@ -18,12 +18,12 @@ const TreeItemLabelInput = exports.TreeItemLabelInput = (0, _zeroStyled.styled)(
   theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   width: '100%',
-  backgroundColor: theme.palette.background.paper,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
   borderRadius: theme.shape.borderRadius,
   border: 'none',
   padding: '0 2px',
   boxSizing: 'border-box',
   '&:focus': {
-    outline: `1px solid ${theme.palette.primary.main}`
+    outline: `1px solid ${(theme.vars || theme).palette.primary.main}`
   }
 }));