@mui/x-tree-view 8.0.0-alpha.1 → 8.0.0-alpha.11

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Tree View
 
 This package is the Community plan edition of the Tree View components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 

package/RichTreeView/RichTreeView.js

@@ -152,9 +152,7 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`,
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
-  experimentalFeatures: PropTypes.shape({
-    labelEditing: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * Used to determine the id of a given item.
    *
@@ -186,13 +184,11 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   isItemDisabled: PropTypes.func,
   /**
-   * Determines if a given item is editable or not.
-   * Make sure to also enable the `labelEditing` experimental feature:
-   * `<RichTreeViewPro experimentalFeatures={{ labelEditing: true }}  />`.
-   * By default, the items are not editable.
+   * Determine if a given item can be edited.
    * @template R
    * @param {R} item The item to check.
-   * @returns {boolean} `true` if the item is editable.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
    */
   isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   /**

package/RichTreeView/RichTreeView.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SxProps } from '@mui/system';
-import { SlotComponentProps } from '@mui/utils';
+import { SxProps } from '@mui/system/styleFunctionSx';
+import { SlotComponentProps } from '@mui/utils/types';
 import { RichTreeViewClasses } from './richTreeViewClasses';
 import { RichTreeViewPluginParameters, RichTreeViewPluginSlotProps, RichTreeViewPluginSlots, RichTreeViewPluginSignatures } from './RichTreeView.plugins';
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
@@ -16,7 +16,7 @@ export interface RichTreeViewSlots extends RichTreeViewPluginSlots, RichTreeView
 export interface RichTreeViewSlotProps<R extends {}, Multiple extends boolean | undefined> extends RichTreeViewPluginSlotProps, RichTreeViewItemsSlotProps {
     root?: SlotComponentProps<'ul', {}, RichTreeViewProps<R, Multiple>>;
 }
-export type RichTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;
+export type RichTreeViewApiRef = React.RefObject<TreeViewPublicAPI<RichTreeViewPluginSignatures> | undefined>;
 export interface RichTreeViewPropsBase extends React.HTMLAttributes<HTMLUListElement> {
     className?: string;
     /**

package/SimpleTreeView/SimpleTreeView.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
-import { SlotComponentProps } from '@mui/utils';
-import { SxProps } from '@mui/system';
+import { SlotComponentProps } from '@mui/utils/types';
+import { SxProps } from '@mui/system/styleFunctionSx';
 import { SimpleTreeViewClasses } from './simpleTreeViewClasses';
 import { SimpleTreeViewPluginParameters, SimpleTreeViewPluginSlotProps, SimpleTreeViewPluginSlots, SimpleTreeViewPluginSignatures } from './SimpleTreeView.plugins';
 import { TreeViewExperimentalFeatures, TreeViewPublicAPI } from '../internals/models';
@@ -15,7 +15,7 @@ export interface SimpleTreeViewSlots extends SimpleTreeViewPluginSlots {
 export interface SimpleTreeViewSlotProps extends SimpleTreeViewPluginSlotProps {
     root?: SlotComponentProps<'ul', {}, {}>;
 }
-export type SimpleTreeViewApiRef = React.MutableRefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;
+export type SimpleTreeViewApiRef = React.RefObject<TreeViewPublicAPI<SimpleTreeViewPluginSignatures> | undefined>;
 export interface SimpleTreeViewProps<Multiple extends boolean | undefined> extends SimpleTreeViewPluginParameters<Multiple>, React.HTMLAttributes<HTMLUListElement> {
     /**
      * The content of the component.

package/TreeItem/TreeItem.d.ts

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

package/TreeItem/TreeItem.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { TransitionProps } from '@mui/material/transitions';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { UseTreeItemParameters, UseTreeItemStatus } from '../useTreeItem';
 import { TreeItemClasses } from './treeItemClasses';
 import { TreeItemIconSlotProps, TreeItemIconSlots } from '../TreeItemIcon';

package/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { alpha } from '@mui/material/styles';
-import { shouldForwardProp } from '@mui/system';
+import { shouldForwardProp } from '@mui/system/createStyled';
 import { styled } from "../internals/zero-styled/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TreeItemDragAndDropOverlayRoot = styled('div', {

package/TreeItemIcon/TreeItemIcon.types.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { UseTreeItemStatus } from '../useTreeItem';
 export interface TreeItemIconSlots {
     /**

package/TreeItemProvider/TreeItemProvider.d.ts

@@ -1,8 +1,6 @@
+import * as React from 'react';
 import { TreeItemProviderProps } from './TreeItemProvider.types';
-/**
- * @ignore - internal component.
- */
-declare function TreeItemProvider(props: TreeItemProviderProps): import("react").ReactNode;
+declare function TreeItemProvider(props: TreeItemProviderProps): React.JSX.Element;
 declare namespace TreeItemProvider {
     var propTypes: any;
 }

package/TreeItemProvider/TreeItemProvider.js

@@ -1,12 +1,12 @@
+'use client';
+
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
 import { useSelector } from "../internals/hooks/useSelector.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
-
-/**
- * @ignore - internal component.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItemProvider(props) {
   const {
     children,
@@ -24,14 +24,16 @@ function TreeItemProvider(props) {
     treeId,
     id
   });
-  return wrapItem({
-    children,
-    itemId,
-    instance,
-    idAttribute
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: wrapItem({
+      children,
+      itemId,
+      instance,
+      idAttribute
+    })
   });
 }
-TreeItemProvider.propTypes = {
+process.env.NODE_ENV !== "production" ? TreeItemProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
@@ -39,5 +41,5 @@ TreeItemProvider.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,
   itemId: PropTypes.string.isRequired
-};
+} : void 0;
 export { TreeItemProvider };

package/hooks/useTreeItemUtils/useTreeItemUtils.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
-import { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
-import { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
-import { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
+import type { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
+import type { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
+import type { UseTreeViewFocusSignature } from '../../internals/plugins/useTreeViewFocus';
 import { UseTreeViewLabelSignature } from '../../internals/plugins/useTreeViewLabel';
 import type { UseTreeItemStatus } from '../../useTreeItem';
 import { TreeViewPublicAPI } from '../../internals/models';

package/hooks/useTreeViewApiRef.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TreeViewAnyPluginSignature, TreeViewPublicAPI } from '../internals/models';
+import { RichTreeViewPluginSignatures } from '../RichTreeView/RichTreeView.plugins';
 /**
  * Hook that instantiates a [[TreeViewApiRef]].
  */
-export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature, import("../internals").UseTreeViewLabelSignature]>() => React.MutableRefObject<TreeViewPublicAPI<TSignatures> | undefined>;
+export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = readonly [import("../internals").UseTreeViewItemsSignature, import("../internals").UseTreeViewExpansionSignature, import("../internals").UseTreeViewSelectionSignature, import("../internals").UseTreeViewFocusSignature, import("../internals").UseTreeViewKeyboardNavigationSignature, import("../internals").UseTreeViewIconsSignature, import("../internals").UseTreeViewLabelSignature]>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;

package/index.js

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

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

@@ -8,7 +8,7 @@ export type TreeViewContextValue<TSignatures extends readonly TreeViewAnyPluginS
     instance: TreeViewInstance<TSignatures, TOptionalSignatures>;
     publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
     store: TreeViewStore<TSignatures>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
     wrapItem: TreeItemWrapper<TSignatures>;
     wrapRoot: TreeRootWrapper;
     runItemPlugins: TreeViewItemPluginsRunner;

package/internals/components/RichTreeViewItems.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { TreeItem, TreeItemProps } from '../../TreeItem';
 import { TreeViewItemId } from '../../models';
 export declare function RichTreeViewItems(props: RichTreeViewItemsProps): React.JSX.Element;

package/internals/hooks/useInstanceEventHandler.js

@@ -14,7 +14,7 @@ export function createUseInstanceEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(undefined);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/internals/models/itemPlugin.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/utils';
+import { EventHandlers } from '@mui/utils/types';
 import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemStatus } from '../../useTreeItem';
 import type { UseTreeItemInteractions } from '../../hooks/useTreeItemUtils/useTreeItemUtils';
 import type { TreeItemProps } from '../../TreeItem/TreeItem.types';
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
-    rootRefObject: React.MutableRefObject<HTMLLIElement | null>;
-    contentRefObject: React.MutableRefObject<HTMLDivElement | null>;
+    rootRefObject: React.RefObject<HTMLLIElement | null>;
+    contentRefObject: React.RefObject<HTMLDivElement | null>;
     externalEventHandlers: EventHandlers;
     interactions: UseTreeItemInteractions;
     status: UseTreeItemStatus;

package/internals/models/plugin.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventHandlers } from '@mui/utils';
+import { EventHandlers } from '@mui/utils/types';
 import { TreeViewExperimentalFeatures, TreeViewInstance, TreeViewModel } from './treeView';
 import type { MergeSignaturesProperty, OptionalIfEmpty } from './helpers';
 import { TreeViewEventLookupElement } from './events';
@@ -15,7 +15,7 @@ export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSigna
     experimentalFeatures: TreeViewUsedExperimentalFeatures<TSignature>;
     models: TreeViewUsedModels<TSignature>;
     store: TreeViewUsedStore<TSignature>;
-    rootRef: React.RefObject<HTMLUListElement>;
+    rootRef: React.RefObject<HTMLUListElement | null>;
     plugins: TreeViewPlugin<TreeViewAnyPluginSignature>[];
 }
 type TreeViewModelsInitializer<TSignature extends TreeViewAnyPluginSignature> = {
@@ -118,7 +118,7 @@ type TreeViewRequiredPlugins<TSignature extends TreeViewAnyPluginSignature> = [
 ];
 type PluginPropertyWithDependencies<TSignature extends TreeViewAnyPluginSignature, TProperty extends keyof TreeViewAnyPluginSignature> = TSignature[TProperty] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, TProperty> & Partial<MergeSignaturesProperty<TSignature['optionalDependencies'], TProperty>>;
 export type TreeViewUsedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'params'>;
-type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
+export type TreeViewUsedDefaultizedParams<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'defaultizedParams'>;
 export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature> = PluginPropertyWithDependencies<TSignature, 'instance'> & {
     /**
      * Private property only defined in TypeScript to be able to access the plugin signature from the instance object.

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -1,25 +1,38 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { selectorIsItemExpandable, selectorIsItemExpanded } from "./useTreeViewExpansion.selectors.js";
-import { createExpandedItemsMap } from "./useTreeViewExpansion.utils.js";
+import { createExpandedItemsMap, getExpansionTrigger } from "./useTreeViewExpansion.utils.js";
 import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../useTreeViewItems/useTreeViewItems.selectors.js";
 export const useTreeViewExpansion = ({
   instance,
   store,
   params,
-  models,
-  experimentalFeatures
+  models
 }) => {
-  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
   useEnhancedEffect(() => {
     store.update(prevState => _extends({}, prevState, {
-      expansion: {
+      expansion: _extends({}, prevState.expansion, {
         expandedItemsMap: createExpandedItemsMap(models.expandedItems.value)
-      }
+      })
     }));
   }, [store, models.expandedItems.value]);
+  useEnhancedEffect(() => {
+    store.update(prevState => {
+      const newExpansionTrigger = getExpansionTrigger({
+        isItemEditable: params.isItemEditable,
+        expansionTrigger: params.expansionTrigger
+      });
+      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
+        return prevState;
+      }
+      return _extends({}, prevState, {
+        expansion: _extends({}, prevState.expansion, {
+          expansionTrigger: newExpansionTrigger
+        })
+      });
+    });
+  }, [store, params.isItemEditable, params.expansionTrigger]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
@@ -61,20 +74,6 @@ export const useTreeViewExpansion = ({
       setExpandedItems(event, newExpanded);
     }
   };
-  const expansionTrigger = React.useMemo(() => {
-    if (params.expansionTrigger) {
-      return params.expansionTrigger;
-    }
-    if (isTreeViewEditable) {
-      return 'iconContainer';
-    }
-    return 'content';
-  }, [params.expansionTrigger, isTreeViewEditable]);
-  const pluginContextValue = React.useMemo(() => ({
-    expansion: {
-      expansionTrigger
-    }
-  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
@@ -83,8 +82,7 @@ export const useTreeViewExpansion = ({
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
-    },
-    contextValue: pluginContextValue
+    }
   };
 };
 useTreeViewExpansion.models = {
@@ -100,7 +98,8 @@ useTreeViewExpansion.getDefaultizedParams = ({
 });
 useTreeViewExpansion.getInitialState = params => ({
   expansion: {
-    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+    expandedItemsMap: createExpandedItemsMap(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems),
+    expansionTrigger: getExpansionTrigger(params)
   }
 });
 useTreeViewExpansion.params = {

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

@@ -12,9 +12,11 @@ export declare const selectorIsItemExpanded: ((state: any, itemId: string) => bo
 } & {
     resultFunc: (resultFuncArgs_0: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
     }, resultFuncArgs_1: string) => boolean;
     memoizedResultFunc: ((resultFuncArgs_0: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
     }, resultFuncArgs_1: string) => boolean) & {
         clearCache: () => void;
         resultsCount: () => number;
@@ -52,8 +54,12 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
         resultsCount: () => number;
         resetResultsCount: () => void;
     } & {
-        resultFunc: (resultFuncArgs_0: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null;
-        memoizedResultFunc: ((resultFuncArgs_0: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null) & {
+        resultFunc: (resultFuncArgs_0: {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null;
+        memoizedResultFunc: ((resultFuncArgs_0: {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }, resultFuncArgs_1: string | null) => import("../..").TreeViewItemMeta | null) & {
             clearCache: () => void;
             resultsCount: () => number;
             resetResultsCount: () => void;
@@ -61,15 +67,21 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
         lastResult: () => import("../..").TreeViewItemMeta | null;
         dependencies: [((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("../useTreeViewItems").UseTreeViewItemsState<import("../../..").TreeViewDefaultItemModelProperties> & Partial<{}> & {
             cacheKey: import("../../models").TreeViewStateCacheKey;
-        }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+        }) => {
+            [itemId: string]: import("../..").TreeViewItemMeta;
+        }) & {
             clearCache: () => void;
             resultsCount: () => number;
             resetResultsCount: () => void;
         } & {
             resultFunc: (resultFuncArgs_0: {
                 disabledItemsFocusable: boolean;
-                itemModelLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("../../..").TreeViewDefaultItemModelProperties>;
-                itemMetaLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+                itemModelLookup: {
+                    [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+                };
+                itemMetaLookup: {
+                    [itemId: string]: import("../..").TreeViewItemMeta;
+                };
                 itemOrderedChildrenIdsLookup: {
                     [parentItemId: string]: string[];
                 };
@@ -78,11 +90,17 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
                         [itemId: string]: number;
                     };
                 };
-            }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            }) => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            };
             memoizedResultFunc: ((resultFuncArgs_0: {
                 disabledItemsFocusable: boolean;
-                itemModelLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemModelLookup<import("../../..").TreeViewDefaultItemModelProperties>;
-                itemMetaLookup: import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+                itemModelLookup: {
+                    [itemId: string]: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>;
+                };
+                itemMetaLookup: {
+                    [itemId: string]: import("../..").TreeViewItemMeta;
+                };
                 itemOrderedChildrenIdsLookup: {
                     [parentItemId: string]: string[];
                 };
@@ -91,12 +109,16 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
                         [itemId: string]: number;
                     };
                 };
-            }) => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup) & {
+            }) => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            }) & {
                 clearCache: () => void;
                 resultsCount: () => number;
                 resetResultsCount: () => void;
             };
-            lastResult: () => import("../useTreeViewItems/useTreeViewItems.types").TreeViewItemMetaLookup;
+            lastResult: () => {
+                [itemId: string]: import("../..").TreeViewItemMeta;
+            };
             dependencies: [TreeViewRootSelector<import("../useTreeViewItems").UseTreeViewItemsSignature>];
             recomputations: () => number;
             resetRecomputations: () => void;
@@ -122,3 +144,37 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
     argsMemoize: typeof import("reselect").weakMapMemoize;
     memoize: typeof import("reselect").weakMapMemoize;
 };
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export declare const selectorItemExpansionTrigger: ((state: import("../../corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewExpansion.types").UseTreeViewExpansionState & Partial<{}> & {
+    cacheKey: import("../../models").TreeViewStateCacheKey;
+}) => "content" | "iconContainer") & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+} & {
+    resultFunc: (resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer";
+    memoizedResultFunc: ((resultFuncArgs_0: {
+        expandedItemsMap: Map<string, true>;
+        expansionTrigger: "content" | "iconContainer";
+    }) => "content" | "iconContainer") & {
+        clearCache: () => void;
+        resultsCount: () => number;
+        resetResultsCount: () => void;
+    };
+    lastResult: () => "content" | "iconContainer";
+    dependencies: [TreeViewRootSelector<UseTreeViewExpansionSignature>];
+    recomputations: () => number;
+    resetRecomputations: () => void;
+    dependencyRecomputations: () => number;
+    resetDependencyRecomputations: () => void;
+} & {
+    argsMemoize: typeof import("reselect").weakMapMemoize;
+    memoize: typeof import("reselect").weakMapMemoize;
+};

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js

@@ -14,4 +14,11 @@ export const selectorIsItemExpanded = createSelector([selectorExpansion, (_, ite
  * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
  * @returns {boolean} `true` if the item is expandable, `false` otherwise.
  */
-export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+export const selectorIsItemExpandable = createSelector([selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);
+
+/**
+ * Get the slot that triggers the item's expansion when clicked.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {'content' | 'iconContainer'} The slot that triggers the item's expansion when clicked. Is `null` if the item is not expandable.
+ */
+export const selectorItemExpansionTrigger = createSelector([selectorExpansion], expansionState => expansionState.expansionTrigger);

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

@@ -63,11 +63,9 @@ export type UseTreeViewExpansionDefaultizedParameters = DefaultizedProps<UseTree
 export interface UseTreeViewExpansionState {
     expansion: {
         expandedItemsMap: Map<string, true>;
+        expansionTrigger: 'content' | 'iconContainer';
     };
 }
-interface UseTreeViewExpansionContextValue {
-    expansion: Pick<UseTreeViewExpansionParameters, 'expansionTrigger'>;
-}
 export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     params: UseTreeViewExpansionParameters;
     defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
@@ -75,8 +73,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
     publicAPI: UseTreeViewExpansionPublicAPI;
     modelNames: 'expandedItems';
     state: UseTreeViewExpansionState;
-    contextValue: UseTreeViewExpansionContextValue;
     dependencies: [UseTreeViewItemsSignature];
     optionalDependencies: [UseTreeViewLabelSignature];
 }>;
-export {};

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

@@ -1 +1,4 @@
+import { TreeViewUsedDefaultizedParams } from '../../models';
+import { UseTreeViewExpansionSignature } from './useTreeViewExpansion.types';
 export declare const createExpandedItemsMap: (expandedItems: string[]) => Map<string, true>;
+export declare const getExpansionTrigger: ({ isItemEditable, expansionTrigger, }: Pick<TreeViewUsedDefaultizedParams<UseTreeViewExpansionSignature>, "isItemEditable" | "expansionTrigger">) => "content" | "iconContainer";

package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.utils.js

@@ -4,4 +4,16 @@ export const createExpandedItemsMap = expandedItems => {
     expandedItemsMap.set(id, true);
   });
   return expandedItemsMap;
+};
+export const getExpansionTrigger = ({
+  isItemEditable,
+  expansionTrigger
+}) => {
+  if (expansionTrigger) {
+    return expansionTrigger;
+  }
+  if (isItemEditable) {
+    return 'iconContainer';
+  }
+  return 'content';
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
+import { SlotComponentProps } from '@mui/utils/types';
 import { TreeViewPluginSignature } from '../../models';
 import { UseTreeViewItemsSignature } from '../useTreeViewItems';
 import { UseTreeViewSelectionSignature } from '../useTreeViewSelection';