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

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

@@ -0,0 +1,145 @@
+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} parameters The parameters of the method.
+   * @param {string} parameters.itemId The id of the item to select or deselect.
+   * @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
+   * @param {boolean} parameters.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} parameters.shouldBeSelected If `true` the item will be selected. If `false` the item will be deselected. If not defined, the item's selection status will be toggled.
+   */
+  setItemSelection: (parameters: {
+    itemId: string;
+    event?: React.SyntheticEvent;
+    shouldBeSelected?: boolean;
+    keepExistingSelection?: 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. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
+   * @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 | null, 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. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
+   * @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 | null, itemId: string, isSelected: boolean) => void;
+}
+export type UseTreeViewSelectionDefaultizedParameters<Multiple extends boolean> = DefaultizedProps<UseTreeViewSelectionParameters<Multiple>, 'disableSelection' | 'defaultSelectedItems' | 'multiSelect' | 'checkboxSelection' | 'selectionPropagation'>;
+export interface UseTreeViewSelectionState {
+  selection: {
+    rawSelectedItems: TreeViewSelectionValue<boolean>;
+    selectedItemsMap: Map<string, true>;
+    isEnabled: boolean;
+    isMultiSelectEnabled: boolean;
+    isCheckboxSelectionEnabled: boolean;
+    selectionPropagation: TreeViewSelectionPropagation;
+  };
+}
+export type UseTreeViewSelectionSignature = TreeViewPluginSignature<{
+  params: UseTreeViewSelectionParameters<any>;
+  defaultizedParams: UseTreeViewSelectionDefaultizedParameters<any>;
+  instance: UseTreeViewSelectionInstance;
+  publicAPI: UseTreeViewSelectionPublicAPI;
+  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";

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { TreeViewAnyPluginSignature } from "../models/index.js";
+import { UseTreeViewBaseProps, UseTreeViewParameters, UseTreeViewReturnValue } from "./useTreeView.types.js";
+export declare function useTreeViewApiInitialization<T>(inputApiRef: React.RefObject<T | undefined> | undefined): T;
+export declare const useTreeView: <TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>>({
+  plugins: inPlugins,
+  rootRef,
+  props
+}: UseTreeViewParameters<TSignatures, TProps>) => UseTreeViewReturnValue<TSignatures>;

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { EventHandlers } from '@mui/utils/types';
+import type { TreeViewContextValue } from '../TreeViewProvider';
+import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewExperimentalFeatures } from "../models/index.js";
+export interface UseTreeViewParameters<TSignatures extends readonly TreeViewAnyPluginSignature[], TProps extends Partial<UseTreeViewBaseProps<TSignatures>>> {
+  plugins: ConvertSignaturesIntoPlugins<TSignatures>;
+  rootRef?: React.Ref<HTMLUListElement> | undefined;
+  props: TProps;
+}
+export interface UseTreeViewBaseProps<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  apiRef: React.RefObject<TreeViewPublicAPI<TSignatures> | undefined> | undefined;
+  slots: MergeSignaturesProperty<TSignatures, 'slots'>;
+  slotProps: MergeSignaturesProperty<TSignatures, 'slotProps'>;
+  experimentalFeatures: TreeViewExperimentalFeatures<TSignatures>;
+}
+export interface UseTreeViewRootSlotProps extends Pick<React.HTMLAttributes<HTMLUListElement>, 'onFocus' | 'onBlur' | 'onKeyDown' | 'id' | 'aria-multiselectable' | 'role' | 'tabIndex'> {
+  ref: React.Ref<HTMLUListElement>;
+}
+export interface UseTreeViewReturnValue<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  getRootProps: <TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseTreeViewRootSlotProps;
+  rootRef: React.RefCallback<HTMLUListElement> | null;
+  contextValue: TreeViewContextValue<TSignatures>;
+}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { TreeViewContextValue } from "../TreeViewProvider/index.js";
+import { ConvertSignaturesIntoPlugins, TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPublicAPI } from "../models/index.js";
+import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+import { TreeViewStore } from "../utils/TreeViewStore.js";
+export declare const useTreeViewBuildContext: <TSignatures extends readonly TreeViewAnyPluginSignature[]>({
+  plugins,
+  instance,
+  publicAPI,
+  store,
+  rootRef
+}: {
+  plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>;
+  instance: TreeViewInstance<TSignatures>;
+  publicAPI: TreeViewPublicAPI<TSignatures>;
+  store: TreeViewStore<TSignatures>;
+  rootRef: React.RefObject<HTMLUListElement | null>;
+}) => TreeViewContextValue<TSignatures>;

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

