@mui/x-tree-view 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
+import { TreeViewBaseItem, TreeViewDefaultItemModelProperties, TreeViewItemId } from "../../../models/index.js";
+export interface UseTreeViewItemsPublicAPI<R extends {}> {
+  /**
+   * Get the item with the given id.
+   * When used in the Simple Tree View, it returns an object with the `id` and `label` properties.
+   * @param {string} itemId The id of the item to retrieve.
+   * @returns {R} The item with the given id.
+   */
+  getItem: (itemId: TreeViewItemId) => R;
+  /**
+   * Get the DOM element of the item with the given id.
+   * @param {TreeViewItemId} itemId The id of the item to get the DOM element of.
+   * @returns {HTMLElement | null} The DOM element of the item with the given id.
+   */
+  getItemDOMElement: (itemId: TreeViewItemId) => HTMLElement | null;
+  /**
+   * Get the ids of a given item's children.
+   * Those ids are returned in the order they should be rendered.
+   * To get the root items, pass `null` as the `itemId`.
+   * @param {TreeViewItemId | null} itemId The id of the item to get the children of.
+   * @returns {TreeViewItemId[]} The ids of the item's children.
+   */
+  getItemOrderedChildrenIds: (itemId: TreeViewItemId | null) => TreeViewItemId[];
+  /**
+   * Get all the items in the same format as provided by `props.items`.
+   * @returns {TreeViewBaseItem[]} The items in the tree.
+   */
+  getItemTree: () => TreeViewBaseItem[];
+}
+export interface UseTreeViewItemsInstance<R extends {}> extends Pick<UseTreeViewItemsPublicAPI<R>, 'getItemDOMElement'> {
+  /**
+   * Freeze any future update to the state based on the `items` prop.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   */
+  preventItemUpdates: () => void;
+  /**
+   * Check if the updates to the state based on the `items` prop are prevented.
+   * This is useful when `useTreeViewJSXItems` is used to avoid having conflicting sources of truth.
+   * @returns {boolean} `true` if the updates to the state based on the `items` prop are prevented.
+   */
+  areItemUpdatesPrevented: () => boolean;
+}
+export interface UseTreeViewItemsParameters<R extends {
+  children?: R[];
+}> {
+  /**
+   * If `true`, will allow focus on disabled items.
+   * @default false
+   */
+  disabledItemsFocusable?: boolean;
+  items: readonly R[];
+  /**
+   * Used to determine if a given item should be disabled.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should be disabled.
+   */
+  isItemDisabled?: (item: R) => boolean;
+  /**
+   * Used to determine the string label for a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The label of the item.
+   * @default (item) => item.label
+   */
+  getItemLabel?: (item: R) => string;
+  /**
+   * Used to determine the id of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {string} The id of the item.
+   * @default (item) => item.id
+   */
+  getItemId?: (item: R) => TreeViewItemId;
+  /**
+   * Callback fired when the `content` slot of a given Tree Item is clicked.
+   * @param {React.MouseEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the focused item.
+   */
+  onItemClick?: (event: React.MouseEvent, itemId: string) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+}
+export type UseTreeViewItemsDefaultizedParameters<R extends {
+  children?: R[];
+}> = DefaultizedProps<UseTreeViewItemsParameters<R>, 'disabledItemsFocusable' | 'itemChildrenIndentation'>;
+interface UseTreeViewItemsEventLookup {
+  removeItem: {
+    params: {
+      id: string;
+    };
+  };
+}
+export interface UseTreeViewItemsState<R extends {}> {
+  items: {
+    /**
+     * If `true`, will allow focus on disabled items.
+     * Always equal to `props.disabledItemsFocusable` (or `false` if not provided).
+     */
+    disabledItemsFocusable: boolean;
+    /**
+     * Model of each item as provided by `props.items` or by imperative items updates.
+     * It is not updated when properties derived from the model are updated:
+     * - when the label of an item is updated, `itemMetaLookup` is updated, not `itemModelLookup`.
+     * - when the children of an item are updated, `itemOrderedChildrenIdsLookup` and `itemChildrenIndexesLookup` are updated, not `itemModelLookup`.
+     * This means that the `children`, `label` or `id` properties of an item model should never be used directly, always use the structured sub-states instead.
+     */
+    itemModelLookup: {
+      [itemId: string]: TreeViewBaseItem<R>;
+    };
+    /**
+     * Meta data of each item.
+     */
+    itemMetaLookup: {
+      [itemId: string]: TreeViewItemMeta;
+    };
+    /**
+     * Ordered children ids of each item.
+     */
+    itemOrderedChildrenIdsLookup: {
+      [parentItemId: string]: string[];
+    };
+    /**
+     * Index of each child in the ordered children ids of its parent.
+     */
+    itemChildrenIndexesLookup: {
+      [parentItemId: string]: {
+        [itemId: string]: number;
+      };
+    };
+  };
+}
+interface UseTreeViewItemsContextValue {
+  items: {
+    onItemClick: (event: React.MouseEvent, itemId: string) => void;
+  };
+}
+export type UseTreeViewItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewItemsParameters<any>;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters<any>;
+  instance: UseTreeViewItemsInstance<any>;
+  publicAPI: UseTreeViewItemsPublicAPI<any>;
+  events: UseTreeViewItemsEventLookup;
+  state: UseTreeViewItemsState<TreeViewDefaultItemModelProperties>;
+  contextValue: UseTreeViewItemsContextValue;
+}>;
+export {};

