@mui/x-tree-view 8.17.0 → 8.19.0

package/esm/TreeItem/TreeItem.d.ts

@@ -15,7 +15,7 @@ export declare const TreeItemErrorContainer: import("@emotion/styled").StyledCom
 export declare const TreeItemLoadingContainer: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/CircularProgress").CircularProgressProps, keyof import("@mui/material/CircularProgress").CircularProgressProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const TreeItemCheckbox: import("@emotion/styled").StyledComponent<Pick<Omit<CheckboxProps & {
   visible?: boolean;
-}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "id" | "value" | "name" | "checked" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "readOnly" | "required" | "size" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "action" | "visible" | "icon" | "slots" | "slotProps" | "classes" | "sx" | "indeterminate" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "id" | "value" | "content" | "disabled" | "slots" | "slotProps" | "className" | "classes" | "color" | "sx" | "suppressHydrationWarning" | "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" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "icon" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "checked" | "visible" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "readOnly" | "required" | "size" | "indeterminate" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/esm/index.js

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

package/esm/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?: readonly string[];
+  expandedItems?: readonly TreeViewItemId[];
   /**
    * Expanded item ids.
    * Used when the item's expansion is not controlled.
    * @default []
    */
-  defaultExpandedItems?: readonly 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: readonly string[];
+    expandedItems: readonly TreeViewItemId[];
     expansionTrigger: 'content' | 'iconContainer';
   };
 }

package/esm/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/esm/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/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.d.ts

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

package/esm/internals/plugins/useTreeViewJSXItems/itemPlugin.js

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import { useStore } from '@mui/x-internals/store';
+import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
+import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
+import { useTreeViewContext } from "../../TreeViewProvider/index.js";
+import { TreeViewChildrenItemContext } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
+import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
+import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
+export const useTreeViewJSXItemsItemPlugin = ({
+  props,
+  rootRef,
+  contentRef
+}) => {
+  const {
+    instance,
+    store
+  } = useTreeViewContext();
+  const {
+    children,
+    disabled = false,
+    label,
+    itemId,
+    id
+  } = props;
+  const parentContext = React.useContext(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 = itemHasChildren(children);
+  const pluginContentRef = React.useRef(null);
+  const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
+  const treeId = useStore(store, idSelectors.treeId);
+
+  // Prevent any flashing
+  useIsoLayoutEffect(() => {
+    const idAttribute = generateTreeItemIdAttribute({
+      itemId,
+      treeId,
+      id
+    });
+    registerChild(idAttribute, itemId);
+    return () => {
+      unregisterChild(idAttribute);
+      unregisterChild(idAttribute);
+    };
+  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
+  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
+  };
+};

package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js

@@ -2,17 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useStore } from '@mui/x-internals/store';
 import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
-import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
-import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
-import { useTreeViewContext } from "../../TreeViewProvider/index.js";
-import { TreeViewChildrenItemContext, TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
+import { TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
 import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
 import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
-import { generateTreeItemIdAttribute } from "../../corePlugins/useTreeViewId/useTreeViewId.utils.js";
-import { itemHasChildren } from "../../../hooks/useTreeItemUtils/useTreeItemUtils.js";
-import { idSelectors } from "../../corePlugins/useTreeViewId/index.js";
+import { useTreeViewJSXItemsItemPlugin } from "./itemPlugin.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useTreeViewJSXItems = ({
   instance,
@@ -78,69 +72,6 @@ export const useTreeViewJSXItems = ({
     }
   };
 };
-const useTreeViewJSXItemsItemPlugin = ({
-  props,
-  rootRef,
-  contentRef
-}) => {
-  const {
-    instance,
-    store
-  } = useTreeViewContext();
-  const {
-    children,
-    disabled = false,
-    label,
-    itemId,
-    id
-  } = props;
-  const parentContext = React.useContext(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 = itemHasChildren(children);
-  const pluginContentRef = React.useRef(null);
-  const handleContentRef = useMergedRefs(pluginContentRef, contentRef);
-  const treeId = useStore(store, idSelectors.treeId);
-
-  // Prevent any flashing
-  useIsoLayoutEffect(() => {
-    const idAttribute = generateTreeItemIdAttribute({
-      itemId,
-      treeId,
-      id
-    });
-    registerChild(idAttribute, itemId);
-    return () => {
-      unregisterChild(idAttribute);
-      unregisterChild(idAttribute);
-    };
-  }, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
-  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.wrapItem = ({
   children,

package/esm/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/esm/internals/plugins/useTreeViewLabel/useTreeViewLabel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
-import { useTreeViewLabelItemPlugin } from "./useTreeViewLabel.itemPlugin.js";
+import { useTreeViewLabelItemPlugin } from "./itemPlugin.js";
 import { labelSelectors } from "./useTreeViewLabel.selectors.js";
 export const useTreeViewLabel = ({
   store,

package/esm/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 {}
-}
+}>;

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { TreeViewCancellableEventHandler } from "../../../models/index.js";
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;
+interface UseTreeItemRootSlotPropsFromSelection {
+  'aria-checked': React.AriaAttributes['aria-checked'];
+}
+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 UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
+  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
+}
+export {};

package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js

@@ -5,7 +5,7 @@ import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect
 import { findOrderInTremauxTree, getAllNavigableItems, getFirstNavigableItem, getLastNavigableItem, getNonDisabledItemsInRange } from "../../utils/tree.js";
 import { propagateSelection, getAddedAndRemovedItems, getLookupFromArray } from "./useTreeViewSelection.utils.js";
 import { selectionSelectors } from "./useTreeViewSelection.selectors.js";
-import { useTreeViewSelectionItemPlugin } from "./useTreeViewSelection.itemPlugin.js";
+import { useTreeViewSelectionItemPlugin } from "./itemPlugin.js";
 export const useTreeViewSelection = ({
   store,
   params

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,19 +129,4 @@ export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
   publicAPI: UseTreeViewSelectionPublicAPI;
   state: UseTreeViewSelectionState;
   dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];
-}>;
-export interface UseTreeItemRootSlotPropsFromSelection {
-  'aria-checked': React.AriaAttributes['aria-checked'];
-}
-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 UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromSelection {}
-  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/index.js

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