@@ -0,0 +1,7 @@
+import { TreeViewAnyPluginSignature, ConvertSignaturesIntoPlugins, MergeSignaturesProperty } from "../models/index.js";
+import { TreeViewCorePluginSignatures } from "../corePlugins/index.js";
+/**
+ * Implements the same behavior as `useControlled` but for several models.
+ * The controlled models are never stored in the state, and the state is only updated if the model is not controlled.
+ */
+export declare const useTreeViewModels: <TSignatures extends readonly TreeViewAnyPluginSignature[]>(plugins: ConvertSignaturesIntoPlugins<readonly [...TreeViewCorePluginSignatures, ...TSignatures]>, props: MergeSignaturesProperty<TSignatures, "defaultizedParams">) => MergeSignaturesProperty<TSignatures, "models">;

package/modern/internals/utils/TreeViewStore.d.ts

@@ -0,0 +1,12 @@
+import type { TreeViewAnyPluginSignature, TreeViewState } from '../models';
+type Listener<T> = (value: T) => void;
+export type StoreUpdater<TSignatures extends readonly TreeViewAnyPluginSignature[]> = (prevState: TreeViewState<TSignatures>) => TreeViewState<TSignatures>;
+export declare class TreeViewStore<TSignatures extends readonly TreeViewAnyPluginSignature[]> {
+  value: TreeViewState<TSignatures>;
+  private listeners;
+  constructor(value: TreeViewState<TSignatures>);
+  subscribe: (fn: Listener<TreeViewState<TSignatures>>) => () => void;
+  getSnapshot: () => TreeViewState<TSignatures>;
+  update: (updater: StoreUpdater<TSignatures>) => void;
+}
+export {};

package/modern/internals/utils/cleanupTracking/CleanupTracking.d.ts

