@mui/x-tree-view 8.16.0 → 8.18.0

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts

@@ -3,18 +3,18 @@ import type { DefaultizedProps } from '@mui/x-internals/types';
 import type { TreeViewPluginSignature } from "../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
-import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewSelectionPropagation, TreeViewItemId } from "../../../models/index.js";
 export interface UseTreeViewSelectionPublicAPI {
   /**
    * Select or deselect an item.
    * @param {object} parameters The parameters of the method.
-   * @param {string} parameters.itemId The id of the item to select or deselect.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to select or deselect.
    * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
    * @param {boolean} parameters.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
    * @param {boolean | undefined} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
    */
   setItemSelection: (parameters: {
-    itemId: string;
+    itemId: TreeViewItemId;
     event?: React.SyntheticEvent;
     shouldBeSelected?: boolean;
     keepExistingSelection?: boolean;
@@ -29,33 +29,33 @@ export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublic
   /**
    * Expand the current selection range up to the given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item to expand the selection to.
+   * @param {TreeViewItemId} itemId The id of the item to expand the selection to.
    */
-  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand the current selection range from the first navigable item to the given item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item up to which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item up to which the selection range should be expanded.
    */
-  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Expand the current selection range from the given item to the last navigable item.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the item from which the selection range should be expanded.
+   * @param {TreeViewItemId} itemId The id of the item from which the selection range should be expanded.
    */
-  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
   /**
    * Update the selection when navigating with ArrowUp / ArrowDown keys.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change.
-   * @param {string} currentItemId The id of the active item before the keyboard navigation.
-   * @param {string} nextItemId The id of the active item after the keyboard navigation.
+   * @param {TreeViewItemId} currentItemId The id of the active item before the keyboard navigation.
+   * @param {TreeViewItemId} nextItemId The id of the active item after the keyboard navigation.
    */
-  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: string, nextItemId: string) => void;
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: TreeViewItemId, nextItemId: TreeViewItemId) => void;
 }
-export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
+export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? TreeViewItemId[] : TreeViewItemId | null;
 export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {
   /**
-   * If `true` selection is disabled.
+   * Whether selection is disabled.
    * @default false
    */
   disableSelection?: boolean;
@@ -71,12 +71,12 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
    */
   selectedItems?: TreeViewSelectionValue<Multiple>;
   /**
-   * If `true`, `ctrl` and `shift` will trigger multiselect.
+   * Whether multiple items can be selected.
    * @default false
    */
   multiSelect?: Multiple;
   /**
-   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
    * @default false
    */
   checkboxSelection?: boolean;
@@ -100,17 +100,17 @@ export interface UseTreeViewSelectionParameters<Multiple extends boolean | undef
   /**
    * Callback fired when Tree Items are selected/deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {string[] | string} itemIds The ids of the selected items.
+   * @param {TreeViewItemId[] | TreeViewItemId} itemIds The ids of the selected items.
    * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
    */
   onSelectedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewSelectionValue<Multiple>) => void;
   /**
    * Callback fired when a Tree Item is selected or deselected.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
-   * @param {array} itemId The itemId of the modified item.
+   * @param {TreeViewItemId} itemId The itemId of the modified item.
    * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
    */
-  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: string, isSelected: boolean) => void;
+  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isSelected: boolean) => void;
 }
 export type UseTreeViewSelectionParametersWithDefaults<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
 export interface UseTreeViewSelectionState {
@@ -129,15 +129,4 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewSelectionPublicAPI;
   state: UseTreeViewSelectionState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemCheckboxSlotPropsFromSelection {
-  visible?: boolean;
-  checked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  tabIndex?: -1;
-  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
-}
-declare module '@mui/x-tree-view/useTreeItem' {
-  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
-}
+}>;

package/esm/models/items.d.ts

@@ -2,6 +2,7 @@ export type TreeViewItemId = string;
 export type TreeViewDefaultItemModelProperties = {
   id: string;
   label: string;
+  children?: TreeViewDefaultItemModelProperties[];
 };
 export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
   children?: TreeViewBaseItem<R>[];

