@mui/x-tree-view 8.22.0 → 8.24.0

package/esm/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "./TreeViewContext.js";
 import { escapeOperandAttributeSelector } from "../utils/utils.js";
-import { itemsSelectors } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../plugins/items/selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") TreeViewChildrenItemContext.displayName = "TreeViewChildrenItemContext";
@@ -15,7 +15,6 @@ export function TreeViewChildrenItemProvider(props) {
     idAttribute
   } = props;
   const {
-    instance,
     store,
     rootRef
   } = useTreeViewContext();
@@ -38,7 +37,7 @@ export function TreeViewChildrenItemProvider(props) {
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
     if (hasChanged) {
-      instance.setJSXItemsOrderedChildrenIds(itemId ?? null, childrenIds);
+      store.jsxItems.setJSXItemsOrderedChildrenIds(itemId ?? null, childrenIds);
     }
   });
   const value = React.useMemo(() => ({

package/esm/internals/TreeViewProvider/TreeViewContext.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { TreeViewAnyPluginSignature } from "../models/index.js";
+import { TreeViewAnyStore } from "../models/index.js";
 import { TreeViewContextValue } from "./TreeViewProvider.types.js";
 /**
  * @ignore - internal component.
  */
-export declare const TreeViewContext: React.Context<TreeViewContextValue<any, []> | null>;
-export declare const useTreeViewContext: <TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []>() => TreeViewContextValue<TSignatures, TOptionalSignatures>;
+export declare const TreeViewContext: React.Context<TreeViewContextValue<any> | null>;
+export declare const useTreeViewContext: <TStore extends TreeViewAnyStore>() => TreeViewContextValue<TStore>;

package/esm/internals/TreeViewProvider/TreeViewProvider.d.ts

@@ -1,8 +1,8 @@
 import { TreeViewProviderProps } from "./TreeViewProvider.types.js";
-import { TreeViewAnyPluginSignature } from "../models/index.js";
+import { TreeViewAnyStore } from "../models/index.js";
 /**
  * Sets up the contexts for the underlying Tree Item components.
  *
  * @ignore - do not document.
  */
-export declare function TreeViewProvider<TSignatures extends readonly TreeViewAnyPluginSignature[]>(props: TreeViewProviderProps<TSignatures>): import("react/jsx-runtime").JSX.Element;
+export declare function TreeViewProvider<TStore extends TreeViewAnyStore>(props: TreeViewProviderProps<TStore>): import("react/jsx-runtime").JSX.Element;

package/esm/internals/TreeViewProvider/TreeViewProvider.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { TreeViewContext } from "./TreeViewContext.js";
 import { TreeViewStyleContext } from "./TreeViewStyleContext.js";
+import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const EMPTY_OBJECT = {};
-
 /**
  * Sets up the contexts for the underlying Tree Item components.
  *
@@ -11,12 +11,19 @@ const EMPTY_OBJECT = {};
  */
 export function TreeViewProvider(props) {
   const {
-    contextValue,
+    store,
+    apiRef,
+    rootRef,
     classes = EMPTY_OBJECT,
     slots = EMPTY_OBJECT,
     slotProps = EMPTY_OBJECT,
     children
   } = props;
+  const contextValue = useTreeViewBuildContext({
+    store,
+    apiRef,
+    rootRef
+  });
   const styleContextValue = React.useMemo(() => ({
     classes,
     slots: {
@@ -34,9 +41,7 @@ export function TreeViewProvider(props) {
     value: contextValue,
     children: /*#__PURE__*/_jsx(TreeViewStyleContext.Provider, {
       value: styleContextValue,
-      children: contextValue.wrapRoot({
-        children
-      })
+      children: children
     })
   });
 }

package/esm/internals/TreeViewProvider/TreeViewProvider.types.d.ts

@@ -1,20 +1,18 @@
 import * as React from 'react';
-import { TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewReadonlyStore } from "../models/index.js";
+import { TreeItemWrapper, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewAnyStore } from "../models/index.js";
 import type { TreeItemProps } from "../../TreeItem/TreeItem.types.js";
 import { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.js";
-import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+import { UseTreeViewBuildContextParameters } from "./useTreeViewBuildContext.js";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
-export interface TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> {
-  instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
-  publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
-  store: TreeViewReadonlyStore<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
+export type TreeViewStoreInContext<TStore extends TreeViewAnyStore> = Omit<TStore, 'setState' | 'update' | 'set' | 'updateStateFromParameters' | 'disposeEffect' | 'registerStoreEffect' | 'itemPluginManager' | 'parameters'>;
+export interface TreeViewContextValue<TStore extends TreeViewAnyStore> {
+  publicAPI: TreeViewPublicAPI<TStore>;
+  store: TreeViewStoreInContext<TStore>;
   rootRef: React.RefObject<HTMLUListElement | null>;
-  wrapItem: TreeItemWrapper<TSignatures>;
-  wrapRoot: TreeRootWrapper;
+  wrapItem: TreeItemWrapper<TStore>;
   runItemPlugins: TreeViewItemPluginsRunner;
 }
-export interface TreeViewProviderProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
-  contextValue: TreeViewContextValue<TSignatures>;
+export interface TreeViewProviderProps<TStore extends TreeViewAnyStore> extends UseTreeViewBuildContextParameters<TStore> {
   children: React.ReactNode;
   classes: Partial<TreeViewClasses> | undefined;
   slots: TreeViewSlots | undefined;

package/esm/internals/TreeViewProvider/index.d.ts

@@ -1,3 +1,3 @@
 export { TreeViewProvider } from "./TreeViewProvider.js";
 export { useTreeViewContext } from "./TreeViewContext.js";
-export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner } from "./TreeViewProvider.types.js";
+export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.js";

package/esm/internals/TreeViewProvider/useTreeViewBuildContext.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.js";
+import { TreeViewAnyStore, TreeViewPublicAPI, TreeItemWrapper } from "../models/index.js";
+export declare const useTreeViewBuildContext: <TStore extends TreeViewAnyStore>(parameters: UseTreeViewBuildContextParameters<TStore>) => TreeViewContextValue<TStore>;
+export interface UseTreeViewBuildContextParameters<TStore extends TreeViewAnyStore> {
+  store: TStore;
+  rootRef: React.RefObject<HTMLUListElement | null>;
+  apiRef: React.RefObject<Partial<TreeViewPublicAPI<TStore>> | undefined> | undefined;
+}
+export interface UseTreeViewBuildContextReturnValue<TStore extends TreeViewAnyStore> {
+  publicAPI: TreeViewPublicAPI<TStore>;
+  store: TreeViewStoreInContext<TStore>;
+  rootRef: React.RefObject<HTMLUListElement | null>;
+  wrapItem: TreeItemWrapper<TStore>;
+  runItemPlugins: TreeViewItemPluginsRunner;
+}

package/esm/internals/{useTreeView → TreeViewProvider}/useTreeViewBuildContext.js

@@ -1,22 +1,20 @@
 import * as React from 'react';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 export const useTreeViewBuildContext = parameters => {
   const {
-    plugins,
-    instance,
-    publicAPI,
     store,
+    apiRef,
     rootRef
   } = parameters;
+  const publicAPI = useRefWithInit(() => store.buildPublicAPI()).current;
+  initializeInputApiRef(publicAPI, apiRef);
   const runItemPlugins = React.useCallback(itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
     const pluginPropEnhancers = [];
     const pluginPropEnhancersNames = {};
-    plugins.forEach(plugin => {
-      if (!plugin.itemPlugin) {
-        return;
-      }
-      const itemPluginResponse = plugin.itemPlugin({
+    store.itemPluginManager.listPlugins().forEach(itemPlugin => {
+      const itemPluginResponse = itemPlugin({
         props: itemPluginProps,
         rootRef: finalRootRef,
         contentRef: finalContentRef
@@ -52,49 +50,37 @@ export const useTreeViewBuildContext = parameters => {
       rootRef: finalRootRef,
       propsEnhancers
     };
-  }, [plugins]);
+  }, [store]);
   const wrapItem = React.useCallback(({
     itemId,
     children,
     idAttribute
   }) => {
     let finalChildren = children;
+    const itemsWrapper = store.itemPluginManager.listWrappers();
+
     // The wrappers are reversed to ensure that the first wrapper is the outermost one.
-    for (let i = plugins.length - 1; i >= 0; i -= 1) {
-      const plugin = plugins[i];
-      if (plugin.wrapItem) {
-        finalChildren = plugin.wrapItem({
-          instance,
-          itemId,
-          children: finalChildren,
-          idAttribute
-        });
-      }
-    }
-    return finalChildren;
-  }, [plugins, instance]);
-  const wrapRoot = React.useCallback(({
-    children
-  }) => {
-    let finalChildren = children;
-    // The wrappers are reversed to ensure that the first wrapper is the outermost one.
-    for (let i = plugins.length - 1; i >= 0; i -= 1) {
-      const plugin = plugins[i];
-      if (plugin.wrapRoot) {
-        finalChildren = plugin.wrapRoot({
-          children: finalChildren
-        });
-      }
+    for (let i = itemsWrapper.length - 1; i >= 0; i -= 1) {
+      const itemWrapper = itemsWrapper[i];
+      finalChildren = itemWrapper({
+        store: store,
+        itemId,
+        children: finalChildren,
+        idAttribute
+      });
     }
     return finalChildren;
-  }, [plugins]);
+  }, [store]);
   return React.useMemo(() => ({
     runItemPlugins,
     wrapItem,
-    wrapRoot,
-    instance,
     publicAPI,
     store,
     rootRef
-  }), [runItemPlugins, wrapItem, wrapRoot, instance, publicAPI, store, rootRef]);
-};
+  }), [runItemPlugins, wrapItem, publicAPI, store, rootRef]);
+};
+function initializeInputApiRef(publicAPI, apiRef) {
+  if (apiRef != null && apiRef.current == null) {
+    apiRef.current = publicAPI;
+  }
+}

package/esm/internals/components/RichTreeViewItems.js

@@ -4,17 +4,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["ownerState"];
 import * as React from 'react';
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 import { useStore } from '@mui/x-internals/store';
 import useSlotProps from '@mui/utils/useSlotProps';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { TreeItem } from "../../TreeItem/index.js";
-import { itemsSelectors } from "../plugins/useTreeViewItems/index.js";
+import { itemsSelectors } from "../plugins/items/index.js";
 import { useTreeViewContext } from "../TreeViewProvider/index.js";
-import { expansionSelectors } from "../plugins/useTreeViewExpansion/index.js";
+import { expansionSelectors } from "../plugins/expansion/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";
-const EMPTY_ARRAY = [];
 const selectorNoChildren = () => EMPTY_ARRAY;
 const selectorChildrenIdsNull = state => itemsSelectors.itemOrderedChildrenIds(state, null);
 const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({

package/esm/internals/hooks/useTreeViewRootProps.d.ts

@@ -0,0 +1,287 @@
+import * as React from 'react';
+import { EventHandlers } from '@mui/utils/types';
+import { TreeViewCancellableEvent } from "../../models/index.js";
+import { TreeViewAnyStore } from "../models/index.js";
+export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TStore, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
+  style: React.CSSProperties;
+  onFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+  onBlur: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+  defaultChecked?: boolean | undefined;
+  defaultValue?: string | number | readonly string[] | undefined;
+  suppressContentEditableWarning?: boolean | undefined;
+  suppressHydrationWarning?: boolean | undefined;
+  accessKey?: string | undefined;
+  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+  autoFocus?: boolean | undefined;
+  className?: string | undefined;
+  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+  contextMenu?: string | undefined;
+  dir?: string | undefined;
+  draggable?: (boolean | "true" | "false") | undefined;
+  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+  hidden?: boolean | undefined;
+  id: string | undefined;
+  lang?: string | undefined;
+  nonce?: string | undefined;
+  slot?: string | undefined;
+  spellCheck?: (boolean | "true" | "false") | undefined;
+  tabIndex?: number | undefined;
+  title?: string | undefined;
+  translate?: "yes" | "no" | undefined;
+  radioGroup?: string | undefined;
+  role: string;
+  about?: string | undefined;
+  content?: string | undefined;
+  datatype?: string | undefined;
+  inlist?: any;
+  prefix?: string | undefined;
+  property?: string | undefined;
+  rel?: string | undefined;
+  resource?: string | undefined;
+  rev?: string | undefined;
+  typeof?: string | undefined;
+  vocab?: string | undefined;
+  autoCorrect?: string | undefined;
+  autoSave?: string | undefined;
+  color?: string | undefined;
+  itemProp?: string | undefined;
+  itemScope?: boolean | undefined;
+  itemType?: string | undefined;
+  itemID?: string | undefined;
+  itemRef?: string | undefined;
+  results?: number | undefined;
+  security?: string | undefined;
+  unselectable?: "on" | "off" | undefined;
+  popover?: "" | "auto" | "manual" | "hint" | undefined;
+  popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+  popoverTarget?: string | undefined;
+  inert?: boolean | undefined;
+  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+  is?: string | undefined;
+  exportparts?: string | undefined;
+  part?: string | undefined;
+  "aria-activedescendant"?: string | undefined;
+  "aria-atomic"?: (boolean | "true" | "false") | undefined;
+  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+  "aria-braillelabel"?: string | undefined;
+  "aria-brailleroledescription"?: string | undefined;
+  "aria-busy"?: (boolean | "true" | "false") | undefined;
+  "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+  "aria-colcount"?: number | undefined;
+  "aria-colindex"?: number | undefined;
+  "aria-colindextext"?: string | undefined;
+  "aria-colspan"?: number | undefined;
+  "aria-controls"?: string | undefined;
+  "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+  "aria-describedby"?: string | undefined;
+  "aria-description"?: string | undefined;
+  "aria-details"?: string | undefined;
+  "aria-disabled"?: (boolean | "true" | "false") | undefined;
+  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+  "aria-errormessage"?: string | undefined;
+  "aria-expanded"?: (boolean | "true" | "false") | undefined;
+  "aria-flowto"?: string | undefined;
+  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+  "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+  "aria-hidden"?: (boolean | "true" | "false") | undefined;
+  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+  "aria-keyshortcuts"?: string | undefined;
+  "aria-label"?: string | undefined;
+  "aria-labelledby"?: string | undefined;
+  "aria-level"?: number | undefined;
+  "aria-live"?: "off" | "assertive" | "polite" | undefined;
+  "aria-modal"?: (boolean | "true" | "false") | undefined;
+  "aria-multiline"?: (boolean | "true" | "false") | undefined;
+  "aria-multiselectable": boolean | "true" | "false";
+  "aria-orientation"?: "horizontal" | "vertical" | undefined;
+  "aria-owns"?: string | undefined;
+  "aria-placeholder"?: string | undefined;
+  "aria-posinset"?: number | undefined;
+  "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+  "aria-readonly"?: (boolean | "true" | "false") | undefined;
+  "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+  "aria-required"?: (boolean | "true" | "false") | undefined;
+  "aria-roledescription"?: string | undefined;
+  "aria-rowcount"?: number | undefined;
+  "aria-rowindex"?: number | undefined;
+  "aria-rowindextext"?: string | undefined;
+  "aria-rowspan"?: number | undefined;
+  "aria-selected"?: (boolean | "true" | "false") | undefined;
+  "aria-setsize"?: number | undefined;
+  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+  "aria-valuemax"?: number | undefined;
+  "aria-valuemin"?: number | undefined;
+  "aria-valuenow"?: number | undefined;
+  "aria-valuetext"?: string | undefined;
+  children?: React.ReactNode | undefined;
+  dangerouslySetInnerHTML?: {
+    __html: string | TrustedHTML;
+  } | undefined;
+  onCopy?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onCopyCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onCut?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onCutCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onPaste?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onPasteCapture?: React.ClipboardEventHandler<HTMLUListElement> | undefined;
+  onCompositionEnd?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onCompositionEndCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onCompositionStart?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onCompositionStartCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onCompositionUpdate?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLUListElement> | undefined;
+  onFocusCapture?: React.FocusEventHandler<HTMLUListElement> | undefined;
+  onBlurCapture?: React.FocusEventHandler<HTMLUListElement> | undefined;
+  onChange?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onChangeCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onBeforeInput?: React.InputEventHandler<HTMLUListElement> | undefined;
+  onBeforeInputCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onInput?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onInputCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onReset?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onResetCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onSubmit?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onSubmitCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onInvalid?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onInvalidCapture?: React.FormEventHandler<HTMLUListElement> | undefined;
+  onLoad?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onError?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onErrorCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onKeyDownCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onKeyPress?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onKeyPressCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onKeyUp?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onKeyUpCapture?: React.KeyboardEventHandler<HTMLUListElement> | undefined;
+  onAbort?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onAbortCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onCanPlay?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onCanPlayCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onCanPlayThrough?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onCanPlayThroughCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onDurationChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onDurationChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEmptied?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEmptiedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEncrypted?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEncryptedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEnded?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onEndedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadedData?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadedDataCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadedMetadata?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadedMetadataCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadStart?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onLoadStartCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPause?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPauseCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPlay?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPlayCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPlaying?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onPlayingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onProgress?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onProgressCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onRateChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onRateChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSeeked?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSeekedCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSeeking?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSeekingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onStalled?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onStalledCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSuspend?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSuspendCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onTimeUpdate?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onTimeUpdateCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onVolumeChange?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onVolumeChangeCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onWaiting?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onWaitingCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onAuxClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onAuxClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onContextMenu?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onContextMenuCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onDoubleClick?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onDoubleClickCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onDrag?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragEnd?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragEndCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragEnter?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragEnterCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragExit?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragExitCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragLeave?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragLeaveCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragOver?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragOverCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragStart?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDragStartCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDrop?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onDropCapture?: React.DragEventHandler<HTMLUListElement> | undefined;
+  onMouseDown?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseDownCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseEnter?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseLeave?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseMove?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseMoveCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseOut?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseOutCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseOver?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseOverCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseUp?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onMouseUpCapture?: React.MouseEventHandler<HTMLUListElement> | undefined;
+  onSelect?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onSelectCapture?: React.ReactEventHandler<HTMLUListElement> | undefined;
+  onTouchCancel?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchCancelCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchEnd?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchEndCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchMove?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchMoveCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchStart?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onTouchStartCapture?: React.TouchEventHandler<HTMLUListElement> | undefined;
+  onPointerDown?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerDownCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerMove?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerMoveCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerUp?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerUpCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerCancel?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerCancelCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerEnter?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerLeave?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerOver?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerOverCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerOut?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onPointerOutCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onGotPointerCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onLostPointerCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLUListElement> | undefined;
+  onScroll?: React.UIEventHandler<HTMLUListElement> | undefined;
+  onScrollCapture?: React.UIEventHandler<HTMLUListElement> | undefined;
+  onScrollEnd?: React.UIEventHandler<HTMLUListElement> | undefined;
+  onScrollEndCapture?: React.UIEventHandler<HTMLUListElement> | undefined;
+  onWheel?: React.WheelEventHandler<HTMLUListElement> | undefined;
+  onWheelCapture?: React.WheelEventHandler<HTMLUListElement> | undefined;
+  onAnimationStart?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onAnimationStartCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onAnimationEnd?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onAnimationEndCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onAnimationIteration?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onAnimationIterationCapture?: React.AnimationEventHandler<HTMLUListElement> | undefined;
+  onToggle?: React.ToggleEventHandler<HTMLUListElement> | undefined;
+  onBeforeToggle?: React.ToggleEventHandler<HTMLUListElement> | undefined;
+  onTransitionCancel?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionCancelCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionEnd?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionEndCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionRun?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionRunCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionStart?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  onTransitionStartCapture?: React.TransitionEventHandler<HTMLUListElement> | undefined;
+  ref: React.Ref<HTMLUListElement | null> | undefined;
+};

package/esm/internals/hooks/useTreeViewRootProps.js

@@ -0,0 +1,30 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useStore } from '@mui/x-internals/store';
+import { idSelectors } from "../plugins/id/index.js";
+import { selectionSelectors } from "../plugins/selection/index.js";
+import { itemsSelectors } from "../plugins/items/index.js";
+export function useTreeViewRootProps(store, forwardedProps, ref) {
+  const treeId = useStore(store, idSelectors.treeId);
+  const itemChildrenIndentation = useStore(store, itemsSelectors.itemChildrenIndentation);
+  const isMultiSelectEnabled = useStore(store, selectionSelectors.isMultiSelectEnabled);
+  return otherHandlers => _extends({
+    ref,
+    role: 'tree',
+    id: treeId,
+    'aria-multiselectable': isMultiSelectEnabled
+  }, forwardedProps, otherHandlers, {
+    style: _extends({}, forwardedProps.style, {
+      '--TreeView-itemChildrenIndentation': typeof itemChildrenIndentation === 'number' ? `${itemChildrenIndentation}px` : itemChildrenIndentation
+    }),
+    onFocus: event => {
+      otherHandlers.onFocus?.(event);
+      store.focus.handleRootFocus(event);
+    },
+    onBlur: event => {
+      otherHandlers.onBlur?.(event);
+      store.focus.handleRootBlur(event);
+    }
+  });
+}

package/esm/internals/hooks/useTreeViewStore.d.ts

@@ -0,0 +1,10 @@
+import { TreeViewAnyStore } from "../models/index.js";
+interface ValidTreeViewStoreConstructor<TStore extends TreeViewAnyStore> {
+  new (parameters: TStore['parameters']): TStore;
+}
+export type UseTreeViewStoreParameters<TStore extends TreeViewAnyStore> = Omit<Parameters<TStore['updateStateFromParameters']>[0], 'isRtl'>;
+/**
+ * Creates a Tree View store and keep it in sync with the provided parameters.
+ */
+export declare function useTreeViewStore<TStore extends TreeViewAnyStore>(StoreClass: ValidTreeViewStoreConstructor<TStore>, parameters: UseTreeViewStoreParameters<TStore>): TStore;
+export {};

package/esm/internals/hooks/useTreeViewStore.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useOnMount } from '@base-ui/utils/useOnMount';
+import { useRtl } from '@mui/system/RtlProvider';
+/**
+ * Creates a Tree View store and keep it in sync with the provided parameters.
+ */
+export function useTreeViewStore(StoreClass, parameters) {
+  const isRtl = useRtl();
+  const store = useRefWithInit(() => new StoreClass(_extends({}, parameters, {
+    isRtl
+  }))).current;
+  useIsoLayoutEffect(() => store.updateStateFromParameters(_extends({}, parameters, {
+    isRtl
+  })), [store, isRtl, parameters]);
+  useOnMount(store.disposeEffect);
+  return store;
+}