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

package/{esm/internals/TreeViewProvider/TreeViewProvider.js → internals/TreeViewProvider/TreeViewProvider.mjs}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { TreeViewContext } from "./TreeViewContext.js";
-import { TreeViewStyleContext } from "./TreeViewStyleContext.js";
-import { useTreeViewBuildContext } from "./useTreeViewBuildContext.js";
+import { TreeViewContext } from "./TreeViewContext.mjs";
+import { TreeViewStyleContext } from "./TreeViewStyleContext.mjs";
+import { useTreeViewBuildContext } from "./useTreeViewBuildContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Sets up the contexts for the underlying Tree Item components.

package/{esm/internals/TreeViewProvider/TreeViewProvider.types.d.ts → internals/TreeViewProvider/TreeViewProvider.types.d.mts}

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { TreeItemWrapper, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewAnyStore } from "../models/index.js";
-import type { TreeItemProps } from "../../TreeItem/TreeItem.types.js";
-import { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.js";
-import { UseTreeViewBuildContextParameters } from "./useTreeViewBuildContext.js";
+import { TreeItemWrapper, TreeViewItemPluginResponse, TreeViewPublicAPI, TreeViewAnyStore } from "../models/index.mjs";
+import type { TreeItemProps } from "../../TreeItem/TreeItem.types.mjs";
+import { TreeViewClasses, TreeViewSlotProps, TreeViewSlots } from "./TreeViewStyleContext.mjs";
+import { UseTreeViewBuildContextParameters } from "./useTreeViewBuildContext.mjs";
 export type TreeViewItemPluginsRunner = (props: TreeItemProps) => Required<TreeViewItemPluginResponse>;
 export type TreeViewStoreInContext<TStore extends TreeViewAnyStore> = Omit<TStore, 'setState' | 'update' | 'set' | 'updateStateFromParameters' | 'disposeEffect' | 'registerStoreEffect' | 'itemPluginManager' | 'parameters'>;
 export interface TreeViewContextValue<TStore extends TreeViewAnyStore> {

package/{esm/internals/TreeViewProvider/index.d.ts → internals/TreeViewProvider/index.d.mts}

@@ -1,4 +1,4 @@
-export { TreeViewProvider } from "./TreeViewProvider.js";
-export { useTreeViewContext } from "./TreeViewContext.js";
-export { useTreeViewStyleContext } from "./TreeViewStyleContext.js";
-export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.js";
+export { TreeViewProvider } from "./TreeViewProvider.mjs";
+export { useTreeViewContext } from "./TreeViewContext.mjs";
+export { useTreeViewStyleContext } from "./TreeViewStyleContext.mjs";
+export type { TreeViewProviderProps, TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.mjs";

package/internals/TreeViewProvider/index.mjs

@@ -0,0 +1,3 @@
+export { TreeViewProvider } from "./TreeViewProvider.mjs";
+export { useTreeViewContext } from "./TreeViewContext.mjs";
+export { useTreeViewStyleContext } from "./TreeViewStyleContext.mjs";

package/{esm/internals/TreeViewProvider/useTreeViewBuildContext.d.ts → internals/TreeViewProvider/useTreeViewBuildContext.d.mts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.js";
-import { TreeViewAnyStore, TreeViewPublicAPI, TreeItemWrapper } from "../models/index.js";
+import { TreeViewContextValue, TreeViewItemPluginsRunner, TreeViewStoreInContext } from "./TreeViewProvider.types.mjs";
+import { TreeViewAnyStore, TreeViewPublicAPI, TreeItemWrapper } from "../models/index.mjs";
 export declare const useTreeViewBuildContext: <TStore extends TreeViewAnyStore>(parameters: UseTreeViewBuildContextParameters<TStore>) => TreeViewContextValue<TStore>;
 export interface UseTreeViewBuildContextParameters<TStore extends TreeViewAnyStore> {
   store: TStore;

package/{esm/internals/components/RichTreeViewItems.d.ts → internals/components/RichTreeViewItems.d.mts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils/types';
-import { TreeItem, TreeItemProps } from "../../TreeItem/index.js";
-import { TreeViewItemId } from "../../models/index.js";
+import { TreeItem, TreeItemProps } from "../../TreeItem/index.mjs";
+import { TreeViewItemId } from "../../models/index.mjs";
 export declare const RichTreeViewItem: React.NamedExoticComponent<RichTreeViewItemProps>;
 export declare function RichTreeViewItems<TProps extends object>(props: RichTreeViewItemsProps<TProps>): import("react/jsx-runtime").JSX.Element;
 interface RichTreeViewItemsOwnerState {

package/{esm/internals/components/RichTreeViewItems.js → internals/components/RichTreeViewItems.mjs}

@@ -8,11 +8,11 @@ import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 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 { itemsSelectors } from "../plugins/items/index.js";
-import { useTreeViewContext, useTreeViewStyleContext } from "../TreeViewProvider/index.js";
-import { expansionSelectors } from "../plugins/expansion/index.js";
-import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.js";
+import { TreeItem } from "../../TreeItem/index.mjs";
+import { itemsSelectors } from "../plugins/items/index.mjs";
+import { useTreeViewContext, useTreeViewStyleContext } from "../TreeViewProvider/index.mjs";
+import { expansionSelectors } from "../plugins/expansion/index.mjs";
+import { useTreeViewRootProps } from "../hooks/useTreeViewRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RichTreeViewItemsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") RichTreeViewItemsContext.displayName = "RichTreeViewItemsContext";

package/{esm/internals/hooks/useTreeViewRootProps.d.ts → internals/hooks/useTreeViewRootProps.d.mts}

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import { TreeViewCancellableEvent } from "../../models/index.js";
-import { TreeViewAnyStore } from "../models/index.js";
-import { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
+import { TreeViewCancellableEvent } from "../../models/index.mjs";
+import { TreeViewAnyStore } from "../models/index.mjs";
+import { TreeViewStoreInContext } from "../TreeViewProvider/index.mjs";
 export declare function useTreeViewRootProps<TStore extends TreeViewAnyStore>(store: TreeViewStoreInContext<TStore>, forwardedProps: React.HTMLAttributes<HTMLUListElement>, ref: React.Ref<HTMLUListElement | null> | undefined): (otherHandlers: EventHandlers) => {
   style: React.CSSProperties;
   onFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;

package/{esm/internals/hooks/useTreeViewRootProps.js → internals/hooks/useTreeViewRootProps.mjs}

@@ -2,9 +2,9 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useStore } from '@mui/x-internals/store';
-import { idSelectors } from "../plugins/id/index.js";
-import { selectionSelectors } from "../plugins/selection/index.js";
-import { itemsSelectors } from "../plugins/items/index.js";
+import { idSelectors } from "../plugins/id/index.mjs";
+import { selectionSelectors } from "../plugins/selection/index.mjs";
+import { itemsSelectors } from "../plugins/items/index.mjs";
 export function useTreeViewRootProps(store, forwardedProps, ref) {
   const treeId = useStore(store, idSelectors.treeId);
   const itemChildrenIndentation = useStore(store, itemsSelectors.itemChildrenIndentation);

package/{esm/internals/hooks/useTreeViewStore.d.ts → internals/hooks/useTreeViewStore.d.mts}

@@ -1,4 +1,4 @@
-import { TreeViewAnyStore } from "../models/index.js";
+import { TreeViewAnyStore } from "../models/index.mjs";
 interface ValidTreeViewStoreConstructor<TStore extends TreeViewAnyStore> {
   new (parameters: TStore['parameters']): TStore;
 }

package/{esm/internals/index.d.ts → internals/index.d.mts}

@@ -1,19 +1,19 @@
-export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
-export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
-export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
-export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
-export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
-export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.js";
-export type { TreeViewItemMeta, TreeViewItemPlugin, TreeViewEventParameters, TreeViewEventEvent, TreeViewPublicAPI } from "./models/index.js";
-export { expansionSelectors } from "./plugins/expansion/index.js";
-export { selectionSelectors } from "./plugins/selection/index.js";
-export { buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/items/index.js";
-export { labelSelectors } from "./plugins/labelEditing/index.js";
-export { lazyLoadingSelectors } from "./plugins/lazyLoading/index.js";
-export { isTargetInDescendants } from "./utils/tree.js";
-export type { TreeViewClasses, TreeViewSlots, TreeViewSlotProps } from "./TreeViewProvider/TreeViewStyleContext.js";
-export { MinimalTreeViewStore } from "./MinimalTreeViewStore/index.js";
-export type { TreeViewParametersToStateMapper } from "./MinimalTreeViewStore/index.js";
-export { ExtendableRichTreeViewStore } from "./RichTreeViewStore/index.js";
-export type { RichTreeViewState, RichTreeViewStoreParameters } from "./RichTreeViewStore/index.js";
-export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext/index.js";
+export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.mjs";
+export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.mjs";
+export type { RichTreeViewItemsProps, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.mjs";
+export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.mjs";
+export { useTreeViewStore } from "./hooks/useTreeViewStore.mjs";
+export type { UseTreeViewStoreParameters } from "./hooks/useTreeViewStore.mjs";
+export type { TreeViewItemMeta, TreeViewItemPlugin, TreeViewEventParameters, TreeViewEventEvent, TreeViewPublicAPI } from "./models/index.mjs";
+export { expansionSelectors } from "./plugins/expansion/index.mjs";
+export { selectionSelectors } from "./plugins/selection/index.mjs";
+export { buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/items/index.mjs";
+export { labelSelectors } from "./plugins/labelEditing/index.mjs";
+export { lazyLoadingSelectors } from "./plugins/lazyLoading/index.mjs";
+export { isTargetInDescendants } from "./utils/tree.mjs";
+export type { TreeViewClasses, TreeViewSlots, TreeViewSlotProps } from "./TreeViewProvider/TreeViewStyleContext.mjs";
+export { MinimalTreeViewStore } from "./MinimalTreeViewStore/index.mjs";
+export type { TreeViewParametersToStateMapper } from "./MinimalTreeViewStore/index.mjs";
+export { ExtendableRichTreeViewStore } from "./RichTreeViewStore/index.mjs";
+export type { RichTreeViewState, RichTreeViewStoreParameters } from "./RichTreeViewStore/index.mjs";
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext/index.mjs";

package/{esm/internals/index.js → internals/index.mjs}

@@ -1,14 +1,14 @@
-export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.js";
-export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.js";
-export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
-export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
+export { TreeViewProvider, useTreeViewContext, useTreeViewStyleContext } from "./TreeViewProvider/index.mjs";
+export { RichTreeViewItems, RichTreeViewItem } from "./components/RichTreeViewItems.mjs";
+export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.mjs";
+export { useTreeViewStore } from "./hooks/useTreeViewStore.mjs";
 // Plugins
-export { expansionSelectors } from "./plugins/expansion/index.js";
-export { selectionSelectors } from "./plugins/selection/index.js";
-export { buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/items/index.js";
-export { labelSelectors } from "./plugins/labelEditing/index.js";
-export { lazyLoadingSelectors } from "./plugins/lazyLoading/index.js";
-export { isTargetInDescendants } from "./utils/tree.js";
-export { MinimalTreeViewStore } from "./MinimalTreeViewStore/index.js";
-export { ExtendableRichTreeViewStore } from "./RichTreeViewStore/index.js";
-export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext/index.js";
+export { expansionSelectors } from "./plugins/expansion/index.mjs";
+export { selectionSelectors } from "./plugins/selection/index.mjs";
+export { buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/items/index.mjs";
+export { labelSelectors } from "./plugins/labelEditing/index.mjs";
+export { lazyLoadingSelectors } from "./plugins/lazyLoading/index.mjs";
+export { isTargetInDescendants } from "./utils/tree.mjs";
+export { MinimalTreeViewStore } from "./MinimalTreeViewStore/index.mjs";
+export { ExtendableRichTreeViewStore } from "./RichTreeViewStore/index.mjs";
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext/index.mjs";

package/{esm/internals/models/events.d.ts → internals/models/events.d.mts}

@@ -1,5 +1,5 @@
 import { MuiEvent } from '@mui/x-internals/types';
-import { TreeViewItemId } from "../../models/index.js";
+import { TreeViewItemId } from "../../models/index.mjs";
 interface TreeViewEventLookup {
   /**
    * Fired before an item is expanded or collapsed.

package/internals/models/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./itemPlugin.mjs";
+export * from "./treeView.mjs";
+export * from "./events.mjs";

package/internals/models/index.mjs

@@ -0,0 +1,3 @@
+export * from "./itemPlugin.mjs";
+export * from "./treeView.mjs";
+export * from "./events.mjs";

package/{esm/internals/models/itemPlugin.d.ts → internals/models/itemPlugin.d.mts}

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { EventHandlers } from '@mui/utils/types';
-import { TreeViewItemId } from "../../models/index.js";
-import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemLabelSlotOwnProps } from "../../useTreeItem/index.js";
-import type { UseTreeItemInteractions } from "../../hooks/useTreeItemUtils/useTreeItemUtils.js";
-import type { TreeItemProps } from "../../TreeItem/TreeItem.types.js";
-import { TreeViewAnyStore } from "./treeView.js";
-import { TreeViewStoreInContext } from "../TreeViewProvider/index.js";
+import { TreeViewItemId } from "../../models/index.mjs";
+import type { UseTreeItemContentSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemRootSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemLabelSlotOwnProps } from "../../useTreeItem/index.mjs";
+import type { UseTreeItemInteractions } from "../../hooks/useTreeItemUtils/useTreeItemUtils.mjs";
+import type { TreeItemProps } from "../../TreeItem/TreeItem.types.mjs";
+import { TreeViewAnyStore } from "./treeView.mjs";
+import { TreeViewStoreInContext } from "../TreeViewProvider/index.mjs";
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
   rootRefObject: React.RefObject<HTMLLIElement | null>;
   contentRefObject: React.RefObject<HTMLDivElement | null>;

package/{esm/internals/models/treeView.d.ts → internals/models/treeView.d.mts}

@@ -1,4 +1,4 @@
-import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.mjs";
 export interface TreeViewItemMeta {
   id: string;
   idAttribute: string | undefined;

package/{esm/internals/plugins/expansion/TreeViewExpansionPlugin.d.ts → internals/plugins/expansion/TreeViewExpansionPlugin.d.mts}

@@ -1,4 +1,4 @@
-import { TreeViewItemId } from "../../../models/index.js";
+import { TreeViewItemId } from "../../../models/index.mjs";
 export declare class TreeViewExpansionPlugin {
   private store;
   constructor(store: any);

package/{esm/internals/plugins/expansion/TreeViewExpansionPlugin.js → internals/plugins/expansion/TreeViewExpansionPlugin.mjs}

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { expansionSelectors } from "./selectors.js";
-import { itemsSelectors } from "../items/selectors.js";
+import { expansionSelectors } from "./selectors.mjs";
+import { itemsSelectors } from "../items/selectors.mjs";
 export class TreeViewExpansionPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'expansion' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

package/internals/plugins/expansion/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./TreeViewExpansionPlugin.mjs";
+export * from "./selectors.mjs";

package/internals/plugins/expansion/index.mjs

@@ -0,0 +1,2 @@
+export * from "./TreeViewExpansionPlugin.mjs";
+export * from "./selectors.mjs";

package/{esm/internals/plugins/expansion/selectors.d.ts → internals/plugins/expansion/selectors.d.mts}

@@ -1,4 +1,4 @@
-import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.mjs";
 export declare const expansionSelectors: {
   /**
    * Gets the expanded items as provided to the component.

package/{esm/internals/plugins/expansion/selectors.js → internals/plugins/expansion/selectors.mjs}

@@ -1,6 +1,6 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { itemsSelectors } from "../items/selectors.js";
-import { TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
+import { itemsSelectors } from "../items/selectors.mjs";
+import { TREE_VIEW_ROOT_PARENT_ID } from "../items/index.mjs";
 const expandedItemMapSelector = createSelectorMemoized(state => state.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {

package/{esm/internals/plugins/expansion/utils.d.ts → internals/plugins/expansion/utils.d.mts}

@@ -1,4 +1,4 @@
-import { RichTreeViewStoreParameters } from "../../RichTreeViewStore/index.js";
+import { RichTreeViewStoreParameters } from "../../RichTreeViewStore/index.mjs";
 export declare const getExpansionTrigger: ({
   isItemEditable,
   expansionTrigger

package/{esm/internals/plugins/focus/TreeViewFocusPlugin.d.ts → internals/plugins/focus/TreeViewFocusPlugin.d.mts}

@@ -1,4 +1,4 @@
-import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.mjs";
 export declare class TreeViewFocusPlugin {
   private store;
   constructor(store: any);

package/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -7,6 +7,7 @@ exports.TreeViewFocusPlugin = void 0;
 var _expansion = require("../expansion");
 var _selectors = require("./selectors");
 var _items = require("../items");
+var _tree = require("../../utils/tree");
 class TreeViewFocusPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
@@ -14,21 +15,27 @@ class TreeViewFocusPlugin {
     this.store = store;
 
     // Whenever the items change, we need to ensure the focused item is still present.
-    this.store.registerStoreEffect(_items.itemsSelectors.itemMetaLookup, () => {
-      const focusedItemId = _selectors.focusSelectors.focusedItemId(store.state);
-      if (focusedItemId == null) {
+    // If the focused item was removed, focus the closest neighbor instead of the first item.
+    let previousState = store.state;
+    this.store.subscribe(newState => {
+      // Only run when items actually changed.
+      if (newState.itemMetaLookup === previousState.itemMetaLookup) {
+        previousState = newState;
         return;
       }
-      const hasItemBeenRemoved = !_items.itemsSelectors.itemMeta(store.state, focusedItemId);
-      if (!hasItemBeenRemoved) {
+      const focusedItemId = _selectors.focusSelectors.focusedItemId(newState);
+      if (focusedItemId == null || _items.itemsSelectors.itemMeta(newState, focusedItemId)) {
+        previousState = newState;
         return;
       }
-      const defaultFocusableItemId = _selectors.focusSelectors.defaultFocusableItemId(store.state);
-      if (defaultFocusableItemId == null) {
+      const checkItemInNewTree = itemId => itemId == null || !_items.itemsSelectors.itemMeta(newState, itemId) ? null : itemId;
+      const itemToFocusId = checkItemInNewTree((0, _tree.getNextNavigableItem)(previousState, focusedItemId)) ?? checkItemInNewTree((0, _tree.getPreviousNavigableItem)(previousState, focusedItemId)) ?? (0, _tree.getFirstNavigableItem)(newState);
+      if (itemToFocusId == null) {
         this.setFocusedItemId(null);
-        return;
+      } else {
+        this.applyItemFocus(null, itemToFocusId);
       }
-      this.applyItemFocus(null, defaultFocusableItemId);
+      previousState = newState;
     });
   }
   setFocusedItemId = itemId => {

package/{esm/internals/plugins/focus/TreeViewFocusPlugin.js → internals/plugins/focus/TreeViewFocusPlugin.mjs}

@@ -1,6 +1,7 @@
-import { expansionSelectors } from "../expansion/index.js";
-import { focusSelectors } from "./selectors.js";
-import { itemsSelectors } from "../items/index.js";
+import { expansionSelectors } from "../expansion/index.mjs";
+import { focusSelectors } from "./selectors.mjs";
+import { itemsSelectors } from "../items/index.mjs";
+import { getFirstNavigableItem, getNextNavigableItem, getPreviousNavigableItem } from "../../utils/tree.mjs";
 export class TreeViewFocusPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'focus' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
@@ -8,21 +9,27 @@ export class TreeViewFocusPlugin {
     this.store = store;
 
     // Whenever the items change, we need to ensure the focused item is still present.
-    this.store.registerStoreEffect(itemsSelectors.itemMetaLookup, () => {
-      const focusedItemId = focusSelectors.focusedItemId(store.state);
-      if (focusedItemId == null) {
+    // If the focused item was removed, focus the closest neighbor instead of the first item.
+    let previousState = store.state;
+    this.store.subscribe(newState => {
+      // Only run when items actually changed.
+      if (newState.itemMetaLookup === previousState.itemMetaLookup) {
+        previousState = newState;
         return;
       }
-      const hasItemBeenRemoved = !itemsSelectors.itemMeta(store.state, focusedItemId);
-      if (!hasItemBeenRemoved) {
+      const focusedItemId = focusSelectors.focusedItemId(newState);
+      if (focusedItemId == null || itemsSelectors.itemMeta(newState, focusedItemId)) {
+        previousState = newState;
         return;
       }
-      const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
-      if (defaultFocusableItemId == null) {
+      const checkItemInNewTree = itemId => itemId == null || !itemsSelectors.itemMeta(newState, itemId) ? null : itemId;
+      const itemToFocusId = checkItemInNewTree(getNextNavigableItem(previousState, focusedItemId)) ?? checkItemInNewTree(getPreviousNavigableItem(previousState, focusedItemId)) ?? getFirstNavigableItem(newState);
+      if (itemToFocusId == null) {
         this.setFocusedItemId(null);
-        return;
+      } else {
+        this.applyItemFocus(null, itemToFocusId);
       }
-      this.applyItemFocus(null, defaultFocusableItemId);
+      previousState = newState;
     });
   }
   setFocusedItemId = itemId => {

package/internals/plugins/focus/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./TreeViewFocusPlugin.mjs";
+export * from "./selectors.mjs";

package/internals/plugins/focus/index.mjs

@@ -0,0 +1,2 @@
+export * from "./TreeViewFocusPlugin.mjs";
+export * from "./selectors.mjs";

package/{esm/internals/plugins/focus/selectors.d.ts → internals/plugins/focus/selectors.d.mts}

@@ -1,4 +1,4 @@
-import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.mjs";
 export declare const focusSelectors: {
   /**
    * Gets the item that should be sequentially focusable (usually with the Tab key).

package/{esm/internals/plugins/focus/selectors.js → internals/plugins/focus/selectors.mjs}

@@ -1,8 +1,8 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { selectionSelectors } from "../selection/selectors.js";
-import { itemsSelectors } from "../items/selectors.js";
-import { isItemDisabled } from "../items/utils.js";
-import { expansionSelectors } from "../expansion/selectors.js";
+import { selectionSelectors } from "../selection/selectors.mjs";
+import { itemsSelectors } from "../items/selectors.mjs";
+import { isItemDisabled } from "../items/utils.mjs";
+import { expansionSelectors } from "../expansion/selectors.mjs";
 const defaultFocusableItemIdSelector = createSelectorMemoized(selectionSelectors.selectedItems, expansionSelectors.expandedItemsMap, itemsSelectors.itemMetaLookup, itemsSelectors.disabledItemFocusable, state => itemsSelectors.itemOrderedChildrenIds(state, null), (selectedItems, expandedItemsMap, itemMetaLookup, disabledItemsFocusable, orderedRootItemIds) => {
   const firstSelectedItem = selectedItems.find(itemId => {
     if (!disabledItemsFocusable && isItemDisabled(itemMetaLookup, itemId)) {

package/internals/plugins/id/index.d.mts

@@ -0,0 +1 @@
+export * from "./selectors.mjs";

package/internals/plugins/id/index.mjs

@@ -0,0 +1 @@
+export * from "./selectors.mjs";

package/{esm/internals/plugins/id/selectors.d.ts → internals/plugins/id/selectors.d.mts}

@@ -1,4 +1,4 @@
-import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.mjs";
 export declare const idSelectors: {
   /**
    * Get the id attribute of the tree view.

package/{esm/internals/plugins/items/TreeViewItemsPlugin.d.ts → internals/plugins/items/TreeViewItemsPlugin.d.mts}

@@ -1,5 +1,5 @@
-import { TreeViewItemId, TreeViewValidItem } from "../../../models/index.js";
-import { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/MinimalTreeViewStore.types.js";
+import { TreeViewItemId, TreeViewValidItem } from "../../../models/index.mjs";
+import { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/MinimalTreeViewStore.types.mjs";
 export declare class TreeViewItemsPlugin<R extends TreeViewValidItem<R>> {
   private store;
   constructor(store: any);
@@ -12,7 +12,7 @@ export declare class TreeViewItemsPlugin<R extends TreeViewValidItem<R>> {
    */
   static buildItemsStateIfNeeded: <R2 extends TreeViewValidItem<R2>>(parameters: Pick<MinimalTreeViewParameters<R2, any>, "items" | "isItemDisabled" | "isItemSelectionDisabled" | "getItemId" | "getItemLabel" | "getItemChildren">) => {
     itemMetaLookup: {
-      [itemId: string]: import("../../index.js").TreeViewItemMeta;
+      [itemId: string]: import("../../index.mjs").TreeViewItemMeta;
     };
     itemModelLookup: {
       [itemId: string]: R2;

package/{esm/internals/plugins/items/TreeViewItemsPlugin.js → internals/plugins/items/TreeViewItemsPlugin.mjs}

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { idSelectors } from "../id/index.js";
-import { itemsSelectors } from "./selectors.js";
-import { buildItemsLookups, TREE_VIEW_ROOT_PARENT_ID } from "./utils.js";
+import { idSelectors } from "../id/index.mjs";
+import { itemsSelectors } from "./selectors.mjs";
+import { buildItemsLookups, TREE_VIEW_ROOT_PARENT_ID } from "./utils.mjs";
 export class TreeViewItemsPlugin {
   // We can't type `store`, otherwise we get the following TS error:
   // 'items' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

package/internals/plugins/items/index.d.mts

@@ -0,0 +1,3 @@
+export * from "./TreeViewItemsPlugin.mjs";
+export * from "./selectors.mjs";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./utils.mjs";

package/internals/plugins/items/index.mjs

@@ -0,0 +1,3 @@
+export * from "./TreeViewItemsPlugin.mjs";
+export * from "./selectors.mjs";
+export { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "./utils.mjs";

package/{esm/internals/plugins/items/selectors.d.ts → internals/plugins/items/selectors.d.mts}

@@ -1,11 +1,11 @@
-import { TreeViewItemMeta } from "../../models/index.js";
-import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
-import { RichTreeViewState } from "../../RichTreeViewStore/index.js";
+import { TreeViewItemMeta } from "../../models/index.mjs";
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.mjs";
+import { RichTreeViewState } from "../../RichTreeViewStore/index.mjs";
 export declare const itemsSelectors: {
   /**
    * Gets the DOM structure of the Tree View.
    */
-  domStructure: (state: RichTreeViewState<any, any>) => import("../../../index.js").TreeViewDOMStructure;
+  domStructure: (state: RichTreeViewState<any, any>) => import("../../../index.mjs").TreeViewDOMStructure;
   /**
    * Checks whether the disabled items are focusable.
    */

package/internals/plugins/items/selectors.js

@@ -62,7 +62,7 @@ const itemsSelectors = exports.itemsSelectors = {
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.disabledItemsFocusable || !(0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
+  canItemBeFocused: (0, _store.createSelector)((state, itemId) => state.disabledItemsFocusable || state.itemModelLookup[itemId] != null && !(0, _utils.isItemDisabled)(state.itemMetaLookup, itemId)),
   /**
    * Gets the identation between an item and its children.
    */

package/{esm/internals/plugins/items/selectors.js → internals/plugins/items/selectors.mjs}

@@ -1,5 +1,5 @@
 import { createSelector } from '@mui/x-internals/store';
-import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./utils.js";
+import { isItemDisabled, TREE_VIEW_ROOT_PARENT_ID } from "./utils.mjs";
 const EMPTY_CHILDREN = [];
 export const itemsSelectors = {
   /**
@@ -56,7 +56,7 @@ export const itemsSelectors = {
   /**
    * Checks whether an item can be focused.
    */
-  canItemBeFocused: createSelector((state, itemId) => state.disabledItemsFocusable || !isItemDisabled(state.itemMetaLookup, itemId)),
+  canItemBeFocused: createSelector((state, itemId) => state.disabledItemsFocusable || state.itemModelLookup[itemId] != null && !isItemDisabled(state.itemMetaLookup, itemId)),
   /**
    * Gets the identation between an item and its children.
    */

package/{esm/internals/plugins/items/utils.d.ts → internals/plugins/items/utils.d.mts}

@@ -1,6 +1,6 @@
-import { TreeViewValidItem, TreeViewItemId } from "../../../models/index.js";
-import { TreeViewItemMeta } from "../../models/index.js";
-import type { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/index.js";
+import { TreeViewValidItem, TreeViewItemId } from "../../../models/index.mjs";
+import { TreeViewItemMeta } from "../../models/index.mjs";
+import type { MinimalTreeViewParameters } from "../../MinimalTreeViewStore/index.mjs";
 export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
 export declare const buildSiblingIndexes: (siblings: string[]) => {
   [itemId: string]: number;

package/internals/plugins/items/utils.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TREE_VIEW_ROOT_PARENT_ID = void 0;
 exports.buildItemsLookups = buildItemsLookups;
 exports.isItemDisabled = exports.buildSiblingIndexes = void 0;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 const TREE_VIEW_ROOT_PARENT_ID = exports.TREE_VIEW_ROOT_PARENT_ID = '__TREE_VIEW_ROOT_PARENT_ID__';
 const buildSiblingIndexes = siblings => {
   const siblingsIndexLookup = {};
@@ -71,7 +73,7 @@ function buildItemsLookups(parameters) {
     });
     const label = storeParameters.getItemLabel ? storeParameters.getItemLabel(item) : item.label;
     if (label == null) {
-      throw new Error(['MUI X: The Tree View component requires all items to have a `label` property.', 'Alternatively, you can use the `getItemLabel` prop to specify a custom label for each item.', 'An item was provided without label in the `items` prop:', JSON.stringify(item)].join('\n'));
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Tree View: All items must have a `label` property. ' + 'You can use the `getItemLabel` prop to specify a custom label for each item. ' + `An item was provided without a label: ${JSON.stringify(item)}` : (0, _formatErrorMessage2.default)(192, JSON.stringify(item)));
     }
     const children = (storeParameters.getItemChildren ? storeParameters.getItemChildren(item) : item.children) || [];
     itemsChildren.push({
@@ -110,11 +112,11 @@ function checkId({
   siblingsMetaLookup
 }) {
   if (id == null) {
-    throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', 'An item was provided without id in the `items` prop:', JSON.stringify(item)].join('\n'));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Tree View: All items must have a unique `id` property. ' + 'You can use the `getItemId` prop to specify a custom id for each item. ' + `An item was provided without an id: ${JSON.stringify(item)}` : (0, _formatErrorMessage2.default)(193, JSON.stringify(item)));
   }
   if (siblingsMetaLookup[id] != null ||
   // Ignore items with the same parent id, because it's the same item from the previous generation.
   itemMetaLookup[id] != null && itemMetaLookup[id].parentId !== parentId) {
-    throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${id}"`].join('\n'));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Tree View: All items must have a unique \`id\` property. ` + `The id "${id}" is used by multiple items. ` + 'Use the `getItemId` prop to specify a custom id for each item if needed.' : (0, _formatErrorMessage2.default)(194, id));
   }
 }