package/esm/useTreeItem/useTreeItem.js

@@ -54,7 +54,6 @@ export const useTreeItem = parameters => {
   const handleContentRef = useMergedRefs(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useStore(store, idSelectors.treeId);
-  const isSelectionEnabledForItem = useStore(store, selectionSelectors.canItemBeSelected, itemId);
   const isCheckboxSelectionEnabled = useStore(store, selectionSelectors.isCheckboxSelectionEnabled);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
@@ -147,26 +146,12 @@ export const useTreeItem = parameters => {
   });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
-
-    // https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
-    let ariaSelected;
-    if (status.selected) {
-      // - each selected node has aria-selected set to true.
-      ariaSelected = true;
-    } else if (!isSelectionEnabledForItem) {
-      // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
-      ariaSelected = undefined;
-    } else {
-      // - all nodes that are selectable but not selected have aria-selected set to false.
-      ariaSelected = false;
-    }
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
       tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
-      'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
       style: _extends({}, externalProps.style ?? {}, {

package/esm/useTreeItem/useTreeItem.types.d.ts

@@ -42,7 +42,6 @@ export interface UseTreeItemRootSlotPropsFromUseTreeItem {
   tabIndex: 0 | -1;
   id: string;
   'aria-expanded': React.AriaAttributes['aria-expanded'];
-  'aria-selected': React.AriaAttributes['aria-selected'];
   'aria-disabled': React.AriaAttributes['aria-disabled'];
   onFocus: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;
   onBlur: TreeViewCancellableEventHandler<React.FocusEvent<HTMLElement>>;

package/icons/icons.js

@@ -1,12 +1,10 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TreeViewExpandIcon = exports.TreeViewCollapseIcon = void 0;
 var _utils = require("@mui/material/utils");
-var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewExpandIcon = exports.TreeViewExpandIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"

package/index.js

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

package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts

@@ -5,7 +5,7 @@ interface TreeViewChildrenItemProviderProps {
   idAttribute: string | null;
   children: React.ReactNode;
 }
-export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): React.JSX.Element;
+export declare function TreeViewChildrenItemProvider(props: TreeViewChildrenItemProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeViewChildrenItemProvider {
   var propTypes: any;
 }

package/internals/TreeViewProvider/TreeViewProvider.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { TreeViewProviderProps } from "./TreeViewProvider.types.js";
 import { TreeViewAnyPluginSignature } from "../models/index.js";
 /**
@@ -6,4 +5,4 @@ import { TreeViewAnyPluginSignature } from "../models/index.js";
  *
  * @ignore - do not document.
  */
-export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>): React.JSX.Element;
+export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>): import("react/jsx-runtime").JSX.Element;

package/internals/components/RichTreeViewItems.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils/types';
 import { TreeItem, TreeItemProps } from "../../TreeItem/index.js";
 import { TreeViewItemId } from "../../models/index.js";
-export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;
+export declare function RichTreeViewItems(props: RichTreeViewItemsProps): import("react/jsx-runtime").JSX.Element;
 interface RichTreeViewItemsOwnerState {
   itemId: TreeViewItemId;
   label: string;

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts

@@ -4,7 +4,7 @@ export declare const expansionSelectors: {
   /**
    * Gets the expanded items as provided to the component.
    */
-  expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => string[];
+  expandedItemsRaw: (state: TreeViewState<[UseTreeViewExpansionSignature]>) => readonly string[];
   /**
    * Gets the expanded items as a Map.
    */

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

@@ -8,12 +8,12 @@ export interface UseTreeViewExpansionPublicAPI {
   /**
    * Change the expansion status of a given item.
    * @param {object} parameters The parameters of the method.
-   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
    * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
    * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
    */
   setItemExpansion: (parameters: {
-    itemId: string;
+    itemId: TreeViewItemId;
     event?: React.SyntheticEvent;
     shouldBeExpanded?: boolean;
   }) => void;
@@ -36,12 +36,12 @@ export interface UseTreeViewExpansionInstance extends Omit<UseTreeViewExpansionP
    * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
    * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
    * @param {object} parameters The parameters of the method.
-   * @param {string} parameters.itemId The id of the item to expand of collapse.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
    * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
    * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
    */
   applyItemExpansion: (parameters: {
-    itemId: string;
+    itemId: TreeViewItemId;
     event: React.SyntheticEvent | null;
     shouldBeExpanded: boolean;
   }) => void;
@@ -55,26 +55,26 @@ export interface UseTreeViewExpansionParameters {
    * Expanded item ids.
    * Used when the item's expansion is controlled.
    */
-  expandedItems?: string[];
+  expandedItems?: readonly TreeViewItemId[];
   /**
    * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedItems?: string[];
+  defaultExpandedItems?: readonly TreeViewItemId[];
   /**
    * Callback fired when Tree Items are expanded/collapsed.
    * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
-   * @param {array} itemIds The ids of the expanded items.
+   * @param {TreeViewItemId[]} itemIds The ids of the expanded items.
    */
-  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewItemId[]) => void;
   /**
    * Callback fired when a Tree Item is expanded or collapsed.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
-   * @param {array} itemId The itemId of the modified item.
+   * @param {TreeViewItemId} itemId The itemId of the modified item.
    * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
    */
-  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
+  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isExpanded: boolean) => void;
   /**
    * The slot that triggers the item's expansion when clicked.
    * @default 'content'
@@ -84,7 +84,7 @@ export interface UseTreeViewExpansionParameters {
 export type UseTreeViewExpansionParametersWithDefaults = DefaultizedProps<UseTreeViewExpansionParameters, 'defaultExpandedItems'>;
 export interface UseTreeViewExpansionState {
   expansion: {
-    expandedItems: string[];
+    expandedItems: readonly TreeViewItemId[];
     expansionTrigger: 'content' | 'iconContainer';
   };
 }

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

@@ -3,6 +3,7 @@ import { TreeViewPluginSignature } from "../../models/index.js";
 import type { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
 import type { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
 import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+import { TreeViewItemId } from "../../../models/index.js";
 export interface UseTreeViewFocusPublicAPI {
   /**
    * Focus the item with the given id.
@@ -12,7 +13,7 @@ export interface UseTreeViewFocusPublicAPI {
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
    * @param {TreeViewItemId} itemId The id of the item to focus.
    */
-  focusItem: (event: React.SyntheticEvent | null, itemId: string) => void;
+  focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
 }
 export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI {
   /**
@@ -24,14 +25,14 @@ export interface UseTreeViewFocusParameters {
   /**
    * Callback fired when a given Tree Item is focused.
    * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
-   * @param {string} itemId The id of the focused item.
+   * @param {TreeViewItemId} itemId The id of the focused item.
    */
-  onItemFocus?: (event: React.SyntheticEvent | null, itemId: string) => void;
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
 }
 export type UseTreeViewFocusParametersWithDefaults = UseTreeViewFocusParameters;
 export interface UseTreeViewFocusState {
   focus: {
-    focusedItemId: string | null;
+    focusedItemId: TreeViewItemId | null;
   };
 }
 export type UseTreeViewFocusSignature = TreeViewPluginSignature<{

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

@@ -11,7 +11,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
   /**
    * Get the item with the given id.
    * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
-   * @param {string} itemId The id of the item to retrieve.
+   * @param {TreeViewItemId} itemId The id of the item to retrieve.
    * @returns {R} The item with the given id.
    */
   getItem: (itemId: TreeViewItemId) => R;
@@ -45,7 +45,7 @@ export interface UseTreeViewItemsPublicAPI<R extends {}> {
     shouldBeDisabled?: boolean;
   }) => void;
   /** * Get the id of the parent item.
-   * @param {string} itemId The id of the item to whose parentId we want to retrieve.
+   * @param {TreeViewItemId} itemId The id of the item to whose parentId we want to retrieve.
    * @returns {TreeViewItemId | null} The id of the parent item.
    */
   getParentId: (itemId: TreeViewItemId) => TreeViewItemId | null;
@@ -88,7 +88,7 @@ export interface UseTreeViewItemsParameters<R extends {
   children?: R[];
 }> {
   /**
-   * If `true`, will allow focus on disabled items.
+   * Whether the items should be focusable when disabled.
    * @default false
    */
   disabledItemsFocusable?: boolean;
@@ -123,16 +123,16 @@ export interface UseTreeViewItemsParameters<R extends {
    *
    * @template R
    * @param {R} item The item to check.
-   * @returns {string} The id of the item.
+   * @returns {TreeViewItemId} The id of the item.
    * @default (item) => item.id
    */
   getItemId?: (item: R) => TreeViewItemId;
   /**
    * Callback fired when the `content` slot of a given Tree Item is clicked.
    * @param {React.MouseEvent} event The DOM event that triggered the change.
-   * @param {string} itemId The id of the focused item.
+   * @param {TreeViewItemId} itemId The id of the focused item.
    */
-  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
   /**
    * Horizontal indentation between an item and its children.
    * Examples: 24, "24px", "2rem", "2em".
@@ -146,7 +146,7 @@ export type UseTreeViewItemsParametersWithDefaults<R extends {
 export interface UseTreeViewItemsState<R extends {}> {
   items: {
     /**
-     * If `true`, will allow focus on disabled items.
+     * Whether the items should be focusable when disabled.
      * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
      */
     disabledItemsFocusable: boolean;

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

@@ -0,0 +1,2 @@
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewJSXItemsItemPlugin: TreeViewItemPlugin;

package/internals/plugins/useTreeViewJSXItems/itemPlugin.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeViewJSXItemsItemPlugin = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _store = require("@mui/x-internals/store");
+var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
+var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
+var _TreeViewProvider = require("../../TreeViewProvider");
+var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
+var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
+var _useTreeViewId = require("../../corePlugins/useTreeViewId");
+var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
+const useTreeViewJSXItemsItemPlugin = ({
+  props,
+  rootRef,
+  contentRef
+}) => {
+  const {
+    instance,
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const {
+    children,
+    disabled = false,
+    label,
+    itemId,
+    id
+  } = props;
+  const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
+  if (parentContext == null) {
+    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
+  }
+  const {
+    registerChild,
+    unregisterChild,
+    parentId
+  } = parentContext;
+  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
+  const pluginContentRef = React.useRef(null);
+  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
+  const treeId = (0, _store.useStore)(store, _useTreeViewId.idSelectors.treeId);
+
+  // Prevent any flashing
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
+    return () => {
+      unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
+    };
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    return instance.insertJSXItem({
+      id: itemId,
+      idAttribute: id,
+      parentId,
+      expandable,
+      disabled
+    });
+  }, [instance, parentId, itemId, expandable, disabled, id]);
+  React.useEffect(() => {
+    if (label) {
+      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
+    }
+    return undefined;
+  }, [instance, itemId, label]);
+  return {
+    contentRef: handleContentRef,
+    rootRef
+  };
+};
+exports.useTreeViewJSXItemsItemPlugin = useTreeViewJSXItemsItemPlugin;

package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -9,17 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewJSXItems = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _store = require("@mui/x-internals/store");
 var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
-var _useMergedRefs = require("@base-ui-components/utils/useMergedRefs");
-var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
-var _TreeViewProvider = require("../../TreeViewProvider");
 var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
 var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
 var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
-var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
-var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
-var _useTreeViewId2 = require("../../corePlugins/useTreeViewId");
+var _itemPlugin = require("./itemPlugin");
 var _jsxRuntime = require("react/jsx-runtime");
 const useTreeViewJSXItems = ({
   instance,
@@ -86,70 +80,7 @@ const useTreeViewJSXItems = ({
   };
 };
 exports.useTreeViewJSXItems = useTreeViewJSXItems;
-const useTreeViewJSXItemsItemPlugin = ({
-  props,
-  rootRef,
-  contentRef
-}) => {
-  const {
-    instance,
-    store
-  } = (0, _TreeViewProvider.useTreeViewContext)();
-  const {
-    children,
-    disabled = false,
-    label,
-    itemId,
-    id
-  } = props;
-  const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
-  if (parentContext == null) {
-    throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
-  }
-  const {
-    registerChild,
-    unregisterChild,
-    parentId
-  } = parentContext;
-  const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
-  const pluginContentRef = React.useRef(null);
-  const handleContentRef = (0, _useMergedRefs.useMergedRefs)(pluginContentRef, contentRef);
-  const treeId = (0, _store.useStore)(store, _useTreeViewId2.idSelectors.treeId);
-
-  // Prevent any flashing
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
-      itemId,
-      treeId,
-      id
-    });
-    registerChild(idAttribute, itemId);
-    return () => {
-      unregisterChild(idAttribute);
-      unregisterChild(idAttribute);
-    };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    return instance.insertJSXItem({
-      id: itemId,
-      idAttribute: id,
-      parentId,
-      expandable,
-      disabled
-    });
-  }, [instance, parentId, itemId, expandable, disabled, id]);
-  React.useEffect(() => {
-    if (label) {
-      return instance.mapLabelFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').toLowerCase());
-    }
-    return undefined;
-  }, [instance, itemId, label]);
-  return {
-    contentRef: handleContentRef,
-    rootRef
-  };
-};
-useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
+useTreeViewJSXItems.itemPlugin = _itemPlugin.useTreeViewJSXItemsItemPlugin;
 useTreeViewJSXItems.wrapItem = ({
   children,
   itemId,

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

@@ -0,0 +1,11 @@
+import { TreeViewItemPlugin } from "../../models/index.js";
+import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;
+export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+export interface UseTreeItemLabelSlotPropsFromLabelEditing {
+  editable?: boolean;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
+  interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
+}

package/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -7,15 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
-var _useTreeViewLabel = require("./useTreeViewLabel.itemPlugin");
-var _useTreeViewLabel2 = require("./useTreeViewLabel.selectors");
+var _itemPlugin = require("./itemPlugin");
+var _useTreeViewLabel = require("./useTreeViewLabel.selectors");
 const useTreeViewLabel = ({
   store,
   params
 }) => {
   const setEditedItem = editedItemId => {
     if (editedItemId !== null) {
-      const isEditable = _useTreeViewLabel2.labelSelectors.isItemEditable(store.state, editedItemId);
+      const isEditable = _useTreeViewLabel.labelSelectors.isItemEditable(store.state, editedItemId);
       if (!isEditable) {
         return;
       }
@@ -60,7 +60,7 @@ const useTreeViewLabel = ({
   };
 };
 exports.useTreeViewLabel = useTreeViewLabel;
-useTreeViewLabel.itemPlugin = _useTreeViewLabel.useTreeViewLabelItemPlugin;
+useTreeViewLabel.itemPlugin = _itemPlugin.useTreeViewLabelItemPlugin;
 useTreeViewLabel.applyDefaultValuesToParams = ({
   params
 }) => (0, _extends2.default)({}, params, {

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

@@ -2,7 +2,6 @@ import { DefaultizedProps } from '@mui/x-internals/types';
 import { TreeViewPluginSignature } from "../../models/index.js";
 import { TreeViewItemId } from "../../../models/index.js";
 import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
-import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
 export interface UseTreeViewLabelPublicAPI {
   /**
    * Used to update the label of an item.
@@ -38,7 +37,7 @@ export type UseTreeViewLabelParametersWithDefaults<R extends {}> = DefaultizedPr
 export interface UseTreeViewLabelState {
   label: {
     isItemEditable: ((item: any) => boolean) | boolean;
-    editedItemId: string | null;
+    editedItemId: TreeViewItemId | null;
   };
 }
 export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
@@ -48,12 +47,4 @@ export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
   instance: UseTreeViewLabelInstance;
   state: UseTreeViewLabelState;
   dependencies: [UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
-export interface UseTreeItemLabelSlotPropsFromLabelEditing {
-  editable?: boolean;
-}
-declare module '@mui/x-tree-view/useTreeItem' {
-  interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
-  interface UseTreeItemLabelSlotOwnProps extends UseTreeItemLabelSlotPropsFromLabelEditing {}
-}
+}>;