package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts

@@ -0,0 +1,4 @@
+export declare const TREE_VIEW_ROOT_PARENT_ID = "__TREE_VIEW_ROOT_PARENT_ID__";
+export declare const buildSiblingIndexes: (siblings: string[]) => {
+  [itemId: string]: number;
+};

package/modern/internals/plugins/useTreeViewJSXItems/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewJSXItems } from "./useTreeViewJSXItems.js";
+export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters, UseTreeViewItemsDefaultizedParameters } from './useTreeViewJSXItems.types';

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewJSXItemsSignature } from "./useTreeViewJSXItems.types.js";
+export declare const useTreeViewJSXItems: TreeViewPlugin<UseTreeViewJSXItemsSignature>;

package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts

@@ -0,0 +1,35 @@
+import { TreeViewItemMeta, TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "../useTreeViewKeyboardNavigation/index.js";
+import { TreeViewItemId } from "../../../models/index.js";
+export interface UseTreeViewItemsInstance {
+  /**
+   * Insert a new item in the state from a Tree Item component.
+   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
+   * @returns {() => void} A function to remove the item from the state.
+   */
+  insertJSXItem: (item: TreeViewItemMeta) => () => void;
+  /**
+   * Updates the `firstCharMap` to register the first character of the given item's label.
+   * This map is used to navigate the tree using type-ahead search.
+   * @param {TreeViewItemId} itemId The id of the item to map the first character of.
+   * @param {string} firstChar The first character of the item's label.
+   * @returns {() => void} A function to remove the item from the `firstCharMap`.
+   */
+  mapFirstCharFromJSX: (itemId: TreeViewItemId, firstChar: string) => () => void;
+  /**
+   * Store the ids of a given item's children in the state.
+   * Those ids must be passed in the order they should be rendered.
+   * @param {TreeViewItemId | null} parentId The id of the item to store the children of.
+   * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
+   */
+  setJSXItemsOrderedChildrenIds: (parentId: TreeViewItemId | null, orderedChildrenIds: TreeViewItemId[]) => void;
+}
+export interface UseTreeViewJSXItemsParameters {}
+export interface UseTreeViewItemsDefaultizedParameters {}
+export type UseTreeViewJSXItemsSignature = TreeViewPluginSignature<{
+  params: UseTreeViewJSXItemsParameters;
+  defaultizedParams: UseTreeViewItemsDefaultizedParameters;
+  instance: UseTreeViewItemsInstance;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewKeyboardNavigationSignature];
+}>;

package/modern/internals/plugins/useTreeViewKeyboardNavigation/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewKeyboardNavigation } from "./useTreeViewKeyboardNavigation.js";
+export type { UseTreeViewKeyboardNavigationSignature } from './useTreeViewKeyboardNavigation.types';

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewKeyboardNavigationSignature } from "./useTreeViewKeyboardNavigation.types.js";
+export declare const useTreeViewKeyboardNavigation: TreeViewPlugin<UseTreeViewKeyboardNavigationSignature>;

