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

package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useTreeViewContext = require("./useTreeViewContext");
 var _utils = require("../utils/utils");
-var _useTreeViewId = require("../corePlugins/useTreeViewId/useTreeViewId.utils");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
@@ -20,11 +20,12 @@ if (process.env.NODE_ENV !== 'production') {
 function TreeViewChildrenItemProvider(props) {
   const {
     children,
-    itemId = null
+    itemId = null,
+    idAttribute
   } = props;
   const {
     instance,
-    treeId,
+    store,
     rootRef
   } = (0, _useTreeViewContext.useTreeViewContext)();
   const childrenIdAttrToIdRef = React.useRef(new Map());
@@ -32,25 +33,8 @@ function TreeViewChildrenItemProvider(props) {
     if (!rootRef.current) {
       return;
     }
-    let idAttr = null;
-    if (itemId == null) {
-      idAttr = rootRef.current.id;
-    } else {
-      // Undefined during 1st render
-      const itemMeta = instance.getItemMeta(itemId);
-      if (itemMeta !== undefined) {
-        idAttr = (0, _useTreeViewId.generateTreeItemIdAttribute)({
-          itemId,
-          treeId,
-          id: itemMeta.idAttribute
-        });
-      }
-    }
-    if (idAttr == null) {
-      return;
-    }
-    const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
-    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttr);
+    const previousChildrenIds = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemId ?? null) ?? [];
+    const escapedIdAttr = (0, _utils.escapeOperandAttributeSelector)(idAttribute ?? rootRef.current.id);
     const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${escapedIdAttr}"] `}[role="treeitem"]:not(*[id="${escapedIdAttr}"] [role="treeitem"] [role="treeitem"])`);
     const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
     const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);

package/node/internals/TreeViewProvider/TreeViewProvider.js

@@ -21,8 +21,7 @@ function TreeViewProvider(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
     value: value,
     children: value.wrapRoot({
-      children,
-      instance: value.instance
+      children
     })
   });
 }

package/node/internals/components/RichTreeViewItems.js

@@ -10,55 +10,67 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _TreeItem = require("../../TreeItem");
+var _useSelector = require("../hooks/useSelector");
+var _useTreeViewItems = require("../plugins/useTreeViewItems/useTreeViewItems.selectors");
+var _TreeViewProvider = require("../TreeViewProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
-function WrappedTreeItem({
-  slots,
-  slotProps,
-  label,
-  id,
-  itemId,
-  itemsToRender
+const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  RichTreeViewItemsContext.displayName = 'RichTreeViewItemsProvider';
+}
+const WrappedTreeItem = /*#__PURE__*/React.memo(function WrappedTreeItem({
+  itemSlot,
+  itemSlotProps,
+  itemId
 }) {
-  const Item = slots?.item ?? _TreeItem.TreeItem;
+  const renderItemForRichTreeView = React.useContext(RichTreeViewItemsContext);
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const itemMeta = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemMeta, itemId);
+  const children = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemOrderedChildrenIds, itemId);
+  const Item = itemSlot ?? _TreeItem.TreeItem;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Item,
-      externalSlotProps: slotProps?.item,
+      externalSlotProps: itemSlotProps,
       additionalProps: {
-        itemId,
-        id,
-        label
+        label: itemMeta?.label,
+        id: itemMeta?.idAttribute,
+        itemId
       },
       ownerState: {
         itemId,
-        label
+        label: itemMeta?.label
       }
     }),
     itemProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
-  const children = React.useMemo(() => itemsToRender ? /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItems, {
-    itemsToRender: itemsToRender,
-    slots: slots,
-    slotProps: slotProps
-  }) : null, [itemsToRender, slots, slotProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Item, (0, _extends2.default)({}, itemProps, {
-    children: children
+    children: children?.map(renderItemForRichTreeView)
   }));
