@mui/x-tree-view 7.14.0 → 7.16.0

package/index.js

@@ -1,22 +1,22 @@
 /**
- * @mui/x-tree-view v7.14.0
+ * @mui/x-tree-view v7.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 // Tree View
-export * from './TreeView';
-export * from './SimpleTreeView';
-export * from './RichTreeView';
+export * from "./TreeView/index.js";
+export * from "./SimpleTreeView/index.js";
+export * from "./RichTreeView/index.js";
 
 // Tree Item
-export * from './TreeItem';
-export * from './TreeItem2';
-export * from './useTreeItem2';
-export * from './TreeItem2Icon';
-export * from './TreeItem2Provider';
-export { unstable_resetCleanupTracking } from './internals/hooks/useInstanceEventHandler';
-export * from './models';
-export * from './icons';
-export * from './hooks';
+export * from "./TreeItem/index.js";
+export * from "./TreeItem2/index.js";
+export * from "./useTreeItem2/index.js";
+export * from "./TreeItem2Icon/index.js";
+export * from "./TreeItem2Provider/index.js";
+export { unstable_resetCleanupTracking } from "./internals/hooks/useInstanceEventHandler.js";
+export * from "./models/index.js";
+export * from "./icons/index.js";
+export * from "./hooks/index.js";

package/internals/TreeViewItemDepthContext/index.js

@@ -1 +1 @@
-export { TreeViewItemDepthContext } from './TreeViewItemDepthContext';
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext.js";

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTreeViewContext } from './useTreeViewContext';
-import { escapeOperandAttributeSelector } from '../utils/utils';
+import { useTreeViewContext } from "./useTreeViewContext.js";
+import { escapeOperandAttributeSelector } from "../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {

package/internals/TreeViewProvider/TreeViewProvider.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TreeViewContext } from './TreeViewContext';
+import { TreeViewContext } from "./TreeViewContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Sets up the contexts for the underlying TreeItem components.

package/internals/TreeViewProvider/index.js

@@ -1,2 +1,2 @@
-export { TreeViewProvider } from './TreeViewProvider';
-export { useTreeViewContext } from './useTreeViewContext';
+export { TreeViewProvider } from "./TreeViewProvider.js";
+export { useTreeViewContext } from "./useTreeViewContext.js";

package/internals/TreeViewProvider/useTreeViewContext.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TreeViewContext } from './TreeViewContext';
+import { TreeViewContext } from "./TreeViewContext.js";
 export const useTreeViewContext = () => {
   const context = React.useContext(TreeViewContext);
   if (context == null) {

package/internals/corePlugins/corePlugins.js

@@ -1,6 +1,6 @@
-import { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
-import { useTreeViewOptionalPlugins } from './useTreeViewOptionalPlugins';
-import { useTreeViewId } from './useTreeViewId';
+import { useTreeViewInstanceEvents } from "./useTreeViewInstanceEvents/index.js";
+import { useTreeViewOptionalPlugins } from "./useTreeViewOptionalPlugins/index.js";
+import { useTreeViewId } from "./useTreeViewId/index.js";
 /**
  * Internal plugins that create the tools used by the other plugins.
  * These plugins are used by the tree view components.

package/internals/corePlugins/index.js

@@ -1 +1 @@
-export { TREE_VIEW_CORE_PLUGINS } from './corePlugins';
+export { TREE_VIEW_CORE_PLUGINS } from "./corePlugins.js";

package/internals/corePlugins/useTreeViewId/index.js

@@ -1 +1 @@
-export { useTreeViewId } from './useTreeViewId';
+export { useTreeViewId } from "./useTreeViewId.js";

package/internals/corePlugins/useTreeViewInstanceEvents/index.js

@@ -1 +1 @@
-export { useTreeViewInstanceEvents } from './useTreeViewInstanceEvents';
+export { useTreeViewInstanceEvents } from "./useTreeViewInstanceEvents.js";

package/internals/corePlugins/useTreeViewOptionalPlugins/index.js

@@ -1 +1 @@
-export { useTreeViewOptionalPlugins } from './useTreeViewOptionalPlugins';
+export { useTreeViewOptionalPlugins } from "./useTreeViewOptionalPlugins.js";

package/internals/hooks/useInstanceEventHandler.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TimerBasedCleanupTracking } from '../utils/cleanupTracking/TimerBasedCleanupTracking';
-import { FinalizationRegistryBasedCleanupTracking } from '../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking';
+import { TimerBasedCleanupTracking } from "../utils/cleanupTracking/TimerBasedCleanupTracking.js";
+import { FinalizationRegistryBasedCleanupTracking } from "../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 // We use class to make it easier to detect in heap snapshots by name
 class ObjectToBeRetainedByReact {}
 

package/internals/index.js

@@ -1,17 +1,17 @@
-export { useTreeView } from './useTreeView';
-export { TreeViewProvider, useTreeViewContext } from './TreeViewProvider';
-export { unstable_resetCleanupTracking } from './hooks/useInstanceEventHandler';
+export { useTreeView } from "./useTreeView/index.js";
+export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
+export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
 
 // Core plugins
 
 // Plugins
-export { useTreeViewExpansion } from './plugins/useTreeViewExpansion';
-export { useTreeViewSelection } from './plugins/useTreeViewSelection';
-export { useTreeViewFocus } from './plugins/useTreeViewFocus';
-export { useTreeViewKeyboardNavigation } from './plugins/useTreeViewKeyboardNavigation';
-export { useTreeViewIcons } from './plugins/useTreeViewIcons';
-export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './plugins/useTreeViewItems';
-export { useTreeViewLabel } from './plugins/useTreeViewLabel';
-export { useTreeViewJSXItems } from './plugins/useTreeViewJSXItems';
-export { isTargetInDescendants } from './utils/tree';
-export { warnOnce } from './utils/warning';
+export { useTreeViewExpansion } from "./plugins/useTreeViewExpansion/index.js";
+export { useTreeViewSelection } from "./plugins/useTreeViewSelection/index.js";
+export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
+export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
+export { useTreeViewIcons } from "./plugins/useTreeViewIcons/index.js";
+export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
+export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
+export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
+export { isTargetInDescendants } from "./utils/tree.js";
+export { warnOnce } from "./utils/warning.js";

package/internals/models/index.js

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

package/internals/models/itemPlugin.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils';
 import type { UseTreeItem2ContentSlotOwnProps, UseTreeItem2DragAndDropOverlaySlotOwnProps, UseTreeItem2LabelInputSlotOwnProps, UseTreeItem2RootSlotOwnProps } from '../../useTreeItem2';
+import type { UseTreeItem2Interactions } from '../../hooks/useTreeItem2Utils/useTreeItem2Utils';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
     rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
     contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
     externalEventHandlers: EventHandlers;
+    interactions: Pick<UseTreeItem2Interactions, 'handleSaveItemLabel' | 'handleCancelItemLabelEditing'>;
 }
 type TreeViewItemPluginSlotPropsEnhancer<TSlotProps> = (params: TreeViewItemPluginSlotPropsEnhancerParams) => Partial<TSlotProps>;
 export interface TreeViewItemPluginSlotPropsEnhancers {

package/internals/plugins/useTreeViewExpansion/index.js

@@ -1 +1 @@
-export { useTreeViewExpansion } from './useTreeViewExpansion';
+export { useTreeViewExpansion } from "./useTreeViewExpansion.js";

package/internals/plugins/useTreeViewFocus/index.js

@@ -1 +1 @@
-export { useTreeViewFocus } from './useTreeViewFocus';
+export { useTreeViewFocus } from "./useTreeViewFocus.js";

package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -2,10 +2,10 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
-import { useInstanceEventHandler } from '../../hooks/useInstanceEventHandler';
-import { getActiveElement } from '../../utils/utils';
-import { getFirstNavigableItem } from '../../utils/tree';
-import { convertSelectedItemsToArray } from '../useTreeViewSelection/useTreeViewSelection.utils';
+import { useInstanceEventHandler } from "../../hooks/useInstanceEventHandler.js";
+import { getActiveElement } from "../../utils/utils.js";
+import { getFirstNavigableItem } from "../../utils/tree.js";
+import { convertSelectedItemsToArray } from "../useTreeViewSelection/useTreeViewSelection.utils.js";
 const useDefaultFocusableItemId = (instance, selectedItems) => {
   let tabbableItemId = convertSelectedItemsToArray(selectedItems).find(itemId => {
     if (!instance.isItemNavigable(itemId)) {

package/internals/plugins/useTreeViewIcons/index.js

@@ -1 +1 @@
-export { useTreeViewIcons } from './useTreeViewIcons';
+export { useTreeViewIcons } from "./useTreeViewIcons.js";

package/internals/plugins/useTreeViewItems/index.js

@@ -1,2 +1,2 @@
-export { useTreeViewItems } from './useTreeViewItems';
-export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';
+export { useTreeViewItems } from "./useTreeViewItems.js";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";

package/internals/plugins/useTreeViewItems/useTreeViewItems.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children"];
 import * as React from 'react';
-import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from './useTreeViewItems.utils';
-import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
+import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./useTreeViewItems.utils.js";
+import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const updateItemsState = ({
   items,

package/internals/plugins/useTreeViewJSXItems/index.js

@@ -1 +1 @@
-export { useTreeViewJSXItems } from './useTreeViewJSXItems';
+export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { publishTreeViewEvent } from '../../utils/publishTreeViewEvent';
-import { useTreeViewContext } from '../../TreeViewProvider';
-import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from '../../TreeViewProvider/TreeViewChildrenItemProvider';
-import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from '../useTreeViewItems/useTreeViewItems.utils';
-import { TreeViewItemDepthContext } from '../../TreeViewItemDepthContext';
+import { publishTreeViewEvent } from "../../utils/publishTreeViewEvent.js";
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
+import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,

package/internals/plugins/useTreeViewKeyboardNavigation/index.js

@@ -1 +1 @@
-export { useTreeViewKeyboardNavigation } from './useTreeViewKeyboardNavigation';
+export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";

package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from '../../utils/tree';
-import { hasPlugin } from '../../utils/plugins';
-import { useTreeViewLabel } from '../useTreeViewLabel';
+import { getFirstNavigableItem, getLastNavigableItem, getNextNavigableItem, getPreviousNavigableItem, isTargetInDescendants } from "../../utils/tree.js";
+import { hasPlugin } from "../../utils/plugins.js";
+import { useTreeViewLabel } from "../useTreeViewLabel/index.js";
 function isPrintableCharacter(string) {
   return !!string && string.length === 1 && !!string.match(/\S/);
 }

package/internals/plugins/useTreeViewLabel/index.js

@@ -1 +1 @@
-export { useTreeViewLabel } from './useTreeViewLabel';
+export { useTreeViewLabel } from "./useTreeViewLabel.js";

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

@@ -1,3 +1,2 @@
 import { TreeViewItemPlugin } from '../../models';
-export declare const isAndroid: () => boolean;
 export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin<any>;

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useTreeViewContext } from '../../TreeViewProvider';
-export const isAndroid = () => navigator.userAgent.toLowerCase().includes('android');
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
 export const useTreeViewLabelItemPlugin = ({
   props
 }) => {
@@ -21,12 +20,34 @@ export const useTreeViewLabelItemPlugin = ({
   return {
     propsEnhancers: {
       labelInput: ({
-        externalEventHandlers
+        externalEventHandlers,
+        interactions
       }) => {
         const editable = instance.isItemEditable(itemId);
         if (!editable) {
           return {};
         }
+        const handleKeydown = event => {
+          externalEventHandlers.onKeyDown?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          const target = event.target;
+          if (event.key === 'Enter' && target.value) {
+            interactions.handleSaveItemLabel(event, target.value);
+          } else if (event.key === 'Escape') {
+            interactions.handleCancelItemLabelEditing(event);
+          }
+        };
+        const handleBlur = event => {
+          externalEventHandlers.onBlur?.(event);
+          if (event.defaultMuiPrevented) {
+            return;
+          }
+          if (event.target.value) {
+            interactions.handleSaveItemLabel(event, event.target.value);
+          }
+        };
         const handleInputChange = event => {
           externalEventHandlers.onChange?.(event);
           setLabelInputValue(event.target.value);
@@ -35,6 +56,8 @@ export const useTreeViewLabelItemPlugin = ({
           value: labelInputValue ?? '',
           'data-element': 'labelInput',
           onChange: handleInputChange,
+          onKeyDown: handleKeydown,
+          onBlur: handleBlur,
           autoFocus: true,
           type: 'text'
         };

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { warnOnce } from '../../utils/warning';
-import { useTreeViewLabelItemPlugin } from './useTreeViewLabel.itemPlugin';
+import { warnOnce } from "../../utils/warning.js";
+import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
 export const useTreeViewLabel = ({
   instance,
   state,

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

@@ -71,5 +71,9 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
     experimentalFeatures: 'labelEditing';
     dependencies: [UseTreeViewItemsSignature];
 }>;
-export interface UseTreeItem2LabelInputSlotPropsFromItemsReordering extends TreeItem2LabelInputProps {
+export interface UseTreeItem2LabelInputSlotPropsFromLabelEditing extends TreeItem2LabelInputProps {
+}
+declare module '@mui/x-tree-view/useTreeItem2' {
+    interface UseTreeItem2LabelInputSlotOwnProps extends UseTreeItem2LabelInputSlotPropsFromLabelEditing {
+    }
 }

package/internals/plugins/useTreeViewSelection/index.js

@@ -1 +1 @@
-export { useTreeViewSelection } from './useTreeViewSelection';
+export { useTreeViewSelection } from "./useTreeViewSelection.js";

package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from '../../utils/tree';
-import { convertSelectedItemsToArray, getLookupFromArray } from './useTreeViewSelection.utils';
+import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
+import { convertSelectedItemsToArray, getLookupFromArray } from "./useTreeViewSelection.utils.js";
 export const useTreeViewSelection = ({
   instance,
   params,

package/internals/useTreeView/index.js

@@ -1 +1 @@
-export { useTreeView } from './useTreeView';
+export { useTreeView } from "./useTreeView.js";

package/internals/useTreeView/useTreeView.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 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';
+import { useTreeViewModels } from "./useTreeViewModels.js";
+import { TREE_VIEW_CORE_PLUGINS } from "../corePlugins/index.js";
+import { extractPluginParamsFromProps } from "./extractPluginParamsFromProps.js";
+import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
 export function useTreeViewApiInitialization(inputApiRef) {
   const fallbackPublicApiRef = React.useRef({});
   if (inputApiRef) {

package/models/index.d.ts

@@ -1 +1,2 @@
 export * from './items';
+export type { PropsFromSlot } from '@mui/x-internals/slots';

package/models/index.js

@@ -1 +1,4 @@
-export * from './items';
+export * from "./items.js";
+
+// Utils shared across the X packages
+export {};

package/modern/RichTreeView/RichTreeView.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { getRichTreeViewUtilityClass } from './richTreeViewClasses';
-import { styled, createUseThemeProps } from '../internals/zero-styled';
-import { useTreeView } from '../internals/useTreeView';
-import { TreeViewProvider } from '../internals/TreeViewProvider';
-import { RICH_TREE_VIEW_PLUGINS } from './RichTreeView.plugins';
-import { TreeItem } from '../TreeItem';
-import { warnOnce } from '../internals/utils/warning';
+import { getRichTreeViewUtilityClass } from "./richTreeViewClasses.js";
+import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
+import { useTreeView } from "../internals/useTreeView/index.js";
+import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
+import { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";
+import { TreeItem } from "../TreeItem/index.js";
+import { warnOnce } from "../internals/utils/warning.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiRichTreeView');
 const useUtilityClasses = ownerState => {

package/modern/RichTreeView/RichTreeView.plugins.js

@@ -1,10 +1,10 @@
-import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
-import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
-import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
-import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
-import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
-import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-import { useTreeViewLabel } from '../internals/plugins/useTreeViewLabel';
+import { useTreeViewItems } from "../internals/plugins/useTreeViewItems/index.js";
+import { useTreeViewExpansion } from "../internals/plugins/useTreeViewExpansion/index.js";
+import { useTreeViewSelection } from "../internals/plugins/useTreeViewSelection/index.js";
+import { useTreeViewFocus } from "../internals/plugins/useTreeViewFocus/index.js";
+import { useTreeViewKeyboardNavigation } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
+import { useTreeViewIcons } from "../internals/plugins/useTreeViewIcons/index.js";
+import { useTreeViewLabel } from "../internals/plugins/useTreeViewLabel/index.js";
 export const RICH_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewLabel];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/RichTreeView/index.js

@@ -1,3 +1,3 @@
-export * from './RichTreeView';
-export * from './richTreeViewClasses';
-export { RICH_TREE_VIEW_PLUGINS } from './RichTreeView.plugins';
+export * from "./RichTreeView.js";
+export * from "./richTreeViewClasses.js";
+export { RICH_TREE_VIEW_PLUGINS } from "./RichTreeView.plugins.js";

package/modern/SimpleTreeView/SimpleTreeView.js

@@ -3,12 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { styled, createUseThemeProps } from '../internals/zero-styled';
-import { getSimpleTreeViewUtilityClass } from './simpleTreeViewClasses';
-import { useTreeView } from '../internals/useTreeView';
-import { TreeViewProvider } from '../internals/TreeViewProvider';
-import { SIMPLE_TREE_VIEW_PLUGINS } from './SimpleTreeView.plugins';
-import { warnOnce } from '../internals/utils/warning';
+import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
+import { getSimpleTreeViewUtilityClass } from "./simpleTreeViewClasses.js";
+import { useTreeView } from "../internals/useTreeView/index.js";
+import { TreeViewProvider } from "../internals/TreeViewProvider/index.js";
+import { SIMPLE_TREE_VIEW_PLUGINS } from "./SimpleTreeView.plugins.js";
+import { warnOnce } from "../internals/utils/warning.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiSimpleTreeView');
 const useUtilityClasses = ownerState => {

package/modern/SimpleTreeView/SimpleTreeView.plugins.js

@@ -1,10 +1,10 @@
-import { useTreeViewItems } from '../internals/plugins/useTreeViewItems';
-import { useTreeViewExpansion } from '../internals/plugins/useTreeViewExpansion';
-import { useTreeViewSelection } from '../internals/plugins/useTreeViewSelection';
-import { useTreeViewFocus } from '../internals/plugins/useTreeViewFocus';
-import { useTreeViewKeyboardNavigation } from '../internals/plugins/useTreeViewKeyboardNavigation';
-import { useTreeViewIcons } from '../internals/plugins/useTreeViewIcons';
-import { useTreeViewJSXItems } from '../internals/plugins/useTreeViewJSXItems';
+import { useTreeViewItems } from "../internals/plugins/useTreeViewItems/index.js";
+import { useTreeViewExpansion } from "../internals/plugins/useTreeViewExpansion/index.js";
+import { useTreeViewSelection } from "../internals/plugins/useTreeViewSelection/index.js";
+import { useTreeViewFocus } from "../internals/plugins/useTreeViewFocus/index.js";
+import { useTreeViewKeyboardNavigation } from "../internals/plugins/useTreeViewKeyboardNavigation/index.js";
+import { useTreeViewIcons } from "../internals/plugins/useTreeViewIcons/index.js";
+import { useTreeViewJSXItems } from "../internals/plugins/useTreeViewJSXItems/index.js";
 export const SIMPLE_TREE_VIEW_PLUGINS = [useTreeViewItems, useTreeViewExpansion, useTreeViewSelection, useTreeViewFocus, useTreeViewKeyboardNavigation, useTreeViewIcons, useTreeViewJSXItems];
 
 // We can't infer this type from the plugin, otherwise we would lose the generics.

package/modern/SimpleTreeView/index.js

@@ -1,3 +1,3 @@
-export * from './SimpleTreeView';
-export * from './simpleTreeViewClasses';
+export * from "./SimpleTreeView.js";
+export * from "./simpleTreeViewClasses.js";
 export {};

package/modern/TreeItem/TreeItem.js

@@ -17,15 +17,15 @@ import resolveComponentProps from '@mui/utils/resolveComponentProps';
 import useSlotProps from '@mui/utils/useSlotProps';
 import unsupportedProp from '@mui/utils/unsupportedProp';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
-import { styled, createUseThemeProps } from '../internals/zero-styled';
-import { TreeItemContent } from './TreeItemContent';
-import { treeItemClasses, getTreeItemUtilityClass } from './treeItemClasses';
-import { useTreeViewContext } from '../internals/TreeViewProvider';
-import { TreeViewCollapseIcon, TreeViewExpandIcon } from '../icons';
-import { TreeItem2Provider } from '../TreeItem2Provider';
-import { TreeViewItemDepthContext } from '../internals/TreeViewItemDepthContext';
-import { useTreeItemState } from './useTreeItemState';
-import { isTargetInDescendants } from '../internals/utils/tree';
+import { styled, createUseThemeProps } from "../internals/zero-styled/index.js";
+import { TreeItemContent } from "./TreeItemContent.js";
+import { treeItemClasses, getTreeItemUtilityClass } from "./treeItemClasses.js";
+import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
+import { TreeViewCollapseIcon, TreeViewExpandIcon } from "../icons/index.js";
+import { TreeItem2Provider } from "../TreeItem2Provider/index.js";
+import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
+import { useTreeItemState } from "./useTreeItemState.js";
+import { isTargetInDescendants } from "../internals/utils/tree.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiTreeItem');
 const useUtilityClasses = ownerState => {
@@ -212,7 +212,9 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
     selected,
     disabled,
     editing,
-    handleExpansion
+    handleExpansion,
+    handleCancelItemLabelEditing,
+    handleSaveItemLabel
   } = useTreeItemState(itemId);
   const {
     contentRef,
@@ -339,26 +341,26 @@ export const TreeItem = /*#__PURE__*/React.forwardRef(function TreeItem(inProps,
   };
   const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
   const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
-  const enhancedRootProps = propsEnhancers.root?.({
+  const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
+    interactions: {
+      handleSaveItemLabel,
+      handleCancelItemLabelEditing
+    }
+  };
+  const enhancedRootProps = propsEnhancers.root?.(_extends({}, sharedPropsEnhancerParams, {
     externalEventHandlers: extractEventHandlers(other)
-  }) ?? {};
-  const enhancedContentProps = propsEnhancers.content?.({
-    rootRefObject,
-    contentRefObject,
+  })) ?? {};
+  const enhancedContentProps = propsEnhancers.content?.(_extends({}, sharedPropsEnhancerParams, {
     externalEventHandlers: extractEventHandlers(ContentProps)
-  }) ?? {};
-  const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.({
-    rootRefObject,
-    contentRefObject,
+  })) ?? {};
+  const enhancedDragAndDropOverlayProps = propsEnhancers.dragAndDropOverlay?.(_extends({}, sharedPropsEnhancerParams, {
     externalEventHandlers: {}
-  }) ?? {};
-  const enhancedLabelInputProps = propsEnhancers.labelInput?.({
-    rootRefObject,
-    contentRefObject,
+  })) ?? {};
+  const enhancedLabelInputProps = propsEnhancers.labelInput?.(_extends({}, sharedPropsEnhancerParams, {
     externalEventHandlers: {}
-  }) ?? {};
+  })) ?? {};
   return /*#__PURE__*/_jsx(TreeItem2Provider, {
     itemId: itemId,
     children: /*#__PURE__*/_jsxs(TreeItemRoot, _extends({