package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewSelectionSignature } from "../useTreeViewSelection/index.js";
+import { UseTreeViewFocusSignature } from "../useTreeViewFocus/index.js";
+import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+import { TreeViewItemId, TreeViewCancellableEvent } from "../../../models/index.js";
+import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
+export interface UseTreeViewKeyboardNavigationInstance {
+  /**
+   * Updates the `firstCharMap` to add/remove the first character of some item's labels.
+   * This map is used to navigate the tree using type-ahead search.
+   * This method is only used by the `useTreeViewJSXItems` plugin, otherwise the updates are handled internally.
+   * @param {(map: TreeViewFirstCharMap) => TreeViewFirstCharMap} updater The function to update the map.
+   */
+  updateFirstCharMap: (updater: (map: TreeViewFirstCharMap) => TreeViewFirstCharMap) => void;
+  /**
+   * Callback fired when a key is pressed on an item.
+   * Handles all the keyboard navigation logic.
+   * @param {React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent} event The keyboard event that triggered the callback.
+   * @param {TreeViewItemId} itemId The id of the item that the event was triggered on.
+   */
+  handleItemKeyDown: (event: React.KeyboardEvent<HTMLElement> & TreeViewCancellableEvent, itemId: TreeViewItemId) => void;
+}
+export type UseTreeViewKeyboardNavigationSignature = TreeViewPluginSignature<{
+  instance: UseTreeViewKeyboardNavigationInstance;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewSelectionSignature, UseTreeViewFocusSignature, UseTreeViewExpansionSignature];
+  optionalDependencies: [UseTreeViewLabelSignature];
+}>;
+export type TreeViewFirstCharMap = {
+  [itemId: string]: string;
+};

package/modern/internals/plugins/useTreeViewLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewLabel } from "./useTreeViewLabel.js";
+export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './useTreeViewLabel.types';

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewLabelSignature } from "./useTreeViewLabel.types.js";
+export declare const useTreeViewLabel: TreeViewPlugin<UseTreeViewLabelSignature>;

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.itemPlugin.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewLabelItemPlugin: TreeViewItemPlugin;

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors.d.ts

@@ -0,0 +1,74 @@
+import { UseTreeViewLabelSignature } from "./useTreeViewLabel.types.js";
+import { TreeViewRootSelector } from "../../utils/selectors.js";
+/**
+ * Check if an item is editable.
+ * @param {TreeViewState<[UseTreeViewItemsSignature]>} state The state of the tree view.
+ * @param {object} params The parameters.
+ * @param {TreeViewItemId} params.itemId The id of the item to check.
+ * @param {((item: any) => boolean) | boolean} params.isItemEditable The function to determine if an item is editable.
+ * @returns {boolean} `true` if the item is editable, `false` otherwise.
+ */
+export declare const selectorIsItemEditable: ((state: any, args: any) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    itemId: string;
+    isItemEditable: ((item: any) => boolean) | boolean;
+  }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    itemId: string;
+    isItemEditable: ((item: any) => boolean) | boolean;
+  }, resultFuncArgs_1: import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [(_: any, args: {
+    itemId: string;
+    isItemEditable: ((item: any) => boolean) | boolean;
+  }) => {
+    itemId: string;
+    isItemEditable: ((item: any) => boolean) | boolean;
+  }, (state: any, args: any) => import("../../..").TreeViewBaseItem<import("../../..").TreeViewDefaultItemModelProperties>];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};
+/**
+ * Check if an item is being edited.
+ * @param {TreeViewState<[UseTreeViewLabelSignature]>} state The state of the tree view.
+ * @param {TreeViewItemId} itemId The id of the item to check.
+ * @returns {boolean} `true` if the item is being edited, `false` otherwise.
+ */
+export declare const selectorIsItemBeingEdited: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    editedItemId: string | null;
+  }, resultFuncArgs_1: string) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    editedItemId: string | null;
+  }, resultFuncArgs_1: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewLabelSignature>, (_: any, itemId: string) => string];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};

package/modern/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.d.ts