-}
+}, _fastObjectShallowCompare.fastObjectShallowCompare);
 function RichTreeViewItems(props) {
   const {
-    itemsToRender,
     slots,
     slotProps
   } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: itemsToRender.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
-      slots: slots,
-      slotProps: slotProps,
-      label: item.label,
-      id: item.id,
-      itemId: item.itemId,
-      itemsToRender: item.children
-    }, item.itemId))
+  const {
+    store
+  } = (0, _TreeViewProvider.useTreeViewContext)();
+  const itemSlot = slots?.item;
+  const itemSlotProps = slotProps?.item;
+  const items = (0, _useSelector.useSelector)(store, _useTreeViewItems.selectorItemOrderedChildrenIds, null);
+  const renderItem = React.useCallback(itemId => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedTreeItem, {
+      itemSlot: itemSlot,
+      itemSlotProps: itemSlotProps,
+      itemId: itemId
+    }, itemId);
+  }, [itemSlot, itemSlotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemsContext.Provider, {
+    value: renderItem,
+    children: items.map(renderItem)
   });
 }

package/node/internals/corePlugins/useTreeViewId/useTreeViewId.js

@@ -8,32 +8,30 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTreeViewId = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useTreeViewId = require("./useTreeViewId.utils");
+var _useSelector = require("../../hooks/useSelector");
+var _useTreeViewId = require("./useTreeViewId.selectors");
+var _useTreeViewId2 = require("./useTreeViewId.utils");
 const useTreeViewId = ({
   params,
-  state,
-  setState
+  store
 }) => {
   React.useEffect(() => {
-    setState(prevState => {
-      if (prevState.id.treeId === params.id && prevState.id.treeId !== undefined) {
+    store.update(prevState => {
+      if (params.id === prevState.id.providedTreeId && prevState.id.treeId !== undefined) {
         return prevState;
       }
       return (0, _extends2.default)({}, prevState, {
         id: (0, _extends2.default)({}, prevState.id, {
-          treeId: params.id ?? (0, _useTreeViewId.createTreeViewDefaultId)()
+          treeId: params.id ?? (0, _useTreeViewId2.createTreeViewDefaultId)()
         })
       });
     });
-  }, [setState, params.id]);
-  const treeId = params.id ?? state.id.treeId;
+  }, [store, params.id]);
+  const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId.selectorTreeViewId);
   return {
     getRootProps: () => ({
       id: treeId
-    }),
-    contextValue: {
-      treeId
-    }
+    })
   };
 };
 exports.useTreeViewId = useTreeViewId;
@@ -44,6 +42,7 @@ useTreeViewId.getInitialState = ({
   id
 }) => ({
   id: {
-    treeId: id ?? undefined
+    treeId: undefined,
+    providedTreeId: id
   }
 });

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorTreeViewId = void 0;
+var _selectors = require("../../utils/selectors");
+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.
+ */
+const selectorTreeViewId = exports.selectorTreeViewId = (0, _selectors.createSelector)(selectorTreeViewIdState, idState => idState.treeId);

package/node/internals/hooks/useSelector.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelector = void 0;
+var _withSelector = require("use-sync-external-store/with-selector");
+const defaultCompare = Object.is;
+const useSelector = (store, selector, args = undefined, equals = defaultCompare) => {
+  const selectorWithArgs = state => selector(state, args);
+  return (0, _withSelector.useSyncExternalStoreWithSelector)(store.subscribe, store.getSnapshot, store.getSnapshot, selectorWithArgs, equals);
+};
+exports.useSelector = useSelector;

package/node/internals/index.js

@@ -21,24 +21,66 @@ Object.defineProperty(exports, "TreeViewProvider", {
     return _TreeViewProvider.TreeViewProvider;
   }
 });
+Object.defineProperty(exports, "TreeViewStore", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewStore.TreeViewStore;
+  }
+});
 Object.defineProperty(exports, "buildSiblingIndexes", {
   enumerable: true,
   get: function () {
     return _useTreeViewItems.buildSiblingIndexes;
   }
 });
+Object.defineProperty(exports, "createSelector", {
+  enumerable: true,
+  get: function () {
+    return _selectors.createSelector;
+  }
+});
 Object.defineProperty(exports, "isTargetInDescendants", {
   enumerable: true,
   get: function () {
     return _tree.isTargetInDescendants;
   }
 });
