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

package/node/internals/useTreeView/useTreeViewBuildContext.js

@@ -1,16 +1,19 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTreeViewBuildContext = void 0;
+var React = _interopRequireWildcard(require("react"));
 const useTreeViewBuildContext = ({
   plugins,
   instance,
   publicAPI,
+  store,
   rootRef
 }) => {
-  const runItemPlugins = itemPluginProps => {
+  const runItemPlugins = React.useCallback(itemPluginProps => {
     let finalRootRef = null;
     let finalContentRef = null;
     const pluginPropEnhancers = [];
@@ -55,10 +58,11 @@ const useTreeViewBuildContext = ({
       rootRef: finalRootRef,
       propsEnhancers
     };
-  };
-  const wrapItem = ({
+  }, [plugins]);
+  const wrapItem = React.useCallback(({
     itemId,
-    children
+    children,
+    idAttribute
   }) => {
     let finalChildren = children;
     // The wrappers are reversed to ensure that the first wrapper is the outermost one.
@@ -66,15 +70,16 @@ const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapItem) {
         finalChildren = plugin.wrapItem({
+          instance,
           itemId,
           children: finalChildren,
-          instance
+          idAttribute
         });
       }
     }
     return finalChildren;
-  };
-  const wrapRoot = ({
+  }, [plugins, instance]);
+  const wrapRoot = React.useCallback(({
     children
   }) => {
     let finalChildren = children;
@@ -83,20 +88,22 @@ const useTreeViewBuildContext = ({
       const plugin = plugins[i];
       if (plugin.wrapRoot) {
         finalChildren = plugin.wrapRoot({
-          children: finalChildren,
-          instance
+          children: finalChildren
         });
       }
     }
     return finalChildren;
-  };
-  return {
-    runItemPlugins,
-    wrapItem,
-    wrapRoot,
-    instance,
-    rootRef,
-    publicAPI
-  };
+  }, [plugins]);
+  return React.useMemo(() => {
+    return {
+      runItemPlugins,
+      wrapItem,
+      wrapRoot,
+      instance,
+      publicAPI,
+      store,
+      rootRef
+    };
+  }, [runItemPlugins, wrapItem, wrapRoot, instance, publicAPI, store, rootRef]);
 };
 exports.useTreeViewBuildContext = useTreeViewBuildContext;

package/node/internals/utils/TreeViewStore.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeViewStore = void 0;
+class TreeViewStore {
+  constructor(value) {
+    this.value = void 0;
+    this.listeners = void 0;
+    this.subscribe = fn => {
+      this.listeners.add(fn);
+      return () => {
+        this.listeners.delete(fn);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.value;
+    };
+    this.update = updater => {
+      const newState = updater(this.value);
+      if (newState !== this.value) {
+        this.value = newState;
+        this.listeners.forEach(l => l(newState));
+      }
+    };
+    this.value = value;
+    this.listeners = new Set();
+  }
+}
+exports.TreeViewStore = TreeViewStore;

package/node/internals/utils/selectors.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSelector = void 0;
+var _reselect = require("reselect");
+const reselectCreateSelector = (0, _reselect.createSelectorCreator)({
+  memoize: _reselect.lruMemoize,
+  memoizeOptions: {
+    maxSize: 1,
+    equalityCheck: Object.is
+  }
+});
+const cache = new WeakMap();
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+const createSelector = (...createSelectorArgs) => {
+  const selector = (state, selectorArgs) => {
+    const cacheKey = state.cacheKey;
+
+    // If there is no cache for the current tree view instance, create one.
+    let cacheForCurrentTreeViewInstance = cache.get(cacheKey);
+    if (!cacheForCurrentTreeViewInstance) {
+      cacheForCurrentTreeViewInstance = new Map();
+      cache.set(cacheKey, cacheForCurrentTreeViewInstance);
+    }
+
+    // If there is a cached selector, execute it.
+    const cachedSelector = cacheForCurrentTreeViewInstance.get(createSelectorArgs);
+    if (cachedSelector) {
+      return cachedSelector(state, selectorArgs);
+    }
+
+    // Otherwise, create a new selector and cache it and execute it.
+    const fn = reselectCreateSelector(...createSelectorArgs);
+    cacheForCurrentTreeViewInstance.set(createSelectorArgs, fn);
+    return fn(state, selectorArgs);
+  };
+  return selector;
+};
+exports.createSelector = createSelector;

package/node/internals/utils/tree.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isTargetInDescendants = exports.getPreviousNavigableItem = exports.getNonDisabledItemsInRange = exports.getNextNavigableItem = exports.getLastNavigableItem = exports.getFirstNavigableItem = exports.getAllNavigableItems = exports.findOrderInTremauxTree = void 0;
-const getLastNavigableItemInArray = (instance, items) => {
+var _useTreeViewExpansion = require("../plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
+const getLastNavigableItemInArray = (state, items) => {
   // Equivalent to Array.prototype.findLastIndex
   let itemIndex = items.length - 1;
-  while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
+  while (itemIndex >= 0 && !(0, _useTreeViewItems.selectorCanItemBeFocused)(state, items[itemIndex])) {
     itemIndex -= 1;
   }
   if (itemIndex === -1) {
@@ -15,10 +17,13 @@ const getLastNavigableItemInArray = (instance, items) => {
   }
   return items[itemIndex];
 };
-const getPreviousNavigableItem = (instance, itemId) => {
-  const itemMeta = instance.getItemMeta(itemId);
-  const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-  const itemIndex = instance.getItemIndex(itemId);
+const getPreviousNavigableItem = (state, itemId) => {
+  const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(state, itemId);
+  if (!itemMeta) {
+    return null;
+  }
+  const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+  const itemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemId);
 
   // TODO: What should we do if the parent is not navigable?
   if (itemIndex === 0) {
@@ -27,7 +32,7 @@ const getPreviousNavigableItem = (instance, itemId) => {
 
   // Finds the previous navigable sibling.
   let previousNavigableSiblingIndex = itemIndex - 1;
-  while (!instance.isItemNavigable(siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
+  while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[previousNavigableSiblingIndex]) && previousNavigableSiblingIndex >= 0) {
     previousNavigableSiblingIndex -= 1;
   }
   if (previousNavigableSiblingIndex === -1) {
@@ -37,53 +42,53 @@ 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, (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId));
+  while ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, currentItemId) && lastNavigableChild != null) {
     currentItemId = lastNavigableChild;
-    lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
+    lastNavigableChild = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, currentItemId).find(childId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, childId));
   }
   return currentItemId;
 };
 exports.getPreviousNavigableItem = getPreviousNavigableItem;
-const getNextNavigableItem = (instance, itemId) => {
+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 ((0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+    const firstNavigableChild = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId).find(childId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, childId));
     if (firstNavigableChild != null) {
       return firstNavigableChild;
     }
   }
-  let itemMeta = instance.getItemMeta(itemId);
+  let itemMeta = (0, _useTreeViewItems.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 = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+    const currentItemIndex = (0, _useTreeViewItems.selectorItemIndex)(state, itemMeta.id);
     if (currentItemIndex < siblings.length - 1) {
       let nextItemIndex = currentItemIndex + 1;
-      while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
+      while (!(0, _useTreeViewItems.selectorCanItemBeFocused)(state, siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
         nextItemIndex += 1;
       }
-      if (instance.isItemNavigable(siblings[nextItemIndex])) {
+      if ((0, _useTreeViewItems.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 = (0, _useTreeViewItems.selectorItemMeta)(state, itemMeta.parentId);
   }
   return null;
 };
 exports.getNextNavigableItem = getNextNavigableItem;
-const getLastNavigableItem = instance => {
+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 || (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+    const children = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId);
+    const lastNavigableChild = getLastNavigableItemInArray(state, children);
 
     // The item has no navigable children.
     if (lastNavigableChild == null) {
@@ -94,7 +99,7 @@ const getLastNavigableItem = instance => {
   return itemId;
 };
 exports.getLastNavigableItem = getLastNavigableItem;
-const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
+const getFirstNavigableItem = state => (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, null).find(itemId => (0, _useTreeViewItems.selectorCanItemBeFocused)(state, itemId));
 
 /**
  * This is used to determine the start and end of a selection range so
@@ -111,12 +116,15 @@ const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(nul
  * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
  */
 exports.getFirstNavigableItem = getFirstNavigableItem;
-const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
+const findOrderInTremauxTree = (state, itemAId, itemBId) => {
   if (itemAId === itemBId) {
     return [itemAId, itemBId];
   }
-  const itemMetaA = instance.getItemMeta(itemAId);
-  const itemMetaB = instance.getItemMeta(itemBId);
+  const itemMetaA = (0, _useTreeViewItems.selectorItemMeta)(state, itemAId);
+  const itemMetaB = (0, _useTreeViewItems.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];
   }
@@ -134,7 +142,7 @@ const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
       continueA = aAncestor !== null;
       if (!aAncestorIsCommon && continueA) {
-        aAncestor = instance.getItemMeta(aAncestor).parentId;
+        aAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, aAncestor);
       }
     }
     if (continueB && !aAncestorIsCommon) {
@@ -142,55 +150,55 @@ const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
       bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
       continueB = bAncestor !== null;
       if (!bAncestorIsCommon && continueB) {
-        bAncestor = instance.getItemMeta(bAncestor).parentId;
+        bAncestor = (0, _useTreeViewItems.selectorItemParentId)(state, bAncestor);
       }
     }
   }
   const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
-  const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
+  const ancestorFamily = (0, _useTreeViewItems.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];
 };
 exports.findOrderInTremauxTree = findOrderInTremauxTree;
-const getNonDisabledItemsInRange = (instance, itemAId, itemBId) => {
+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 ((0, _useTreeViewExpansion.selectorIsItemExpandable)(state, itemId) && (0, _useTreeViewExpansion.selectorIsItemExpanded)(state, itemId)) {
+      return (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemId)[0];
     }
-    let itemMeta = instance.getItemMeta(itemId);
+    let itemMeta = (0, _useTreeViewItems.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 = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(state, itemMeta.parentId);
+      const currentItemIndex = (0, _useTreeViewItems.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 ? (0, _useTreeViewItems.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 (!(0, _useTreeViewItems.selectorIsItemDisabled)(state, current)) {
       items.push(current);
     }
   }
   return items;
 };
 exports.getNonDisabledItemsInRange = getNonDisabledItemsInRange;
-const getAllNavigableItems = instance => {
-  let item = getFirstNavigableItem(instance);
+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/node/useTreeItem/useTreeItem.js

@@ -15,13 +15,16 @@ var _TreeViewProvider = require("../internals/TreeViewProvider");
 var _useTreeItemUtils = require("../hooks/useTreeItemUtils");
 var _TreeViewItemDepthContext = require("../internals/TreeViewItemDepthContext");
 var _tree = require("../internals/utils/tree");
+var _useSelector = require("../internals/hooks/useSelector");
+var _useTreeViewFocus = require("../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
 var _useTreeViewId = require("../internals/corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems = require("../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _useTreeViewId2 = require("../internals/corePlugins/useTreeViewId/useTreeViewId.selectors");
 const useTreeItem = parameters => {
   const {
     runItemPlugins,
     items: {
-      onItemClick,
-      disabledItemsFocusable
+      onItemClick
     },
     selection: {
       disableSelection,
@@ -30,11 +33,18 @@ const useTreeItem = parameters => {
     expansion: {
       expansionTrigger
     },
-    treeId,
+    label: labelContext,
     instance,
-    publicAPI
+    publicAPI,
+    store
   } = (0, _TreeViewProvider.useTreeViewContext)();
   const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
+  const depth = (0, _useSelector.useSelector)(store, (...params) => {
+    if (typeof depthContext === 'function') {
+      return depthContext(...params);
+    }
+    return depthContext;
+  }, parameters.itemId);
   const {
     id,
     itemId,
@@ -59,12 +69,13 @@ const useTreeItem = parameters => {
   const handleRootRef = (0, _useForkRef.default)(rootRef, pluginRootRef, rootRefObject);
   const handleContentRef = (0, _useForkRef.default)(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
   const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
     itemId,
     treeId,
     id
   });
-  const rootTabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
+  const shouldBeAccessibleWithTab = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemTheDefaultFocusableItem, itemId);
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
@@ -76,8 +87,7 @@ const useTreeItem = parameters => {
     if (event.defaultMuiPrevented) {
       return;
     }
-    const canBeFocused = !status.disabled || disabledItemsFocusable;
-    if (!status.focused && canBeFocused && event.currentTarget === event.target) {
+    if (!status.focused && (0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId) && event.currentTarget === event.target) {
       instance.focusItem(event, itemId);
     }
   };
@@ -115,7 +125,7 @@ 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;
     }
@@ -146,6 +156,10 @@ const useTreeItem = parameters => {
       interactions.handleExpansion(event);
     }
   };
+  const getContextProviderProps = () => ({
+    itemId,
+    id
+  });
   const getRootProps = (externalProps = {}) => {
     const externalEventHandlers = (0, _extends2.default)({}, (0, _extractEventHandlers.default)(parameters), (0, _extractEventHandlers.default)(externalProps));
 
@@ -164,14 +178,14 @@ const useTreeItem = parameters => {
     const props = (0, _extends2.default)({}, 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: (0, _extends2.default)({}, externalProps.style ?? {}, {
-        '--TreeView-itemDepth': typeof depthContext === 'function' ? depthContext(itemId) : depthContext
+        '--TreeView-itemDepth': depth
       }),
       onFocus: createRootHandleFocus(externalEventHandlers),
       onBlur: createRootHandleBlur(externalEventHandlers),
@@ -212,7 +226,7 @@ const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (instance.isTreeViewEditable) {
+    if (labelContext?.isItemEditable) {
       props.editable = status.editable;
     }
     return props;
@@ -249,6 +263,7 @@ const useTreeItem = parameters => {
     return (0, _extends2.default)({}, externalProps, enhancedDragAndDropOverlayProps);
   };
   return {
+    getContextProviderProps,
     getRootProps,
     getContentProps,
     getGroupTransitionProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-tree-view",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.1",
   "description": "The community edition of the Tree View components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -39,15 +39,17 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "react-transition-group": "^4.4.5",
-    "@mui/x-internals": "8.0.0-alpha.0"
+    "reselect": "^5.1.1",
+    "use-sync-external-store": "^1.2.2",
+    "@mui/x-internals": "8.0.0-alpha.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.15.14 || ^6.0.0",
     "@mui/system": "^5.15.14 || ^6.0.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@emotion/react": {

package/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/useTreeItem/useTreeItem.types.d.ts

@@ -32,6 +32,10 @@ export interface UseTreeItemParameters {
      */
     children?: React.ReactNode;
 }
+export interface UseTreeItemContextProviderProps {
+    itemId: string;
+    id: string | undefined;
+}
 export interface UseTreeItemRootSlotPropsFromUseTreeItem {
     role: 'treeitem';
     tabIndex: 0 | -1;
@@ -98,6 +102,11 @@ export interface UseTreeItemStatus {
     editable: boolean;
 }
 export interface UseTreeItemReturnValue<TSignatures extends UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins> {
+    /**
+     * Resolver for the context provider's props.
+     * @returns {UseTreeItemContextProviderProps} Props that should be spread on the context provider slot.
+     */
+    getContextProviderProps: () => UseTreeItemContextProviderProps;
     /**
      * Resolver for the root slot's props.
      * @param {ExternalProps} externalProps Additional props for the root slot.