@@ -0,0 +1,59 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TreeViewPluginSignature } from "../../models/index.js";
+import { TreeViewItemId } from "../../../models/index.js";
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { TreeItemLabelInputProps } from "../../../TreeItemLabelInput/index.js";
+export interface UseTreeViewLabelPublicAPI {
+  /**
+   * Used to update the label of an item.
+   * @param {TreeViewItemId} itemId The id of the item to update the label of.
+   * @param {string} newLabel The new label of the item.
+   */
+  updateItemLabel: (itemId: TreeViewItemId, newLabel: string) => void;
+}
+export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI {
+  /**
+   * Updates which item is currently being edited.
+   * @param {TreeViewItemId} itemId The id of the item that is currently being edited.
+   * @returns {void}.
+   */
+  setEditedItemId: (itemId: TreeViewItemId | null) => void;
+}
+export interface UseTreeViewLabelParameters<R extends {}> {
+  /**
+   * Callback fired when the label of an item changes.
+   * @param {TreeViewItemId} itemId The id of the item that was edited.
+   * @param {string} newLabel The new label of the items.
+   */
+  onItemLabelChange?: (itemId: TreeViewItemId, newLabel: string) => void;
+  /**
+   * Determine if a given item can be edited.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item can be edited.
+   * @default () => false
+   */
+  isItemEditable?: boolean | ((item: R) => boolean);
+}
+export type UseTreeViewLabelDefaultizedParameters<R extends {}> = DefaultizedProps<UseTreeViewLabelParameters<R>, 'isItemEditable'>;
+export interface UseTreeViewLabelState {
+  label: {
+    editedItemId: string | null;
+  };
+}
+export interface UseTreeViewLabelContextValue {
+  label: Pick<UseTreeViewLabelDefaultizedParameters<any>, 'isItemEditable'>;
+}
+export type UseTreeViewLabelSignature = TreeViewPluginSignature<{
+  params: UseTreeViewLabelParameters<any>;
+  defaultizedParams: UseTreeViewLabelDefaultizedParameters<any>;
+  publicAPI: UseTreeViewLabelPublicAPI;
+  instance: UseTreeViewLabelInstance;
+  state: UseTreeViewLabelState;
+  contextValue: UseTreeViewLabelContextValue;
+  dependencies: [UseTreeViewItemsSignature];
+}>;
+export interface UseTreeItemLabelInputSlotPropsFromLabelEditing extends TreeItemLabelInputProps {}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemLabelInputSlotOwnProps extends UseTreeItemLabelInputSlotPropsFromLabelEditing {}
+}

package/modern/internals/plugins/useTreeViewSelection/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeViewSelection } from "./useTreeViewSelection.js";
+export type { UseTreeViewSelectionSignature, UseTreeViewSelectionParameters, UseTreeViewSelectionDefaultizedParameters } from './useTreeViewSelection.types';

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.d.ts

@@ -0,0 +1,3 @@
+import { TreeViewPlugin } from "../../models/index.js";
+import { UseTreeViewSelectionSignature } from "./useTreeViewSelection.types.js";
+export declare const useTreeViewSelection: TreeViewPlugin<UseTreeViewSelectionSignature>;

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.itemPlugin.d.ts

@@ -0,0 +1,2 @@
+import { TreeViewItemPlugin } from "../../models/index.js";
+export declare const useTreeViewSelectionItemPlugin: TreeViewItemPlugin;

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.d.ts

