@mui/x-tree-view 8.23.0 → 8.24.0

package/esm/internals/index.d.ts

@@ -1,25 +1,19 @@
-export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
 export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from "./components/RichTreeViewItems.js";
-export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore, TreeViewUsedInstance, TreeViewUsedParamsWithDefaults } from "./models/index.js";
-export type { TreeViewCorePluginParameters } from "./corePlugins/index.js";
-export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
-export type { UseTreeViewExpansionSignature, UseTreeViewExpansionParameters } from "./plugins/useTreeViewExpansion/index.js";
-export { useTreeViewSelection, selectionSelectors } from "./plugins/useTreeViewSelection/index.js";
-export type { UseTreeViewSelectionSignature, UseTreeViewSelectionParameters } from "./plugins/useTreeViewSelection/index.js";
-export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
-export type { UseTreeViewFocusSignature, UseTreeViewFocusParameters } from "./plugins/useTreeViewFocus/index.js";
-export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
-export type { UseTreeViewKeyboardNavigationSignature } from "./plugins/useTreeViewKeyboardNavigation/index.js";
-export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
-export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from "./plugins/useTreeViewItems/index.js";
-export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
-export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from "./plugins/useTreeViewLabel/index.js";
-export type { UseTreeViewLazyLoadingSignature, UseTreeViewLazyLoadingParameters, UseTreeViewLazyLoadingInstance, DataSource } from "./plugins/useTreeViewLazyLoading/index.js";
-export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
-export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
-export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from "./plugins/useTreeViewJSXItems/index.js";
+export { 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 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";

package/esm/internals/index.js

@@ -1,17 +1,14 @@
-export { useTreeView } from "./useTreeView/index.js";
 export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
 export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
-export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
-
-// Core plugins
-
+export { useTreeViewRootProps } from "./hooks/useTreeViewRootProps.js";
+export { useTreeViewStore } from "./hooks/useTreeViewStore.js";
 // Plugins
-export { useTreeViewExpansion, expansionSelectors } from "./plugins/useTreeViewExpansion/index.js";
-export { useTreeViewSelection, selectionSelectors } from "./plugins/useTreeViewSelection/index.js";
-export { useTreeViewFocus } from "./plugins/useTreeViewFocus/index.js";
-export { useTreeViewKeyboardNavigation } from "./plugins/useTreeViewKeyboardNavigation/index.js";
-export { useTreeViewItems, buildSiblingIndexes, itemsSelectors, TREE_VIEW_ROOT_PARENT_ID } from "./plugins/useTreeViewItems/index.js";
-export { useTreeViewLabel, labelSelectors } from "./plugins/useTreeViewLabel/index.js";
-export { lazyLoadingSelectors } from "./plugins/useTreeViewLazyLoading/index.js";
-export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
-export { isTargetInDescendants } from "./utils/tree.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 { MinimalTreeViewStore } from "./MinimalTreeViewStore/index.js";
+export { ExtendableRichTreeViewStore } from "./RichTreeViewStore/index.js";
+export { TreeViewItemDepthContext } from "./TreeViewItemDepthContext/index.js";

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

@@ -1,5 +1,26 @@
 import { MuiEvent } from '@mui/x-internals/types';
-export interface TreeViewEventLookupElement {
-  params: object;
+import { TreeViewItemId } from "../../models/index.js";
+interface TreeViewEventLookup {
+  /**
+   * Fired before an item is expanded or collapsed.
+   */
+  beforeItemToggleExpansion: {
+    parameters: {
+      isExpansionPrevented: boolean;
+      shouldBeExpanded: boolean;
+      itemId: TreeViewItemId;
+    };
+    event: React.SyntheticEvent | null;
+  };
 }
-export type TreeViewEventListener<E extends TreeViewEventLookupElement> = (params: E['params'], event: MuiEvent<{}>) => void;
+export type TreeViewEvents = keyof TreeViewEventLookup;
+export type TreeViewEventListener<E extends TreeViewEvents> = (params: TreeViewEventParameters<E>, event: TreeViewEventLookup[E] extends {
+  event: any;
+} ? MuiEvent<TreeViewEventLookup[E]['event']> : MuiEvent<{}>) => void;
+export type TreeViewEventParameters<E extends TreeViewEvents> = TreeViewEventLookup[E] extends {
+  parameters: infer P;
+} ? P : undefined;
+export type TreeViewEventEvent<E extends TreeViewEvents> = TreeViewEventLookup[E] extends {
+  event: infer EV;
+} ? EV : undefined;
+export {};

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

@@ -1,4 +1,3 @@
-export * from "./helpers.js";
-export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
+export * from "./treeView.js";
+export * from "./events.js";

package/esm/internals/models/index.js

@@ -1,4 +1,3 @@
-export * from "./helpers.js";
-export * from "./plugin.js";
 export * from "./itemPlugin.js";
-export * from "./treeView.js";
+export * from "./treeView.js";
+export * from "./events.js";

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

@@ -1,8 +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";
 export interface TreeViewItemPluginSlotPropsEnhancerParams {
   rootRefObject: React.RefObject<HTMLLIElement | null>;
   contentRefObject: React.RefObject<HTMLDivElement | null>;
@@ -40,4 +43,10 @@ export interface TreeViewItemPluginOptions extends Omit<TreeViewItemPluginRespon
   props: TreeItemProps;
 }
 export type TreeViewItemPlugin = (options: TreeViewItemPluginOptions) => void | TreeViewItemPluginResponse;
+export type TreeItemWrapper<TStore extends TreeViewAnyStore> = (params: {
+  itemId: TreeViewItemId;
+  children: React.ReactNode;
+  store: TreeViewStoreInContext<TStore>;
+  idAttribute: string;
+}) => React.ReactNode;
 export {};

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

@@ -1,7 +1,4 @@
-import { ReadonlyStore, Store } from '@mui/x-internals/store';
-import type { TreeViewAnyPluginSignature } from "./plugin.js";
-import type { MergeSignaturesProperty } from "./helpers.js";
-import type { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+import { MinimalTreeViewStore } from "../MinimalTreeViewStore/index.js";
 export interface TreeViewItemMeta {
   id: string;
   idAttribute: string | undefined;
@@ -18,8 +15,7 @@ export interface TreeViewItemMeta {
    */
   label?: string;
 }
-export type TreeViewInstance<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'instance'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
-export type TreeViewPublicAPI<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'publicAPI'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'instance'>>;
-export type TreeViewState<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = MergeSignaturesProperty<[...TreeViewCorePluginSignatures, ...TSignatures], 'state'> & Partial<MergeSignaturesProperty<TOptionalSignatures, 'state'>>;
-export type TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = Store<TreeViewState<TSignatures, TOptionalSignatures>>;
-export type TreeViewReadonlyStore<TSignatures extends readonly TreeViewAnyPluginSignature[], TOptionalSignatures extends readonly TreeViewAnyPluginSignature[] = []> = ReadonlyStore<TreeViewState<TSignatures, TOptionalSignatures>>;
+export interface TreeViewAnyStore extends MinimalTreeViewStore<any, any, any, any> {
+  itemPluginManager: any;
+}
+export type TreeViewPublicAPI<TStore extends TreeViewAnyStore> = ReturnType<TStore['buildPublicAPI']>;

package/esm/internals/plugins/expansion/TreeViewExpansionPlugin.d.ts

@@ -0,0 +1,69 @@
+import { TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewExpansionPlugin {
+  private store;
+  constructor(store: any);
+  private setExpandedItems;
+  /**
+   * Check if an item is expanded.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+   */
+  private isItemExpanded;
+  buildPublicAPI: () => {
+    isItemExpanded: (itemId: TreeViewItemId) => boolean;
+    setItemExpansion: ({
+      itemId,
+      event,
+      shouldBeExpanded
+    }: {
+      itemId: TreeViewItemId;
+      event?: React.SyntheticEvent | null;
+      shouldBeExpanded?: boolean;
+    }) => void;
+  };
+  /**
+   * Change the expansion status of a given item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
+   */
+  setItemExpansion: ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }: {
+    itemId: TreeViewItemId;
+    event?: React.SyntheticEvent | null;
+    shouldBeExpanded?: boolean;
+  }) => void;
+  /**
+   * Apply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion: ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }: {
+    itemId: TreeViewItemId;
+    event: React.SyntheticEvent | null;
+    shouldBeExpanded: boolean;
+  }) => void;
+  /**
+   * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
+   */
+  expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
+  /**
+   * Mark a list of items as expandable.
+   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
+   */
+  addExpandableItems: (items: TreeViewItemId[]) => void;
+}

package/esm/internals/plugins/expansion/TreeViewExpansionPlugin.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { expansionSelectors } from "./selectors.js";
+import { itemsSelectors } from "../items/selectors.js";
+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.
+  constructor(store) {
+    this.store = store;
+  }
+  setExpandedItems = (event, value) => {
+    if (this.store.parameters.expandedItems === undefined) {
+      this.store.set('expandedItems', value);
+    }
+    this.store.parameters.onExpandedItemsChange?.(event, value);
+  };
+
+  /**
+   * Check if an item is expanded.
+   * @param {TreeViewItemId} itemId The id of the item to check.
+   * @returns {boolean} `true` if the item is expanded, `false` otherwise.
+   */
+  isItemExpanded = itemId => expansionSelectors.isItemExpanded(this.store.state, itemId);
+  buildPublicAPI = () => {
+    return {
+      isItemExpanded: this.isItemExpanded,
+      setItemExpansion: this.setItemExpansion
+    };
+  };
+
+  /**
+   * Change the expansion status of a given item.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
+   */
+  setItemExpansion = ({
+    itemId,
+    event = null,
+    shouldBeExpanded
+  }) => {
+    const isExpandedBefore = expansionSelectors.isItemExpanded(this.store.state, itemId);
+    const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
+    if (isExpandedBefore === cleanShouldBeExpanded) {
+      return;
+    }
+    const eventParameters = {
+      isExpansionPrevented: false,
+      shouldBeExpanded: cleanShouldBeExpanded,
+      itemId
+    };
+    this.store.publishEvent('beforeItemToggleExpansion', eventParameters, event);
+    if (eventParameters.isExpansionPrevented) {
+      return;
+    }
+    this.applyItemExpansion({
+      itemId,
+      event,
+      shouldBeExpanded: cleanShouldBeExpanded
+    });
+  };
+
+  /**
+   * Apply the new expansion status of a given item.
+   * Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
+   * Unlike `setItemExpansion`, this method does not trigger the lazy loading.
+   * @param {object} parameters The parameters of the method.
+   * @param {TreeViewItemId} parameters.itemId The id of the item to expand of collapse.
+   * @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
+   */
+  applyItemExpansion = ({
+    itemId,
+    event,
+    shouldBeExpanded
+  }) => {
+    const oldExpanded = expansionSelectors.expandedItemsRaw(this.store.state);
+    let newExpanded;
+    if (shouldBeExpanded) {
+      newExpanded = [itemId].concat(oldExpanded);
+    } else {
+      newExpanded = oldExpanded.filter(id => id !== itemId);
+    }
+    this.store.parameters.onItemExpansionToggle?.(event, itemId, shouldBeExpanded);
+    this.setExpandedItems(event, newExpanded);
+  };
+
+  /**
+   * Expand all the siblings (i.e.: the items that have the same parent) of a given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
+   */
+  expandAllSiblings = (event, itemId) => {
+    const itemMeta = itemsSelectors.itemMeta(this.store.state, itemId);
+    if (itemMeta == null) {
+      return;
+    }
+    const siblings = itemsSelectors.itemOrderedChildrenIds(this.store.state, itemMeta.parentId);
+    const diff = siblings.filter(child => expansionSelectors.isItemExpandable(this.store.state, child) && !expansionSelectors.isItemExpanded(this.store.state, child));
+    const newExpanded = expansionSelectors.expandedItemsRaw(this.store.state).concat(diff);
+    if (diff.length > 0) {
+      if (this.store.parameters.onItemExpansionToggle) {
+        diff.forEach(newlyExpandedItemId => {
+          this.store.parameters.onItemExpansionToggle(event, newlyExpandedItemId, true);
+        });
+      }
+      this.setExpandedItems(event, newExpanded);
+    }
+  };
+
+  /**
+   * Mark a list of items as expandable.
+   * @param {TreeViewItemId[]} items The ids of the items to mark as expandable.
+   */
+  addExpandableItems = items => {
+    const newItemMetaLookup = _extends({}, this.store.state.itemMetaLookup);
+    for (const itemId of items) {
+      newItemMetaLookup[itemId] = _extends({}, newItemMetaLookup[itemId], {
+        expandable: true
+      });
+    }
+    this.store.set('itemMetaLookup', newItemMetaLookup);
+  };
+}

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

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

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

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

package/esm/internals/plugins/expansion/selectors.d.ts

@@ -0,0 +1,27 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const expansionSelectors: {
+  /**
+   * Gets the expanded items as provided to the component.
+   */
+  expandedItemsRaw: (state: MinimalTreeViewState<any, any>) => readonly string[];
+  /**
+   * Gets the expanded items as a Map.
+   */
+  expandedItemsMap: (args_0: MinimalTreeViewState<any, any>) => Map<string, true>;
+  /**
+   * Gets the items to render as a flat list (the descendants of an expanded item are listed as siblings of the item).
+   */
+  flatList: (args_0: MinimalTreeViewState<any, any>) => string[];
+  /**
+   * Gets the slot that triggers the item's expansion when clicked.
+   */
+  triggerSlot: (state: MinimalTreeViewState<any, any>) => "content" | "iconContainer";
+  /**
+   * Checks whether an item is expanded.
+   */
+  isItemExpanded: (args_0: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+  /**
+   * Checks whether an item is expandable.
+   */
+  isItemExpandable: (args_0: MinimalTreeViewState<any, any>, _itemId: string) => boolean;
+};

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

@@ -1,7 +1,7 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
-import { TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/index.js";
-const expandedItemMapSelector = createSelectorMemoized(state => state.expansion.expandedItems, expandedItems => {
+import { itemsSelectors } from "../items/selectors.js";
+import { TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
+const expandedItemMapSelector = createSelectorMemoized(state => state.expandedItems, expandedItems => {
   const expandedItemsMap = new Map();
   expandedItems.forEach(id => {
     expandedItemsMap.set(id, true);
@@ -12,7 +12,7 @@ export const expansionSelectors = {
   /**
    * Gets the expanded items as provided to the component.
    */
-  expandedItemsRaw: createSelector(state => state.expansion.expandedItems),
+  expandedItemsRaw: createSelector(state => state.expandedItems),
   /**
    * Gets the expanded items as a Map.
    */
@@ -37,7 +37,7 @@ export const expansionSelectors = {
   /**
    * Gets the slot that triggers the item's expansion when clicked.
    */
-  triggerSlot: createSelector(state => state.expansion.expansionTrigger),
+  triggerSlot: createSelector(state => state.expansionTrigger),
   /**
    * Checks whether an item is expanded.
    */

package/esm/internals/plugins/expansion/utils.d.ts

@@ -0,0 +1,5 @@
+import { RichTreeViewStoreParameters } from "../../RichTreeViewStore/index.js";
+export declare const getExpansionTrigger: ({
+  isItemEditable,
+  expansionTrigger
+}: Pick<RichTreeViewStoreParameters<any, any>, "isItemEditable" | "expansionTrigger">) => "content" | "iconContainer";

package/esm/internals/plugins/focus/TreeViewFocusPlugin.d.ts

@@ -0,0 +1,33 @@
+import { TreeViewCancellableEvent, TreeViewItemId } from "../../../models/index.js";
+export declare class TreeViewFocusPlugin {
+  private store;
+  constructor(store: any);
+  private setFocusedItemId;
+  private applyItemFocus;
+  buildPublicAPI: () => {
+    focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  };
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem: () => void;
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is focused.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootFocus: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is blurred.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootBlur: (event: React.FocusEvent<HTMLUListElement> & TreeViewCancellableEvent) => void;
+}

package/esm/internals/plugins/focus/TreeViewFocusPlugin.js

@@ -0,0 +1,107 @@
+import { expansionSelectors } from "../expansion/index.js";
+import { focusSelectors } from "./selectors.js";
+import { itemsSelectors } from "../items/index.js";
+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.
+  constructor(store) {
+    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) {
+        return;
+      }
+      const hasItemBeenRemoved = !itemsSelectors.itemMeta(store.state, focusedItemId);
+      if (!hasItemBeenRemoved) {
+        return;
+      }
+      const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(store.state);
+      if (defaultFocusableItemId == null) {
+        this.setFocusedItemId(null);
+        return;
+      }
+      this.applyItemFocus(null, defaultFocusableItemId);
+    });
+  }
+  setFocusedItemId = itemId => {
+    const focusedItemId = focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId === itemId) {
+      return;
+    }
+    this.store.set('focusedItemId', itemId);
+  };
+  applyItemFocus = (event, itemId) => {
+    this.store.items.getItemDOMElement(itemId)?.focus();
+    this.setFocusedItemId(itemId);
+    this.store.parameters.onItemFocus?.(event, itemId);
+  };
+  buildPublicAPI = () => {
+    return {
+      focusItem: this.focusItem
+    };
+  };
+
+  /**
+   * Focus the item with the given id.
+   *
+   * If the item is the child of a collapsed item, then this method will do nothing.
+   * Make sure to expand the ancestors of the item before calling this method if needed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change.
+   * @param {TreeViewItemId} itemId The id of the item to focus.
+   */
+  focusItem = (event, itemId) => {
+    // If we receive an itemId, and it is visible, the focus will be set to it
+    const itemMeta = itemsSelectors.itemMeta(this.store.state, itemId);
+    const isItemVisible = itemMeta && (itemMeta.parentId == null || expansionSelectors.isItemExpanded(this.store.state, itemMeta.parentId));
+    if (isItemVisible) {
+      this.applyItemFocus(event, itemId);
+    }
+  };
+
+  /**
+   * Remove the focus from the currently focused item (both from the internal state and the DOM).
+   */
+  removeFocusedItem = () => {
+    const focusedItemId = focusSelectors.focusedItemId(this.store.state);
+    if (focusedItemId == null) {
+      return;
+    }
+    const itemMeta = itemsSelectors.itemMeta(this.store.state, focusedItemId);
+    if (itemMeta) {
+      const itemElement = this.store.items.getItemDOMElement(focusedItemId);
+      if (itemElement) {
+        itemElement.blur();
+      }
+    }
+    this.setFocusedItemId(null);
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is focused.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootFocus = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+
+    // if the event bubbled (which is React specific) we don't want to steal focus
+    const defaultFocusableItemId = focusSelectors.defaultFocusableItemId(this.store.state);
+    if (event.target === event.currentTarget && defaultFocusableItemId != null) {
+      this.applyItemFocus(event, defaultFocusableItemId);
+    }
+  };
+
+  /**
+   * Event handler to fire when the `root` slot of the Tree View is blurred.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   */
+  handleRootBlur = event => {
+    if (event.defaultMuiPrevented) {
+      return;
+    }
+    this.setFocusedItemId(null);
+  };
+}

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

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

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

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

package/esm/internals/plugins/focus/selectors.d.ts

@@ -0,0 +1,21 @@
+import { MinimalTreeViewState } from "../../MinimalTreeViewStore/index.js";
+export declare const focusSelectors: {
+  /**
+   * Gets the item that should be sequentially focusable (usually with the Tab key).
+   * At any point in time, there is a single item that can be sequentially focused in the Tree View.
+   * This item is the first selected item (that is both visible and navigable), if any, or the first navigable item if no item is selected.
+   */
+  defaultFocusableItemId: (args_0: MinimalTreeViewState<any, any>) => any;
+  /**
+   * Checks whether an item is the default focusable item.
+   */
+  isItemTheDefaultFocusableItem: (args_0: MinimalTreeViewState<any, any>, itemId: any) => boolean;
+  /**
+   * Gets the id of the item that is currently focused.
+   */
+  focusedItemId: (state: MinimalTreeViewState<any, any>) => string | null;
+  /**
+   * Checks whether an item is focused.
+   */
+  isItemFocused: (state: MinimalTreeViewState<any, any>, itemId: string) => boolean;
+};

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

@@ -1,8 +1,8 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
-import { selectionSelectors } from "../useTreeViewSelection/useTreeViewSelection.selectors.js";
-import { itemsSelectors } from "../useTreeViewItems/useTreeViewItems.selectors.js";
-import { isItemDisabled } from "../useTreeViewItems/useTreeViewItems.utils.js";
-import { expansionSelectors } from "../useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectionSelectors } from "../selection/selectors.js";
+import { itemsSelectors } from "../items/selectors.js";
+import { isItemDisabled } from "../items/utils.js";
+import { expansionSelectors } from "../expansion/selectors.js";
 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)) {
@@ -34,9 +34,9 @@ export const focusSelectors = {
   /**
    * Gets the id of the item that is currently focused.
    */
-  focusedItemId: createSelector(state => state.focus.focusedItemId),
+  focusedItemId: createSelector(state => state.focusedItemId),
   /**
    * Checks whether an item is focused.
    */
-  isItemFocused: createSelector((state, itemId) => state.focus.focusedItemId === itemId)
+  isItemFocused: createSelector((state, itemId) => state.focusedItemId === itemId)
 };

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

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

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

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