@mui/x-tree-view 8.10.2 → 8.11.1

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" | "component" | "checkedIcon" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "inputProps" | "inputRef" | "indeterminate" | "indeterminateIcon" | keyof React.RefAttributes<HTMLButtonElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "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>, {}, {}>;
 type TreeItemComponent = ((props: TreeItemProps & React.RefAttributes<HTMLLIElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/esm/TreeItem/TreeItem.types.d.ts

@@ -69,7 +69,9 @@ export interface TreeItemSlotProps extends TreeItemIconSlotProps {
   content?: SlotComponentProps<'div', {}, {}>;
   groupTransition?: SlotComponentPropsFromProps<TransitionProps, {}, {}>;
   iconContainer?: SlotComponentProps<'div', {}, {}>;
-  checkbox?: SlotComponentProps<'button', {}, {}>;
+  checkbox?: SlotComponentProps<React.ElementType<React.HTMLAttributes<HTMLButtonElement> & {
+    visible?: boolean;
+  }>, {}, {}>;
   label?: SlotComponentProps<'div', {}, {}>;
   labelInput?: SlotComponentProps<'input', {}, {}>;
   dragAndDropOverlay?: SlotComponentProps<'div', {}, {}>;

package/esm/TreeItemProvider/TreeItemProvider.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useStore } from '@mui/x-internals/store';
 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";
+import { idSelectors } from "../internals/corePlugins/useTreeViewId/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function TreeItemProvider(props) {
   const {
@@ -18,7 +18,7 @@ function TreeItemProvider(props) {
     instance,
     store
   } = useTreeViewContext();
-  const treeId = useSelector(store, selectorTreeViewId);
+  const treeId = useStore(store, idSelectors.treeId);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,

package/esm/hooks/useTreeItemModel.js

@@ -1,11 +1,11 @@
 'use client';
 
+import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
-import { useSelector } from "../internals/hooks/useSelector.js";
-import { selectorItemModel } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../internals/plugins/useTreeViewItems/index.js";
 export const useTreeItemModel = itemId => {
   const {
     store
   } = useTreeViewContext();
-  return useSelector(store, selectorItemModel, itemId);
+  return useStore(store, itemsSelectors.itemModel, itemId);
 };

package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -1,15 +1,15 @@
 'use client';
 
+import { useStore } from '@mui/x-internals/store';
 import { useTreeViewContext } from "../../internals/TreeViewProvider/index.js";
 import { useTreeViewLabel } from "../../internals/plugins/useTreeViewLabel/index.js";
 import { hasPlugin } from "../../internals/utils/plugins.js";
-import { useSelector } from "../../internals/hooks/useSelector.js";
-import { selectorIsItemExpandable, selectorIsItemExpanded } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-import { selectorIsItemFocused } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
-import { selectorIsItemDisabled } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
-import { selectorIsItemSelected, selectorIsMultiSelectEnabled } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
-import { selectorGetTreeItemError, selectorIsItemLoading, selectorIsLazyLoadingEnabled } from "../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
-import { selectorIsItemBeingEdited, selectorIsItemEditable } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
+import { expansionSelectors } from "../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { focusSelectors } from "../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
+import { itemsSelectors } from "../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectionSelectors } from "../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
+import { lazyLoadingSelectors } from "../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
+import { labelSelectors } from "../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
 
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
@@ -34,18 +34,16 @@ export const useTreeItemUtils = ({
     store,
     publicAPI
   } = useTreeViewContext();
-  const isItemExpandable = useSelector(store, selectorIsItemExpandable, itemId);
-  const isLazyLoadingEnabled = useSelector(store, selectorIsLazyLoadingEnabled);
-  const isMultiSelectEnabled = useSelector(store, selectorIsMultiSelectEnabled);
-  const loading = useSelector(store, state => isLazyLoadingEnabled ? selectorIsItemLoading(state, itemId) : false);
-  const error = useSelector(store, state => isLazyLoadingEnabled ? Boolean(selectorGetTreeItemError(state, itemId)) : false);
+  const isItemExpandable = useStore(store, expansionSelectors.isItemExpandable, itemId);
+  const isLoading = useStore(store, lazyLoadingSelectors.isItemLoading, itemId);
+  const hasError = useStore(store, lazyLoadingSelectors.itemHasError, itemId);
   const isExpandable = itemHasChildren(children) || isItemExpandable;
-  const isExpanded = useSelector(store, selectorIsItemExpanded, itemId);
-  const isFocused = useSelector(store, selectorIsItemFocused, itemId);
-  const isSelected = useSelector(store, selectorIsItemSelected, itemId);
-  const isDisabled = useSelector(store, selectorIsItemDisabled, itemId);
-  const isEditing = useSelector(store, selectorIsItemBeingEdited, itemId);
-  const isEditable = useSelector(store, selectorIsItemEditable, itemId);
+  const isExpanded = useStore(store, expansionSelectors.isItemExpanded, itemId);
+  const isFocused = useStore(store, focusSelectors.isItemFocused, itemId);
+  const isSelected = useStore(store, selectionSelectors.isItemSelected, itemId);
+  const isDisabled = useStore(store, itemsSelectors.isItemDisabled, itemId);
+  const isEditing = useStore(store, labelSelectors.isItemBeingEdited, itemId);
+  const isEditable = useStore(store, labelSelectors.isItemEditable, itemId);
   const status = {
     expandable: isExpandable,
     expanded: isExpanded,
@@ -54,8 +52,8 @@ export const useTreeItemUtils = ({
     disabled: isDisabled,
     editing: isEditing,
     editable: isEditable,
-    loading,
-    error
+    loading: isLoading,
+    error: hasError
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -64,10 +62,10 @@ export const useTreeItemUtils = ({
     if (!status.focused) {
       instance.focusItem(event, itemId);
     }
-    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && selectorIsItemExpanded(store.value, itemId))) {
+    if (status.expandable && !(multiple && expansionSelectors.isItemExpanded(store.state, itemId))) {
       // make sure the children selection is propagated again
       instance.setItemExpansion({
         event,
@@ -82,7 +80,7 @@ export const useTreeItemUtils = ({
     if (!status.focused && !status.editing) {
       instance.focusItem(event, itemId);
     }
-    const multiple = isMultiSelectEnabled && (event.shiftKey || event.ctrlKey || event.metaKey);
+    const multiple = selectionSelectors.isMultiSelectEnabled(store.state) && (event.shiftKey || event.ctrlKey || event.metaKey);
     if (multiple) {
       if (event.shiftKey) {
         instance.expandSelectionRange(event, itemId);
@@ -103,6 +101,7 @@ export const useTreeItemUtils = ({
   };
   const handleCheckboxSelection = event => {
     const hasShift = event.nativeEvent.shiftKey;
+    const isMultiSelectEnabled = selectionSelectors.isMultiSelectEnabled(store.state);
     if (isMultiSelectEnabled && hasShift) {
       instance.expandSelectionRange(event, itemId);
     } else {
@@ -132,7 +131,7 @@ export const useTreeItemUtils = ({
     // As a side effect of `instance.focusItem` called here and in `handleCancelItemLabelEditing` the `labelInput` is blurred
     // The `onBlur` event is triggered, which calls `handleSaveItemLabel` again.
     // To avoid creating an unwanted behavior we need to check if the item is being edited before calling `updateItemLabel`
-    if (selectorIsItemBeingEdited(store.value, itemId)) {
+    if (labelSelectors.isItemBeingEdited(store.state, itemId)) {
       instance.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
       instance.focusItem(event, itemId);
@@ -142,7 +141,7 @@ export const useTreeItemUtils = ({
     if (!hasPlugin(instance, useTreeViewLabel)) {
       return;
     }
-    if (selectorIsItemBeingEdited(store.value, itemId)) {
+    if (labelSelectors.isItemBeingEdited(store.state, itemId)) {
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }

package/esm/index.js

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

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 { selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../plugins/useTreeViewItems/useTreeViewItems.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";
@@ -24,7 +24,7 @@ export function TreeViewChildrenItemProvider(props) {
     if (!rootRef.current) {
       return;
     }
-    const previousChildrenIds = selectorItemOrderedChildrenIds(store.value, itemId ?? null) ?? [];
+    const previousChildrenIds = itemsSelectors.itemOrderedChildrenIds(store.state, itemId ?? null) ?? [];
     const escapedIdAttr = escapeOperandAttributeSelector(idAttribute ?? rootRef.current.id);
 
     // If collapsed, skip childrenIds update prevents clearing the parent's indeterminate state after opening a sibling.

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI } from "../models/index.js";
-import { TreeViewStore } from "../utils/TreeViewStore.js";
+import { TreeItemWrapper, TreeRootWrapper, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewReadonlyStore } 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";
 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: TreeViewStore<TSignatures>;
+  store: TreeViewReadonlyStore<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
   rootRef: React.RefObject<HTMLUListElement | null>;
   wrapItem: TreeItemWrapper<TSignatures>;
   wrapRoot: TreeRootWrapper;

package/esm/internals/components/RichTreeViewItems.js

@@ -4,11 +4,11 @@ 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 { 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 { useSelector } from "../hooks/useSelector.js";
-import { selectorItemMeta, selectorItemOrderedChildrenIds } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { itemsSelectors } from "../plugins/useTreeViewItems/index.js";
 import { useTreeViewContext } from "../TreeViewProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
@@ -22,8 +22,8 @@ const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
   const {
     store
   } = useTreeViewContext();
-  const itemMeta = useSelector(store, selectorItemMeta, itemId);
-  const children = useSelector(store, selectorItemOrderedChildrenIds, itemId);
+  const itemMeta = useStore(store, itemsSelectors.itemMeta, itemId);
+  const children = useStore(store, itemsSelectors.itemOrderedChildrenIds, itemId);
   const Item = itemSlot ?? TreeItem;
   const _useSlotProps = useSlotProps({
       elementType: Item,
@@ -54,7 +54,7 @@ export function RichTreeViewItems(props) {
   } = useTreeViewContext();
   const itemSlot = slots?.item;
   const itemSlotProps = slotProps?.item;
-  const items = useSelector(store, selectorItemOrderedChildrenIds, null);
+  const items = useStore(store, itemsSelectors.itemOrderedChildrenIds, null);
   const renderItem = React.useCallback(itemId => {
     return /*#__PURE__*/_jsx(WrappedTreeItem, {
       itemSlot: itemSlot,

package/esm/internals/corePlugins/useTreeViewId/index.d.ts

@@ -1,2 +1,3 @@
 export { useTreeViewId } from "./useTreeViewId.js";
-export type { UseTreeViewIdSignature, UseTreeViewIdParameters, UseTreeViewIdParametersWithDefaults } from "./useTreeViewId.types.js";
+export type { UseTreeViewIdSignature, UseTreeViewIdParameters, UseTreeViewIdParametersWithDefaults } from "./useTreeViewId.types.js";
+export { idSelectors } from "./useTreeViewId.selectors.js";

package/esm/internals/corePlugins/useTreeViewId/index.js

@@ -1 +1,2 @@
-export { useTreeViewId } from "./useTreeViewId.js";
+export { useTreeViewId } from "./useTreeViewId.js";
+export { idSelectors } from "./useTreeViewId.selectors.js";

package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -2,26 +2,23 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSelector } from "../../hooks/useSelector.js";
-import { selectorTreeViewId } from "./useTreeViewId.selectors.js";
+import { useStore } from '@mui/x-internals/store';
+import { idSelectors } from "./useTreeViewId.selectors.js";
 import { createTreeViewDefaultId } from "./useTreeViewId.utils.js";
 export const useTreeViewId = ({
   params,
   store
 }) => {
   React.useEffect(() => {
-    store.update(prevState => {
-      if (params.id === prevState.id.providedTreeId && prevState.id.treeId !== undefined) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        id: _extends({}, prevState.id, {
-          treeId: params.id ?? createTreeViewDefaultId()
-        })
-      });
-    });
+    const prevIdState = store.state.id;
+    if (params.id === prevIdState.providedTreeId && prevIdState.treeId !== undefined) {
+      return;
+    }
+    store.set('id', _extends({}, prevIdState, {
+      treeId: params.id ?? createTreeViewDefaultId()
+    }));
   }, [store, params.id]);
-  const treeId = useSelector(store, selectorTreeViewId);
+  const treeId = useStore(store, idSelectors.treeId);
   return {
     getRootProps: () => ({
       id: treeId

package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.d.ts

@@ -1,36 +1,10 @@
-import { TreeViewRootSelector } from "../../utils/selectors.js";
 import { UseTreeViewIdSignature } from "./useTreeViewId.types.js";
-/**
- * Get the id attribute of the tree view.
- * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
- * @returns {string} The id attribute of the tree view.
- */
-export declare const selectorTreeViewId: ((state: import("./useTreeViewId.types.js").UseTreeViewIdState & Partial<{}> & {
-  cacheKey: import("../../models/index.js").TreeViewStateCacheKey;
-}) => string | undefined) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
-} & {
-  resultFunc: (resultFuncArgs_0: {
-    treeId: string | undefined;
-    providedTreeId: string | undefined;
-  }) => string | undefined;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    treeId: string | undefined;
-    providedTreeId: string | undefined;
-  }) => string | undefined) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => string | undefined;
-  dependencies: [TreeViewRootSelector<UseTreeViewIdSignature>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
+import { TreeViewState } from "../../models/index.js";
+export declare const idSelectors: {
+  /**
+   * Get the id attribute of the tree view.
+   * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
+   * @returns {string} The id attribute of the tree view.
+   */
+  treeId: (state: TreeViewState<[UseTreeViewIdSignature]>) => string | undefined;
 };

package/esm/internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js

@@ -1,9 +1,9 @@
-import { createSelector } from "../../utils/selectors.js";
-const selectorTreeViewIdState = state => state.id;
-
-/**
- * Get the id attribute of the tree view.
- * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
- * @returns {string} The id attribute of the tree view.
- */
-export const selectorTreeViewId = createSelector(selectorTreeViewIdState, idState => idState.treeId);
+import { createSelector } from '@mui/x-internals/store';
+export const idSelectors = {
+  /**
+   * Get the id attribute of the tree view.
+   * @param {TreeViewState<[UseTreeViewIdSignature]>} state The state of the tree view.
+   * @returns {string} The id attribute of the tree view.
+   */
+  treeId: createSelector(state => state.id.treeId)
+};

package/esm/internals/index.d.ts

@@ -3,31 +3,23 @@ export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.j
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export { useSelector } from "./hooks/useSelector.js";
 export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from "./models/index.js";
 export type { TreeViewCorePluginParameters } from "./corePlugins/index.js";
-export { useTreeViewExpansion } from "./plugins/useTreeViewExpansion/index.js";
+export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
 export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters } from "./plugins/useTreeViewExpansion/index.js";
-export { useTreeViewSelection } from "./plugins/useTreeViewSelection/index.js";
+export { useTreeViewSelection, selectionSelectors } from "./plugins/useTreeViewSelection/index.js";
 export type { UseTreeViewSelectionSignature, UseTreeViewSelectionParameters } from "./plugins/useTreeViewSelection/index.js";
 export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
 export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters } from "./plugins/useTreeViewFocus/index.js";
 export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
 export type { UseTreeViewKeyboardNavigationSignature } from "./plugins/useTreeViewKeyboardNavigation/index.js";
-export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
-export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorItemOrderedChildrenIds } from "./plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
 export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from "./plugins/useTreeViewItems/index.js";
-export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
-export { selectorIsItemBeingEdited, selectorIsAnyItemBeingEdited } from "./plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
+export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
 export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./plugins/useTreeViewLabel/index.js";
-export { selectorIsItemExpanded, selectorExpandedItems } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
-export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
-export type { UseTreeViewLazyLoadingSignature } from "./plugins/useTreeViewLazyLoading/index.js";
-export type { UseTreeViewLazyLoadingParameters } from "./plugins/useTreeViewLazyLoading/index.js";
+export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance } from "./plugins/useTreeViewLazyLoading/index.js";
+export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
 export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from "./plugins/useTreeViewJSXItems/index.js";
-export { createSelector } from "./utils/selectors.js";
 export { isTargetInDescendants } from "./utils/tree.js";
-export { TreeViewStore } from "./utils/TreeViewStore.js";
 export type { TreeViewClasses, TreeViewSlots, TreeViewSlotProps } from "./TreeViewProvider/TreeViewStyleContext.js";

package/esm/internals/index.js

@@ -2,23 +2,16 @@ export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export { useSelector } from "./hooks/useSelector.js";
 
 // Core plugins
 
 // Plugins
-export { useTreeViewExpansion } from "./plugins/useTreeViewExpansion/index.js";
-export { useTreeViewSelection } from "./plugins/useTreeViewSelection/index.js";
+export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
+export { useTreeViewSelection, selectionSelectors } from "./plugins/useTreeViewSelection/index.js";
 export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
 export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
-export { useTreeViewItems, buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
-export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorItemOrderedChildrenIds } from "./plugins/useTreeViewItems/useTreeViewItems.selectors.js";
-export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
-export { selectorIsItemBeingEdited, selectorIsAnyItemBeingEdited } from "./plugins/useTreeViewLabel/useTreeViewLabel.selectors.js";
-export { selectorIsItemExpanded, selectorExpandedItems } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
-export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
-export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
+export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
+export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
+export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
 export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
-export { createSelector } from "./utils/selectors.js";
-export { isTargetInDescendants } from "./utils/tree.js";
-export { TreeViewStore } from "./utils/TreeViewStore.js";
+export { isTargetInDescendants } from "./utils/tree.js";

package/esm/internals/models/plugin.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import { TreeViewInstance } from "./treeView.js";
+import { TreeViewInstance, TreeViewStore } from "./treeView.js";
 import type { MergeSignaturesProperty, OptionalIfEmpty } from "./helpers.js";
 import { TreeViewEventLookupElement } from "./events.js";
 import type { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
 import { TreeViewItemPlugin } from "./itemPlugin.js";
 import { TreeViewItemId } from "../../models/index.js";
-import { TreeViewStore } from "../utils/TreeViewStore.js";
 export interface TreeViewPluginOptions<TSignature extends TreeViewAnyPluginSignature> {
   /**
    * An imperative API available for internal use. Used to access methods from other plugins.
@@ -109,7 +108,7 @@ export type TreeViewUsedInstance<TSignature extends TreeViewAnyPluginSignature>
    */
   $$signature: TSignature;
 };
-export type TreeViewUsedStore<TSignature extends TreeViewAnyPluginSignature> = TreeViewStore<[TSignature, ...TSignature['dependencies']]>;
+export type TreeViewUsedStore<TSignature extends TreeViewAnyPluginSignature> = TreeViewStore<[TSignature, ...TSignature['dependencies']], TSignature['optionalDependencies']>;
 export type TreeViewUsedEvents<TSignature extends TreeViewAnyPluginSignature> = TSignature['events'] & MergeSignaturesProperty<TreeViewRequiredPlugins<TSignature>, 'events'>;
 export type TreeItemWrapper<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (params: {
   itemId: TreeViewItemId;

package/esm/internals/models/treeView.d.ts

@@ -1,3 +1,4 @@
+import { ReadonlyStore, Store } from '@mui/x-internals/store';
 import type { TreeViewAnyPluginSignature } from "./plugin.js";
 import type { MergeSignaturesProperty } from "./helpers.js";
 import type { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
@@ -18,9 +19,6 @@ export interface TreeViewItemMeta {
 }
 export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
 export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
-export type TreeViewStateCacheKey = {
-  id: number;
-};
-export type TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>> & {
-  cacheKey: TreeViewStateCacheKey;
-};
+export type TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>>;
+export type TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = Store<TreeViewState<TSignatures, TOptionalSignatures>>;
+export type TreeViewReadonlyStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = ReadonlyStore<TreeViewState<TSignatures, TOptionalSignatures>>;

package/esm/internals/plugins/useTreeViewExpansion/index.d.ts

@@ -1,2 +1,3 @@
 export { useTreeViewExpansion } from "./useTreeViewExpansion.js";
-export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, UseTreeViewExpansionParametersWithDefaults } from "./useTreeViewExpansion.types.js";
+export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters, UseTreeViewExpansionParametersWithDefaults } from "./useTreeViewExpansion.types.js";
+export { expansionSelectors } from "./useTreeViewExpansion.selectors.js";

package/esm/internals/plugins/useTreeViewExpansion/index.js

@@ -1 +1,2 @@
-export { useTreeViewExpansion } from "./useTreeViewExpansion.js";
+export { useTreeViewExpansion } from "./useTreeViewExpansion.js";
+export { expansionSelectors } from "./useTreeViewExpansion.selectors.js";