@@ -0,0 +1,32 @@
+import { TreeViewRootSelector } from "../../utils/selectors.js";
+import { UseTreeViewSelectionSignature } from "./useTreeViewSelection.types.js";
+/**
+ * Check if an item is selected.
+ * @param {TreeViewState<[UseTreeViewSelectionSignature]>} state The state of the tree view.
+ * @returns {boolean} `true` if the item is selected, `false` otherwise.
+ */
+export declare const selectorIsItemSelected: ((state: any, itemId: string) => boolean) & {
+  clearCache: () => void;
+  resultsCount: () => number;
+  resetResultsCount: () => void;
+} & {
+  resultFunc: (resultFuncArgs_0: {
+    selectedItemsMap: Map<string, true>;
+  }, resultFuncArgs_1: string) => boolean;
+  memoizedResultFunc: ((resultFuncArgs_0: {
+    selectedItemsMap: Map<string, true>;
+  }, resultFuncArgs_1: string) => boolean) & {
+    clearCache: () => void;
+    resultsCount: () => number;
+    resetResultsCount: () => void;
+  };
+  lastResult: () => boolean;
+  dependencies: [TreeViewRootSelector<UseTreeViewSelectionSignature>, (_: any, itemId: string) => string];
+  recomputations: () => number;
+  resetRecomputations: () => void;
+  dependencyRecomputations: () => number;
+  resetDependencyRecomputations: () => void;
+} & {
+  argsMemoize: typeof import("reselect").weakMapMemoize;
+  memoize: typeof import("reselect").weakMapMemoize;
+};

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import type { DefaultizedProps } from '@mui/x-internals/types';
+import type { TreeViewPluginSignature } from '../../models';
+import { UseTreeViewItemsSignature } from "../useTreeViewItems/index.js";
+import { UseTreeViewExpansionSignature } from "../useTreeViewExpansion/index.js";
+import { TreeViewSelectionPropagation, TreeViewCancellableEventHandler } from "../../../models/index.js";
+export interface UseTreeViewSelectionPublicAPI {
+  /**
+   * Select or deselect an item.
+   * @param {object} params The params of the method.
+   * @param {React.SyntheticEvent} params.event The DOM event that triggered the change.
+   * @param {string} params.itemId The id of the item to select or deselect.
+   * @param {boolean} params.keepExistingSelection If `true`, the other already selected items will remain selected, otherwise, they will be deselected. This parameter is only relevant when `multiSelect` is `true`
+   * @param {boolean | undefined} params.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's new selection status will be the opposite of its current one.
+   */
+  selectItem: (params: {
+    event: React.SyntheticEvent;
+    itemId: string;
+    keepExistingSelection?: boolean;
+    shouldBeSelected?: boolean;
+  }) => void;
+}
+export interface UseTreeViewSelectionInstance extends UseTreeViewSelectionPublicAPI {
+  /**
+   * Select all the navigable items in the tree.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   */
+  selectAllNavigableItems: (event: React.SyntheticEvent) => void;
+  /**
+   * Expand the current selection range up to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the item to expand the selection to.
+   */
+  expandSelectionRange: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the first navigable item to the given item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the item up to which the selection range should be expanded.
+   */
+  selectRangeFromStartToItem: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Expand the current selection range from the given item to the last navigable item.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {string} itemId The id of the item from which the selection range should be expanded.
+   */
+  selectRangeFromItemToEnd: (event: React.SyntheticEvent, itemId: string) => void;
+  /**
+   * Update the selection when navigating with ArrowUp / ArrowDown keys.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {string} currentItemId The id of the active item before the keyboard navigation.
+   * @param {string} nextItemId The id of the active item after the keyboard navigation.
+   */
+  selectItemFromArrowNavigation: (event: React.SyntheticEvent, currentItemId: string, nextItemId: string) => void;
+}
+type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? string[] : string | null;
+export interface UseTreeViewSelectionParameters<Multiple extends boolean | undefined> {
+  /**
+   * If `true` selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Selected item ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelectedItems?: TreeViewSelectionValue<Multiple>;
+  /**
+   * Selected item ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selectedItems?: TreeViewSelectionValue<Multiple>;
+  /**
+   * If `true`, `ctrl` and `shift` will trigger multiselect.
+   * @default false
+   */
+  multiSelect?: Multiple;
+  /**
+   * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it.
+   * @default false
+   */
+  checkboxSelection?: boolean;
+  /**
+   * When `selectionPropagation.descendants` is set to `true`.
+   *
+   * - Selecting a parent selects all its descendants automatically.
+   * - Deselecting a parent deselects all its descendants automatically.
+   *
+   * When `selectionPropagation.parents` is set to `true`.
+   *
+   * - Selecting all the descendants of a parent selects the parent automatically.
+   * - Deselecting a descendant of a selected parent deselects the parent automatically.
+   *
+   * Only works when `multiSelect` is `true`.
+   * On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)
+   *
+   * @default { parents: false, descendants: false }
+   */
+  selectionPropagation?: TreeViewSelectionPropagation;
+  /**
+   * Callback fired when Tree Items are selected/deselected.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {string[] | string} itemIds The ids of the selected items.
+   * When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
+   */
+  onSelectedItemsChange?: (event: React.SyntheticEvent, itemIds: TreeViewSelectionValue<Multiple>) => void;
+  /**
+   * Callback fired when a Tree Item is selected or deselected.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change.
+   * @param {array} itemId The itemId of the modified item.
+   * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   */
+  onItemSelectionToggle?: (event: React.SyntheticEvent, itemId: string, isSelected: boolean) => void;
+}
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
+export interface UseTreeViewSelectionState {
+  selection: {
+    selectedItemsMap: Map<string, true>;
+  };
+}
+interface UseTreeViewSelectionContextValue {
+  selection: Pick<UseTreeViewSelectionDefaultizedParameters<boolean>, 'multiSelect' | 'checkboxSelection' | 'disableSelection' | 'selectionPropagation'>;
+}
+export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
+  params: UseTreeViewSelectionParameters<any>;
+  defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
+  instance: UseTreeViewSelectionInstance;
+  publicAPI: UseTreeViewSelectionPublicAPI;
+  contextValue: UseTreeViewSelectionContextValue;
+  modelNames: 'selectedItems';
+  state: UseTreeViewSelectionState;
+  dependencies: [UseTreeViewItemsSignature, UseTreeViewExpansionSignature, UseTreeViewItemsSignature];
+}>;
+export interface UseTreeItemCheckboxSlotPropsFromSelection {
+  visible?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  tabIndex?: -1;
+  onChange?: TreeViewCancellableEventHandler<React.ChangeEvent<HTMLInputElement>>;
+}
+declare module '@mui/x-tree-view/useTreeItem' {
+  interface UseTreeItemCheckboxSlotOwnProps extends UseTreeItemCheckboxSlotPropsFromSelection {}
+}
+export {};

