@mui/x-tree-view 7.10.0 → 7.11.0

package/CHANGELOG.md

@@ -3,6 +3,91 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.11.0
+
+_Jul 18, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Add [color legend](https://mui.com/x/react-charts/legend/#color-legend) for charts (#13700) @alexfauquette
+- 🌍 Improve Korean (ko-KR) locale on the Date and Time Pickers
+- 🌍 Improve Russian (ru-RU) locale on the Date and Time Pickers and Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.11.0`
+
+- [DataGrid] Expose `gridEditRowsStateSelector` (#13877) @romgrk
+- [DataGrid] Fix `columnResizeStop` event not emitted when column is not resized (#13307) @mateuseap
+- [DataGrid] Fix delete filter inconsistent behavior (#13353) @oukunan
+- [DataGrid] Enable flip on preferences panel (#13803) @romgrk
+- [DataGrid] Support `date` and `datetime-local` input types in `GridFilterInputMultipleValue` type (#13411) @karudedios
+- [l10n] Improve Russian (ru-RU) locale (#13735) @diro-atk
+
+#### `@mui/x-data-grid-pro@7.11.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.11.0`.
+
+#### `@mui/x-data-grid-premium@7.11.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.11.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.11.0`
+
+- [l10n] Improve Korean (ko-KR) locale (#13651) @100pearlcent
+- [l10n] Improve Russian (ru-RU) locale (#13871) @Inv1x
+- [pickers] Add more conformance tests improving API docs precision (#13800) @LukasTy
+- [TimePicker] Add `Mui-selected` class to `TimeClock` meridiem buttons (#13848) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.11.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.11.0`, plus:
+
+- [DateRangePicker] Fix `name` prop propagation regression (#13821) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.11.0`
+
+- [charts] Create color legend (#13700) @alexfauquette
+- [charts] Defaultize axis on top level `useChartContainerProps` (#13817) @JCQuintas
+- [charts] Fix charts not passing `className` to root element (#13647) @JCQuintas
+- [charts] Generate API documentation for pro components (#13822) @alexfauquette
+- [charts] Improve zoomed highlight behaviour (unreleased) (#13868) @JCQuintas
+- [charts] Allow zoom on Y axis and add zoom options to configure zooming behaviour (unreleased) (#13726) @JCQuintas
+- [charts] Disable animations while zooming (unreleased) (#13807) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.11.0`
+
+- [TreeView] Extract some logic outside of the `useTreeView` hook (#13845) @flaviendelangle
+
+### Docs
+
+- [docs] Add warning about `process.env.NODE_ENV` in production (#13869) @cherniavskii
+- [docs] Allow controlling the demo form from the example (#13796) @JCQuintas
+- [docs] Clarify Pickers clearable behavior not working on mobile (#13786) @lnhrdt
+- [docs] Improve the documentation of the picker's `onChange` and `onAccept` props (#13543) @flaviendelangle
+- [docs] Replace company name with project name @oliviertassinari
+- [docs] Sort Pickers & Charts API slots alphabetically (#13843) @LukasTy
+
+### Core
+
+- [core] Add MUI Internal `renovate` group (#13846) @LukasTy
+- [core] Link GitHub issue for `import/prefer-default-export` rule @oliviertassinari
+- [core] Normalize `...other` and test imports in charts (#13844) @JCQuintas
+- [core] Normalize rest / other to match the most common used @oliviertassinari
+- [code-infra] Follow `next` tag for `@mui/docs` package bumps (#13813) @LukasTy
+- [code-infra] Use specific version for `@mui/docs` dependency (#13760) @LukasTy
+- [internals] Move `EventManager` to `@mui/x-internals` package (#13815) @flaviendelangle
+
 ## 7.10.0
 
 _Jul 11, 2024_

package/TreeItem2/TreeItem2.d.ts

@@ -14,7 +14,7 @@ export declare const TreeItem2GroupTransition: import("@emotion/styled").StyledC
 }, {}, {}>;
 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" | "onPointerLeave" | "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>, {}, {}>;
+}, "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" | "onPointerLeave" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "checkedIcon" | "inputProps" | "inputRef" | "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/index.js

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

package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventManager } from '../../utils/EventManager';
+import { EventManager } from '@mui/x-internals/EventManager';
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };

package/internals/useTreeView/useTreeView.js

@@ -4,6 +4,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewModels } from './useTreeViewModels';
 import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
 import { extractPluginParamsFromProps } from './extractPluginParamsFromProps';
+import { useTreeViewBuildContext } from './useTreeViewBuildContext';
 export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -37,6 +38,12 @@ export const useTreeView = ({
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = useForkRef(innerRootRef, rootRef);
+  const contextValue = useTreeViewBuildContext({
+    plugins,
+    instance,
+    publicAPI,
+    rootRef: innerRootRef
+  });
   const [state, setState] = React.useState(() => {
     const temp = {};
     plugins.forEach(plugin => {
@@ -46,68 +53,6 @@ export const useTreeView = ({
     });
     return temp;
   });
-  const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
-  const wrapItem = ({
-    itemId,
-    children
-  }) => {
-    let finalChildren = children;
-    itemWrappers.forEach(itemWrapper => {
-      finalChildren = itemWrapper({
-        itemId,
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
-  // The wrappers are reversed to ensure that the first wrapper is the outermost one.
-  .reverse();
-  const wrapRoot = ({
-    children
-  }) => {
-    let finalChildren = children;
-    rootWrappers.forEach(rootWrapper => {
-      finalChildren = rootWrapper({
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const runItemPlugins = itemPluginProps => {
-    let finalRootRef = null;
-    let finalContentRef = null;
-    plugins.forEach(plugin => {
-      if (!plugin.itemPlugin) {
-        return;
-      }
-      const itemPluginResponse = plugin.itemPlugin({
-        props: itemPluginProps,
-        rootRef: finalRootRef,
-        contentRef: finalContentRef
-      });
-      if (itemPluginResponse?.rootRef) {
-        finalRootRef = itemPluginResponse.rootRef;
-      }
-      if (itemPluginResponse?.contentRef) {
-        finalContentRef = itemPluginResponse.contentRef;
-      }
-    });
-    return {
-      contentRef: finalContentRef,
-      rootRef: finalRootRef
-    };
-  };
-  const contextValue = {
-    publicAPI,
-    wrapItem,
-    wrapRoot,
-    runItemPlugins,
-    instance: instance,
-    rootRef: innerRootRef
-  };
   const rootPropsGetters = [];
   const runPlugin = plugin => {
     const pluginResponse = plugin({

package/internals/useTreeView/useTreeViewBuildContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TreeViewContextValue } from '../TreeViewProvider';
+import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI } from '../models';
+import { TreeViewCorePluginSignatures } from '../corePlugins';
+export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>({ plugins, instance, publicAPI, rootRef, }: {
+    plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
+    instance: TreeViewInstance<TSignatures>;
+    publicAPI: TreeViewPublicAPI<TSignatures>;
+    rootRef: React.RefObject<HTMLUListElement>;
+}) => TreeViewContextValue<TSignatures>;

package/internals/useTreeView/useTreeViewBuildContext.js

@@ -0,0 +1,73 @@
+export const useTreeViewBuildContext = ({
+  plugins,
+  instance,
+  publicAPI,
+  rootRef
+}) => {
+  const runItemPlugins = itemPluginProps => {
+    let finalRootRef = null;
+    let finalContentRef = null;
+    plugins.forEach(plugin => {
+      if (!plugin.itemPlugin) {
+        return;
+      }
+      const itemPluginResponse = plugin.itemPlugin({
+        props: itemPluginProps,
+        rootRef: finalRootRef,
+        contentRef: finalContentRef
+      });
+      if (itemPluginResponse?.rootRef) {
+        finalRootRef = itemPluginResponse.rootRef;
+      }
+      if (itemPluginResponse?.contentRef) {
+        finalContentRef = itemPluginResponse.contentRef;
+      }
+    });
+    return {
+      contentRef: finalContentRef,
+      rootRef: finalRootRef
+    };
+  };
+  const wrapItem = ({
+    itemId,
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapItem) {
+        finalChildren = plugin.wrapItem({
+          itemId,
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  const wrapRoot = ({
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapRoot) {
+        finalChildren = plugin.wrapRoot({
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  return {
+    runItemPlugins,
+    wrapItem,
+    wrapRoot,
+    instance,
+    rootRef,
+    publicAPI
+  };
+};

package/modern/index.js

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

package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventManager } from '../../utils/EventManager';
+import { EventManager } from '@mui/x-internals/EventManager';
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;
 };

package/modern/internals/useTreeView/useTreeView.js

@@ -4,6 +4,7 @@ import useForkRef from '@mui/utils/useForkRef';
 import { useTreeViewModels } from './useTreeViewModels';
 import { TREE_VIEW_CORE_PLUGINS } from '../corePlugins';
 import { extractPluginParamsFromProps } from './extractPluginParamsFromProps';
+import { useTreeViewBuildContext } from './useTreeViewBuildContext';
 export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {
@@ -37,6 +38,12 @@ export const useTreeView = ({
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = useForkRef(innerRootRef, rootRef);
+  const contextValue = useTreeViewBuildContext({
+    plugins,
+    instance,
+    publicAPI,
+    rootRef: innerRootRef
+  });
   const [state, setState] = React.useState(() => {
     const temp = {};
     plugins.forEach(plugin => {
@@ -46,68 +53,6 @@ export const useTreeView = ({
     });
     return temp;
   });
-  const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
-  const wrapItem = ({
-    itemId,
-    children
-  }) => {
-    let finalChildren = children;
-    itemWrappers.forEach(itemWrapper => {
-      finalChildren = itemWrapper({
-        itemId,
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
-  // The wrappers are reversed to ensure that the first wrapper is the outermost one.
-  .reverse();
-  const wrapRoot = ({
-    children
-  }) => {
-    let finalChildren = children;
-    rootWrappers.forEach(rootWrapper => {
-      finalChildren = rootWrapper({
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const runItemPlugins = itemPluginProps => {
-    let finalRootRef = null;
-    let finalContentRef = null;
-    plugins.forEach(plugin => {
-      if (!plugin.itemPlugin) {
-        return;
-      }
-      const itemPluginResponse = plugin.itemPlugin({
-        props: itemPluginProps,
-        rootRef: finalRootRef,
-        contentRef: finalContentRef
-      });
-      if (itemPluginResponse?.rootRef) {
-        finalRootRef = itemPluginResponse.rootRef;
-      }
-      if (itemPluginResponse?.contentRef) {
-        finalContentRef = itemPluginResponse.contentRef;
-      }
-    });
-    return {
-      contentRef: finalContentRef,
-      rootRef: finalRootRef
-    };
-  };
-  const contextValue = {
-    publicAPI,
-    wrapItem,
-    wrapRoot,
-    runItemPlugins,
-    instance: instance,
-    rootRef: innerRootRef
-  };
   const rootPropsGetters = [];
   const runPlugin = plugin => {
     const pluginResponse = plugin({

package/modern/internals/useTreeView/useTreeViewBuildContext.js

@@ -0,0 +1,73 @@
+export const useTreeViewBuildContext = ({
+  plugins,
+  instance,
+  publicAPI,
+  rootRef
+}) => {
+  const runItemPlugins = itemPluginProps => {
+    let finalRootRef = null;
+    let finalContentRef = null;
+    plugins.forEach(plugin => {
+      if (!plugin.itemPlugin) {
+        return;
+      }
+      const itemPluginResponse = plugin.itemPlugin({
+        props: itemPluginProps,
+        rootRef: finalRootRef,
+        contentRef: finalContentRef
+      });
+      if (itemPluginResponse?.rootRef) {
+        finalRootRef = itemPluginResponse.rootRef;
+      }
+      if (itemPluginResponse?.contentRef) {
+        finalContentRef = itemPluginResponse.contentRef;
+      }
+    });
+    return {
+      contentRef: finalContentRef,
+      rootRef: finalRootRef
+    };
+  };
+  const wrapItem = ({
+    itemId,
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapItem) {
+        finalChildren = plugin.wrapItem({
+          itemId,
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  const wrapRoot = ({
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapRoot) {
+        finalChildren = plugin.wrapRoot({
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  return {
+    runItemPlugins,
+    wrapItem,
+    wrapRoot,
+    instance,
+    rootRef,
+    publicAPI
+  };
+};

package/node/index.js

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

package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTreeViewInstanceEvents = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _EventManager = require("../../utils/EventManager");
+var _EventManager = require("@mui/x-internals/EventManager");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const isSyntheticEvent = event => {

package/node/internals/useTreeView/useTreeView.js

@@ -12,6 +12,7 @@ var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useTreeViewModels = require("./useTreeViewModels");
 var _corePlugins = require("../corePlugins");
 var _extractPluginParamsFromProps = require("./extractPluginParamsFromProps");
+var _useTreeViewBuildContext = require("./useTreeViewBuildContext");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function useTreeViewApiInitialization(inputApiRef) {
@@ -47,6 +48,12 @@ const useTreeView = ({
   const publicAPI = useTreeViewApiInitialization(apiRef);
   const innerRootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(innerRootRef, rootRef);
+  const contextValue = (0, _useTreeViewBuildContext.useTreeViewBuildContext)({
+    plugins,
+    instance,
+    publicAPI,
+    rootRef: innerRootRef
+  });
   const [state, setState] = React.useState(() => {
     const temp = {};
     plugins.forEach(plugin => {
@@ -56,68 +63,6 @@ const useTreeView = ({
     });
     return temp;
   });
-  const itemWrappers = plugins.map(plugin => plugin.wrapItem).filter(wrapItem => !!wrapItem);
-  const wrapItem = ({
-    itemId,
-    children
-  }) => {
-    let finalChildren = children;
-    itemWrappers.forEach(itemWrapper => {
-      finalChildren = itemWrapper({
-        itemId,
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const rootWrappers = plugins.map(plugin => plugin.wrapRoot).filter(wrapRoot => !!wrapRoot)
-  // The wrappers are reversed to ensure that the first wrapper is the outermost one.
-  .reverse();
-  const wrapRoot = ({
-    children
-  }) => {
-    let finalChildren = children;
-    rootWrappers.forEach(rootWrapper => {
-      finalChildren = rootWrapper({
-        children: finalChildren,
-        instance
-      });
-    });
-    return finalChildren;
-  };
-  const runItemPlugins = itemPluginProps => {
-    let finalRootRef = null;
-    let finalContentRef = null;
-    plugins.forEach(plugin => {
-      if (!plugin.itemPlugin) {
-        return;
-      }
-      const itemPluginResponse = plugin.itemPlugin({
-        props: itemPluginProps,
-        rootRef: finalRootRef,
-        contentRef: finalContentRef
-      });
-      if (itemPluginResponse?.rootRef) {
-        finalRootRef = itemPluginResponse.rootRef;
-      }
-      if (itemPluginResponse?.contentRef) {
-        finalContentRef = itemPluginResponse.contentRef;
-      }
-    });
-    return {
-      contentRef: finalContentRef,
-      rootRef: finalRootRef
-    };
-  };
-  const contextValue = {
-    publicAPI,
-    wrapItem,
-    wrapRoot,
-    runItemPlugins,
-    instance: instance,
-    rootRef: innerRootRef
-  };
   const rootPropsGetters = [];
   const runPlugin = plugin => {
     const pluginResponse = plugin({

package/node/internals/useTreeView/useTreeViewBuildContext.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewBuildContext = void 0;
+const useTreeViewBuildContext = ({
+  plugins,
+  instance,
+  publicAPI,
+  rootRef
+}) => {
+  const runItemPlugins = itemPluginProps => {
+    let finalRootRef = null;
+    let finalContentRef = null;
+    plugins.forEach(plugin => {
+      if (!plugin.itemPlugin) {
+        return;
+      }
+      const itemPluginResponse = plugin.itemPlugin({
+        props: itemPluginProps,
+        rootRef: finalRootRef,
+        contentRef: finalContentRef
+      });
+      if (itemPluginResponse?.rootRef) {
+        finalRootRef = itemPluginResponse.rootRef;
+      }
+      if (itemPluginResponse?.contentRef) {
+        finalContentRef = itemPluginResponse.contentRef;
+      }
+    });
+    return {
+      contentRef: finalContentRef,
+      rootRef: finalRootRef
+    };
+  };
+  const wrapItem = ({
+    itemId,
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapItem) {
+        finalChildren = plugin.wrapItem({
+          itemId,
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  const wrapRoot = ({
+    children
+  }) => {
+    let finalChildren = children;
+    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
+    for (let i = plugins.length - 1; i >= 0; i -= 1) {
+      const plugin = plugins[i];
+      if (plugin.wrapRoot) {
+        finalChildren = plugin.wrapRoot({
+          children: finalChildren,
+          instance
+        });
+      }
+    }
+    return finalChildren;
+  };
+  return {
+    runItemPlugins,
+    wrapItem,
+    wrapRoot,
+    instance,
+    rootRef,
+    publicAPI
+  };
+};
+exports.useTreeViewBuildContext = useTreeViewBuildContext;

package/node/internals/useTreeView/useTreeViewPlugins.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "7.10.0",
+  "version": "7.11.0",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,14 +33,15 @@
     "directory": "packages/x-tree-view"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@mui/base": "^5.0.0-beta.40",
-    "@mui/system": "^5.16.0",
-    "@mui/utils": "^5.16.0",
+    "@mui/system": "^5.16.2",
+    "@mui/utils": "^5.16.2",
     "@types/react-transition-group": "^4.4.10",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "@mui/x-internals": "7.11.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/internals/utils/EventManager.d.ts

@@ -1,29 +0,0 @@
-export type EventListener = (...args: any[]) => void;
-export interface EventListenerOptions {
-    isFirst?: boolean;
-}
-interface EventListenerCollection {
-    /**
-     * List of listeners to run before the others
-     * They are run in the opposite order of the registration order
-     */
-    highPriority: Map<EventListener, true>;
-    /**
-     * List of events to run after the high priority listeners
-     * They are run in the registration order
-     */
-    regular: Map<EventListener, true>;
-}
-export declare class EventManager {
-    maxListeners: number;
-    warnOnce: boolean;
-    events: {
-        [eventName: string]: EventListenerCollection;
-    };
-    on(eventName: string, listener: EventListener, options?: EventListenerOptions): void;
-    removeListener(eventName: string, listener: EventListener): void;
-    removeAllListeners(): void;
-    emit(eventName: string, ...args: any[]): void;
-    once(eventName: string, listener: EventListener): void;
-}
-export {};

package/internals/utils/EventManager.js

@@ -1,69 +0,0 @@
-// Used https://gist.github.com/mudge/5830382 as a starting point.
-// See https://github.com/browserify/events/blob/master/events.js for
-// the Node.js (https://nodejs.org/api/events.html) polyfill used by webpack.
-export class EventManager {
-  constructor() {
-    this.maxListeners = 20;
-    this.warnOnce = false;
-    this.events = {};
-  }
-  on(eventName, listener, options = {}) {
-    let collection = this.events[eventName];
-    if (!collection) {
-      collection = {
-        highPriority: new Map(),
-        regular: new Map()
-      };
-      this.events[eventName] = collection;
-    }
-    if (options.isFirst) {
-      collection.highPriority.set(listener, true);
-    } else {
-      collection.regular.set(listener, true);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      const collectionSize = collection.highPriority.size + collection.regular.size;
-      if (collectionSize > this.maxListeners && !this.warnOnce) {
-        this.warnOnce = true;
-        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`].join('\n'));
-      }
-    }
-  }
-  removeListener(eventName, listener) {
-    if (this.events[eventName]) {
-      this.events[eventName].regular.delete(listener);
-      this.events[eventName].highPriority.delete(listener);
-    }
-  }
-  removeAllListeners() {
-    this.events = {};
-  }
-  emit(eventName, ...args) {
-    const collection = this.events[eventName];
-    if (!collection) {
-      return;
-    }
-    const highPriorityListeners = Array.from(collection.highPriority.keys());
-    const regularListeners = Array.from(collection.regular.keys());
-    for (let i = highPriorityListeners.length - 1; i >= 0; i -= 1) {
-      const listener = highPriorityListeners[i];
-      if (collection.highPriority.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-    for (let i = 0; i < regularListeners.length; i += 1) {
-      const listener = regularListeners[i];
-      if (collection.regular.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-  }
-  once(eventName, listener) {
-    // eslint-disable-next-line consistent-this
-    const that = this;
-    this.on(eventName, function oneTimeListener(...args) {
-      that.removeListener(eventName, oneTimeListener);
-      listener.apply(that, args);
-    });
-  }
-}

package/modern/internals/utils/EventManager.js

@@ -1,69 +0,0 @@
-// Used https://gist.github.com/mudge/5830382 as a starting point.
-// See https://github.com/browserify/events/blob/master/events.js for
-// the Node.js (https://nodejs.org/api/events.html) polyfill used by webpack.
-export class EventManager {
-  constructor() {
-    this.maxListeners = 20;
-    this.warnOnce = false;
-    this.events = {};
-  }
-  on(eventName, listener, options = {}) {
-    let collection = this.events[eventName];
-    if (!collection) {
-      collection = {
-        highPriority: new Map(),
-        regular: new Map()
-      };
-      this.events[eventName] = collection;
-    }
-    if (options.isFirst) {
-      collection.highPriority.set(listener, true);
-    } else {
-      collection.regular.set(listener, true);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      const collectionSize = collection.highPriority.size + collection.regular.size;
-      if (collectionSize > this.maxListeners && !this.warnOnce) {
-        this.warnOnce = true;
-        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`].join('\n'));
-      }
-    }
-  }
-  removeListener(eventName, listener) {
-    if (this.events[eventName]) {
-      this.events[eventName].regular.delete(listener);
-      this.events[eventName].highPriority.delete(listener);
-    }
-  }
-  removeAllListeners() {
-    this.events = {};
-  }
-  emit(eventName, ...args) {
-    const collection = this.events[eventName];
-    if (!collection) {
-      return;
-    }
-    const highPriorityListeners = Array.from(collection.highPriority.keys());
-    const regularListeners = Array.from(collection.regular.keys());
-    for (let i = highPriorityListeners.length - 1; i >= 0; i -= 1) {
-      const listener = highPriorityListeners[i];
-      if (collection.highPriority.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-    for (let i = 0; i < regularListeners.length; i += 1) {
-      const listener = regularListeners[i];
-      if (collection.regular.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-  }
-  once(eventName, listener) {
-    // eslint-disable-next-line consistent-this
-    const that = this;
-    this.on(eventName, function oneTimeListener(...args) {
-      that.removeListener(eventName, oneTimeListener);
-      listener.apply(that, args);
-    });
-  }
-}

package/node/internals/utils/EventManager.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EventManager = void 0;
-// Used https://gist.github.com/mudge/5830382 as a starting point.
-// See https://github.com/browserify/events/blob/master/events.js for
-// the Node.js (https://nodejs.org/api/events.html) polyfill used by webpack.
-class EventManager {
-  constructor() {
-    this.maxListeners = 20;
-    this.warnOnce = false;
-    this.events = {};
-  }
-  on(eventName, listener, options = {}) {
-    let collection = this.events[eventName];
-    if (!collection) {
-      collection = {
-        highPriority: new Map(),
-        regular: new Map()
-      };
-      this.events[eventName] = collection;
-    }
-    if (options.isFirst) {
-      collection.highPriority.set(listener, true);
-    } else {
-      collection.regular.set(listener, true);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      const collectionSize = collection.highPriority.size + collection.regular.size;
-      if (collectionSize > this.maxListeners && !this.warnOnce) {
-        this.warnOnce = true;
-        console.warn([`Possible EventEmitter memory leak detected. ${collectionSize} ${eventName} listeners added.`].join('\n'));
-      }
-    }
-  }
-  removeListener(eventName, listener) {
-    if (this.events[eventName]) {
-      this.events[eventName].regular.delete(listener);
-      this.events[eventName].highPriority.delete(listener);
-    }
-  }
-  removeAllListeners() {
-    this.events = {};
-  }
-  emit(eventName, ...args) {
-    const collection = this.events[eventName];
-    if (!collection) {
-      return;
-    }
-    const highPriorityListeners = Array.from(collection.highPriority.keys());
-    const regularListeners = Array.from(collection.regular.keys());
-    for (let i = highPriorityListeners.length - 1; i >= 0; i -= 1) {
-      const listener = highPriorityListeners[i];
-      if (collection.highPriority.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-    for (let i = 0; i < regularListeners.length; i += 1) {
-      const listener = regularListeners[i];
-      if (collection.regular.has(listener)) {
-        listener.apply(this, args);
-      }
-    }
-  }
-  once(eventName, listener) {
-    // eslint-disable-next-line consistent-this
-    const that = this;
-    this.on(eventName, function oneTimeListener(...args) {
-      that.removeListener(eventName, oneTimeListener);
-      listener.apply(that, args);
-    });
-  }
-}
-exports.EventManager = EventManager;