+Object.defineProperty(exports, "selectorItemIndex", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemIndex;
+  }
+});
+Object.defineProperty(exports, "selectorItemMeta", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemMeta;
+  }
+});
+Object.defineProperty(exports, "selectorItemMetaLookup", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemMetaLookup;
+  }
+});
+Object.defineProperty(exports, "selectorItemOrderedChildrenIds", {
+  enumerable: true,
+  get: function () {
+    return _useTreeViewItems2.selectorItemOrderedChildrenIds;
+  }
+});
 Object.defineProperty(exports, "unstable_resetCleanupTracking", {
   enumerable: true,
   get: function () {
     return _useInstanceEventHandler.unstable_resetCleanupTracking;
   }
 });
+Object.defineProperty(exports, "useSelector", {
+  enumerable: true,
+  get: function () {
+    return _useSelector.useSelector;
+  }
+});
 Object.defineProperty(exports, "useTreeView", {
   enumerable: true,
   get: function () {
@@ -103,12 +145,16 @@ var _useTreeView = require("./useTreeView");
 var _TreeViewProvider = require("./TreeViewProvider");
 var _RichTreeViewItems = require("./components/RichTreeViewItems");
 var _useInstanceEventHandler = require("./hooks/useInstanceEventHandler");
+var _useSelector = require("./hooks/useSelector");
 var _useTreeViewExpansion = require("./plugins/useTreeViewExpansion");
 var _useTreeViewSelection = require("./plugins/useTreeViewSelection");
 var _useTreeViewFocus = require("./plugins/useTreeViewFocus");
 var _useTreeViewKeyboardNavigation = require("./plugins/useTreeViewKeyboardNavigation");
 var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
 var _useTreeViewItems = require("./plugins/useTreeViewItems");
+var _useTreeViewItems2 = require("./plugins/useTreeViewItems/useTreeViewItems.selectors");
 var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
 var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
-var _tree = require("./utils/tree");
+var _selectors = require("./utils/selectors");
+var _tree = require("./utils/tree");
+var _TreeViewStore = require("./utils/TreeViewStore");

package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

@@ -9,30 +9,35 @@ exports.useTreeViewExpansion = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
+var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const useTreeViewExpansion = ({
   instance,
+  store,
   params,
-  models
+  models,
+  experimentalFeatures
 }) => {
-  const expandedItemsMap = React.useMemo(() => {
-    const temp = new Map();
-    models.expandedItems.value.forEach(id => {
-      temp.set(id, true);
-    });
-    return temp;
-  }, [models.expandedItems.value]);
+  const isTreeViewEditable = Boolean(params.isItemEditable) && !!experimentalFeatures.labelEditing;
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => (0, _extends2.default)({}, prevState, {
+      expansion: {
+        expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(models.expandedItems.value)
+      }
+    }));
+  }, [store, models.expandedItems.value]);
   const setExpandedItems = (event, value) => {
     params.onExpandedItemsChange?.(event, value);
     models.expandedItems.setControlledValue(value);
   };
-  const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
-  const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
   const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
     instance.setItemExpansion(event, itemId, !isExpandedBefore);
   });
   const setItemExpansion = (0, _useEventCallback.default)((event, itemId, isExpanded) => {
-    const isExpandedBefore = instance.isItemExpanded(itemId);
+    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
     if (isExpandedBefore === isExpanded) {
       return;
     }
@@ -48,9 +53,12 @@ const useTreeViewExpansion = ({
     setExpandedItems(event, newExpanded);
   });
   const expandAllSiblings = (event, itemId) => {
-    const itemMeta = instance.getItemMeta(itemId);
-    const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
-    const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemMeta.parentId);
+    const diff = siblings.filter(child => (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, child) && !(0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, child));
     const newExpanded = models.expandedItems.value.concat(diff);
     if (diff.length > 0) {
       if (params.onItemExpansionToggle) {
@@ -65,27 +73,26 @@ const useTreeViewExpansion = ({
     if (params.expansionTrigger) {
       return params.expansionTrigger;
     }
-    if (instance.isTreeViewEditable) {
+    if (isTreeViewEditable) {
       return 'iconContainer';
     }
     return 'content';
-  }, [params.expansionTrigger, instance.isTreeViewEditable]);
+  }, [params.expansionTrigger, isTreeViewEditable]);
+  const pluginContextValue = React.useMemo(() => ({
+    expansion: {
+      expansionTrigger
+    }
+  }), [expansionTrigger]);
   return {
     publicAPI: {
       setItemExpansion
     },
     instance: {
-      isItemExpanded,
-      isItemExpandable,
       setItemExpansion,
       toggleItemExpansion,
       expandAllSiblings
     },
-    contextValue: {
-      expansion: {
-        expansionTrigger
-      }
-    }
+    contextValue: pluginContextValue
   };
 };
 exports.useTreeViewExpansion = useTreeViewExpansion;
@@ -100,6 +107,11 @@ useTreeViewExpansion.getDefaultizedParams = ({
 }) => (0, _extends2.default)({}, params, {
   defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
 });
+useTreeViewExpansion.getInitialState = params => ({
+  expansion: {
+    expandedItemsMap: (0, _useTreeViewExpansion2.createExpandedItemsMap)(params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems)
+  }
+});
 useTreeViewExpansion.params = {
   expandedItems: true,
   defaultExpandedItems: true,

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorIsItemExpanded = exports.selectorIsItemExpandable = void 0;
+var _selectors = require("../../utils/selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
+const selectorExpansion = state => state.expansion;
+
+/**
+ * Check if an item is expanded.
+ * @param {TreeViewState<[UseTreeViewExpansionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+ */
+const selectorIsItemExpanded = exports.selectorIsItemExpanded = (0, _selectors.createSelector)([selectorExpansion, (_, itemId) => itemId], (expansionState, itemId) => expansionState.expandedItemsMap.has(itemId));
+
+/**
+ * Check if an item is expandable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is expandable, `false` otherwise.
+ */
+const selectorIsItemExpandable = exports.selectorIsItemExpandable = (0, _selectors.createSelector)([_useTreeViewItems.selectorItemMeta], itemMeta => itemMeta?.expandable ?? false);

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createExpandedItemsMap = void 0;
+const createExpandedItemsMap = expandedItems => {
+  const expandedItemsMap = new Map();
+  expandedItems.forEach(id => {
+    expandedItemsMap.set(id, true);
+  });
+  return expandedItemsMap;
+};
+exports.createExpandedItemsMap = createExpandedItemsMap;

package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js

@@ -9,46 +9,56 @@ exports.useTreeViewFocus = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
-var _utils = require("../../utils/utils");
 var _tree = require("../../utils/tree");
 var _useTreeViewSelection = require("../useTreeViewSelection/useTreeViewSelection.utils");
-const useDefaultFocusableItemId = (instance, selectedItems) => {
-  let tabbableItemId = (0, _useTreeViewSelection.convertSelectedItemsToArray)(selectedItems).find(itemId => {
-    if (!instance.isItemNavigable(itemId)) {
-      return false;
-    }
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
-  });
-  if (tabbableItemId == null) {
-    tabbableItemId = (0, _tree.getFirstNavigableItem)(instance);
-  }
-  return tabbableItemId;
-};
+var _useTreeViewFocus = require("./useTreeViewFocus.selectors");
+var _useTreeViewExpansion = require("../useTreeViewExpansion/useTreeViewExpansion.selectors");
+var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
 const useTreeViewFocus = ({
   instance,
   params,
-  state,
-  setState,
-  models,
-  rootRef
+  store,
+  models
 }) => {
-  const defaultFocusableItemId = useDefaultFocusableItemId(instance, models.selectedItems.value);
-  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
-    const cleanItemId = typeof itemId === 'function' ? itemId(state.focusedItemId) : itemId;
-    if (state.focusedItemId !== cleanItemId) {
-      setState(prevState => (0, _extends2.default)({}, prevState, {
-        focusedItemId: cleanItemId
-      }));
+  React.useEffect(() => {
+    let defaultFocusableItemId = (0, _useTreeViewSelection.convertSelectedItemsToArray)(models.selectedItems.value).find(itemId => {
+      if (!(0, _useTreeViewItems.selectorCanItemBeFocused)(store.value, itemId)) {
+        return false;
+      }
+      const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+      return itemMeta && (itemMeta.parentId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemMeta.parentId));
+    });
+    if (defaultFocusableItemId == null) {
+      defaultFocusableItemId = (0, _tree.getFirstNavigableItem)(store.value) ?? null;
     }
+    store.update(prevState => {
+      if (defaultFocusableItemId === prevState.focus.defaultFocusableItemId) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        focus: (0, _extends2.default)({}, prevState.focus, {
+          defaultFocusableItemId
+        })
+      });
+    });
+  }, [store, models.selectedItems.value]);
+  const setFocusedItemId = (0, _useEventCallback.default)(itemId => {
+    store.update(prevState => {
+      const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(prevState);
+      if (focusedItemId === itemId) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        focus: (0, _extends2.default)({}, prevState.focus, {
+          focusedItemId: itemId
+        })
+      });
+    });
   });
-  const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains((0, _utils.getActiveElement)((0, _ownerDocument.default)(rootRef.current))), [rootRef]);
-  const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
   const isItemVisible = itemId => {
-    const itemMeta = instance.getItemMeta(itemId);
-    return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
+    return itemMeta && (itemMeta.parentId == null || (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemMeta.parentId));
   };
   const innerFocusItem = (event, itemId) => {
     const itemElement = instance.getItemDOMElement(itemId);
@@ -67,23 +77,25 @@ const useTreeViewFocus = ({
     }
   });
   const removeFocusedItem = (0, _useEventCallback.default)(() => {
-    if (state.focusedItemId == null) {
+    const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(store.value);
+    if (focusedItemId == null) {
       return;
     }
-    const itemMeta = instance.getItemMeta(state.focusedItemId);
+    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, focusedItemId);
     if (itemMeta) {
-      const itemElement = instance.getItemDOMElement(state.focusedItemId);
+      const itemElement = instance.getItemDOMElement(focusedItemId);
       if (itemElement) {
         itemElement.blur();
       }
     }
     setFocusedItemId(null);
   });