package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts

@@ -0,0 +1,38 @@
+import { TreeViewItemId, TreeViewSelectionPropagation } from "../../../models/index.js";
+import { TreeViewUsedStore } from "../../models/index.js";
+import { UseTreeViewSelectionSignature } from "./useTreeViewSelection.types.js";
+/**
+ * Transform the `selectedItems` model to be an array if it was a string or null.
+ * @param {string[] | string | null} model The raw model.
+ * @returns {string[]} The converted model.
+ */
+export declare const convertSelectedItemsToArray: (model: string[] | string | null) => string[];
+export declare const createSelectedItemsMap: (selectedItems: string | string[] | null) => Map<string, true>;
+export declare const getLookupFromArray: (array: string[]) => {
+  [itemId: string]: true;
+};
+export declare const getAddedAndRemovedItems: ({
+  store,
+  oldModel,
+  newModel
+}: {
+  store: TreeViewUsedStore<UseTreeViewSelectionSignature>;
+  oldModel: TreeViewItemId[];
+  newModel: TreeViewItemId[];
+}) => {
+  added: string[];
+  removed: string[];
+};
+export declare const propagateSelection: ({
+  store,
+  selectionPropagation,
+  newModel,
+  oldModel,
+  additionalItemsToPropagate
+}: {
+  store: TreeViewUsedStore<UseTreeViewSelectionSignature>;
+  selectionPropagation: TreeViewSelectionPropagation;
+  newModel: TreeViewItemId[];
+  oldModel: TreeViewItemId[];
+  additionalItemsToPropagate?: TreeViewItemId[];
+}) => string[];

package/modern/internals/useTreeView/extractPluginParamsFromProps.d.ts

@@ -0,0 +1,22 @@
+import { ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewAnyPluginSignature, TreeViewPluginSignature } from "../models/index.js";
+import { UseTreeViewBaseProps } from "./useTreeView.types.js";
+import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+interface ExtractPluginParamsFromPropsParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
+  plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
+  props: TProps;
+}
+interface ExtractPluginParamsFromPropsReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> extends UseTreeViewBaseProps<TSignatures> {
+  pluginParams: MergeSignaturesProperty<TSignatures, 'defaultizedParams'>;
+  forwardedProps: Omit<TProps, keyof MergeSignaturesProperty<TSignatures, 'params'>>;
+}
+export declare const extractPluginParamsFromProps: <TSignatures extends readonly TreeViewPluginSignature<any>[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({
+  props: {
+    slots,
+    slotProps,
+    apiRef,
+    experimentalFeatures: inExperimentalFeatures,
+    ...props
+  },
+  plugins
+}: ExtractPluginParamsFromPropsParameters<TSignatures, TProps>) => ExtractPluginParamsFromPropsReturnValue<TSignatures, TProps>;
+export {};

package/modern/internals/useTreeView/index.d.ts

@@ -0,0 +1 @@
+export { useTreeView } from "./useTreeView.js";