@mui/x-tree-view 8.22.0 → 8.24.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-tree-view v8.22.0
+ * @mui/x-tree-view v8.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -10,19 +10,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  unstable_resetCleanupTracking: true
-};
-Object.defineProperty(exports, "unstable_resetCleanupTracking", {
-  enumerable: true,
-  get: function () {
-    return _useInstanceEventHandler.unstable_resetCleanupTracking;
-  }
-});
 var _SimpleTreeView = require("./SimpleTreeView");
 Object.keys(_SimpleTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SimpleTreeView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -34,7 +24,6 @@ Object.keys(_SimpleTreeView).forEach(function (key) {
 var _RichTreeView = require("./RichTreeView");
 Object.keys(_RichTreeView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RichTreeView[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -46,7 +35,6 @@ Object.keys(_RichTreeView).forEach(function (key) {
 var _TreeItem = require("./TreeItem");
 Object.keys(_TreeItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -58,7 +46,6 @@ Object.keys(_TreeItem).forEach(function (key) {
 var _useTreeItem = require("./useTreeItem");
 Object.keys(_useTreeItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useTreeItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -70,7 +57,6 @@ Object.keys(_useTreeItem).forEach(function (key) {
 var _TreeItemIcon = require("./TreeItemIcon");
 Object.keys(_TreeItemIcon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemIcon[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -82,7 +68,6 @@ Object.keys(_TreeItemIcon).forEach(function (key) {
 var _TreeItemProvider = require("./TreeItemProvider");
 Object.keys(_TreeItemProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,7 +79,6 @@ Object.keys(_TreeItemProvider).forEach(function (key) {
 var _TreeItemDragAndDropOverlay = require("./TreeItemDragAndDropOverlay");
 Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemDragAndDropOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -106,7 +90,6 @@ Object.keys(_TreeItemDragAndDropOverlay).forEach(function (key) {
 var _TreeItemLabelInput = require("./TreeItemLabelInput");
 Object.keys(_TreeItemLabelInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _TreeItemLabelInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -115,11 +98,9 @@ Object.keys(_TreeItemLabelInput).forEach(function (key) {
     }
   });
 });
-var _useInstanceEventHandler = require("./internals/hooks/useInstanceEventHandler");
 var _models = require("./models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _models[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -131,7 +112,6 @@ Object.keys(_models).forEach(function (key) {
 var _icons = require("./icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _icons[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -143,7 +123,6 @@ Object.keys(_icons).forEach(function (key) {
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.d.ts

@@ -0,0 +1,90 @@
+import { Store } from '@mui/x-internals/store';
+import { MinimalTreeViewParameters, TreeViewParametersToStateMapper, MinimalTreeViewState } from "./MinimalTreeViewStore.types.js";
+import { TreeViewValidItem } from "../../models/index.js";
+import { TimeoutManager } from "./TimeoutManager.js";
+import { TreeViewKeyboardNavigationPlugin } from "../plugins/keyboardNavigation/index.js";
+import { TreeViewFocusPlugin } from "../plugins/focus/TreeViewFocusPlugin.js";
+import { TreeViewItemsPlugin } from "../plugins/items/TreeViewItemsPlugin.js";
+import { TreeViewSelectionPlugin } from "../plugins/selection/TreeViewSelectionPlugin.js";
+import { TreeViewExpansionPlugin } from "../plugins/expansion/index.js";
+import { TreeViewItemPluginManager } from "./TreeViewItemPluginManager.js";
+import { TreeViewEventEvent, TreeViewEventListener, TreeViewEventParameters, TreeViewEvents } from "../models/index.js";
+export declare class MinimalTreeViewStore<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined, State extends MinimalTreeViewState<R, Multiple> = MinimalTreeViewState<R, Multiple>, Parameters extends MinimalTreeViewParameters<R, Multiple> = MinimalTreeViewParameters<R, Multiple>> extends Store<State> {
+  private initialParameters;
+  private mapper;
+  private eventManager;
+  instanceName: string;
+  parameters: Parameters;
+  timeoutManager: TimeoutManager;
+  itemPluginManager: TreeViewItemPluginManager<this>;
+  items: TreeViewItemsPlugin<R>;
+  focus: TreeViewFocusPlugin;
+  expansion: TreeViewExpansionPlugin;
+  selection: TreeViewSelectionPlugin<Multiple>;
+  keyboardNavigation: TreeViewKeyboardNavigationPlugin;
+  constructor(parameters: Parameters, instanceName: string, mapper: TreeViewParametersToStateMapper<R, Multiple, State, Parameters>);
+  /**
+   * Builds an object containing the method that should be exposed publicly by the Tree View components.
+   */
+  buildPublicAPI(): {
+    setItemSelection: ({
+      itemId,
+      event,
+      keepExistingSelection,
+      shouldBeSelected
+    }: {
+      itemId: string;
+      event?: React.SyntheticEvent | null;
+      shouldBeSelected?: boolean;
+      keepExistingSelection?: boolean;
+    }) => void;
+    isItemExpanded: (itemId: import("../../index.js").TreeViewItemId) => boolean;
+    setItemExpansion: ({
+      itemId,
+      event,
+      shouldBeExpanded
+    }: {
+      itemId: import("../../index.js").TreeViewItemId;
+      event?: React.SyntheticEvent | null;
+      shouldBeExpanded?: boolean;
+    }) => void;
+    focusItem: (event: React.SyntheticEvent | null, itemId: import("../../index.js").TreeViewItemId) => void;
+    getItem: (itemId: import("../../index.js").TreeViewItemId) => R;
+    getItemDOMElement: (itemId: import("../../index.js").TreeViewItemId) => HTMLElement | null;
+    getItemOrderedChildrenIds: (itemId: import("../../index.js").TreeViewItemId | null) => import("../../index.js").TreeViewItemId[];
+    getItemTree: () => R[];
+    getParentId: (itemId: import("../../index.js").TreeViewItemId) => import("../../index.js").TreeViewItemId | null;
+    setIsItemDisabled: ({
+      itemId,
+      shouldBeDisabled
+    }: {
+      itemId: import("../../index.js").TreeViewItemId;
+      shouldBeDisabled?: boolean;
+    }) => void;
+  };
+  /**
+   * Updates the state of the Tree View based on the new parameters provided to the root component.
+   */
+  updateStateFromParameters(parameters: Parameters): void;
+  /**
+   * Returns a cleanup function that need to be called when the store is destroyed.
+   */
+  disposeEffect: () => () => void;
+  /**
+   * Whether updates based on `props.items` change should be ignored.
+   */
+  shouldIgnoreItemsStateUpdate: () => boolean;
+  /**
+   * Registers an effect to be run when the value returned by the selector changes.
+   */
+  registerStoreEffect: <Value>(selector: (state: State) => Value, effect: (previous: Value, next: Value) => void) => void;
+  /**
+   * Publishes an event to all its subscribers.
+   */
+  publishEvent: <E extends TreeViewEvents>(name: E, params: TreeViewEventParameters<E>, event: TreeViewEventEvent<E>) => void;
+  /**
+   * Subscribe to an event emitted by the store.
+   * For now, the subscription is only removed when the store is destroyed.
+   */
+  subscribeEvent: <E extends TreeViewEvents>(eventName: E, handler: TreeViewEventListener<E>) => void;
+}

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MinimalTreeViewStore = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _store = require("@mui/x-internals/store");
+var _warning = require("@mui/x-internals/warning");
+var _EventManager = require("@mui/x-internals/EventManager");
+var _MinimalTreeViewStore = require("./MinimalTreeViewStore.utils");
+var _TimeoutManager = require("./TimeoutManager");
+var _keyboardNavigation = require("../plugins/keyboardNavigation");
+var _TreeViewFocusPlugin = require("../plugins/focus/TreeViewFocusPlugin");
+var _TreeViewItemsPlugin = require("../plugins/items/TreeViewItemsPlugin");
+var _TreeViewSelectionPlugin = require("../plugins/selection/TreeViewSelectionPlugin");
+var _expansion = require("../plugins/expansion");
+var _TreeViewItemPluginManager = require("./TreeViewItemPluginManager");
+class MinimalTreeViewStore extends _store.Store {
+  initialParameters = null;
+  eventManager = new _EventManager.EventManager();
+  timeoutManager = new _TimeoutManager.TimeoutManager();
+  itemPluginManager = new _TreeViewItemPluginManager.TreeViewItemPluginManager();
+  constructor(parameters, instanceName, mapper) {
+    const minimalInitialState = (0, _MinimalTreeViewStore.createMinimalInitialState)(parameters);
+    const initialState = mapper.getInitialState(minimalInitialState, parameters);
+    super(initialState);
+    this.parameters = parameters;
+    this.instanceName = instanceName;
+    this.mapper = mapper;
+
+    // We mount the plugins in the constructor to make sure all the methods of the store are available to the plugins during their construction.
+    this.items = new _TreeViewItemsPlugin.TreeViewItemsPlugin(this);
+    this.focus = new _TreeViewFocusPlugin.TreeViewFocusPlugin(this);
+    this.expansion = new _expansion.TreeViewExpansionPlugin(this);
+    this.selection = new _TreeViewSelectionPlugin.TreeViewSelectionPlugin(this);
+    this.keyboardNavigation = new _keyboardNavigation.TreeViewKeyboardNavigationPlugin(this);
+    if (process.env.NODE_ENV !== 'production') {
+      this.initialParameters = parameters;
+    }
+  }
+
+  /**
+   * Builds an object containing the method that should be exposed publicly by the Tree View components.
+   */
+  buildPublicAPI() {
+    return (0, _extends2.default)({}, this.items.buildPublicAPI(), this.focus.buildPublicAPI(), this.expansion.buildPublicAPI(), this.selection.buildPublicAPI());
+  }
+
+  /**
+   * Updates the state of the Tree View based on the new parameters provided to the root component.
+   */
+  updateStateFromParameters(parameters) {
+    const updateModel = (mutableNewState, controlledProp, defaultProp) => {
+      if (parameters[controlledProp] !== undefined) {
+        mutableNewState[controlledProp] = parameters[controlledProp];
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        const defaultValue = parameters[defaultProp];
+        const isControlled = parameters[controlledProp] !== undefined;
+        const initialDefaultValue = this.initialParameters?.[defaultProp];
+        const initialIsControlled = this.initialParameters?.[controlledProp] !== undefined;
+        if (initialIsControlled !== isControlled) {
+          (0, _warning.warnOnce)([`MUI X Tree View: A component is changing the ${initialIsControlled ? '' : 'un'}controlled ${controlledProp} state of ${this.instanceName} to be ${initialIsControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${controlledProp} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'], 'error');
+        } else if (JSON.stringify(initialDefaultValue) !== JSON.stringify(defaultValue)) {
+          (0, _warning.warnOnce)([`MUI X Tree View: A component is changing the default ${controlledProp} state of an uncontrolled ${this.instanceName} after being initialized. `, `To suppress this warning opt to use a controlled ${this.instanceName}.`], 'error');
+        }
+      }
+    };
+    const newMinimalState = (0, _MinimalTreeViewStore.deriveStateFromParameters)(parameters);
+    updateModel(newMinimalState, 'expandedItems', 'defaultExpandedItems');
+    updateModel(newMinimalState, 'selectedItems', 'defaultSelectedItems');
+    if (this.state.providedTreeId !== parameters.id || this.state.treeId === undefined) {
+      newMinimalState.treeId = (0, _MinimalTreeViewStore.createTreeViewDefaultId)();
+    }
+    if (!this.mapper.shouldIgnoreItemsStateUpdate(parameters) && _TreeViewItemsPlugin.TreeViewItemsPlugin.shouldRebuildItemsState(parameters, this.parameters)) {
+      Object.assign(newMinimalState, _TreeViewItemsPlugin.TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters));
+    }
+    const newState = this.mapper.updateStateFromParameters(newMinimalState, parameters, updateModel);
+    this.update(newState);
+    this.parameters = parameters;
+  }
+
+  /**
+   * Returns a cleanup function that need to be called when the store is destroyed.
+   */
+  disposeEffect = () => {
+    return this.timeoutManager.clearAll;
+  };
+
+  /**
+   * Whether updates based on `props.items` change should be ignored.
+   */
+  shouldIgnoreItemsStateUpdate = () => {
+    return this.mapper.shouldIgnoreItemsStateUpdate(this.parameters);
+  };
+
+  /**
+   * Registers an effect to be run when the value returned by the selector changes.
+   */
+  registerStoreEffect = (selector, effect) => {
+    let previousValue = selector(this.state);
+    this.subscribe(state => {
+      const nextValue = selector(state);
+      if (nextValue !== previousValue) {
+        effect(previousValue, nextValue);
+        previousValue = nextValue;
+      }
+    });
+  };
+
+  /**
+   * Publishes an event to all its subscribers.
+   */
+  publishEvent = (name, params, event) => {
+    if (isSyntheticEvent(event) && event.isPropagationStopped()) {
+      return;
+    }
+    this.eventManager.emit(name, params, event);
+  };
+
+  /**
+   * Subscribe to an event emitted by the store.
+   * For now, the subscription is only removed when the store is destroyed.
+   */
+  subscribeEvent = (eventName, handler) => {
+    this.eventManager.on(eventName, handler);
+  };
+}
+exports.MinimalTreeViewStore = MinimalTreeViewStore;
+function isSyntheticEvent(event) {
+  return event.isPropagationStopped !== undefined;
+}

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.types.d.ts

@@ -0,0 +1,272 @@
+import { TreeViewItemId, TreeViewSelectionPropagation, TreeViewValidItem } from "../../models/index.js";
+import { TreeViewItemMeta } from "../models/index.js";
+export interface MinimalTreeViewState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
+  /**
+   * Whether the button should be focusable when disabled.
+   * 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]: R;
+  };
+  /**
+   * Meta data of each item.
+   */
+  itemMetaLookup: {
+    [itemId: string]: TreeViewItemMeta;
+  };
+  /**
+   * Ordered children ids of each item.
+   */
+  itemOrderedChildrenIdsLookup: {
+    [parentItemId: string]: TreeViewItemId[];
+  };
+  /**
+   * Index of each child in the ordered children ids of its parent.
+   */
+  itemChildrenIndexesLookup: {
+    [parentItemId: string]: {
+      [itemId: string]: number;
+    };
+  };
+  /**
+   * When equal to 'flat', the tree is rendered as a flat list (children are rendered as siblings of their parents).
+   * When equal to 'nested', the tree is rendered with nested children (children are rendered inside the groupTransition slot of their children).
+   * Nested DOM structure is not compatible with collapse / expansion animations.
+   */
+  domStructure: 'flat' | 'nested';
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   */
+  itemChildrenIndentation: string | number;
+  /**
+   * The id of the Tree View as provided by the `id` parameter.
+   */
+  providedTreeId: string | undefined;
+  /**
+   * The id of the Tree View used for accessibility attributes.
+   */
+  treeId: string | undefined;
+  /**
+   * The ids of the items currently expanded.
+   */
+  expandedItems: readonly TreeViewItemId[];
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   */
+  expansionTrigger: 'content' | 'iconContainer';
+  /**
+   * The ids of the items currently selected.
+   */
+  selectedItems: TreeViewSelectionReadonlyValue<Multiple>;
+  /**
+   * Whether selection is disabled.
+   */
+  disableSelection: boolean;
+  /**
+   * Whether multi-selection is enabled.
+   */
+  multiSelect: boolean;
+  /**
+   * Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
+   */
+  checkboxSelection: boolean;
+  /**
+   * The selection propagation behavior.
+   */
+  selectionPropagation: TreeViewSelectionPropagation;
+  /**
+   * The id of the currently focused item.
+   */
+  focusedItemId: TreeViewItemId | null;
+}
+export interface MinimalTreeViewParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined> {
+  /**
+   * Whether the layout is right-to-left.
+   */
+  isRtl: boolean;
+  /**
+   * Whether the items should be focusable when disabled.
+   * @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 if a given item should have selection disabled.
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {boolean} `true` if the item should have selection disabled.
+   */
+  isItemSelectionDisabled?: (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 children of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {R[]} The children of the item.
+   * @default (item) => item.children
+   */
+  getItemChildren?: (item: R) => R[] | undefined;
+  /**
+   * Used to determine the id of a given item.
+   *
+   * @template R
+   * @param {R} item The item to check.
+   * @returns {TreeViewItemId} 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 {TreeViewItemId} itemId The id of the focused item.
+   */
+  onItemClick?: (event: React.MouseEvent, itemId: TreeViewItemId) => void;
+  /**
+   * Horizontal indentation between an item and its children.
+   * Examples: 24, "24px", "2rem", "2em".
+   * @default 12px
+   */
+  itemChildrenIndentation?: string | number;
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id?: string;
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is controlled.
+   */
+  expandedItems?: readonly TreeViewItemId[];
+  /**
+   * Expanded item ids.
+   * Used when the item's expansion is not controlled.
+   * @default []
+   */
+  defaultExpandedItems?: readonly TreeViewItemId[];
+  /**
+   * Callback fired when Tree Items are expanded/collapsed.
+   * @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
+   * @param {TreeViewItemId[]} itemIds The ids of the expanded items.
+   */
+  onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: TreeViewItemId[]) => void;
+  /**
+   * Callback fired when a Tree Item is expanded or collapsed.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
+   * @param {TreeViewItemId} itemId The itemId of the modified item.
+   * @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
+   */
+  onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isExpanded: boolean) => void;
+  /**
+   * The slot that triggers the item's expansion when clicked.
+   * @default 'content'
+   */
+  expansionTrigger?: 'content' | 'iconContainer';
+  /**
+   * Whether selection is disabled.
+   * @default false
+   */
+  disableSelection?: boolean;
+  /**
+   * Selected item ids. (Controlled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   */
+  selectedItems?: TreeViewSelectionReadonlyValue<Multiple>;
+  /**
+   * Selected item ids. (Uncontrolled)
+   * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+   * @default []
+   */
+  defaultSelectedItems?: TreeViewSelectionReadonlyValue<Multiple>;
+  /**
+   * Whether multiple items can be selected.
+   * @default false
+   */
+  multiSelect?: Multiple;
+  /**
+   * Whether 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 {TreeViewItemId[] | TreeViewItemId} 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 {TreeViewItemId} itemId The itemId of the modified item.
+   * @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
+   */
+  onItemSelectionToggle?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId, isSelected: boolean) => void;
+  /**
+   * Callback fired when a given Tree Item is focused.
+   * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
+   * @param {TreeViewItemId} itemId The id of the focused item.
+   */
+  onItemFocus?: (event: React.SyntheticEvent | null, itemId: TreeViewItemId) => void;
+}
+/**
+ * Mapper between a Tree View instance's state and parameters.
+ * Used by classes extending `TreeViewStore` to manage the state based on the parameters.
+ */
+export interface TreeViewParametersToStateMapper<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined, State extends MinimalTreeViewState<R, Multiple>, Parameters extends MinimalTreeViewParameters<R, Multiple>> {
+  getInitialState: (treeViewInitialState: MinimalTreeViewState<R, Multiple>, parameters: Parameters) => State;
+  updateStateFromParameters: (newState: Partial<MinimalTreeViewState<R, Multiple>>, parameters: Parameters, updateModel: TreeViewModelUpdater<State, Parameters>) => Partial<State>;
+  shouldIgnoreItemsStateUpdate: (parameters: Parameters) => boolean;
+}
+export type TreeViewModelUpdater<State extends MinimalTreeViewState<any, any>, Parameters extends MinimalTreeViewParameters<any, any>> = (newState: Partial<State>, controlledProp: keyof Parameters & keyof State & string, defaultProp: keyof Parameters) => void;
+export type TreeViewSelectionReadonlyValue<Multiple extends boolean | undefined> = Multiple extends true ? Multiple extends false ?
+// Multiple === boolean, the type cannot be simplified further
+TreeViewItemId | null | readonly TreeViewItemId[] : readonly TreeViewItemId[] :
+// Multiple === false | undefined, the selection is single
+TreeViewItemId | null;
+export type TreeViewSelectionValue<Multiple extends boolean | undefined> = Multiple extends true ? Multiple extends false ?
+// Multiple === boolean, the type cannot be simplified further
+TreeViewItemId | null | TreeViewItemId[] : TreeViewItemId[] :
+// Multiple === false | undefined, the selection is single
+TreeViewItemId | null;

package/internals/MinimalTreeViewStore/MinimalTreeViewStore.utils.d.ts

@@ -0,0 +1,21 @@
+import { TreeViewValidItem } from "../../models/index.js";
+import { MinimalTreeViewParameters, MinimalTreeViewState } from "./MinimalTreeViewStore.types.js";
+/**
+ * Returns the properties of the state that are derived from the parameters.
+ * This do not contain state properties that don't update whenever the parameters update.
+ */
+export declare function deriveStateFromParameters<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple> & {
+  isItemEditable?: any;
+}): {
+  disabledItemsFocusable: boolean;
+  domStructure: "nested";
+  itemChildrenIndentation: string | number;
+  providedTreeId: string | undefined;
+  expansionTrigger: "content" | "iconContainer";
+  disableSelection: boolean;
+  multiSelect: boolean | NonNullable<Multiple>;
+  checkboxSelection: boolean;
+  selectionPropagation: Readonly<{}>;
+};
+export declare function createMinimalInitialState<R extends TreeViewValidItem<R>, Multiple extends boolean | undefined>(parameters: MinimalTreeViewParameters<R, Multiple>): MinimalTreeViewState<R, Multiple>;
+export declare const createTreeViewDefaultId: () => string;