@mui/x-tree-view 8.0.0-alpha.0 → 8.0.0-alpha.2

package/modern/internals/utils/tree.js

@@ -1,7 +1,9 @@
-const getLastNavigableItemInArray = (instance, items) => {
+import { selectorIsItemExpandable, selectorIsItemExpanded } from "../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorCanItemBeFocused, selectorIsItemDisabled, selectorItemIndex, selectorItemMeta, selectorItemOrderedChildrenIds, selectorItemParentId } from "../plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+  while (itemIndex >= 0 && !selectorCanItemBeFocused(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -9,10 +11,13 @@ const getLastNavigableItemInArray = (instance, items) => {
   }
   return items[itemIndex];
 };
-export const getPreviousNavigableItem = (instance, itemId) => {
-  const itemMeta = instance.getItemMeta(itemId);
-  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-  const itemIndex = instance.getItemIndex(itemId);
+export const getPreviousNavigableItem = (state, itemId) => {
+  const itemMeta = selectorItemMeta(state, itemId);
+  if (!itemMeta) {
+    return null;
+  }
+  const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+  const itemIndex = selectorItemIndex(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -21,7 +26,7 @@ export const getPreviousNavigableItem = (instance, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!selectorCanItemBeFocused(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -31,51 +36,51 @@ export const getPreviousNavigableItem = (instance, itemId) => {
     }
 
     // Otherwise, we can try to go up a level and find the previous navigable item.
-    return getPreviousNavigableItem(instance, itemMeta.parentId);
+    return getPreviousNavigableItem(state, itemMeta.parentId);
   }
 
   // Finds the last navigable ancestor of the previous navigable sibling.
   let currentItemId = siblings[previousNavigableSiblingIndex];
-  let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
-  while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
+  let lastNavigableChild = getLastNavigableItemInArray(state, selectorItemOrderedChildrenIds(state, currentItemId));
+  while (selectorIsItemExpanded(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+    lastNavigableChild = selectorItemOrderedChildrenIds(state, currentItemId).find(childId => selectorCanItemBeFocused(state, childId));
   }
   return currentItemId;
 };
-export const getNextNavigableItem = (instance, itemId) => {
+export const getNextNavigableItem = (state, itemId) => {
   // If the item is expanded and has some navigable children, return the first of them.
-  if (instance.isItemExpanded(itemId)) {
-    const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
+  if (selectorIsItemExpanded(state, itemId)) {
+    const firstNavigableChild = selectorItemOrderedChildrenIds(state, itemId).find(childId => selectorCanItemBeFocused(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = instance.getItemMeta(itemId);
+  let itemMeta = selectorItemMeta(state, itemId);
   while (itemMeta != null) {
     // Try to find the first navigable sibling after the current item.
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const currentItemIndex = instance.getItemIndex(itemMeta.id);
+    const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+    const currentItemIndex = selectorItemIndex(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!selectorCanItemBeFocused(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+      if (selectorCanItemBeFocused(state, siblings[nextItemIndex])) {
         return siblings[nextItemIndex];
       }
     }
 
     // If the sibling does not exist, go up a level to the parent and try again.
-    itemMeta = instance.getItemMeta(itemMeta.parentId);
+    itemMeta = selectorItemMeta(state, itemMeta.parentId);
   }
   return null;
 };
-export const getLastNavigableItem = instance => {
+export const getLastNavigableItem = state => {
   let itemId = null;
-  while (itemId == null || instance.isItemExpanded(itemId)) {
-    const children = instance.getItemOrderedChildrenIds(itemId);
-    const lastNavigableChild = getLastNavigableItemInArray(instance, children);
+  while (itemId == null || selectorIsItemExpanded(state, itemId)) {
+    const children = selectorItemOrderedChildrenIds(state, itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
     if (lastNavigableChild == null) {
@@ -85,7 +90,7 @@ export const getLastNavigableItem = instance => {
   }
   return itemId;
 };
-export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+export const getFirstNavigableItem = state => selectorItemOrderedChildrenIds(state, null).find(itemId => selectorCanItemBeFocused(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -101,12 +106,15 @@ export const getFirstNavigableItem = instance => instance.getItemOrderedChildren
  * Another way to put it is which item is shallower in a trémaux tree
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
-export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+export const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = instance.getItemMeta(itemAId);
-  const itemMetaB = instance.getItemMeta(itemBId);
+  const itemMetaA = selectorItemMeta(state, itemAId);
+  const itemMetaB = selectorItemMeta(state, itemBId);
+  if (!itemMetaA || !itemMetaB) {
+    return [itemAId, itemBId];
+  }
   if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
     return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
   }
@@ -124,7 +132,7 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = instance.getItemMeta(aAncestor).parentId;
+        aAncestor = selectorItemParentId(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -132,53 +140,53 @@ export const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = instance.getItemMeta(bAncestor).parentId;
+        bAncestor = selectorItemParentId(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const ancestorFamily = selectorItemOrderedChildrenIds(state, commonAncestor);
   const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
   const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
   return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
 };
-export const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
+export const getNonDisabledItemsInRange = (state, itemAId, itemBId) => {
   const getNextItem = itemId => {
     // If the item is expanded and has some children, return the first of them.
-    if (instance.isItemExpandable(itemId) && instance.isItemExpanded(itemId)) {
-      return instance.getItemOrderedChildrenIds(itemId)[0];
+    if (selectorIsItemExpandable(state, itemId) && selectorIsItemExpanded(state, itemId)) {
+      return selectorItemOrderedChildrenIds(state, itemId)[0];
     }
-    let itemMeta = instance.getItemMeta(itemId);
+    let itemMeta = selectorItemMeta(state, itemId);
     while (itemMeta != null) {
       // Try to find the first navigable sibling after the current item.
-      const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-      const currentItemIndex = instance.getItemIndex(itemMeta.id);
+      const siblings = selectorItemOrderedChildrenIds(state, itemMeta.parentId);
+      const currentItemIndex = selectorItemIndex(state, itemMeta.id);
       if (currentItemIndex < siblings.length - 1) {
         return siblings[currentItemIndex + 1];
       }
 
       // If the item is the last of its siblings, go up a level to the parent and try again.
-      itemMeta = instance.getItemMeta(itemMeta.parentId);
+      itemMeta = itemMeta.parentId ? selectorItemMeta(state, itemMeta.parentId) : null;
     }
     throw new Error('Invalid range');
   };
-  const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
+  const [first, last] = findOrderInTremauxTree(state, itemAId, itemBId);
   const items = [first];
   let current = first;
   while (current !== last) {
     current = getNextItem(current);
-    if (!instance.isItemDisabled(current)) {
+    if (!selectorIsItemDisabled(state, current)) {
       items.push(current);
     }
   }
   return items;
 };
-export const getAllNavigableItems = instance => {
-  let item = getFirstNavigableItem(instance);
+export const getAllNavigableItems = state => {
+  let item = getFirstNavigableItem(state);
   const navigableItems = [];
   while (item != null) {
     navigableItems.push(item);
-    item = getNextNavigableItem(instance, item);
+    item = getNextNavigableItem(state, item);
   }
   return navigableItems;
 };

package/modern/useTreeItem/useTreeItem.js

@@ -8,13 +8,16 @@ import { useTreeViewContext } from "../internals/TreeViewProvider/index.js";
 import { useTreeItemUtils } from "../hooks/useTreeItemUtils/index.js";
 import { TreeViewItemDepthContext } from "../internals/TreeViewItemDepthContext/index.js";
 import { isTargetInDescendants } from "../internals/utils/tree.js";
+import { useSelector } from "../internals/hooks/useSelector.js";
+import { selectorIsItemTheDefaultFocusableItem } from "../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors.js";
 import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeViewId/useTreeViewId.utils.js";
+import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
+import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -23,11 +26,18 @@ export const useTreeItem = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = useTreeViewContext();
   const depthContext = React.useContext(TreeViewItemDepthContext);
+  const depth = useSelector(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -52,12 +62,13 @@ export const useTreeItem = parameters => {
   const handleRootRef = useForkRef(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = useSelector(store, selectorTreeViewId);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = useSelector(store, selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -69,8 +80,7 @@ export const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && selectorCanItemBeFocused(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -108,7 +118,7 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick?.(event, itemId);
+    onItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
@@ -139,6 +149,10 @@ export const useTreeItem = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = _extends({}, extractEventHandlers(parameters), extractEventHandlers(externalProps));
 
@@ -157,14 +171,14 @@ export const useTreeItem = parameters => {
     const props = _extends({}, externalEventHandlers, {
       ref: handleRootRef,
       role: 'treeitem',
-      tabIndex: rootTabIndex,
+      tabIndex: shouldBeAccessibleWithTab ? 0 : -1,
       id: idAttribute,
       'aria-expanded': status.expandable ? status.expanded : undefined,
       'aria-selected': ariaSelected,
       'aria-disabled': status.disabled || undefined
     }, externalProps, {
       style: _extends({}, externalProps.style ?? {}, {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+        '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
@@ -205,7 +219,7 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
@@ -242,6 +256,7 @@ export const useTreeItem = parameters => {
     return _extends({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,

package/node/RichTreeView/RichTreeView.js

@@ -63,8 +63,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
   }
   const {
     getRootProps,
-    contextValue,
-    instance
+    contextValue
   } = (0, _useTreeView.useTreeView)({
     plugins: _RichTreeView.RICH_TREE_VIEW_PLUGINS,
     rootRef: ref,
@@ -88,8 +87,7 @@ const RichTreeView = exports.RichTreeView = /*#__PURE__*/React.forwardRef(functi
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RichTreeViewItems.RichTreeViewItems, {
         slots: slots,
-        slotProps: slotProps,
-        itemsToRender: instance.getItemsToRender()
+        slotProps: slotProps
       })
     }))
   });

package/node/TreeItem/TreeItem.js

@@ -217,6 +217,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
   const {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getIconContainerProps,
@@ -303,8 +304,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
     ownerState: {},
     className: classes.dragAndDropOverlay
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemProvider.TreeItemProvider, {
-    itemId: itemId,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemProvider.TreeItemProvider, (0, _extends2.default)({}, getContextProviderProps(), {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Content, (0, _extends2.default)({}, contentProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, (0, _extends2.default)({}, iconContainerProps, {
@@ -318,7 +318,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
         as: GroupTransition
       }, groupTransitionProps))]
     }))
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -328,7 +328,7 @@ process.env.NODE_ENV !== "production" ? TreeItem.propTypes = {
   /**
    * The content of the component.
    */
-  children: _propTypes.default.node,
+  children: _propTypes.default /* @typescript-to-proptypes-ignore */.any,
   /**
    * Override or extend the styles applied to the component.
    */

package/node/TreeItemDragAndDropOverlay/TreeItemDragAndDropOverlay.js

@@ -11,14 +11,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _system = require("@mui/system");
+var _createStyled = require("@mui/system/createStyled");
 var _zeroStyled = require("../internals/zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeItemDragAndDropOverlayRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiTreeItemDragAndDropOverlay',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'action'
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'action'
 })(({
   theme
 }) => ({

package/node/TreeItemProvider/TreeItemProvider.js

@@ -1,35 +1,51 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TreeItemProvider = TreeItemProvider;
+var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TreeViewProvider = require("../internals/TreeViewProvider");
-/**
- * @ignore - internal component.
- */
+var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
+var _jsxRuntime = require("react/jsx-runtime");
 function TreeItemProvider(props) {
   const {
     children,
-    itemId
+    itemId,
+    id
   } = props;
   const {
     wrapItem,
-    instance
+    instance,
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
-  return wrapItem({
-    children,
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
+  const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
-    instance
+    treeId,
+    id
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.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"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
+  id: _propTypes.default.string,
   itemId: _propTypes.default.string.isRequired
-};
+} : void 0;

package/node/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useTreeItemModel", {
+  enumerable: true,
+  get: function () {
+    return _useTreeItemModel.useTreeItemModel;
+  }
+});
 Object.defineProperty(exports, "useTreeItemUtils", {
   enumerable: true,
   get: function () {
@@ -16,4 +22,5 @@ Object.defineProperty(exports, "useTreeViewApiRef", {
   }
 });
 var _useTreeViewApiRef = require("./useTreeViewApiRef");
-var _useTreeItemUtils = require("./useTreeItemUtils");
+var _useTreeItemUtils = require("./useTreeItemUtils");
+var _useTreeItemModel = require("./useTreeItemModel");

package/node/hooks/useTreeItemModel.js

@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItemModel = void 0;
+var _TreeViewProvider = require("../internals/TreeViewProvider");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+const useTreeItemModel = itemId => {
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  return (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemModel, itemId);
+};
+exports.useTreeItemModel = useTreeItemModel;

package/node/hooks/useTreeItemUtils/useTreeItemUtils.js

@@ -4,10 +4,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTreeItemUtils = void 0;
+exports.useTreeItemUtils = exports.isItemExpandable = void 0;
 var _TreeViewProvider = require("../../internals/TreeViewProvider");
 var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
 var _plugins = require("../../internals/utils/plugins");
+var _useSelector = require("../../internals/hooks/useSelector");
+var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
+var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
+var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
 /**
  * Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
  */
@@ -22,25 +28,37 @@ const isItemExpandable = reactChildren => {
   }
   return Boolean(reactChildren);
 };
+exports.isItemExpandable = isItemExpandable;
 const useTreeItemUtils = ({
   itemId,
   children
 }) => {
   const {
     instance,
+    label,
+    store,
     selection: {
       multiSelect
     },
     publicAPI
   } = (0, _TreeViewProvider.useTreeViewContext)();
+  const isExpanded = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpanded, itemId);
+  const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
+  const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
+  const isDisabled = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorIsItemDisabled, itemId);
+  const isEditing = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemBeingEdited)(state, itemId));
+  const isEditable = (0, _useSelector.useSelector)(store, state => label == null ? false : (0, _useTreeViewLabel2.selectorIsItemEditable)(state, {
+    itemId,
+    isItemEditable: label.isItemEditable
+  }));
   const status = {
     expandable: isItemExpandable(children),
-    expanded: instance.isItemExpanded(itemId),
-    focused: instance.isItemFocused(itemId),
-    selected: instance.isItemSelected(itemId),
-    disabled: instance.isItemDisabled(itemId),
-    editing: instance?.isItemBeingEdited ? instance?.isItemBeingEdited(itemId) : false,
-    editable: instance.isItemEditable ? instance.isItemEditable(itemId) : false
+    expanded: isExpanded,
+    focused: isFocused,
+    selected: isSelected,
+    disabled: isDisabled,
+    editing: isEditing,
+    editable: isEditable
   };
   const handleExpansion = event => {
     if (status.disabled) {
@@ -52,7 +70,7 @@ const useTreeItemUtils = ({
     const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
 
     // If already expanded and trying to toggle selection don't close
-    if (status.expandable && !(multiple && instance.isItemExpanded(itemId))) {
+    if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
       instance.toggleItemExpansion(event, itemId);
     }
   };
@@ -99,15 +117,15 @@ const useTreeItemUtils = ({
     if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemEditable(itemId)) {
-      if (instance.isItemBeingEdited(itemId)) {
+    if (isEditable) {
+      if (isEditing) {
         instance.setEditedItemId(null);
       } else {
         instance.setEditedItemId(itemId);
       }
     }
   };
-  const handleSaveItemLabel = (event, label) => {
+  const handleSaveItemLabel = (event, newLabel) => {
     if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
       return;
     }
@@ -115,9 +133,8 @@ 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`
-    // using `instance.isItemBeingEditedRef` instead of `instance.isItemBeingEdited` since the state is not yet updated in this point
-    if (instance.isItemBeingEditedRef(itemId)) {
-      instance.updateItemLabel(itemId, label);
+    if ((0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
+      instance.updateItemLabel(itemId, newLabel);
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }
@@ -126,7 +143,7 @@ const useTreeItemUtils = ({
     if (!(0, _plugins.hasPlugin)(instance, _useTreeViewLabel.useTreeViewLabel)) {
       return;
     }
-    if (instance.isItemBeingEditedRef(itemId)) {
+    if ((0, _useTreeViewLabel2.selectorIsItemBeingEdited)(store.value, itemId)) {
       toggleItemEditing();
       instance.focusItem(event, itemId);
     }

package/node/index.js

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