@@ -0,0 +1,9 @@
+export type UnregisterToken = {
+  cleanupToken: number;
+};
+export type UnsubscribeFn = () => void;
+export interface CleanupTracking {
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

package/modern/internals/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.d.ts

@@ -0,0 +1,7 @@
+import { CleanupTracking, UnsubscribeFn, UnregisterToken } from "./CleanupTracking.js";
+export declare class FinalizationRegistryBasedCleanupTracking implements CleanupTracking {
+  registry: FinalizationRegistry<UnsubscribeFn>;
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

package/modern/internals/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -0,0 +1,9 @@
+import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
+export declare class TimerBasedCleanupTracking implements CleanupTracking {
+  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  cleanupTimeout: number;
+  constructor(timeout?: number);
+  register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;
+  unregister(unregisterToken: UnregisterToken): void;
+  reset(): void;
+}

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

@@ -0,0 +1,2 @@
+import { TreeViewAnyPluginSignature, TreeViewInstance, TreeViewPlugin } from "../models/index.js";
+export declare const hasPlugin: <TSignature extends TreeViewAnyPluginSignature, TInstance extends TreeViewInstance<[], [TSignature]>>(instance: TInstance, plugin: TreeViewPlugin<TSignature>) => instance is Omit<TInstance, keyof TSignature["instance"]> & TSignature["instance"];

package/modern/internals/utils/publishTreeViewEvent.d.ts

@@ -0,0 +1,5 @@
+import { UseTreeViewInstanceEventsInstance } from "../corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.types.js";
+import { TreeViewAnyPluginSignature, TreeViewUsedEvents } from "../models/index.js";
+export declare const publishTreeViewEvent: <Instance extends UseTreeViewInstanceEventsInstance & {
+  $$signature: TreeViewAnyPluginSignature;
+}, E extends keyof TreeViewUsedEvents<Instance["$$signature"]>>(instance: Instance, eventName: E, params: TreeViewUsedEvents<Instance["$$signature"]>[E]["params"]) => void;

package/modern/internals/utils/selectors.d.ts

@@ -0,0 +1,16 @@
+import { CreateSelectorFunction } from 'reselect';
+import { TreeViewAnyPluginSignature, TreeViewState } from "../models/index.js";
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
+ */
+export type TreeViewRootSelector<TSignature extends TreeViewAnyPluginSignature, IsOptional extends boolean = false> = <TSignatures extends [TSignature]>(state: TreeViewState<TSignatures>) => IsOptional extends true ? TSignature['state'][keyof TSignature['state']] | undefined : TSignature['state'][keyof TSignature['state']];
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
+ */
+export type TreeViewRootSelectorForOptionalPlugin<TSignature extends TreeViewAnyPluginSignature> = <TSignatures extends [], TOptionalSignatures extends [TSignature]>(state: TreeViewState<TSignatures, TOptionalSignatures>) => TSignature['state'][keyof TSignature['state']] | undefined;
+export type TreeViewSelector<TState, TArgs, TResult> = (state: TState, args: TArgs) => TResult;
+/**
+ * Method wrapping reselect's createSelector to provide caching for tree view instances.
+ *
+ */
+export declare const createSelector: CreateSelectorFunction;

package/modern/internals/utils/selectors.js

@@ -7,6 +7,15 @@ const reselectCreateSelector = createSelectorCreator({
   }
 });
 const cache = new WeakMap();
+
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on a required plugin.
+ */
+
+/**
+ * Type of a selector that take the whole tree view state as input and returns a value based on an optional plugin.
+ */
+
 /**
  * Method wrapping reselect's createSelector to provide caching for tree view instances.
  *

package/modern/internals/utils/tree.d.ts

@@ -0,0 +1,32 @@
+import { TreeViewState } from "../models/index.js";
+import type { UseTreeViewExpansionSignature } from '../plugins/useTreeViewExpansion';
+import type { UseTreeViewItemsSignature } from '../plugins/useTreeViewItems';
+export declare const getPreviousNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getNextNavigableItem: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemId: string) => string | null;
+export declare const getLastNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+export declare const getFirstNavigableItem: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>) => string;
+/**
+ * This is used to determine the start and end of a selection range so
+ * we can get the items between the two border items.
+ *
+ * It finds the items' common ancestor using
+ * a naive implementation of a lowest common ancestor algorithm
+ * (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
+ * Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
+ * so we can compare their indexes to work out which item comes first in a depth first search.
+ * (https://en.wikipedia.org/wiki/Depth-first_search)
+ *
+ * Another way to put it is which item is shallower in a trémaux tree
+ * https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
+ */
+export declare const findOrderInTremauxTree: (state: TreeViewState<[UseTreeViewExpansionSignature, UseTreeViewItemsSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getNonDisabledItemsInRange: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>, itemAId: string, itemBId: string) => string[];
+export declare const getAllNavigableItems: (state: TreeViewState<[UseTreeViewItemsSignature, UseTreeViewExpansionSignature]>) => string[];
+/**
+ * Checks if the target is in a descendant of this item.
+ * This can prevent from firing some logic on the ancestors on the interacted item when the event handler is on the root.
+ * @param {HTMLElement} target The target to check
+ * @param {HTMLElement | null} itemRoot The root of the item to check if the event target is in its descendants
+ * @returns {boolean} Whether the target is in a descendant of this item
+ */
+export declare const isTargetInDescendants: (target: HTMLElement, itemRoot: HTMLElement | null) => boolean;

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

@@ -0,0 +1,2 @@
+export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
+export declare function escapeOperandAttributeSelector(operand: string): string;

package/modern/internals/zero-styled/index.d.ts

@@ -0,0 +1,3 @@
+import { useThemeProps } from '@mui/material/styles';
+export { styled } from '@mui/material/styles';
+export declare function createUseThemeProps(name: string): typeof useThemeProps;

package/modern/models/events.d.ts

@@ -0,0 +1,4 @@
+export type TreeViewCancellableEvent = {
+  defaultMuiPrevented?: boolean;
+};
+export type TreeViewCancellableEventHandler<Event> = (event: Event & TreeViewCancellableEvent) => void;

package/modern/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./items.js";
+export * from "./events.js";
+export type { PropsFromSlot } from '@mui/x-internals/slots';

package/modern/models/items.d.ts

@@ -0,0 +1,13 @@
+export type TreeViewItemId = string;
+export type TreeViewDefaultItemModelProperties = {
+  id: string;
+  label: string;
+};
+export type TreeViewBaseItem<R extends {} = TreeViewDefaultItemModelProperties> = R & {
+  children?: TreeViewBaseItem<R>[];
+};
+export type TreeViewItemsReorderingAction = 'reorder-above' | 'reorder-below' | 'make-child' | 'move-to-parent';
+export interface TreeViewSelectionPropagation {
+  descendants?: boolean;
+  parents?: boolean;
+}

package/modern/package.json

@@ -0,0 +1 @@
+{"type":"module","sideEffects":false}

package/modern/themeAugmentation/components.d.ts

@@ -0,0 +1,21 @@
+import { ComponentsProps, ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
+export interface TreeViewComponents<Theme = unknown> {
+  MuiSimpleTreeView?: {
+    defaultProps?: ComponentsProps['MuiSimpleTreeView'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiSimpleTreeView'];
+    variants?: ComponentsVariants<Theme>['MuiSimpleTreeView'];
+  };
+  MuiRichTreeView?: {
+    defaultProps?: ComponentsProps['MuiRichTreeView'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiRichTreeView'];
+    variants?: ComponentsVariants<Theme>['MuiRichTreeView'];
+  };
+  MuiTreeItem?: {
+    defaultProps?: ComponentsProps['MuiTreeItem'];
+    styleOverrides?: ComponentsOverrides<Theme>['MuiTreeItem'];
+    variants?: ComponentsVariants<Theme>['MuiTreeItem'];
+  };
+}
+declare module '@mui/material/styles' {
+  interface Components<Theme = unknown> extends TreeViewComponents<Theme> {}
+}

package/modern/themeAugmentation/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

package/modern/themeAugmentation/overrides.d.ts

@@ -0,0 +1,16 @@
+import { RichTreeViewClassKey } from "../RichTreeView/index.js";
+import { SimpleTreeViewClassKey } from "../SimpleTreeView/index.js";
+import { TreeItemClassKey } from "../TreeItem/index.js";
+
+// prettier-ignore
+export interface TreeViewComponentNameToClassKey {
+  MuiSimpleTreeView: SimpleTreeViewClassKey;
+  MuiRichTreeView: RichTreeViewClassKey;
+  MuiTreeItem: TreeItemClassKey;
+}
+declare module '@mui/material/styles' {
+  interface ComponentNameToClassKey extends TreeViewComponentNameToClassKey {}
+}
+
+// disable automatic export
+export {};

package/modern/themeAugmentation/props.d.ts

@@ -0,0 +1,14 @@
+import { SimpleTreeViewProps } from "../SimpleTreeView/index.js";
+import { RichTreeViewProps } from "../RichTreeView/index.js";
+import { TreeItemProps } from "../TreeItem/index.js";
+export interface TreeViewComponentsPropsList {
+  MuiSimpleTreeView: SimpleTreeViewProps<any>;
+  MuiRichTreeView: RichTreeViewProps<any, any>;
+  MuiTreeItem: TreeItemProps;
+}
+declare module '@mui/material/styles' {
+  interface ComponentsPropsList extends TreeViewComponentsPropsList {}
+}
+
+// disable automatic export
+export {};

package/modern/useTreeItem/index.d.ts

@@ -0,0 +1,2 @@
+export { useTreeItem } from "./useTreeItem.js";
+export type { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemStatus, UseTreeItemRootSlotOwnProps, UseTreeItemContentSlotOwnProps, UseTreeItemLabelInputSlotOwnProps, UseTreeItemLabelSlotOwnProps, UseTreeItemCheckboxSlotOwnProps, UseTreeItemIconContainerSlotOwnProps, UseTreeItemGroupTransitionSlotOwnProps, UseTreeItemDragAndDropOverlaySlotOwnProps } from './useTreeItem.types';

package/modern/useTreeItem/useTreeItem.d.ts

@@ -0,0 +1,2 @@
+import { UseTreeItemParameters, UseTreeItemReturnValue, UseTreeItemMinimalPlugins, UseTreeItemOptionalPlugins } from "./useTreeItem.types.js";
+export declare const useTreeItem: <TSignatures extends UseTreeItemMinimalPlugins = UseTreeItemMinimalPlugins, TOptionalSignatures extends UseTreeItemOptionalPlugins = UseTreeItemOptionalPlugins>(parameters: UseTreeItemParameters) => UseTreeItemReturnValue<TSignatures, TOptionalSignatures>;

package/modern/useTreeItem/useTreeItem.js

@@ -14,17 +14,10 @@ import { generateTreeItemIdAttribute } from "../internals/corePlugins/useTreeVie
 import { selectorCanItemBeFocused } from "../internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js";
 import { selectorTreeViewId } from "../internals/corePlugins/useTreeViewId/useTreeViewId.selectors.js";
 import { selectorItemExpansionTrigger } from "../internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
+import { selectorIsCheckboxSelectionEnabled, selectorIsItemSelectionEnabled } from "../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
 export const useTreeItem = parameters => {
   const {
     runItemPlugins,
-    items: {
-      onItemClick
-    },
-    selection: {
-      disableSelection,
-      checkboxSelection
-    },
-    label: labelContext,
     instance,
     publicAPI,
     store
@@ -61,6 +54,8 @@ export const useTreeItem = parameters => {
   const handleContentRef = useForkRef(contentRef, contentRefObject);
   const checkboxRef = React.useRef(null);
   const treeId = useSelector(store, selectorTreeViewId);
+  const isSelectionEnabledForItem = useSelector(store, selectorIsItemSelectionEnabled, itemId);
+  const isCheckboxSelectionEnabled = useSelector(store, selectorIsCheckboxSelectionEnabled);
   const idAttribute = generateTreeItemIdAttribute({
     itemId,
     treeId,
@@ -70,8 +65,7 @@ export const useTreeItem = parameters => {
   const sharedPropsEnhancerParams = {
     rootRefObject,
     contentRefObject,
-    interactions,
-    status
+    interactions
   };
   const createRootHandleFocus = otherHandlers => event => {
     otherHandlers.onFocus?.(event);
@@ -116,14 +110,14 @@ export const useTreeItem = parameters => {
   };
   const createContentHandleClick = otherHandlers => event => {
     otherHandlers.onClick?.(event);
-    onItemClick(event, itemId);
+    instance.handleItemClick(event, itemId);
     if (event.defaultMuiPrevented || checkboxRef.current?.contains(event.target)) {
       return;
     }
     if (selectorItemExpansionTrigger(store.value) === 'content') {
       interactions.handleExpansion(event);
     }
-    if (!checkboxSelection) {
+    if (!isCheckboxSelectionEnabled) {
       interactions.handleSelection(event);
     }
   };
@@ -159,7 +153,7 @@ export const useTreeItem = parameters => {
     if (status.selected) {
       // - each selected node has aria-selected set to true.
       ariaSelected = true;
-    } else if (disableSelection || status.disabled) {
+    } else if (!isSelectionEnabledForItem) {
       // - if the tree contains nodes that are not selectable, aria-selected is not present on those nodes.
       ariaSelected = undefined;
     } else {
@@ -217,10 +211,10 @@ export const useTreeItem = parameters => {
     }, externalProps, {
       onDoubleClick: createLabelHandleDoubleClick(externalEventHandlers)
     });
-    if (labelContext?.isItemEditable) {
-      props.editable = status.editable;
-    }
-    return props;
+    const enhancedLabelProps = propsEnhancers.label?.(_extends({}, sharedPropsEnhancerParams, {
+      externalEventHandlers
+    })) ?? {};
+    return _extends({}, enhancedLabelProps, props);
   };
   const getLabelInputProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
@@ -235,6 +229,17 @@ export const useTreeItem = parameters => {
       onClick: createIconContainerHandleClick(externalEventHandlers)
     });
   };
+  const getErrorContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({}, externalEventHandlers, externalProps);
+  };
+  const getLoadingContainerProps = (externalProps = {}) => {
+    const externalEventHandlers = extractEventHandlers(externalProps);
+    return _extends({
+      size: '12px',
+      thickness: 6
+    }, externalEventHandlers, externalProps);
+  };
   const getGroupTransitionProps = (externalProps = {}) => {
     const externalEventHandlers = extractEventHandlers(externalProps);
     const response = _extends({}, externalEventHandlers, {
@@ -263,6 +268,8 @@ export const useTreeItem = parameters => {
     getLabelProps,
     getLabelInputProps,
     getDragAndDropOverlayProps,
+    getErrorContainerProps,
+    getLoadingContainerProps,
     rootRef: handleRootRef,
     status,
     publicAPI