-  const canItemBeTabbed = itemId => itemId === defaultFocusableItemId;
   (0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
     id
   }) => {
-    if (state.focusedItemId === id) {
+    const focusedItemId = (0, _useTreeViewFocus.selectorFocusedItemId)(store.value);
+    const defaultFocusableItemId = (0, _useTreeViewFocus.selectorDefaultFocusableItemId)(store.value);
+    if (focusedItemId === id && defaultFocusableItemId != null) {
       innerFocusItem(null, defaultFocusableItemId);
     }
   });
@@ -94,20 +106,27 @@ const useTreeViewFocus = ({
     }
 
     // if the event bubbled (which is React specific) we don't want to steal focus
-    if (event.target === event.currentTarget) {
+    const defaultFocusableItemId = (0, _useTreeViewFocus.selectorDefaultFocusableItemId)(store.value);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
       innerFocusItem(event, defaultFocusableItemId);
     }
   };
+  const createRootHandleBlur = otherHandlers => event => {
+    otherHandlers.onBlur?.(event);
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    setFocusedItemId(null);
+  };
   return {
     getRootProps: otherHandlers => ({
-      onFocus: createRootHandleFocus(otherHandlers)
+      onFocus: createRootHandleFocus(otherHandlers),
+      onBlur: createRootHandleBlur(otherHandlers)
     }),
     publicAPI: {
       focusItem
     },
     instance: {
-      isItemFocused,
-      canItemBeTabbed,
       focusItem,
       removeFocusedItem
     }
@@ -115,7 +134,10 @@ const useTreeViewFocus = ({
 };
 exports.useTreeViewFocus = useTreeViewFocus;
 useTreeViewFocus.getInitialState = () => ({
-  focusedItemId: null
+  focus: {
+    focusedItemId: null,
+    defaultFocusableItemId: null
+  }
 });
 useTreeViewFocus.params = {
   onItemFocus: true